.post
  #page-header.post-bg
    height 24rem
    background-color var(--efu-background)
    transition .6s
    overflow hidden

    &::before
      position absolute
      top 0
      left 0
      display block
      width 100%
      height 100%
      background-color var(--efu-main)
      content ""
      opacity 1
      transition .3s

    +maxWidth768()
      height 30rem
      margin-bottom -12px
      background-color var(--efu-main) !important
      transition 0s

      &::before
        height 15rem

  .post-cover-aside
    --post-cover-glow-x 50%
    --post-cover-glow-y 50%
    --post-cover-glow-opacity 0
    --post-cover-img-x 0px
    --post-cover-img-y 0px
    --post-cover-rotate-x 0deg
    --post-cover-rotate-y 0deg
    --post-cover-scale 1
    position absolute
    top 50%
    right max(calc((100vw - 1400px) / 2 + 30px), 30px)
    z-index 11
    display block
    width 300px
    aspect-ratio 16 / 9
    overflow hidden
    border-radius 16px
    box-shadow var(--efu-shadow-border)
    transform translate3d(0, -50%, 0) perspective(900px) rotateX(var(--post-cover-rotate-x)) rotateY(var(--post-cover-rotate-y)) scale3d(var(--post-cover-scale), var(--post-cover-scale), 1)
    transform-style preserve-3d
    transition transform .18s ease-out, box-shadow .18s ease-out

    &::before,
    &::after
      position absolute
      inset 0
      border-radius inherit
      content ""
      opacity var(--post-cover-glow-opacity)
      pointer-events none
      transition opacity .18s ease-out

    &::before
      padding 2px
      background radial-gradient(circle at var(--post-cover-glow-x) var(--post-cover-glow-y), #fff, rgba(255, 255, 255, .7) 20%, rgba(255, 255, 255, .1) 46%, rgba(255, 255, 255, 0) 62%)
      transform translateZ(26px)
      -webkit-mask linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)
      -webkit-mask-composite xor
      mask linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)
      mask-composite exclude

    &::after
      background radial-gradient(circle at var(--post-cover-glow-x) var(--post-cover-glow-y), rgba(255, 255, 255, .22), rgba(255, 255, 255, .08) 22%, rgba(255, 255, 255, 0) 55%)
      mix-blend-mode screen
      transform translateZ(25px)

    &:hover
      --post-cover-glow-opacity 1
      --post-cover-scale 1.035
      box-shadow var(--efu-shadow-main)

    +maxWidth1200()
      display none

    .post-cover-aside-link
      display block
      width 100%
      height 100%
      line-height 0

    .post-cover-aside-img
      display block
      width 100%
      height 100%
      border-radius inherit
      object-fit cover
      transform translate3d(var(--post-cover-img-x), var(--post-cover-img-y), 24px) scale(1.08)
      transition transform .18s ease-out

    @media (prefers-reduced-motion: reduce)
      transition none

      &::before,
      &::after,
      .post-cover-aside-img
        transition none

      &:hover
        --post-cover-scale 1

  #post-info
    position absolute
    top 14px
    z-index 10
    display flex
    flex-direction column
    align-items flex-start
    justify-content center
    gap 16px
    width 100%
    max-width 1400px
    height calc(100% - 30px)
    margin 0 auto
    padding 0 30px
    color var(--efu-white)
    animation slide-in .6s 0s backwards

    +maxWidth768()
      top auto
      right 0
      bottom 0
      left 0
      align-items center
      justify-content normal
      gap 0
      width 100%
      max-width none
      height fit-content
      margin 0
      padding 7rem 1rem 60px
      background-image linear-gradient(to bottom, transparent, var(--efu-main))
      text-align center

      &::after
        position absolute
        bottom 0
        left 0
        z-index 0
        width 100%
        height 200%
        box-shadow 0 -214px 287px 45px var(--efu-main-op) inset
        content ""

    #post-firstinfo,
    .post-title,
    #post-meta
      width calc(100% - 300px - 80px)
      max-width none
      margin-left 40px

    +maxWidth1200()
      #post-firstinfo,
      .post-title,
      #post-meta
        width calc(100% - 80px)

    .post-title
      display -webkit-box
      height calc(2 * 1.38em)
      min-height calc(2 * 1.38em)
      margin-top 4px
      margin-bottom 8px
      padding 0
      overflow hidden
      color var(--efu-white)
      font-size 42px
      font-weight 700
      line-height 1.38
      text-align left
      -webkit-box-orient vertical
      -webkit-line-clamp 2

      +maxWidth768()
        z-index 1
        width 100%
        height auto
        min-height 0
        margin .2rem auto !important
        font-size 1.2rem
        line-height 1.2
        text-align center
        -webkit-line-clamp 3

    #post-meta
      display flex
      color var(--efu-white)
      font-size 95%
      user-select none
      transition .3s

      +maxWidth768()
        z-index 1
        align-items center
        justify-content center
        width 100%
        margin-left 0
        font-size 90%

      a
        color inherit
        text-decoration none
        transition .3s

      i
        margin-right 4px
        font-size 16px
        line-height 1

      .meta-secondline
        display flex
        flex-direction row
        flex-wrap wrap
        align-items center
        justify-content flex-start
        gap 8px

        +maxWidth768()
          justify-content center
          width 100%
          text-align center

        > span:not(.post-meta-separator),
        > a.post-meta-pv
          display inline-flex
          align-items center
          box-sizing border-box
          height 32px
          margin 0
          padding 0 .5rem
          border-radius 99px
          background var(--efu-white-op)
          color var(--efu-white)
          line-height 1
          opacity 1
          transition background .3s ease-out, color .3s ease-out

          +maxWidth768()
            line-height 1.5

          &:hover
            background var(--efu-white)
            color var(--efu-main)

            a
              color inherit

        .post-meta-separator
          display none

        .post-meta-commentcount
          cursor pointer

        .word-count,
        .leancloud-visitors-count,
        #busuanzi_value_page_pv,
        #busuanzi_page_pv
          font-weight 800

    #post-firstinfo
      display flex
      color var(--efu-white)
      text-align left
      white-space nowrap
      user-select none

      +maxWidth768()
        z-index 1
        align-items center
        justify-content center
        width 100%
        margin 0 auto
        text-align center
        white-space normal

      .meta-firstline
        display flex
        align-items center
        height 32px

        +maxWidth768()
          flex-wrap wrap
          justify-content center
          width fit-content
          max-width 100%
          height auto
          margin 0 auto .4rem

        .post-meta-original,
        span.post-meta-categories
          height 32px
          border-radius 99px
          background var(--efu-white-op)
          line-height 32px
          transition .3s

        .post-meta-original
          display flex
          width auto
          margin 0
          padding 0 .5rem
          color var(--efu-white)
          font-size .7rem
          font-weight 700

          &:hover
            background var(--efu-white)
            color var(--efu-main)

        span.post-meta-categories
          margin-left 8px

          &:hover
            background var(--efu-white)

            a.post-meta-categories
              color var(--efu-main)

          a.post-meta-categories
            display flex
            width 100%
            height 100%
            padding 0 .5rem
            color var(--efu-white)
            font-size .7rem

        .tag_share
          margin-left 1rem

          +maxWidth768()
            display none

          .post-meta__tag-list
            display flex
            flex-direction row
            align-items center

            &::-webkit-scrollbar
              display none

            .post-meta__tags
              display flex
              flex-direction row
              align-items center
              margin-right 8px
              padding 0 8px 0 4px
              border-radius 99px
              color var(--efu-white)
              opacity .8

              &:hover
                background var(--efu-white-op)
                color var(--efu-white)
                opacity 1

#post
  #post-info
    position unset
    height auto
    padding 1rem 2rem
    border-radius 12px 12px 0 0
    background var(--efu-hovertext)

    +minWidth768()
      min-height 250px