/* ============================================================
   龙舞新生 · 铜梁龙舞新媒体传播设计
   H5 / 10 screens / motion-first
   ============================================================ */

:root{
  --ink:#06080e;
  --ink-2:#0b1120;
  --ink-3:#111a2e;
  --paper:#f4ece0;
  --paper-dim:rgba(244,236,224,.62);
  --paper-faint:rgba(244,236,224,.34);
  --red:#ff4a30;
  --red-deep:#b21c14;
  --gold:#e8b873;
  --gold-hi:#ffe0a8;
  --cyan:#4fe3d4;

  --serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC","SimSun",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --mono:"SFMono-Regular",Menlo,Consolas,"Courier New",monospace;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --e-back:cubic-bezier(.2,1.4,.35,1);

  --pad-x:26px;
  --hud-h:58px;
  --dock-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3,p,figure,blockquote{margin:0}

/* ---------- global atmosphere ---------- */
#embers{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;
}
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 42%, transparent 38%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(6,8,14,.72) 0%, transparent 22%, transparent 74%, rgba(6,8,14,.82) 100%);
}
.grain{
  position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.9'/></svg>");
  mix-blend-mode:overlay;
  animation:grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(-2%,1%,0)}
  66%{transform:translate3d(1%,-2%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* thin poster frame with corner ticks */
.frame{position:fixed;inset:10px;z-index:4;pointer-events:none;border:1px solid rgba(232,184,115,.14)}
.frame i{position:absolute;width:11px;height:11px;border:1px solid rgba(232,184,115,.55)}
.frame i:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0}
.frame i:nth-child(2){top:-1px;right:-1px;border-left:0;border-bottom:0}
.frame i:nth-child(3){bottom:-1px;left:-1px;border-right:0;border-top:0}
.frame i:nth-child(4){bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ---------- HUD ---------- */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:20;
  height:calc(var(--hud-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--pad-x) 0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:linear-gradient(180deg, rgba(6,8,14,.86), rgba(6,8,14,0));
  pointer-events:none;
}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand .mark{
  width:9px;height:9px;flex:0 0 9px;transform:rotate(45deg);
  border:1px solid var(--gold);box-shadow:0 0 12px rgba(232,184,115,.55);
  animation:markPulse 3.2s var(--e-io) infinite;
}
@keyframes markPulse{0%,100%{opacity:.6;transform:rotate(45deg) scale(.9)}50%{opacity:1;transform:rotate(135deg) scale(1.05)}}
.brand .txt{
  font-family:var(--serif);font-size:13px;letter-spacing:.16em;
  color:rgba(244,236,224,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand .en{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;
  color:rgba(232,184,115,.55);display:block;margin-top:3px;
}
.sound{
  pointer-events:auto;flex:0 0 auto;
  width:34px;height:34px;border:1px solid rgba(232,184,115,.28);
  display:grid;place-items:center;border-radius:50%;
  font-family:var(--serif);font-size:12px;color:var(--gold);
  transition:border-color .4s, color .4s, transform .4s var(--e-out);
}
.sound:active{transform:scale(.9)}
.sound.off{color:rgba(244,236,224,.3);border-color:rgba(244,236,224,.14)}

/* ---------- stage & pages ---------- */
#stage{position:fixed;inset:0;z-index:10;overflow:hidden;perspective:1400px;touch-action:none}
.page{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:calc(var(--hud-h) + 18px + env(safe-area-inset-top)) var(--pad-x)
          calc(var(--dock-h) + 8px + env(safe-area-inset-bottom));
  opacity:0;pointer-events:none;
  transform:scale(1.07);
  filter:blur(10px);
  transition:opacity .85s var(--e-io), transform 1.15s var(--e-out), filter .85s var(--e-io);
  will-change:opacity,transform;
  z-index:1;
}
.page.on{opacity:1;pointer-events:auto;transform:scale(1);filter:blur(0);z-index:2}
.page.gone{transform:scale(.95);filter:blur(4px)}

.inner{position:relative;width:100%;max-width:520px;margin:0 auto;z-index:3;display:flex;flex-direction:column;height:100%}
.center{justify-content:center}
.between{justify-content:space-between}

/* full-bleed media behind content */
.bleed{position:absolute;inset:0;overflow:hidden;z-index:0;will-change:transform;transition:transform 1.4s var(--e-out)}
.bleed img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);
  filter:saturate(1.05) contrast(1.04);
}
.page.on .bleed img{animation:kenBurns 26s ease-in-out infinite alternate}
@keyframes kenBurns{
  0%{transform:scale(1.06) translate3d(0,0,0)}
  100%{transform:scale(1.16) translate3d(-1.6%,-2.2%,0)}
}
.bleed::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(6,8,14,.88) 0%, rgba(6,8,14,.42) 34%, rgba(6,8,14,.62) 70%, rgba(6,8,14,.96) 100%);
}
.bleed.heavy::after{
  background:linear-gradient(180deg, rgba(6,8,14,.94) 0%, rgba(6,8,14,.74) 40%, rgba(6,8,14,.82) 68%, rgba(6,8,14,.97) 100%);
}
/* photographic hero */
.bleed.hero img{filter:brightness(.8) saturate(1.06) contrast(1.06);transform:scale(1.04)}
/* quiet texture for typographic pages */
.bleed.veil img{
  opacity:1;
  filter:blur(3px) saturate(.66) brightness(.56) contrast(1.06);
  transform:scale(1.13);
}
.page.on .bleed.veil img{animation:none}
.bleed.veil::after{
  background:linear-gradient(180deg, rgba(6,8,14,.95) 0%, rgba(6,8,14,.58) 24%, rgba(6,8,14,.66) 72%, rgba(6,8,14,.96) 100%);
}

