/* ==========================================================================
   陆雨明 · 作品集 — 视觉特效层
   与「瑞士国际主义 · 技术档案」主题同源：不做粒子/渐变，只把
   十字线、坐标、读数、机械揭示这套语言做透。
   ========================================================================== */

/* 注：准星光标已按所有者要求移除，光标为系统默认。 */

/* ---------- 2. 屏幕 HUD：滚动读数 ---------- */
#fx-hud {
  position: fixed; left: 20px; bottom: 16px; z-index: 9000;
  font: 10px/1.5 "JetBrains Mono", SFMono-Regular, monospace;
  letter-spacing: .1em; color: #A1A1AA; text-transform: uppercase;
  pointer-events: none; user-select: none;
}
#fx-hud b { color: #09090B; font-weight: 600; }

/* 顶部滚动进度条 */
#fx-progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 0;
  background: #FF4400; z-index: 10002; pointer-events: none;
  will-change: width;
}

/* 右侧区块指示（竖向刻度） */
#fx-rail {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 9000; display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
#fx-rail i {
  display: block; width: 14px; height: 1px; background: #D4D4D8;
  transition: width .45s cubic-bezier(.16,1,.3,1), background-color .45s ease;
}
#fx-rail i.is-here { width: 30px; background: #FF4400; }

/* ---------- 3. 标题文字解码 ---------- */
.fx-scramble { /* 保留原排版，仅用于标识 */ }

/* ---------- 4. 首屏标题逐字揭示 ---------- */
.fx-char {
  display: inline-block;
  opacity: 0; transform: translateY(.5em) rotate(2deg);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.fx-char.is-in { opacity: 1; transform: none; }

/* ---------- 5. 卡片 3D 倾斜 ---------- */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1);
}
.fx-tilt.fx-tilting { transition: box-shadow .4s cubic-bezier(.16,1,.3,1); }

/* ---------- 6. 液态背景（C 方案：仅首屏，滚出即淡出） ---------- */
.fx-liquid {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none; display: block;
}

/* 注：滚动视差网格已按所有者要求移除 —— 页面背景只剩液态一层。 */

/* 内容高于背景层 */
body > header, body > main, body > footer { position: relative; z-index: 2; }

/* ---------- 7. 区块编号钉住 ---------- */
.fx-pin-num {
  position: sticky; top: 84px; align-self: flex-start;
}

/* ---------- 无障碍：此站按所有者要求不启用 prefers-reduced-motion ---------- */

/* ---------- 8. 形象框视频 ---------- */
.portrait-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;        /* 填满形象框、按比例裁切，绝不拉伸变形 */
  object-position: center;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;     /* 点击交给外层容器，避免两个 <video> 各自吃事件 */
}
.portrait-video.is-active { opacity: 1; }

/* 视频上的角标：加压暗描边，保证白字压在任意画面上都读得清 */
.pv-chip {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
  pointer-events: none;
  z-index: 2;
}

/* ---------- 9. 形象框的“点击”手势提示（居中动态小手） ---------- */
.pv-tap {
  /* 74% 而非 50%：避免挡住画面中的人脸/上半身 */
  position: absolute; left: 50%; top: 74%;
  transform: translate(-50%, -50%);
  z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: opacity .45s ease, transform .45s ease;
}
.pv-tap.is-hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
}

/* 圆形底衬：保证小手压在任意画面上都看得清 */
.pv-tap-core {
  position: relative;
  width: 86px; height: 86px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 68, 0, .93);
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .55);
}

