/* showcase.css — 首页「满屏照片墙」（Drift Wall）
 *
 * 1:1 复刻 reactbits.dev 的 Drift Wall 默认外观：
 *   https://www.reactbits.dev/components/drift-wall
 * 默认参数（列数 5 / 瓦片 200×132 / gap 18 / radius 14 / tilt 16 / turn -14 /
 * roll 0 / perspective 1200 / depth 120 / speed 42 / direction up / variance 0.45 /
 * parallax 0.6 / lift 64 / fade 0.6 / dim 0.55 / overlayColor #060010）原样采用。
 *
 * 复刻要点（都来自官方源码）：
 *   - 平面整体：translate(-50%,-50%) scale(1.18) rotateX(16°) rotateY(-14°)
 *     rotateZ(0) translateZ(-120px)；
 *   - 蒙版两层：径向椭圆(78% 82% at 50% 46%) + 向上线性，composite=intersect；
 *   - 瓦片静息态：inner opacity=dim(0.55) + #060010 色罩 opacity .42
 *     + 图片 saturate(.92)；hover/聚焦态：opacity 1、升起 lift、色罩消失、sat(gray 0) saturate(1.05)。
 *
 * 原版是 React + GSAP。本项目零构建，用原生 JS + CSS 复刻，不引框架。
 */

/* ============================ 满屏照片墙 ============================ */

/* 照片墙自己的底色（不跟全局主题变量走：墙面是"照片背景板"，深暗才压得住照片，
   亮色主题下改成浅灰纸面 + 一层更淡的白纱，保证标题文字仍然可读） */
:root {
  --wall-bg: #060010;         /* 官方 overlayColor */
  --wall-tile: #0b0b12;
  --wall-scrim-1: rgba(6, 0, 16, 0.94);
  --wall-scrim-2: rgba(6, 0, 16, 0.66);
  --wall-scrim-3: rgba(6, 0, 16, 0);
}
[data-theme="light"] {
  --wall-bg: #e9ebf1;
  --wall-tile: #ffffff;
  --wall-scrim-1: rgba(237, 239, 244, 0.94);
  --wall-scrim-2: rgba(237, 239, 244, 0.66);
  --wall-scrim-3: rgba(237, 239, 244, 0);
}

.wall {
  position: relative;
  height: calc(100dvh - 63px);      /* 63px = 头部总高（62 内容 + 1 下边框） */
  min-height: 460px;
  overflow: hidden;
  background: var(--wall-bg);
  isolation: isolate;
}

/* 容器：透视 + 官方两层蒙版 */
.drift {
  position: absolute;
  inset: 0;
  overflow: hidden;
  --dw-edge: 40%;                   /* (1 - fade) * 100%，fade 默认 0.6 */
  perspective: 1200px;
  perspective-origin: 50% 50%;
  -webkit-mask-image:
    radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  mask-image:
    radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* 平面：整体 3D 变换（JS 每帧覆盖；这里是官方默认的静态值） */
.drift__plane {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: row;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
  transform: translate(-50%, -50%) scale(1.18)
             rotateX(16deg) rotateY(-14deg) rotateZ(0deg)
             translateZ(-120px);
}

/* 列：宽 = 瓦片宽 + gap（间距由 inner 的 inset 产生，和官方一致） */
.drift__col {
  position: relative;
  flex: none;
  width: calc(var(--dw-tile-w, 200px) + var(--dw-gap, 18px));
  transform-style: preserve-3d;
}

.drift__track {
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  will-change: transform;
}

/* 瓦片：外层是整个"格"（高 = 瓦片高 + gap），内层才是可见卡片 */
.drift__tile {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: calc(var(--dw-tile-h, 132px) + var(--dw-gap, 18px));
  cursor: pointer;
  outline: none;
  transform-style: preserve-3d;
}

.drift__tile__inner {
  position: absolute;
  inset: calc(var(--dw-gap, 18px) / 2);
  display: block;
  overflow: hidden;
  background: var(--wall-tile);
  border-radius: var(--dw-radius, 14px);
  opacity: var(--dw-dim, 0.55);
  transform: translateZ(0);
  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);
}

.drift__tile.is-active .drift__tile__inner,
.drift__tile:focus-visible .drift__tile__inner {
  opacity: 1;
  transform: translateZ(var(--dw-lift, 64px));
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
}

.drift__tile:focus-visible .drift__tile__inner {
  box-shadow:
    0 24px 60px -18px rgba(0, 0, 0, 0.7),
    0 0 0 2px rgba(255, 255, 255, 0.9);
}

.drift__tile__inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(var(--dw-gray, 0)) saturate(0.92);
  transition: filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.drift__tile.is-active .drift__tile__inner img,
.drift__tile:focus-visible .drift__tile__inner img {
  filter: grayscale(0) saturate(1.05);
}

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

.drift__tile.is-active .drift__tile__overlay,
.drift__tile:focus-visible .drift__tile__overlay {
  opacity: 0;
}

/* ============================ 底部文字浮层 ============================ */

.wall__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  /* 不挡照片墙的 hover / 点击 */
  pointer-events: none;
  padding: clamp(50px, 10vh, 120px) 0 clamp(26px, 5vh, 54px);
  background: linear-gradient(
    to top,
    var(--wall-scrim-1) 0%,
    var(--wall-scrim-2) 42%,
    var(--wall-scrim-3) 100%
  );
}

.wall__title {
  font-size: clamp(22px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.16;
  text-wrap: balance;
}

.wall__hint {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 14px;
}

/* ============================ 移动端 ============================ */

@media (max-width: 860px) {
  .wall { min-height: 420px; }
  .wall__hint { font-size: 13px; }
}

/* ============================ 无障碍：减弱动效 ============================ */

@media (prefers-reduced-motion: reduce) {
  .drift__tile__inner,
  .drift__tile__inner img,
  .drift__tile__overlay {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* JS 未就绪 / 被禁用时，不要留一个空洞的墙 */
.drift__plane:not(:has(.drift__tile)) { display: none; }

/* ============================ 亮色主题 ============================
   --dw-dim / --dw-overlay 是 JS 写在元素上的内联变量（见 showcase.js），
   变量层面盖不住，这里用更高优先级的选择器直接覆盖属性（不需要 !important）。
   注意：深色下那层色罩是「压暗」，照搬到亮色会变成「刷白」把照片洗掉，
   所以亮色改成低透明度深灰的轻微压暗——照片保持通透，非当前瓦片仍能退到后面。 */
[data-theme="light"] .drift__tile:not(.is-active):not(:focus-visible) .drift__tile__inner {
  opacity: 1;
}
[data-theme="light"] .drift__tile:not(.is-active):not(:focus-visible) .drift__tile__overlay {
  background: #2c3340;
  opacity: 0.10;
}
[data-theme="light"] .drift__tile.is-active .drift__tile__inner,
[data-theme="light"] .drift__tile:focus-visible .drift__tile__inner {
  box-shadow: 0 22px 50px -16px rgba(24, 32, 52, 0.35);
}