/* ---------- reusable type ---------- */
.kicker{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;
  color:var(--gold);text-transform:uppercase;
}
.kicker::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.kicker .zh{font-family:var(--sans);letter-spacing:.24em;font-size:10.5px}

.num-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--paper-faint);
}
h2{
  font-family:var(--serif);font-weight:600;letter-spacing:.02em;line-height:1.14;
  font-size:clamp(29px,8.4vw,40px);
  margin:14px 0 0;
}
h2 em{font-style:normal;color:var(--gold)}
h2 .thin{color:rgba(244,236,224,.55)}
h2 .ar{font-style:normal;color:var(--gold);font-size:.86em;padding:0 .16em;vertical-align:.04em}
.lede{
  margin-top:14px;font-size:13.5px;line-height:1.95;color:var(--paper-dim);
  letter-spacing:.02em;max-width:34em;
}
.lede b{color:var(--gold-hi);font-weight:600}
.rule{height:1px;background:linear-gradient(90deg,rgba(232,184,115,.5),rgba(232,184,115,.06));margin:20px 0}
.lede.small{font-size:12.5px;margin-top:16px;color:rgba(244,236,224,.58);letter-spacing:.03em}
p,li,figcaption,h2,h3,.lede{text-wrap:pretty}
.footnote{
  font-size:10.5px;line-height:1.8;color:rgba(244,236,224,.3);
  letter-spacing:.02em;margin-top:auto;padding-top:14px;
}

/* ---------- reveal system ---------- */
[data-anim]{opacity:0;will-change:transform,opacity}
[data-anim="up"]{transform:translate3d(0,34px,0)}
[data-anim="down"]{transform:translate3d(0,-26px,0)}
[data-anim="left"]{transform:translate3d(-40px,0,0)}
[data-anim="right"]{transform:translate3d(40px,0,0)}
[data-anim="zoom"]{transform:scale(.84)}
[data-anim="clip"]{opacity:1;clip-path:inset(0 100% 0 0)}
.page.on [data-anim]{
  opacity:1;transform:none;
  transition:opacity .95s var(--e-out),transform 1.1s var(--e-out);
}
.page.on [data-anim="clip"]{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s var(--e-io);
}
/* chars */
.ch{display:inline-block;opacity:0;transform:translate3d(0,.9em,0) rotate(4deg)}
.page.on .ch{
  opacity:1;transform:none;
  transition:opacity .8s var(--e-out),transform 1s var(--e-out);
}

