.image-viewer-container
  position fixed
  left 0
  top 0
  width 100%
  height 100%
  width 100dvw
  height 100dvh
  z-index $z-index-8
  box-sizing border-box

  display flex
  align-items center
  justify-content center

  padding 6%
  background rgba(0, 0, 0, 0)
  opacity 0
  visibility hidden
  pointer-events none

  backdrop-filter blur(0px)
  -webkit-backdrop-filter blur(0px)

  // Unified 360ms transition for smooth open/close symmetry
  transition opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
            background 360ms cubic-bezier(0.22, 1, 0.36, 1),
            backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
            -webkit-backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0ms linear 360ms

  &.active
    background rgba(0, 0, 0, 0.35)
    opacity 1
    visibility visible
    pointer-events auto

    backdrop-filter blur(14px)
    -webkit-backdrop-filter blur(14px)

    transition opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
              background 360ms cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
              -webkit-backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0ms linear 0ms

  &.switching
    background rgba(0, 0, 0, 0.45)
    backdrop-filter blur(20px)
    -webkit-backdrop-filter blur(20px)

  &.is-interacting
    .image-viewer-stage
      transition none
    .image-viewer-stage img
      transition none


.image-viewer-stage
  width 100%
  height 100%
  display flex
  align-items center
  justify-content center

  transform translateY(10px) scale(0.98)
  filter blur(10px)
  opacity 0
  transition transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 220ms cubic-bezier(0.22, 1, 0.36, 1)

  .image-viewer-container.active &
    transform translateY(0px) scale(1)
    filter blur(0px)
    opacity 1


.image-viewer-stage img
  // Fit within viewport by default; pan/zoom happens via JS transform
  max-width 100%
  max-height 100%
  width auto !important
  height auto !important

  border-radius $usr-img-border-radius
  background var(--background-color)
  padding 2px
  box-sizing border-box
  user-select none
  -webkit-user-drag none
  touch-action none
  will-change transform

  box-shadow 0 18px 60px rgba(0, 0, 0, 0.35)

  transition opacity 220ms cubic-bezier(0.22, 1, 0.36, 1)


.image-viewer-stage .image-viewer-img-preloader
  max-width 100%
  max-height 100%
  margin 0
  border-radius $usr-img-border-radius
  background var(--background-color)
  padding 2px
  box-sizing border-box
  box-shadow 0 18px 60px rgba(0, 0, 0, 0.35)

  .img-preloader-skeleton
    border-radius $usr-img-border-radius

  &.img-preloader-error
    .img-preloader-skeleton
      position absolute !important
      width 100% !important
      height 100% !important
      top 0
      left 0
      padding 0.75rem
      display flex
      flex-direction column
      align-items center
      justify-content center
      background var(--third-background-color)


.image-viewer-img-preloader.img-preloader-error
  .img-preloader-skeleton
      position absolute !important
      width 100% !important
      height 100% !important
      top 0
      left 0
      padding 0.75rem
      display flex
      flex-direction column
      align-items center
      justify-content center
      background var(--third-background-color)


.image-viewer-switcher
  position fixed
  left 50%
  bottom calc(env(safe-area-inset-bottom) + 18px)
  transform translateX(-50%) translateY(10px) scale(0.98)
  z-index $z-index-8 + 1
  display flex
  align-items center
  justify-content center
  gap 0.3rem
  opacity 0
  visibility hidden
  pointer-events none
  will-change opacity, transform

  &.shown
    opacity 1
    visibility visible
    pointer-events auto
    transform translateX(-50%) translateY(0px) scale(1)
    animation image-viewer-switcher-fade-in 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards

  +redefine-mobile()
    bottom calc(env(safe-area-inset-bottom) + 12px)


.image-viewer-switcher-pages
  display flex
  align-items center
  gap 0.3rem
  max-width 92vw
  overflow visible /* Allow hover scaling to overflow */
  flex-wrap nowrap
  justify-content center
  padding 4px 2px /* Add vertical padding for scale transform */

  &::-webkit-scrollbar
    display none


