/* ============================================================
   weeeeeeishang — archive.css
   IMAGE ARCHIVE · 图片档案馆
   spec: 横向流动 · 图间距 5px · 顶层 UI 浮层
   ------------------------------------------------------------
   继承 DESIGN-DNA 的色板与节奏（ink / paper / stamp / --u / --ease），
   但不再使用 room 语汇。
   ============================================================ */

:root{
  /* ---- ink ---- */
  --ink:      #0E0D0B;
  --ink-2:    #16150E;
  --ink-3:    #201E16;

  /* ---- paper ---- */
  --paper:    #E9E3D6;
  --paper-2:  #D8D1C1;
  --paper-3:  #BFB8A6;

  /* ---- gray ---- */
  --gray:     #6E6A61;
  --gray-2:   #3A3833;

  /* ---- the ONE accent ---- */
  --stamp:    #D6452A;

  /* ---- derived ---- */
  --tx:       rgba(233,227,214,.90);
  --tx-2:     rgba(233,227,214,.46);
  --tx-3:     rgba(233,227,214,.26);
  --line:     rgba(233,227,214,.13);
  --line-2:   rgba(233,227,214,.28);

  /* ---- type ---- */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial,
          "PingFang SC", "Microsoft YaHei", sans-serif;

  /* ---- rhythm ---- */
  --u: 8px;
  --ease: cubic-bezier(.16,1,.3,1);

  /* ---- archive spec (硬规格) ---- */
  --gap: 5px;                                   /* 图与下一张的间距：5px */
  --strip-h: 100vh;                             /* 条带高度：铺满整个屏幕 */
  --iw: calc(var(--strip-h) * 16 / 9);          /* 每张宽度（统一 16:9） */
  --speed: 30;                                  /* 流动速度：px / 秒（改这里调速） */
  --shift: calc(22 * (var(--iw) + var(--gap))); /* 一轮位移，JS 按实际测量覆写 */
  --dur: 300s;                                  /* JS 覆写 */
  --pad: clamp(16px, 3.4vw, 44px);
}

/* 支持动态视口高度时优先用它（移动端地址栏收缩时不跳动） */
@supports (height: 100dvh){
  :root{ --strip-h: 100dvh; }
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:var(--ink);
  color:var(--tx);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ============================================================
   1. STAGE — 观察窗
   ============================================================ */

.stage{
  position:fixed;
  inset:0;
  overflow:hidden;
  /* 左右渐隐：图片从边缘淡入淡出 */
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg,
    transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* 条带铺满全屏后，上下边线正好落在视口边缘，已无意义 —— 隐藏（保留节点便于回退） */
.stage__edge{ display:none; }

/* ============================================================
   2. BELT — 横向流动的图片序列
   ============================================================ */

.belt{
  position:absolute;
  top:50%;
  left:0;
  display:flex;
  gap:var(--gap);
  height:var(--strip-h);
  transform:translate3d(0,-50%,0);
  will-change:transform;
  animation:drift var(--dur) linear infinite;
}

@keyframes drift{
  from{ transform:translate3d(0,-50%,0); }
  to  { transform:translate3d(calc(-1 * var(--shift)),-50%,0); }
}

.belt.is-paused{ animation-play-state:paused; }

.card{
  position:relative;
  flex:0 0 auto;
  margin:0;
  width:var(--iw);
  height:var(--strip-h);
  background:var(--ink-2);
  overflow:hidden;
  cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
}

.card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
  filter:brightness(.96) saturate(1);
  transition:transform 1.1s var(--ease), filter 1.1s var(--ease);
}

.card:hover img,
.card:focus-visible img{
  transform:scale(1.035);
  filter:brightness(1.02) saturate(1);
}

.card:focus-visible{ outline:1px solid var(--line-2); outline-offset:-1px; }

/* 常显档号 —— 铺满全屏后四角被 HUD 占满，改居中置于图片下方 */
.card__no{
  position:absolute;
  left:50%;
  bottom:clamp(70px, 10.5vh, 112px);
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.16em;
  color:rgba(233,227,214,.68);
  text-shadow:0 1px 10px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9);
  display:flex; align-items:center; gap:6px;
  pointer-events:none;
  transition:color .45s var(--ease);
}

.card__no::before{
  content:"";
  width:4px; height:4px;
  background:rgba(233,227,214,.50);
  transition:background .45s var(--ease), transform .45s var(--ease);
}

.card:hover .card__no,
.card:focus-visible .card__no{ color:var(--paper); }

.card:hover .card__no::before{
  background:var(--stamp);
  transform:scale(1.4);
}

/* ============================================================
   3. HUD — 最上层的 UI
   ============================================================ */

.hud{
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none;   /* 默认不吃点击，让条带可点 */
}

/* 上下渐变底衬：图片铺满全屏后，保证 UI 文字压在图上也读得清 */
.hud::before,
.hud::after{
  content:"";
  position:absolute;
  left:0; right:0;
  pointer-events:none;
}
.hud::before{
  top:0;
  height:clamp(100px, 18vh, 190px);
  background:linear-gradient(180deg,
    rgba(14,13,11,.92) 0%,
    rgba(14,13,11,.66) 42%,
    rgba(14,13,11,.22) 74%,
    rgba(14,13,11,0)   100%);
}
.hud::after{
  bottom:0;
  height:clamp(72px, 13vh, 140px);
  background:linear-gradient(0deg,
    rgba(14,13,11,.88) 0%,
    rgba(14,13,11,.54) 46%,
    rgba(14,13,11,.16) 78%,
    rgba(14,13,11,0)   100%);
}

.hud__row{
  position:absolute;
  left:0; right:0;
  z-index:1;             /* 压在上下底衬之上 */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 var(--pad);
}