/* ---------- page 1 : cover ---------- */
.p1 .bleed img{object-position:56% 38%}
.p1 .bleed::after{
  background:
    linear-gradient(180deg, rgba(6,8,14,.9) 0%, rgba(6,8,14,.4) 28%, rgba(6,8,14,.62) 48%, rgba(6,8,14,.88) 72%, rgba(6,8,14,.97) 100%),
    linear-gradient(90deg, rgba(6,8,14,.62), transparent 62%);
}
.cover{height:100%;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.cover .top{display:flex;flex-direction:column;gap:14px}
.cover .mid{display:flex;flex-direction:column;gap:20px;padding-top:10px}
.cover .intro{
  font-size:13px;line-height:2;letter-spacing:.04em;color:rgba(244,236,224,.74);
  padding-left:14px;border-left:1px solid rgba(232,184,115,.5);
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}
.cover .seal{
  position:absolute;right:0;bottom:0;width:68px;height:68px;
  border:1px solid rgba(232,184,115,.4);border-radius:50%;
  display:grid;place-items:center;transform:rotate(-8deg);
  animation:sealIn 1.6s 1s var(--e-out) both;
}
.cover .seal::before{
  content:"";position:absolute;inset:6px;border:1px dashed rgba(232,184,115,.28);border-radius:50%;
  animation:spin 26s linear infinite;
}
.cover .seal span{font-family:var(--serif);font-size:24px;color:var(--gold);line-height:1}
@keyframes sealIn{from{opacity:0;transform:rotate(-40deg) scale(.6)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

.cover h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(58px,17.6vw,96px);
  line-height:1.02;letter-spacing:.06em;
  margin-top:6px;
  display:flex;
}
.cover h1 .ch{
  background:linear-gradient(178deg,#fff6e6 8%,#f3d9ac 46%,#d99a52 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 46px rgba(255,120,40,.18);
}
.cover .sub{
  margin-top:14px;font-size:14px;letter-spacing:.14em;color:rgba(244,236,224,.8);
}
.cover .sub span{display:block;margin-top:9px;font-size:11.5px;letter-spacing:.24em;color:rgba(244,236,224,.4)}
.cover .meta{
  display:flex;flex-direction:column;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:rgba(244,236,224,.52);
}
.cover .bottom{display:flex;flex-direction:column;gap:16px}

.fire{
  position:relative;display:flex;align-items:center;gap:16px;
  align-self:flex-start;
}
.fire button{
  position:relative;width:118px;height:118px;border-radius:50%;
  display:grid;place-items:center;perspective:600px;
}
.fire .ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,74,48,.55);
  animation:ringPulse 3s var(--e-out) infinite;
}
.fire .ring:nth-child(2){animation-delay:.9s}
@keyframes ringPulse{
  0%{transform:scale(.7);opacity:.9}
  70%{transform:scale(1.28);opacity:0}
  100%{opacity:0}
}
.fire .core{
  width:86px;height:86px;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,#ffd9a0,#ff6a34 42%,#a81c12 78%,#5c0d08);
  display:grid;place-items:center;
  box-shadow:0 0 44px rgba(255,90,44,.5),inset 0 0 22px rgba(255,220,170,.55);
  animation:coreBreathe 3.6s var(--e-io) infinite;
}
@keyframes coreBreathe{
  0%,100%{transform:scale(1);box-shadow:0 0 34px rgba(255,90,44,.42),inset 0 0 18px rgba(255,220,170,.4)}
  50%{transform:scale(1.05);box-shadow:0 0 62px rgba(255,120,60,.66),inset 0 0 26px rgba(255,230,180,.7)}
}
.fire .core span{
  font-family:var(--serif);font-size:19px;letter-spacing:.22em;color:#fff4e2;
  text-shadow:0 2px 10px rgba(120,20,0,.7);padding-left:.22em;
}
.fire .hint{font-size:11px;line-height:1.9;color:rgba(244,236,224,.5);letter-spacing:.06em}
.fire .hint b{display:block;font-family:var(--serif);font-size:15px;color:var(--paper);letter-spacing:.1em;margin-bottom:4px}
.scrollHint{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:rgba(244,236,224,.3)}
.scrollHint i{display:block;width:1px;height:22px;background:linear-gradient(180deg,rgba(232,184,115,.7),transparent);animation:drop 2.2s var(--e-io) infinite}
@keyframes drop{0%{transform:scaleY(.2);transform-origin:top;opacity:1}60%{transform:scaleY(1);opacity:.6}100%{transform:scaleY(.2);transform-origin:bottom;opacity:0}}

/* ---------- page 2 : timeline ---------- */
.tl{position:relative;margin-top:26px;padding-left:26px;flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px}
.tl::before{
  content:"";position:absolute;left:5px;top:6%;bottom:6%;width:1px;
  background:linear-gradient(180deg,rgba(232,184,115,0),rgba(232,184,115,.5) 12%,rgba(255,74,48,.55) 55%,rgba(232,184,115,.1));
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.5s .2s var(--e-io);
}
.page.on .tl::before{transform:scaleY(1)}
.tl-item{position:relative;padding:11px 0 11px 18px}
.tl-item::before{
  content:"";position:absolute;left:-26px;top:22px;width:9px;height:9px;
  margin-left:.5px;background:var(--ink);border:1px solid var(--gold);
  transform:rotate(45deg) scale(0);transition:transform .6s var(--e-back);
}
.page.on .tl-item::before{transform:rotate(45deg) scale(1)}
.tl-item:nth-child(1)::before{transition-delay:.55s}
.tl-item:nth-child(2)::before{transition-delay:.75s}
.tl-item:nth-child(3)::before{transition-delay:.95s}
.tl-item:nth-child(4)::before{transition-delay:1.15s}
.tl-item .yr{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gold);
}
.tl-item .yr small{font-family:var(--sans);font-size:9px;letter-spacing:.3em;color:rgba(244,236,224,.32);margin-left:8px}
.tl-item h3{
  font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.06em;margin-top:5px;
}
.tl-item p{font-size:12px;line-height:1.72;color:var(--paper-dim);margin-top:5px}