.image-viewer-switcher-ellipsis
  display inline-flex
  align-items center
  justify-content center
  width 38px
  height 38px
  border-radius $redefine-border-radius-small
  background var(--card-color) /* Gray-ish fill */
  border 1px solid var(--border-color)
  box-shadow var(--shadow-1)
  gap 3px
  box-sizing border-box

  .dot
    width 4px
    height 4px
    border-radius 50%
    background-color var(--default-text-color)
    opacity 0.6


.image-viewer-switcher-btn, .image-viewer-switcher-page, .image-viewer-switcher-side
  display inline-flex
  align-items center
  justify-content center
  cursor pointer
  border-radius $redefine-border-radius-small
  background var(--background-color)
  color var(--default-text-color)
  width 38px
  height 38px
  padding 0
  line-height 1
  user-select none
  box-sizing border-box
  transition transform 0.2s ease, background-color 0.2s ease, color 0.2s ease

  &:hover
    color var(--background-color)
    background var(--primary-color)
    transform scale(1.06)

  &:active
    transform scale(0.95)
    transition transform 0.1s ease

  &.active
    color var(--background-color)
    background var(--primary-color)


.image-viewer-switcher-page
  font-variant-numeric tabular-nums
  white-space nowrap
  overflow hidden
  text-overflow ellipsis


.image-viewer-switcher-btn
  display none

  +redefine-mobile()
    display inline-flex


.image-viewer-switcher-side
  position fixed
  top 50%
  transform translateY(-50%)
  z-index $z-index-8 + 1
  opacity 0
  visibility hidden
  pointer-events none
  will-change opacity, transform

  /* Desktop nav optimization: simple color/scale change, no fancy transform */
  &:hover
    transform translateY(-50%) scale(1.1)
    color var(--background-color)
    background var(--primary-color)

  &:active
    transform translateY(-50%) scale(0.95)

  &.shown
    opacity 1
    visibility visible
    pointer-events auto
    animation image-viewer-switcher-fade-in 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards

  &.prev
    left 18px
  &.next
    right 18px

  +redefine-mobile()
    display none


@keyframes image-viewer-switcher-fade-in
  from
    opacity 0
  to
    opacity 1


.image-viewer-article-fade-in
  animation image-viewer-article-fade-in 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards

.image-viewer-article-fade-out
  animation image-viewer-article-fade-out 180ms cubic-bezier(0.22, 1, 0.36, 1) forwards

@keyframes image-viewer-article-fade-in
  from
    opacity 0
  to
    opacity 1

@keyframes image-viewer-article-fade-out
  from
    opacity 1
  to
    opacity 0