/* 小手：轻点动作 —— 下压、微缩，然后弹回 */
.pv-tap-icon {
  color: #fff !important;
  font-size: 42px !important;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  animation: pvTapPress 1.9s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes pvTapPress {
  0%, 42%, 100% { transform: translateY(0) scale(1); }
  58%           { transform: translateY(7px) scale(.9); }
  76%           { transform: translateY(0) scale(1); }
}

/* 两圈扩散波纹，错开半个周期，形成持续“点下去”的反馈 */
.pv-tap-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255, 68, 0, .75);
  animation: pvRipple 1.9s ease-out infinite;
}
.pv-tap-ring--2 { animation-delay: .95s; }
@keyframes pvRipple {
  0%   { transform: scale(1);   opacity: .85; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* 下方文字标签 */
.pv-tap-label {
  background: rgba(255, 68, 0, .95); color: #fff;
  font: 700 12px/1 Inter, "Noto Sans SC", -apple-system, sans-serif;
  letter-spacing: .1em; white-space: nowrap;
  padding: 8px 15px; border-radius: 999px;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .5);
}

/* ===== 作品图片堆叠展开 + 链接卡片（首页与案例页共用） ===== */
/* ---------- 5. 作品图片：堆叠卡片，点击依次展开 ---------- */
.asset-slot{
  border:1px dashed #A1A1AA;background:#F4F4F5;color:#A1A1AA;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.12em;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.asset-slot:hover{border-color:#FF4400;color:#FF4400;background:#fff}
.asset-slot .material-symbols-outlined{font-size:1.5rem}
/* contain 而不是 cover：作品截图很多是竖版长图（手机截图约 9:20），
   用 cover 会被裁得只剩中间一条，文字全没了。contain 保证整张可见。 */
.asset-slot img,.asset-slot video{width:100%;height:100%;object-fit:contain;display:block;
  background:#EDEDEF}

/* 舞台：收起时裁到只剩一叠的高度 */
.gallery-stage{
  overflow:hidden;
  transition:max-height .85s cubic-bezier(.16,1,.3,1);
}
.gallery-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-top:1rem;
}
@media (min-width:1024px){ .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

.gallery-grid > *{
  transform-origin:top left;
  transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .5s ease;
  transition-delay:calc(var(--i,0) * 60ms);
}
/* 收起：每张卡位移回第一张的位置，带一点旋转和缩放 —— 摞成一叠。
   translate 的百分比是相对卡片自身尺寸的，所以 100% + gap 正好是一格，
   乘上列号/行号就等于「退回左上角」。纯 CSS，不依赖 JS。 */
.gallery:not(.is-open) .gallery-grid > *{
  --col:var(--col2,0);
  --row:var(--row2,0);
  transform:translate(calc(var(--col) * -1 * (100% + 1rem)),
                      calc(var(--row) * -1 * (100% + 1rem)))
            rotate(calc((var(--i,0) - 1.5) * 1.6deg))
            scale(.94);
}
@media (min-width:1024px){
  .gallery:not(.is-open) .gallery-grid > *{
    --col:var(--col3,0);
    --row:var(--row3,0);
  }
}
.gallery:not(.is-open) .gallery-grid > *:nth-child(n+4){opacity:0}
.gallery:not(.is-open) .gallery-grid{cursor:pointer}
/* 兜底：万一 JS 没跑，收起状态也不会撑出一大片空白（JS 跑起来后内联样式会覆盖这条） */
.gallery:not(.is-open) .gallery-stage{max-height:280px}

/* 折叠开关 */
.asset-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border:1px solid #E4E4E7;background:#fff;padding:.9rem 1.1rem;cursor:pointer;text-align:left;
  font-family:"JetBrains Mono",monospace;font-size:.75rem;color:#09090B;
  transition:border-color .2s ease,background .2s ease;
}
.asset-toggle:hover{border-color:#09090B;background:#F4F4F5}
.asset-toggle .caret{font-size:1.15rem;color:#A1A1AA;transition:transform .3s ease,color .3s ease}
.gallery.is-open .asset-toggle{border-color:#09090B}
.gallery.is-open .asset-toggle .caret{transform:rotate(90deg);color:#FF4400}

/* 链接卡片：整块可点，新标签打开 */
.link-card{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid #E4E4E7;background:#fff;padding:.8rem 1.2rem;
  text-decoration:none;color:#09090B;font-size:.82rem;
  transition:border-color .2s ease,transform .2s ease;
}
.link-card:hover{border-color:#FF4400;transform:translateX(3px)}
.link-card .material-symbols-outlined{font-size:1.05rem;color:#A1A1AA;transition:color .2s ease}
.link-card:hover .material-symbols-outlined{color:#FF4400}
.link-card.is-empty{border-style:dashed;color:#A1A1AA;cursor:default}
.link-card.is-empty:hover{border-color:#E4E4E7;transform:none}
.link-card.is-empty:hover .material-symbols-outlined{color:#A1A1AA}

/* ===== 首页案例卡封面：三张缩略图叠成一小摞，悬停时散开 ===== */
.cover-stack{
  position:relative; display:block; margin:1.5rem 0;
  aspect-ratio:16/9; overflow:hidden;
  border:1px solid #E4E4E7; background:#F4F4F5;
  text-decoration:none;
}
.cover-stack img{
  position:absolute; top:50%; left:50%;
  width:46%; aspect-ratio:4/3; object-fit:cover;
  border:2px solid #fff; background:#E4E4E7;
  box-shadow:0 8px 22px -10px rgba(9,9,11,.5);
  z-index:calc(9 - var(--i,0));
  transform:translate(-50%,-50%)
            translateX(calc((var(--i,0) - 1) * 26%))
            rotate(calc((var(--i,0) - 1) * 5deg));
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease;
}
.cover-stack:hover img{
  transform:translate(-50%,-50%)
            translateX(calc((var(--i,0) - 1) * 42%))
            rotate(calc((var(--i,0) - 1) * 10deg));
  box-shadow:0 12px 28px -12px rgba(9,9,11,.55);
}
.cover-stack .cover-hint{
  position:absolute; right:.6rem; bottom:.5rem; z-index:20;
  font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.14em;
  color:#71717A; background:rgba(255,255,255,.9); padding:2px 6px;
  transition:color .2s ease;
}
.cover-stack:hover .cover-hint{ color:#FF4400; }
/* 没有素材时退回原来的占位样式 */
.cover-stack.is-empty{
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5rem;
  border-style:dashed; color:#A1A1AA;
  font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.18em;
}