/* DriftWall 样式（官网背景层用）—— 还原原版「深空 3D 照片墙」视觉 */
.drift-wall {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --dw-tile-w: 220px;
  --dw-tile-h: 112px;
  --dw-gap: 22px;
  --dw-radius: 14px;
  --dw-lift: 64px;
  --dw-dim: 0.72;
  --dw-gray: 0;
  --dw-overlay: #060010;
  --dw-overlay-op: 0.3;
  --dw-edge: 40%;
  /* 四周径向羽化，让流墙自然融入深色背景 */
  -webkit-mask-image:
    radial-gradient(ellipse 72% 76% at 50% 48%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 72% 76% at 50% 48%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  mask-composite: intersect;
  /* 放开指针事件（祖先链需 auto 才能让瓦片 :hover 生效）。
   * 瓦片之间的空隙由 .drift-wall__inner 的矩形天然界定，
   * 而主内容层 z-index 更高，始终位于流墙之上不被遮挡。 */
  pointer-events: auto;
}

/* 交互穿透说明：
 * 整墙是纯装饰背景，必须不拦截页面按钮/链接的点击。
 * 但 CSS 规定：父级 pointer-events:none 时，子级的 pointer-events:auto
 * 不会生效 —— 悬停会完全失效（实测瓦片无法被 elementFromPoint 命中）。
 *
 * 解法：祖先链全部设为 auto 让指针能落到瓦片，
 * 再用 ::after 蒙层把「非瓦片区域」的点击重新交还给下层内容：
 * 瓦片之间的空隙、以及被 mask 羽化掉的边缘区域都不拦截。
 * 由于 .drift-wall-layer 已铺满视口且 z-index 低于 .main-content(z=1)，
 * 主内容（按钮/链接）始终位于流墙之上，不会被遮挡。 */

/* stage 层：承担 perspective 与水平补偿位移。
 * perspective 必须在 stage 上而非 .drift-wall 上，
 * 这样水平补偿是均匀的屏幕像素平移，不会再被透视矩阵二次缩放/错切。
 * 注意：此处不能设 overflow:hidden —— 补偿位移后 stage 自身边界会随之平移，
 * 裁剪必须交给外层 .drift-wall（相对视口固定）。 */
.drift-wall__stage {
  position: absolute;
  inset: 0;
  perspective: var(--dw-perspective, 1200px);
  perspective-origin: 50% 50%;
  transform-origin: 50% 50%;
  will-change: transform;
  /* 放开指针事件，使后代瓦片的 :hover 生效 */
  pointer-events: auto;
}

.drift-wall__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: row;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: auto;
}

.drift-wall__col {
  position: relative;
  width: calc(var(--dw-tile-w) + var(--dw-gap));
  transform-style: preserve-3d;
  pointer-events: auto;
}

.drift-wall__track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform-style: preserve-3d;
  pointer-events: auto;
}

.drift-wall__tile {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--dw-tile-h) + var(--dw-gap));
  flex: 0 0 auto;
  outline: none;
  transform-style: preserve-3d;
  /* 瓦片本体接���指针，使 :hover 生效 */
  pointer-events: auto;
}

.drift-wall__inner {
  position: absolute;
  inset: calc(var(--dw-gap) / 2);
  display: block;
  border-radius: var(--dw-radius);
  overflow: hidden;
  background: #0b0b12;
  opacity: var(--dw-dim);
  transform: translateZ(0);
  /* 悬停需要接收指针事件。
   * 整墙是纯装饰背景（aria-hidden），只有瓦片自身放开 hover，
   * 且一旦离开瓦片立即恢复，避免瓦片移动时指针"卡住"导致整墙可点击。 */
  pointer-events: auto;
  cursor: pointer;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 悬停：沿 Z 轴抬起 + 提亮 + 去灰。
 * 这些值与 --dw-lift / --dw-dim 配套，
 * 过渡由上面的 transition 提供（0.42s 缓动）。
 * 说明：瓦片在 preserve-3d 平面内，translateZ 会被透视放大，
 * 视觉上表现为「向观众靠近」，这是原设计预期的效果。 */
.drift-wall__inner:hover {
  transform: translateZ(var(--dw-lift));
  opacity: 1;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(150, 130, 255, 0.42),
    0 0 34px rgba(120, 96, 255, 0.32);
  z-index: 2;
}

/* 图片同步提亮：去掉低饱和滤镜，露出原始色彩 */
.drift-wall__inner:hover img {
  filter: grayscale(0) saturate(1) brightness(1.06);
}

/* 按原比例裁切填充，绝不拉伸变形 */
.drift-wall__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* 低饱和度「暗夜博物馆」氛围 */
  filter: grayscale(var(--dw-gray)) saturate(0.45) brightness(0.98);
  transition: filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.drift-wall__overlay {
  position: absolute;
  inset: 0;
  background: var(--dw-overlay);
  opacity: var(--dw-overlay-op);
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .drift-wall__plane,
  .drift-wall__track {
    will-change: auto;
  }
}