/* ---------- page 3 : gallery ---------- */
.p3 .bleed img{object-position:50% 30%}
.gal-wrap{
  margin:22px -26px 0;position:relative;flex:1;display:flex;align-items:center;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 80%,rgba(0,0,0,.55) 92%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 80%,rgba(0,0,0,.55) 92%,transparent 100%);
}
.gal-wrap::after{content:none}
.gal{
  display:flex;gap:12px;padding:0 26px;will-change:transform;
  transition:transform .75s var(--e-out);
  perspective:900px;
}
.gcard{
  position:relative;flex:0 0 auto;
  width:min(62vw,270px);height:min(46vh,340px);
  overflow:hidden;border:1px solid rgba(232,184,115,.2);
  background:var(--ink-2);
  transform:rotateY(9deg) scale(.9);opacity:0;
  transition:transform 1s var(--e-out),opacity .8s,box-shadow .5s;
}
.page.on .gcard{transform:none;opacity:1}
.gcard:nth-child(1){transition-delay:.2s}
.gcard:nth-child(2){transition-delay:.34s}
.gcard:nth-child(3){transition-delay:.48s}
.gcard img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 6s var(--e-out),filter .6s}
.gcard::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(4,6,12,.55) 72%,rgba(4,6,12,.94));
}
.gcard .cap{position:absolute;left:15px;right:15px;bottom:14px;z-index:2}
.gcard .cap b{display:block;font-family:var(--serif);font-size:19px;letter-spacing:.08em}
.gcard .cap span{display:block;margin-top:6px;font-size:10.5px;line-height:1.6;color:rgba(244,236,224,.55)}
.gcard .idx{
  position:absolute;left:15px;top:13px;z-index:2;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.2em;color:rgba(255,224,168,.85);
  text-shadow:0 1px 8px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.6);
}
.gcard:active img{transform:scale(1.1)}
.dragNote{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:rgba(244,236,224,.35);
}
.dragNote i{width:26px;height:1px;background:currentColor;display:block;animation:dragSlide 2.4s var(--e-io) infinite}
@keyframes dragSlide{0%,100%{transform:translateX(0);opacity:.4}50%{transform:translateX(8px);opacity:1}}

/* ---------- page 4 : hotspots ---------- */
.hot-wrap{
  position:relative;margin-top:18px;flex:1;min-height:0;
  display:flex;flex-direction:column;
}
.hot-stage{
  position:relative;width:100%;flex:1;min-height:160px;
  overflow:hidden;border:1px solid rgba(232,184,115,.18);
  background:#05070d;
}
.hot-stage img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(.86)}
.hot-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 30%,rgba(3,4,9,.66) 100%);
}
.hot{
  position:absolute;left:var(--x);top:var(--y);z-index:3;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:34px;height:34px;
}
.hot i{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,224,168,.55);
  animation:hotPulse 2.6s var(--e-out) infinite;
}
.hot i:nth-child(2){animation-delay:1.3s}
@keyframes hotPulse{0%{transform:scale(.35);opacity:1}80%,100%{transform:scale(1.5);opacity:0}}
.hot b{
  width:9px;height:9px;border-radius:50%;background:var(--gold-hi);
  box-shadow:0 0 0 4px rgba(255,224,168,.16),0 0 18px rgba(255,200,120,.9);
  transition:transform .4s var(--e-back),background .4s;
}
.hot span{
  position:absolute;left:50%;top:100%;transform:translate(-50%,4px);
  font-size:9.5px;letter-spacing:.14em;color:rgba(244,236,224,.6);white-space:nowrap;
  opacity:0;transition:opacity .4s,transform .4s;
}
.hot.on b{transform:scale(1.5);background:#fff;box-shadow:0 0 0 7px rgba(255,120,60,.22),0 0 26px rgba(255,220,160,1)}
.hot.on span{opacity:1;transform:translate(-50%,7px)}
.hot.seen b{background:rgba(255,224,168,.55)}

.hot-panel{
  position:relative;margin-top:12px;z-index:5;
  padding:14px 15px 15px;
  background:linear-gradient(150deg,rgba(10,14,24,.94),rgba(6,8,14,.96));
  border:1px solid rgba(232,184,115,.24);
  backdrop-filter:blur(8px);
  transform:translate3d(0,16px,0);opacity:0;
  transition:transform .6s var(--e-out),opacity .5s;
}
.page.on .hot-panel{transform:none;opacity:1;transition-delay:.6s}
.hp-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hp-top b{font-family:var(--serif);font-size:18px;letter-spacing:.1em}
.hp-top em{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--gold);font-style:normal}
.hot-panel p{margin-top:8px;font-size:11.5px;line-height:1.8;color:rgba(244,236,224,.66);min-height:3.6em}
.hp-bar{display:flex;gap:5px;margin-top:12px}
.hp-bar i{flex:1;height:2px;background:rgba(244,236,224,.14);transition:background .4s}
.hp-bar i.on{background:var(--gold)}