.image-viewer-info-trigger
  position fixed
  left 50%
  top calc(env(safe-area-inset-top) + 18px)
  transform translateX(-50%)
  z-index $z-index-8 + 3
  
  display flex
  align-items center
  justify-content center
  
  width 38px
  height 38px
  border-radius $redefine-border-radius-small
  background var(--background-color)
  color var(--default-text-color)
  box-shadow var(--shadow-1)
  cursor pointer
  overflow hidden
  box-sizing border-box
  border 1px solid transparent
  
  transition width 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms,
             height 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms,
             border-radius 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms,
             background-color 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms,
             backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms,
             -webkit-backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms,
             box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms,
             border 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms,
             transform 160ms cubic-bezier(0.22, 1, 0.36, 1) 0ms
  
  i
    position absolute
    font-size 1.1rem
    opacity 1
    transition opacity 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms
    
  .image-viewer-info-content
    width 100%
    opacity 0
    pointer-events none
    overflow auto
    box-sizing border-box
    transition opacity 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms
    
    &::-webkit-scrollbar
      width 0
      
    figure.image-caption
      $image-caption-style = hexo-config('articles.style.image_caption')

      if $image-caption-style == 'float'
        display flex
        justify-content center
        width 100%
        margin 0

        figcaption
          text-align center
          font-size 0.9rem
          color var(--default-text-color)
          background-color transparent !important
          padding 5px 10px
          opacity 1
          max-width 100%
          white-space nowrap
          overflow visible
          backdrop-filter none !important
          -webkit-backdrop-filter none !important
          border-radius $redefine-border-radius-small
          box-shadow none !important
      else
        margin 0

        figcaption
          margin-top 5px
          margin-bottom 10px
          text-align center
          font-size 0.9rem
          color var(--third-text-color)
          white-space nowrap
          overflow visible

    .image-exif-container
      margin 0
      width 100%
      box-sizing border-box

      .image-viewer-info-trigger.measuring &
        width 90vw
      
      .image-exif-image-wrapper
        display none
        
      .image-exif-info-card
        width 100%
        max-width 100%
        margin-top 0 !important

        background transparent !important
        backdrop-filter none !important
        -webkit-backdrop-filter none !important
        border none !important
        box-shadow none !important
        
        .image-exif-toggle-btn
          display none !important
          
        .image-exif-data
          height auto !important
          opacity 1 !important
          margin-top 0.6rem !important
          display grid !important
          // Column count set by JS inline style; fallback to 1 column
          gap 0.5rem !important

      :root.dark &
        .image-exif-info-card
          background transparent !important
          border none !important

    .image-exif-section-title
       display flex
       align-items center
       gap 0.35rem
       
       i
         position static
         transform none
         opacity 0.7
    
  &:not(.active):not(.no-hover):hover
    color var(--background-color)
    background var(--primary-color)
    transform translateX(-50%) scale(1.06)

  &.active
    width 90vw
    max-width 800px
    border-radius $redefine-border-radius-large
    background rgba(255, 255, 255, 0.7)
    backdrop-filter blur(20px) saturate(180%)
    -webkit-backdrop-filter blur(20px) saturate(180%)
    box-shadow var(--redefine-box-shadow-flat)
    cursor default

    transition width 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               height 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               border-radius 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               background-color 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               -webkit-backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               border 200ms cubic-bezier(0.22, 1, 0.36, 1) 540ms,
               transform 160ms cubic-bezier(0.22, 1, 0.36, 1) 0ms
    
    :root.dark &
      background rgba(32, 33, 36, 0.85)
      border 1px solid rgba(255, 255, 255, 0.1)
    
    > i
      opacity 0
      transition opacity 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms
      
    .image-viewer-info-content
      opacity 1
      pointer-events none
      transition opacity 360ms cubic-bezier(0.22, 1, 0.36, 1) 360ms

  &.active.measuring
    visibility hidden !important
    transition none !important
    width fit-content !important
    height auto !important
    opacity 0 !important

  &.active.info-content-ready
    height fit-content !important
    width fit-content !important
    
    .image-viewer-info-content
      pointer-events auto

  &.active.closing
    width 38px
    border-radius $redefine-border-radius-small
    background var(--background-color)
    backdrop-filter blur(0px)
    -webkit-backdrop-filter blur(0px)
    box-shadow var(--shadow-1)
    border 0 solid transparent

    :root.dark &
      border 0 solid transparent

    transition width 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               height 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               border-radius 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               background-color 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               -webkit-backdrop-filter 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               border 360ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
               transform 160ms cubic-bezier(0.22, 1, 0.36, 1) 0ms

    > i
      opacity 1
      transition opacity 360ms cubic-bezier(0.22, 1, 0.36, 1) 360ms

    .image-viewer-info-content
      opacity 0
      pointer-events none
      transition opacity 360ms cubic-bezier(0.22, 1, 0.36, 1) 0ms
      
  +redefine-mobile()
    top calc(env(safe-area-inset-top) + 12px)