/* 拾光喵 · /story 品牌故事页（沉浸像素卷轴） */

.story-body{background:#17120E}
/* sticky scrub must jump, not animate — smooth scroll caused mid-transition white bands */
html.fx, html.fx body{scroll-behavior:auto;background:#17120E}


/* /story 导航：透明深色玻璃，浅色字 */
.story-body .nav,
.story-body .nav.dark{
  background:rgba(23,18,14,.22);
  color:#F7F2EA;
  --nav-fg:#F7F2EA;
  --nav-line:rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.06);
  -webkit-backdrop-filter:saturate(1.2) blur(18px);
  backdrop-filter:saturate(1.2) blur(18px)
}
.story-body .nav-brand,
.story-body .nav-links a{color:#F7F2EA}
.story-body .nav-links a.is-active{opacity:1;font-weight:600}
.story-body .nav-links a{opacity:.88}


/* ---------- 静态可读版（默认 / 减动态） ---------- */
.story-static{
  padding:calc(var(--nav-h) + 48px) var(--pad-x) 80px;
  background:var(--bg2)
}
.story-static-list{
  list-style:none;max-width:560px;margin:0 auto;display:grid;gap:18px
}
.story-static-list li{
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:22px 24px
}
.story-static-list p{margin:0;font-size:clamp(17px,2vw,19px);line-height:1.75;color:var(--title)}
.story-static-list .story-slogan{
  margin-top:14px;font-size:clamp(18px,2.2vw,22px);font-weight:700;color:var(--title)
}
.story-end-logo{
  margin:20px auto 10px;width:96px;height:96px;border-radius:22.5%
}
.story-static-list a{color:var(--btn);text-decoration:none}
.story-static-list a:hover{text-decoration:underline}

/* fx 开启时隐藏静态、显示沉浸 */
html.fx .story-static{display:none}
html.fx .story-experience{display:block}
.story-experience[hidden]{display:none!important}
html.fx .story-experience[hidden]{display:block!important}

/* ---------- 沉浸舞台 ---------- */
.story-track{
  position:relative;
  height:calc(11 * 110vh); /* 11 场，每场略超一屏，便于 scrub */
  background:#17120E
}
.story-stage{
  position:sticky;top:0;height:100svh;width:100%;
  overflow:hidden;isolation:isolate;
  background:#17120E
}
#story-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
  display:block;touch-action:pan-y
}
.story-stage::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:min(32vh,220px);
  background:linear-gradient(180deg,rgba(23,18,14,0) 0%,rgba(23,18,14,.55) 45%,rgba(23,18,14,.82) 100%);
  pointer-events:none;z-index:4
}
.story-caption{
  position:absolute;left:50%;bottom:clamp(22px,5vh,42px);
  transform:translateX(-50%);
  z-index:6;max-width:min(92vw,540px);width:max-content;
  padding:12px 18px;border-radius:16px;
  background:transparent;color:#F7F2EA;
  font-size:clamp(15px,2.1vw,18px);line-height:1.65;font-weight:500;
  text-align:center;letter-spacing:.02em;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
  pointer-events:none;opacity:0;transition:opacity .25s ease
}
.story-caption.is-on{opacity:1}
.story-progress{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:min(42vw,220px);height:3px;border-radius:2px;
  background:rgba(255,255,255,.15);overflow:hidden;z-index:5
}
.story-progress i{
  display:block;height:100%;width:0%;background:#E0762B;border-radius:2px
}