/* ---------- page 5 : heritage ---------- */
.quote{
  position:relative;margin-top:24px;padding:20px 20px 20px 24px;
  border-left:1px solid rgba(232,184,115,.45);
  background:linear-gradient(100deg,rgba(10,13,22,.92),rgba(10,13,22,.42) 72%,rgba(10,13,22,0));
}
.quote p{font-family:var(--serif);font-size:clamp(20px,5.6vw,25px);line-height:1.62;letter-spacing:.06em}
.quote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:rgba(244,236,224,.35)}
.duo{display:grid;grid-template-columns:1.15fr .85fr;gap:10px;margin-top:18px;height:min(30vh,220px)}
.duo figure{position:relative;overflow:hidden;border:1px solid rgba(232,184,115,.16)}
.duo img{width:100%;height:100%;object-fit:cover;transition:transform 7s var(--e-out)}
.page.on .duo img{transform:scale(1.08)}
.duo figcaption{
  position:absolute;left:10px;bottom:9px;font-size:9.5px;letter-spacing:.16em;
  color:rgba(255,236,210,.75);text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.stats{display:flex;gap:0;margin-top:18px;border-top:1px solid rgba(244,236,224,.12)}
.stats div{flex:1;padding:12px 10px 0;border-right:1px solid rgba(244,236,224,.08)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-family:var(--serif);font-size:clamp(22px,6.4vw,30px);color:var(--gold-hi);letter-spacing:.02em}
.stats small{display:block;margin-top:5px;font-size:9.5px;line-height:1.5;color:rgba(244,236,224,.4);letter-spacing:.04em}

/* ---------- page 6 : problem ---------- */
.p6 .bleed img{object-position:50% 55%}
.p6 .inner{justify-content:center;text-align:center}
.p6 .kicker{justify-content:center}
.p6 .kicker::before{opacity:.4}
.p6 h2{font-size:clamp(34px,10vw,48px);line-height:1.2}
.p6 .lede{margin-left:auto;margin-right:auto}
.neq-block{
  margin:34px 0 10px;
  display:flex;flex-direction:column;align-items:center;
}
.neq-row{
  font-family:var(--serif);line-height:1.32;letter-spacing:.04em;
  font-size:clamp(26px,7.6vw,36px);
}
.neq-row .q{color:rgba(244,236,224,.45)}
.neq-sign{
  position:relative;display:block;
  font-family:var(--serif);font-size:clamp(44px,13vw,58px);line-height:1;
  color:var(--red);margin:8px 0 10px;
  text-shadow:0 0 34px rgba(255,74,48,.55);
}
.neq-sign::before,.neq-sign::after{
  content:"≠";position:absolute;left:50%;top:0;transform:translateX(-50%);
  opacity:0;
}
.neq-sign::before{color:var(--cyan);animation:glitchA 4.2s steps(1) infinite}
.neq-sign::after{color:#fff2d0;animation:glitchB 3.4s steps(1) infinite}
@keyframes glitchA{
  0%,92%,100%{opacity:0;transform:translateX(-50%) translate(0)}
  93%{opacity:.75;transform:translateX(-50%) translate(-4px,2px)}
  95%{opacity:.45;transform:translateX(-50%) translate(3px,-1px)}
}
@keyframes glitchB{
  0%,88%,100%{opacity:0;transform:translateX(-50%) translate(0)}
  89%{opacity:.6;transform:translateX(-50%) translate(4px,-2px)}
  91%{opacity:.35;transform:translateX(-50%) translate(-2px,1px)}
}
.p6 .lede{max-width:26em;margin-top:20px}
.p6 .mark-line{display:flex;gap:9px;align-items:center;justify-content:center;margin-top:26px}
.p6 .mark-line i{width:7px;height:7px;background:var(--red);transform:rotate(45deg);animation:markDot 2.4s var(--e-io) infinite}
.p6 .mark-line i:nth-child(2){animation-delay:.3s}
.p6 .mark-line i:nth-child(3){animation-delay:.6s}
@keyframes markDot{0%,100%{opacity:.25}50%{opacity:1}}
.p6 .footnote{text-align:center;margin-top:10px}

/* ---------- page 7 : questions ---------- */
.qlist{display:flex;flex-direction:column;gap:10px;margin-top:20px;flex:1;justify-content:center}
.qcard{
  position:relative;text-align:left;width:100%;
  padding:17px 16px;border:1px solid rgba(244,236,224,.12);
  background:linear-gradient(115deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  overflow:hidden;
  transition:border-color .45s,background .45s,transform .5s var(--e-out);
}
.qcard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--red),var(--gold));
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--e-io);
}
.qcard.open::before,.qcard:active::before{transform:scaleY(1)}
.qcard.open{border-color:rgba(232,184,115,.4);background:linear-gradient(115deg,rgba(255,140,60,.09),rgba(255,255,255,.01))}
.q-head{display:flex;align-items:center;gap:11px}
.q-head b{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--red);
  border:1px solid rgba(255,74,48,.4);padding:2px 5px;flex:0 0 auto;
}
.q-head h3{font-family:var(--serif);font-size:17.5px;font-weight:600;letter-spacing:.08em;flex:1}
.q-plus{
  font-style:normal;font-size:15px;line-height:1;color:rgba(232,184,115,.55);
  transition:transform .45s var(--e-back),color .4s;
}
.qcard.open .q-plus{transform:rotate(135deg);color:var(--gold)}
.q-body{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e-io),opacity .4s;
  opacity:0;
}
.qcard.open .q-body{grid-template-rows:1fr;opacity:1}
.q-body>p{overflow:hidden;font-size:11.5px;line-height:1.8;color:rgba(244,236,224,.62);padding-left:38px}
.qcard.open .q-body>p{padding-top:9px}

