/* ========== TriM3 × Fancybox 4 · Material Design 3 定制 ========== */
/* 遮罩稳定防闪：不用 backdrop-filter —— blur 在 Fancybox 打开动画
   （container transform）触发时会重采样背景、重建合成层，导致遮罩
   「消失一瞬」露出网页。纯高不透明度深色遮罩 + 独立合成层，任何操作下稳定 */
.fancybox__backdrop {
  background: rgba(10, 10, 14, 0.96);
  transform: translateZ(0);
  will-change: opacity;
}

/* 图片圆角 */
.fancybox__slide .fancybox__image {
  border-radius: 14px;
}

/* 打开防闪：图片就绪前透明（is-loading），就绪后平滑淡入，不生硬替换 */
.fancybox__content {
  transition: opacity 0.22s ease;
  /* Fancybox 默认 content 背景 #fff：放大(zoom)/拖动/关闭动画时白底会露出，
     造成「整个遮罩白闪一下」。改为透明，图片即唯一内容 */
  background: transparent !important;
}
.fancybox__slide.is-loading .fancybox__content {
  opacity: 0;
}
/* 组图切换同规则（相邻 slide 预加载中也是透明） */
.fancybox__slide:not(.is-loading) .fancybox__content {
  opacity: 1;
}

/* ===== 全局灯箱动画（MD3 风格：快、流畅、有层次） =====
   打开/切图：轻微缩放(0.985→1) + 淡入，MD3 标准缓动，精致不夸张；
   关闭：轻微缩小(1→0.985) + 淡出；backdrop 时序同步 */
.fancybox__container {
  --f-backdrop-enter-duration: 0.3s;
  --f-backdrop-exit-duration: 0.25s;
  --f-transition-duration: 0.3s;
}
.f-zoomInUp {
  animation: tri-zoom-in 0.3s cubic-bezier(0.2, 0, 0, 1) both !important;
}
@keyframes tri-zoom-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}
.f-fadeOut {
  animation: tri-zoom-out 0.22s cubic-bezier(0.2, 0, 0, 1) both !important;
}
@keyframes tri-zoom-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.985); }
}
/* 图片未就绪（is-loading）时禁用动画并保持隐藏：
   动画的 to{opacity:1} 优先级高于普通规则，若不禁用会在图片未加载时
   把 content 拉到可见，露出空白/spinner 造成闪感 */
.fancybox__slide.is-loading .f-zoomInUp {
  animation: none !important;
  opacity: 0 !important;
}

/* 按钮：毛玻璃圆形、无框线（与主题按钮材质一致） */
.fancybox__toolbar .fancybox__button,
.fancybox__nav .fancybox__button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(24, 24, 32, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: none;
  box-shadow: none;
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}
.fancybox__toolbar .fancybox__button:hover,
.fancybox__nav .fancybox__button:hover {
  background: rgba(24, 24, 32, 0.66);
  transform: scale(1.06);
}

/* 计数器 */
.fancybox__infobar {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* 图片说明 */
.fancybox__caption {
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 400;
}

/* 左右箭头固定底部中间（MD3 风格），不悬浮在图片上 */
.fancybox__nav {
  top: auto;
  bottom: 20px;
}
.fancybox__nav .fancybox__button--arrow--left,
.fancybox__nav .fancybox__button--arrow--right {
  margin: 0 6px;
}

/* 移动端按钮略小 */
@media (max-width: 640px) {
  .fancybox__toolbar .fancybox__button,
  .fancybox__nav .fancybox__button {
    width: 40px;
    height: 40px;
  }
}