/* 结尾叠加层 — 文案+logo 在上方天空，下部留给人物 */
.story-end{
  position:absolute;inset:0;z-index:8;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;padding:calc(56px + 36px) 24px 40px;
  background:linear-gradient(180deg,rgba(23,18,14,.62) 0%,rgba(23,18,14,.38) 26%,rgba(23,18,14,.1) 42%,transparent 55%);
  opacity:0;pointer-events:none;transition:opacity .4s ease
}
.story-end.is-on{opacity:1;pointer-events:auto}
.story-end-line{
  font-size:clamp(18px,2.4vw,22px);color:#F7F2EA;margin:0 0 14px;font-weight:500;
  text-shadow:0 2px 12px rgba(0,0,0,.4)
}
.story-slogan{
  font-size:clamp(20px,3vw,28px);line-height:1.45;font-weight:700;
  color:#F7F2EA;max-width:18em;text-wrap:balance;margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.45)
}
.story-logo-wrap{
  display:block;margin:20px auto 10px;width:100px;height:100px;
  border-radius:22.5%;will-change:transform;text-decoration:none
}
.story-caption.is-end-hidden{opacity:0!important;visibility:hidden}
.story-end .story-mail{margin-top:8px}
.story-logo{width:100%;height:100%;border-radius:22.5%;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.story-mail{margin:0;font-size:15px}
.story-mail a{color:#B3A897;text-decoration:none}
.story-mail a:hover{color:#F7F2EA;text-decoration:underline}
.story-mail-name{
  margin:8px 0 0;font-size:clamp(17px,2.2vw,20px);font-weight:600;letter-spacing:.04em;
  color:#F5F0E8;text-shadow:0 2px 10px rgba(0,0,0,.35)
}
.story-static .story-mail-name{color:#3a2f28;text-shadow:none;font-size:18px;margin-top:10px}

/* 照片悬浮说明 */
.story-tip{
  position:absolute;z-index:9;pointer-events:none;
  padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.4;
  background:rgba(28,25,23,.92);color:#F7F2EA;
  transform:translate(-50%,-120%);white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.25)
}

/* 像素光标拖尾 */
#story-cursor{
  position:absolute;left:0;top:0;width:24px;height:24px;
  pointer-events:none;z-index:12;opacity:0;
  image-rendering:pixelated;image-rendering:crisp-edges;
  mix-blend-mode:screen
}
html.fx.story-fine #story-cursor.is-on{opacity:.9}

/* 深色跟随系统 —— 舞台本身是叙事深色，页脚仍用 site token */


/* 移动端 */
@media (max-width:760px){
  .story-track{height:calc(11 * 105vh)}
  .story-caption{
    bottom:22px;padding:10px 14px;font-size:15px;max-width:92vw;border-radius:14px
  }
  .story-logo-wrap{width:96px;height:96px;margin-top:22px}
  .story-end{padding:calc(52px + 24px) 18px 32px}
  .story-logo-wrap{width:88px;height:88px;margin-top:16px}
  .story-progress{width:36vw;bottom:10px}
}

/* 减动态：强制静态，隐藏舞台 */
@media (prefers-reduced-motion: reduce){
  html.fx .story-static{display:block}
  html.fx .story-experience{display:none!important}
  .story-caption,.story-end,.story-logo-wrap{transition:none!important}
}


/* protagonist girl/boy pill toggle */
.story-protag-toggle{
  position:absolute;z-index:8;
  top:calc(var(--nav-h,56px) + 10px); right:max(12px, env(safe-area-inset-right));
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px 5px 6px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(23,18,14,.42);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#F7F2EA;cursor:pointer;
  font:500 12px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.04em;
}
.story-protag-toggle:hover{background:rgba(23,18,14,.58);border-color:rgba(255,255,255,.22)}
.story-protag-toggle:focus-visible{outline:2px solid #E0762B;outline-offset:2px}
.story-protag-av{
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);
  opacity:.45;transition:opacity .15s ease, background .15s ease;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.story-protag-av.is-on{opacity:1;background:rgba(224,118,43,.28);box-shadow:0 0 0 1px rgba(224,118,43,.45)}
.story-protag-av img{width:16px;height:16px;display:block;image-rendering:pixelated}
.story-protag-label{min-width:1.2em;text-align:center;opacity:.92}
@media (max-width:520px){
  .story-protag-toggle{top:auto;bottom:calc(72px + env(safe-area-inset-bottom));right:auto;left:max(10px, env(safe-area-inset-left))}
}