/* ---------- page 8 : chain ---------- */
.bare{background:radial-gradient(130% 70% at 50% -10%, #151c30 0%, #0a0e18 52%, #06080e 100%)}
.bare::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(232,184,115,.028) 0 1px, transparent 1px 24px);
}
.p8.bare::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 40% at 50% 108%, rgba(255,74,48,.16), transparent 70%);
}
.chain{position:relative;margin-top:30px;flex:1;display:flex;flex-direction:column;justify-content:center}
.chain-line{
  position:absolute;left:11px;top:30px;bottom:110px;width:1px;
  background:rgba(244,236,224,.12);
}
.chain-line i{
  position:absolute;left:0;top:0;width:100%;
  background:linear-gradient(180deg,var(--gold),var(--red));
  height:0;transition:height .9s var(--e-out);
  box-shadow:0 0 12px rgba(255,120,60,.7);
}
.chain-spark{
  position:absolute;left:50%;width:7px;height:7px;margin-left:-3px;border-radius:50%;
  background:#fff2d4;box-shadow:0 0 14px 4px rgba(255,190,110,.9);
  opacity:0;
}
.chain-spark.run{animation:sparkFall 2.6s linear infinite}
@keyframes sparkFall{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(calc(var(--run,240px)))}
}
.step{
  position:relative;display:flex;gap:16px;align-items:flex-start;
  padding:16px 0;text-align:left;
  opacity:.42;transition:opacity .5s,transform .5s var(--e-out);
  transform:translateX(0);
}
.step.on{opacity:1}
.step .dot{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(244,236,224,.3);display:grid;place-items:center;
  font-family:var(--mono);font-size:9px;color:rgba(244,236,224,.6);
  background:var(--ink);transition:all .5s var(--e-out);margin-left:0;
}
.step.on .dot{
  border-color:rgba(255,224,168,.9);color:#1a0c06;
  background:linear-gradient(150deg,#ffe0a8,#ff7a44);
  box-shadow:0 0 0 6px rgba(255,140,80,.12),0 0 22px rgba(255,140,80,.5);
}
.step .txt h3{font-family:var(--serif);font-size:21px;letter-spacing:.12em;font-weight:600}
.step .txt p{font-size:12px;line-height:1.7;color:rgba(244,236,224,.5);margin-top:5px;transition:color .5s}
.step.on .txt p{color:rgba(244,236,224,.8)}
.chain-goal{
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(244,236,224,.1);
  font-size:11.5px;line-height:1.8;color:rgba(244,236,224,.5);
}
.chain-goal b{color:var(--gold-hi);font-weight:400}

/* ---------- page 9 : carousel ---------- */
.carousel-wrap{
  position:relative;flex:1;margin:20px -26px 0;
  display:flex;align-items:center;justify-content:center;
  perspective:1200px;overflow:hidden;
}
.carousel{position:relative;width:100%;height:min(54vh,400px);transform-style:preserve-3d}
.cslide{
  position:absolute;left:50%;top:50%;width:min(70vw,300px);height:100%;
  margin-left:calc(min(70vw,300px) / -2);margin-top:calc(min(54vh,400px) / -2);
  border:1px solid rgba(232,184,115,.2);
  overflow:hidden;background:var(--ink-2);
  transform-style:preserve-3d;
  transition:transform .9s var(--e-out),opacity .7s,filter .7s;
  opacity:0;pointer-events:none;
}
.cslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9);transition:filter .7s}
.cslide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,6,12,.2),rgba(4,6,12,.45) 40%,rgba(4,6,12,.95));
}
.cslide .body{position:absolute;left:18px;right:18px;bottom:20px;z-index:2;opacity:0;transition:opacity .55s .12s}
.cslide.pos-0 .body{opacity:1}
.cslide .tag{
  display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  color:var(--gold);border:1px solid rgba(232,184,115,.4);padding:3px 7px;
}
.cslide h3{font-family:var(--serif);font-size:clamp(21px,6vw,27px);letter-spacing:.05em;margin-top:11px;line-height:1.35}
.cslide p{font-size:11px;line-height:1.7;color:rgba(244,236,224,.55);margin-top:9px}
.cslide.pos-0{transform:translate3d(0,0,0) rotateY(0);opacity:1;pointer-events:auto;z-index:3}
.cslide.pos-0 img{filter:brightness(.8) saturate(1.02)}
.cslide.pos--1{transform:translate3d(-92%,0,-180px) rotateY(42deg);opacity:.4;z-index:2}
.cslide.pos-1{transform:translate3d(92%,0,-180px) rotateY(-42deg);opacity:.4;z-index:2}
.cslide.pos--2{transform:translate3d(-124%,0,-340px) rotateY(56deg);opacity:.08;z-index:1}
.cslide.pos-2{transform:translate3d(124%,0,-340px) rotateY(-56deg);opacity:.08;z-index:1}
.cslide:not(.pos-0) img{filter:brightness(.42) saturate(.8) blur(1px)}
.car-dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.car-dots button{width:16px;height:2px;background:rgba(244,236,224,.2);transition:all .4s}
.car-dots button.on{width:30px;background:var(--gold)}
.car-meta{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:rgba(244,236,224,.3)}