.hud__row--top{ top:clamp(14px,3vh,30px); }
.hud__row--bot{ bottom:clamp(14px,3vh,30px); }

.mono{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(233,227,214,.76);
  white-space:nowrap;
}

.mark{ display:flex; align-items:center; gap:9px; }
.mark__dot{
  width:5px; height:5px;
  background:var(--stamp);
  border-radius:50%;
  animation:pulse 3.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.35; transform:scale(.8); }
}

.count b{
  color:var(--paper);
  font-weight:500;
}
.count i{
  font-style:normal;
  color:var(--tx-3);
  margin:0 3px;
}

.clock{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:rgba(233,227,214,.76); }
.clock span{ color:var(--tx-3); }

.hint{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(233,227,214,.56);
  display:flex; align-items:center; gap:8px;
}
.hint::after{
  content:"→";
  font-size:11px;
  animation:nudge 2.6s var(--ease) infinite;
}
@keyframes nudge{
  0%,100%{ transform:translateX(0); opacity:.5; }
  50%    { transform:translateX(4px); opacity:1; }
}

/* ============================================================
   4. NAV — 7×7 点阵导航
   ============================================================ */

.nav{
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,26px);
  pointer-events:auto;
}

.nav__item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px 2px;
  text-decoration:none;
  color:rgba(233,227,214,.80);
  background:none;
  border:0;
  font:inherit;
  cursor:pointer;
  transition:color .5s var(--ease);
}
.nav__item:hover,
.nav__item:focus-visible{ color:var(--paper); outline:none; }
.nav__item.is-active{ color:var(--paper); }

.nav__dots{
  display:block;
  width:26px; height:26px;
  overflow:visible;
}

/* 网格点（图案之外）：只提供极淡的点阵底纹 */
.nav__dots circle{
  fill:currentColor;
  opacity:.13;
  transition:opacity .4s var(--ease), fill .4s var(--ease);
}
/* 图案本身：默认就清晰读出形状 */
.nav__dots circle.on{ opacity:.95; }

/* hover / 激活：图案内的点逐点点亮，网格点退到最淡 */
.nav__item:hover .nav__dots circle.on,
.nav__item:focus-visible .nav__dots circle.on{
  opacity:1;
  fill:var(--stamp);
  transition-delay:calc(var(--i) * 7ms);
}
.nav__item:hover .nav__dots circle:not(.on),
.nav__item:focus-visible .nav__dots circle:not(.on){ opacity:.05; }

.nav__item.is-active .nav__dots circle.on{
  opacity:1;
  fill:var(--paper);
  transition-delay:calc(var(--i) * 7ms);
}
.nav__item.is-active .nav__dots circle:not(.on){ opacity:.05; }

.nav__label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ============================================================
   5. LIGHTBOX — 点开看全图
   ============================================================ */

.lightbox{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  background:rgba(8,7,6,.97);
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }

.lightbox__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(14px,3vh,28px) var(--pad) 0;
  flex:0 0 auto;
}

.lightbox__id{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--paper);
}
.lightbox__meta{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--tx-3);
}

.lightbox__stage{
  flex:1 1 auto;
  display:grid;
  place-items:center;
  padding:clamp(12px,2.6vh,32px) clamp(52px,8vw,110px);
  min-height:0;
  position:relative;
}

.lightbox__img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  opacity:0;
  transform:scale(.985);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.lightbox__img.is-ready{ opacity:1; transform:scale(1); }

.lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  display:grid; place-items:center;
  background:none;
  border:1px solid var(--line);
  color:var(--tx-2);
  font-family:var(--mono);
  font-size:15px;
  cursor:pointer;
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.lightbox__nav:hover{
  color:var(--paper);
  border-color:var(--line-2);
  background:rgba(233,227,214,.05);
}
.lightbox__nav--prev{ left:clamp(10px,2.4vw,34px); }
.lightbox__nav--next{ right:clamp(10px,2.4vw,34px); }

.lightbox__close{
  width:34px; height:34px;
  display:grid; place-items:center;
  background:none;
  border:1px solid var(--line);
  color:var(--tx-2);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.lightbox__close:hover{ color:var(--paper); border-color:var(--line-2); }

.lightbox__foot{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 var(--pad) clamp(14px,3vh,28px);
}

/* ============================================================
   6. RESPONSIVE / MOTION
   ============================================================ */

@media (max-width: 820px){
  :root{
    /* 条带在移动端同样铺满全屏，此处仅收窄 HUD */
    --gap: 5px;             /* 规格固定，不随视口变化 */
    --pad: 16px;
  }

  /* HUD 收窄：桌面显示 "ARCHIVE / WEISHANG"，小屏只留 "WEISHANG" */
  .mark__a{ display:none; }
  .count__lb{ display:none; }   /* 计数只留 001/022 */

  .mono{ font-size:9.5px; letter-spacing:.14em; }
  .clock{ font-size:10px; letter-spacing:.12em; }

  .nav{ gap:12px; }
  .nav__dots{ width:22px; height:22px; }

  /* 标签视觉隐藏，但保留给屏幕阅读器 */
  .nav__label{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }

  .hint{ display:none; }
  .stage__edge{ display:none; }

  .lightbox__stage{ padding-left:44px; padding-right:44px; }
  .lightbox__nav{ width:36px; height:36px; }
}

@media (max-width: 400px){
  .nav{ gap:10px; }
  .mono{ font-size:9px; letter-spacing:.1em; }
}

@media (prefers-reduced-motion: reduce){
  .belt{ animation:none; }
  .hint::after{ animation:none; }
  .mark__dot{ animation:none; }
  .card img{ transition:none; }
}

/* 无 JS 兜底：仍能看到横向序列 */
.no-js .belt{ animation-duration:600s; }