/* ---------- page 10 : finale ---------- */
.p10 .bleed img{object-position:50% 42%}
.p10 .bleed::after{
  background:
    linear-gradient(180deg, rgba(6,8,14,.92) 0%, rgba(6,8,14,.62) 26%, rgba(6,8,14,.8) 58%, rgba(6,8,14,.97) 100%),
    linear-gradient(95deg, rgba(6,8,14,.9) 0%, rgba(6,8,14,.55) 46%, rgba(6,8,14,.2) 78%, rgba(6,8,14,.35) 100%);
}
.p10 .inner{justify-content:center}
.finale h2{font-size:clamp(30px,8.8vw,42px)}
.values{display:flex;flex-direction:column;gap:0;margin-top:22px;border-top:1px solid rgba(244,236,224,.12)}
.values div{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid rgba(244,236,224,.08)}
.values span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--red);flex:0 0 auto}
.values p{font-size:12px;color:rgba(244,236,224,.68);letter-spacing:.02em}
.actions{display:flex;gap:10px;margin-top:24px}
.btn{
  position:relative;flex:1;
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:48px;border:1px solid rgba(232,184,115,.4);
  font-size:12.5px;letter-spacing:.18em;color:var(--gold-hi);
  overflow:hidden;transition:border-color .4s,color .4s,transform .3s var(--e-out);
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,224,168,.16) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .8s var(--e-io);
}
.btn:active{transform:scale(.97)}
.btn:active::after{transform:translateX(120%)}
.btn.solid{background:linear-gradient(120deg,rgba(255,74,48,.9),rgba(178,28,20,.9));border-color:rgba(255,120,80,.6);color:#fff5e8}
.credit{margin-top:20px;font-family:var(--mono);font-size:9px;line-height:1.9;letter-spacing:.14em;color:rgba(244,236,224,.34)}

/* ---------- staged lists (questions / chain) ---------- */
.page .qcard{opacity:0;transform:translate3d(0,22px,0)}
.page.on .qcard{opacity:1;transform:none;transition:opacity .8s var(--e-out),transform .9s var(--e-out),border-color .45s,background .45s,box-shadow .45s}
.page.on .qcard:nth-child(1){transition-delay:.18s}
.page.on .qcard:nth-child(2){transition-delay:.28s}
.page.on .qcard:nth-child(3){transition-delay:.38s}
.page.on .qcard:nth-child(4){transition-delay:.48s}

.page .step{opacity:0;transform:translate3d(-16px,0,0)}
.page.on .step{opacity:.68;transform:none;transition:opacity .7s var(--e-out),transform .8s var(--e-out)}
.page.on .step.on{opacity:1}
.page.on .step:nth-of-type(1){transition-delay:.2s}
.page.on .step:nth-of-type(2){transition-delay:.3s}
.page.on .step:nth-of-type(3){transition-delay:.4s}
.page.on .step:nth-of-type(4){transition-delay:.5s}

.hot-panel.swap{opacity:.15;transform:translate3d(0,8px,0);transition:opacity .18s,transform .18s}

/* ---------- dock ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  height:calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding:0 var(--pad-x) env(safe-area-inset-bottom);
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(0deg, rgba(6,8,14,.92), rgba(6,8,14,0));
}
.counter{display:flex;align-items:baseline;gap:3px;font-family:var(--mono);flex:0 0 auto}
.counter b{font-size:14px;font-weight:400;color:var(--gold-hi);letter-spacing:.06em}
.counter b span{display:inline-block;min-width:2ch}
.counter i{font-style:normal;font-size:9px;color:rgba(244,236,224,.28);letter-spacing:.1em}
.rail{display:flex;align-items:center;gap:0;flex:1;min-width:0;height:34px}
.rail button{position:relative;flex:1;height:100%;display:grid;place-items:center;max-width:34px}
.rail button::before{
  content:"";width:3px;height:3px;border-radius:50%;background:rgba(244,236,224,.28);
  transition:all .45s var(--e-out);
}
.rail button.past::before{background:rgba(232,184,115,.55)}
.rail button.on::before{width:14px;height:2px;border-radius:1px;background:var(--gold-hi);box-shadow:0 0 12px rgba(255,200,120,.8)}
.rail-line{position:absolute;left:0;right:0;height:1px;background:rgba(244,236,224,.1);top:50%;z-index:-1}
.nextBtn{
  flex:0 0 auto;width:38px;height:38px;border:1px solid rgba(232,184,115,.3);
  display:grid;place-items:center;color:var(--gold);border-radius:50%;
  transition:transform .4s var(--e-out),border-color .4s;
}
.nextBtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.4}
.nextBtn:active{transform:scale(.9);border-color:var(--gold)}
.nextBtn.hide{opacity:0;pointer-events:none}

/* sweep transition */
.sweep{
  position:fixed;top:-20%;bottom:-20%;left:-40%;width:60%;z-index:19;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(232,184,115,.1) 30%,rgba(255,100,50,.18) 46%,rgba(255,224,168,.32) 50%,rgba(255,100,50,.14) 54%,transparent);
  filter:blur(6px);opacity:0;transform:translateX(0) skewX(-14deg);
}
.sweep.run{animation:sweepRun 1s var(--e-io)}
@keyframes sweepRun{
  0%{opacity:0;transform:translateX(0) skewX(-14deg)}
  15%{opacity:1}
  100%{opacity:0;transform:translateX(320%) skewX(-14deg)}
}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(3,5,10,.82);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .5s;
}
.modal.show{opacity:1;pointer-events:auto}
.modal .sheet{
  width:100%;max-width:340px;max-height:82vh;overflow:auto;
  background:var(--ink-2);border:1px solid rgba(232,184,115,.26);
  padding:20px;transform:translateY(18px) scale(.97);transition:transform .6s var(--e-back);
  -webkit-overflow-scrolling:touch;
}
.modal.show .sheet{transform:none}
.modal h3{font-family:var(--serif);font-size:18px;letter-spacing:.1em}
.modal p,.modal li{font-size:11px;line-height:1.85;color:rgba(244,236,224,.58)}
.modal ul{padding-left:16px;margin:10px 0 0}
.modal .close{position:absolute;top:14px;right:14px}
.poster-preview{display:block;width:auto;max-width:100%;max-height:50vh;margin:0 auto;border:1px solid rgba(232,184,115,.2)}
.modal .row{display:flex;gap:9px;margin-top:16px}
.modal .row .btn{height:42px;font-size:11px}

/* tap ripple */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,224,168,.4),rgba(255,140,80,.12) 60%,transparent 70%);
  transform:scale(0);opacity:.9;animation:rip .65s var(--e-out) forwards;
}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* toast */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);
  z-index:80;padding:9px 16px;
  background:rgba(10,14,24,.94);border:1px solid rgba(232,184,115,.32);
  font-size:11px;letter-spacing:.1em;color:var(--gold-hi);
  opacity:0;pointer-events:none;transition:all .45s var(--e-out);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (min-width:760px){
  body{background:radial-gradient(85% 85% at 50% 50%, #101626 0%, #06080e 68%)}
  #stage{
    left:50%;right:auto;width:460px;transform:translateX(-50%);
    border-left:1px solid rgba(232,184,115,.22);
    border-right:1px solid rgba(232,184,115,.22);
    box-shadow:0 0 100px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.65);
  }
  .hud,.dock{left:50%;right:auto;width:460px;transform:translateX(-50%);max-width:none;margin:0}
  .frame{display:none}
  .vignette{background:radial-gradient(65% 75% at 50% 46%, transparent 42%, rgba(0,0,0,.6) 100%)}
}
@media (max-height:700px){
  :root{--dock-h:60px;--hud-h:48px}
  .page{padding-top:calc(var(--hud-h) + 8px + env(safe-area-inset-top))}
  h2{font-size:clamp(22px,6.4vw,30px);margin-top:10px}
  .kicker{font-size:9px}
  .lede{font-size:11.5px;line-height:1.8;margin-top:9px}
  .gcard{height:min(38vh,240px)}
  .cslide,.carousel{height:min(42vh,300px)}
  .duo{height:min(21vh,150px);margin-top:12px}
  .tl-item{padding:5px 0 5px 16px}
  .tl-item .yr{font-size:9.5px}
  .tl-item h3{font-size:15px;margin-top:3px}
  .tl-item p{font-size:10.5px;line-height:1.6;margin-top:3px}
  .footnote{font-size:9px;line-height:1.6;padding-top:8px}
  .quote{margin-top:14px;padding:14px 16px 14px 18px}
  .quote p{font-size:17px}
  .quote cite{font-size:8.5px}
  .stats div{padding:9px 8px 0}
  .stats b{font-size:19px}
  .stats small{font-size:8.5px}
  .tl{margin-top:14px}
  .qlist{margin-top:14px;gap:8px}
  .qcard{padding:13px 14px}
  .q-head h3{font-size:15.5px}
  .q-body>p{font-size:10.5px;line-height:1.65}
  .step{padding:10px 0}
  .step .txt h3{font-size:17px}
  .step .txt p{font-size:10.5px;margin-top:2px}
  .chain{margin-top:16px}
  .chain-goal{font-size:10.5px;margin-top:10px;padding-top:10px}
  .values div{padding:8px 0}
  .values p{font-size:11px}
  .actions{margin-top:16px}
  .btn{height:42px;font-size:11.5px}
  .cover .intro{font-size:11.5px;line-height:1.85}
  .fire button{width:100px;height:100px}
  .fire .core{width:72px;height:72px}
  .cover h1{font-size:clamp(48px,15vw,80px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.15s !important}
  .grain{display:none}
}

/* ---------- still-frame capture mode (?snap=1) ---------- */
html.snap [data-anim],
html.snap .ch,
html.snap .gcard,
html.snap .qcard,
html.snap .step,
html.snap .hot-panel,
html.snap .cover .seal{
  opacity:1 !important;
  transform:none !important;
  clip-path:none !important;
  filter:none !important;
  transition:none !important;
  animation:none !important;
}
html.snap .step{opacity:.42 !important}
html.snap .step.on{opacity:1 !important}
html.snap .qcard{opacity:1 !important}
html.snap .seal{transform:rotate(-8deg) scale(1) !important}
html.snap .page,html.snap #stage *{transition-duration:0s !important;animation-duration:0s !important}
html.snap .page{opacity:1 !important;transform:none !important;filter:none !important}
html.snap .page:not(.on){opacity:0 !important}