/* ============================================================
   Public and Commercial Broadcasting in China
   Cinematic 3D presentation engine
   Each block lives in real 3D space; the camera flies between pages.
   ============================================================ */

:root{
  --navy:#0E2440;
  --navy-d:#050B14;
  --navy-m:#153254;
  --navy-l:#2A4E7C;
  --crimson:#9B1F2F;
  --crimson-l:#C42B3D;
  --gold:#C9A063;
  --gold-l:#E4C289;
  --panel:#F2F5F9;
  --hair:#D3DBE4;
  --ink:#111B28;
  --muted:#5A6B80;
  --paper:#FFFFFF;

  --serif:"Times New Roman",Times,"Liberation Serif",Georgia,serif;

  --ease:cubic-bezier(.16,.9,.24,1);
  --ease-soft:cubic-bezier(.25,.8,.35,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#03070E;
  font-family:var(--serif);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   VIEWPORT / WORLD
   ============================================================ */
#viewport{
  position:fixed;inset:0;overflow:hidden;
  perspective:2000px;
  perspective-origin:50% 45%;
}
#world{
  position:absolute;left:50%;top:50%;
  width:1280px;height:720px;
  margin:-360px 0 0 -640px;
  transform-style:preserve-3d;
  transform-origin:50% 50%;
  will-change:transform;
}

/* deep space atmosphere — lives INSIDE the camera space, so the whole
   corridor (nebulas, grid floor, dust) flies past the lens */
#void{
  position:absolute;left:0;top:0;width:0;height:0;
  transform-style:preserve-3d;
  pointer-events:none;
}
.void-layer{position:absolute;left:0;top:0;transform-style:preserve-3d}

.nebula{
  position:absolute;left:50%;top:50%;width:2200px;height:1560px;
  margin:-780px 0 0 -1100px;border-radius:50%;
  background:
    radial-gradient(42% 46% at 32% 34%, rgba(155,31,47,.30), transparent 68%),
    radial-gradient(48% 50% at 72% 62%, rgba(42,78,124,.34), transparent 70%),
    radial-gradient(60% 60% at 50% 50%, rgba(201,160,99,.09), transparent 74%);
  filter:blur(16px);
  animation:nebulaPulse 26s ease-in-out infinite alternate;
}
@keyframes nebulaPulse{
  from{opacity:.72;transform:scale(1)}
  to{opacity:1;transform:scale(1.07)}
}

/* fine perspective grid floor — a long hangar floor spanning the corridor
   (positioned + sized by JS so it runs the full flight path) */
.grid-floor{
  position:absolute;left:0;top:0;width:4600px;height:11400px;
  margin:-5700px 0 0 -2300px;
  background-image:
    linear-gradient(rgba(120,160,210,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,210,.10) 1px, transparent 1px);
  background-size:110px 110px;
  mask-image:radial-gradient(closest-side at 50% 50%, #000 18%, transparent 86%);
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%, #000 18%, transparent 86%);
  opacity:.5;
}

/* drifting dust motes filling the corridor volume */
.dust{position:absolute;left:0;top:0;transform-style:preserve-3d;pointer-events:none}
.dust i{
  position:absolute;left:0;top:0;display:block;transform-style:preserve-3d;
}
.dust i b{
  display:block;width:3px;height:3px;border-radius:50%;
  background:rgba(190,215,245,.65);
  animation:drift linear infinite;
}
@keyframes drift{
  from{transform:translate3d(0,0,0);opacity:0}
  10%{opacity:.9}
  90%{opacity:.5}
  to{transform:translate3d(60px,-140px,0);opacity:0}
}

/* the deck container must keep the 3D chain alive */
.slides{
  position:absolute;inset:0;
  transform-style:preserve-3d;
}

/* ============================================================
   SLIDE — a fixed panel hanging in the corridor. The pose
   (translate + yaw) is assigned once by JS; the CAMERA does all
   moving, so .slide carries no state transitions at all.
   ============================================================ */
.slide{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,opacity;
}

/* the actual white page / glass card */
.page{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  background:
    linear-gradient(160deg, rgba(255,255,255,.97) 0%, rgba(244,247,251,.97) 62%, rgba(236,241,247,.97) 100%);
  box-shadow:
    0 30px 64px rgba(0,0,0,.6),
    0 4px 0 rgba(255,255,255,.6) inset,
    0 0 0 1px rgba(255,255,255,.55);
  overflow:hidden;
  border-radius:3px;
}
/* inner sheen + vignette for filmic depth */
.page::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:50;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.55), transparent 46%),
    radial-gradient(130% 120% at 50% 118%, rgba(5,11,20,.16), transparent 58%);
}
/* subtle scanline / grain for cinema texture */
.page::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:49;opacity:.05;
  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px);
}

/* accent light bar on the page edge */
.edge{
  position:absolute;left:0;top:0;bottom:0;width:5px;z-index:52;
  background:linear-gradient(180deg,var(--navy) 0%,var(--crimson) 52%,var(--gold) 100%);
  opacity:.95;
}

/* ============================================================
   CONTENT LAYER — blocks float at different Z depths
   .frame is the 3D container; .fx-* set depth
   ============================================================ */
.frame{
  position:absolute;inset:0;z-index:10;
  padding:46px 74px 66px;
  transform-style:preserve-3d;
  display:flex;flex-direction:column;
}

/* depth utilities — the heart of the multi-dimensional feel */
.z-0{transform:translateZ(0)}
.z-1{transform:translateZ(16px)}
.z-2{transform:translateZ(34px)}
.z-3{transform:translateZ(56px)}
.z-4{transform:translateZ(82px)}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow{
  font-size:13.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--crimson);margin-bottom:5px;
}
.title{
  font-size:40px;line-height:1.16;font-weight:700;color:var(--navy);
  letter-spacing:-.005em;white-space:nowrap;
  text-shadow:0 2px 10px rgba(14,36,64,.10);
}
.head-rule{
  width:100%;height:1px;margin:15px 0 0;
  background:linear-gradient(90deg,var(--navy) 0%,var(--crimson) 26%,var(--hair) 62%,transparent 100%);
  transform-origin:left center;
}
.slide.is-active .head-rule{animation:ruleIn 1.1s var(--ease) .2s backwards}
@keyframes ruleIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

.lede{font-size:18px;line-height:1.5;color:var(--muted);margin-top:14px;max-width:900px}

.source{
  margin-top:auto;font-size:12.5px;line-height:1.4;color:var(--muted);
  padding-top:10px;border-top:1px solid var(--hair);
}
.source b{color:var(--navy);font-weight:700;letter-spacing:.14em;margin-right:8px;font-size:11.5px}

/* in-page footer removed: the HUD already carries deck title,
   team and slide counter, and the old footer sat under the HUD bar */
.foot{display:none}
.foot-r b{color:var(--navy);font-weight:700}
.dot{display:inline-block;margin:0 8px;color:var(--gold)}

/* ============================================================
   REVEAL — blocks fly in from deep space, staggered
   ============================================================ */
.reveal{
  opacity:0;
  transform:translate3d(0,34px,var(--rz,-120px)) rotateX(-14deg) scale(.94);
  filter:blur(9px);
  transition:
    opacity .72s ease var(--d,0s),
    transform 1.05s var(--ease) var(--d,0s),
    filter .72s ease var(--d,0s);
  transform-style:preserve-3d;
}
.slide.is-active .reveal{opacity:1;transform:translate3d(0,0,var(--z,0)) rotateX(0) scale(1);filter:none}

/* ============================================================
   SLIDE 1 · COVER
   ============================================================ */
.slide.cover .frame{padding:52px 74px 54px}
.mast{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--navy)}
.mast-r{color:var(--crimson)}
.mast-rule{height:2px;margin:10px 0 0;background:linear-gradient(90deg,var(--navy),var(--crimson) 40%,transparent)}

.cover-body{flex:1;display:flex;align-items:center}
.cover-copy{max-width:780px}
.kicker{font-size:13.5px;font-weight:700;letter-spacing:.26em;color:var(--crimson);margin-bottom:18px}
.cover-title{
  font-size:58px;line-height:1.06;font-weight:700;color:var(--navy);letter-spacing:-.015em;
  text-shadow:0 4px 22px rgba(14,36,64,.16);
}
.cover-title em{font-style:italic;color:var(--crimson)}
.gold-rule{width:96px;height:3px;margin:22px 0 18px;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));box-shadow:0 0 22px rgba(201,160,99,.6)}
.cover-sub{font-size:19px;line-height:1.5;color:var(--muted);max-width:660px}

.cover-meta{display:grid;grid-template-columns:1fr auto;gap:16px 54px;margin-top:26px;align-items:start}
.meta-col{display:flex;flex-direction:column;gap:13px}
.meta-k{font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--crimson);margin-bottom:5px}
.meta-v{font-size:14.5px;line-height:1.45;color:var(--ink)}
.meta-v.big{font-size:26px;font-weight:700;color:var(--navy);line-height:1.1}
.meta-v .sep{color:var(--gold);margin:0 7px}

/* members stacked top-to-bottom */
.members{list-style:none;display:flex;flex-direction:column;gap:5px}
.members li{
  position:relative;padding-left:18px;
  font-size:15px;line-height:1.32;color:var(--ink);white-space:nowrap;
}
.members li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:1px;background:var(--gold);
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:12.5px;padding:5px 12px;border-radius:2px;letter-spacing:.03em;
  background:linear-gradient(180deg,#fff,var(--panel));
  border:1px solid var(--hair);color:var(--navy);
  box-shadow:0 2px 6px rgba(14,36,64,.07);
}
.cover-foot{font-size:12px;color:var(--muted)}

/* cover hologram */
.holo{
  position:absolute;right:-40px;top:50%;width:620px;height:620px;
  margin-top:-310px;pointer-events:none;z-index:5;
  transform:translateZ(-60px);
  opacity:.9;
}
.holo svg{width:100%;height:100%}

/* ============================================================
   SLIDE 2 · OVERVIEW
   ============================================================ */
.ov-grid{display:grid;grid-template-columns:322px 1fr;gap:32px;margin-top:32px}
.ov-reg{
  padding:26px 24px;border-radius:3px;height:100%;
  background:linear-gradient(160deg,#F7F9FC,#E9EEF5);
  border-left:4px solid var(--crimson);
  box-shadow:0 18px 40px rgba(14,36,64,.13), 0 2px 0 rgba(255,255,255,.9) inset;
}
.ov-ico{width:44px;height:44px;margin-bottom:14px}
.ov-ico svg{width:100%;height:100%}
.ov-k{font-size:12.5px;font-weight:700;letter-spacing:.18em;color:var(--crimson);margin-bottom:10px}
.ov-reg p{font-size:16px;line-height:1.55}

.ov-tiers{display:flex;flex-direction:column;gap:15px}
.tier{
  display:flex;gap:18px;align-items:flex-start;padding:17px 22px;border-radius:3px;
  background:linear-gradient(160deg,#fff,#F4F7FB);
  border:1px solid var(--hair);border-left:4px solid var(--navy);
  box-shadow:0 12px 30px rgba(14,36,64,.11);
  transition:transform .45s var(--ease),box-shadow .45s ease,border-color .45s ease;
}
.tier:hover{transform:translate3d(10px,-4px,42px);box-shadow:0 26px 58px rgba(14,36,64,.24);border-left-color:var(--crimson)}
.tier-n{font-size:26px;font-weight:700;color:var(--gold);line-height:1;min-width:44px;
  text-shadow:0 2px 8px rgba(201,160,99,.45)}
.tier-k{font-size:12.5px;font-weight:700;letter-spacing:.18em;color:var(--navy);margin-bottom:7px}
.tier p{font-size:16px;line-height:1.52}

/* ============================================================
   SLIDE 3 · TIMELINE  (a corridor receding into space)
   ============================================================ */
.timeline{margin-top:30px;position:relative;transform-style:preserve-3d}
.tl-line{position:absolute;left:0;right:0;top:30px;height:2px;background:var(--hair);border-radius:1px}
.tl-fill{height:100%;width:0;border-radius:1px;
  background:linear-gradient(90deg,var(--navy),var(--crimson) 60%,var(--gold));
  box-shadow:0 0 16px rgba(155,31,47,.5);
  transition:width 1.6s var(--ease) .3s}
.slide.is-active .tl-fill{width:100%}
.tl-items{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.tl{position:relative;transform-style:preserve-3d}
.tl::before{
  content:"";position:absolute;left:0;top:23px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--navy);box-shadow:0 0 14px rgba(42,78,124,.6);
  transform:scale(0);transition:transform .55s var(--ease) var(--d,0s);
}
.slide.is-active .tl::before{transform:scale(1)}
.tl-y{display:block;margin-top:46px;font-size:22px;font-weight:700;color:var(--crimson);letter-spacing:.02em}
.tl p{margin-top:8px;font-size:14.5px;line-height:1.5;padding-right:10px}

/* ============================================================
   SLIDES 4 / 5 / 7 · TWO COLUMN PANELS
   ============================================================ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:24px;transform-style:preserve-3d}
.two-col.str{grid-template-columns:1fr 468px}
.col{transform-style:preserve-3d}
.col-h{
  font-size:12.5px;font-weight:700;letter-spacing:.18em;color:#fff;
  padding:8px 14px;margin-bottom:13px;border-radius:2px;
  background:linear-gradient(120deg,var(--navy),var(--navy-l));
  box-shadow:0 8px 20px rgba(14,36,64,.30);
}
.kw{
  padding:0 0 11px 14px;margin-bottom:11px;
  border-left:2px solid var(--hair);
  transition:border-color .3s ease,transform .4s var(--ease);
}
.kw:hover{border-left-color:var(--crimson);transform:translate3d(4px,0,22px)}
.kw-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--crimson);margin-bottom:4px}
.kw p{font-size:15px;line-height:1.5}

/* stat strip */
.stat-strip{
  display:flex;align-items:center;gap:42px;margin-top:18px;padding-top:15px;
  border-top:1px solid var(--hair);
}
.stat{transition:transform .4s var(--ease)}
.stat:hover{transform:translate3d(0,-6px,44px)}
.stat-n{font-size:34px;font-weight:700;color:var(--navy);line-height:1;
  text-shadow:0 3px 14px rgba(14,36,64,.20)}
.stat-n .unit{font-size:16px;color:var(--crimson);margin-left:2px}
.stat-l{font-size:11.5px;letter-spacing:.12em;color:var(--muted);margin-top:6px;text-transform:uppercase}
.stat-art{margin-left:auto;width:176px;opacity:.92}
.stat-art svg{width:100%;height:auto}

/* money */
.money{
  display:grid;grid-template-columns:272px 1fr;gap:34px;align-items:center;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--hair);
}
.money-figure svg{width:100%;height:auto}
.money-figure .bars rect{transform-origin:bottom;animation:barGrow .95s var(--ease) backwards}
.money-figure .bars rect:nth-child(1){animation-delay:.55s}
.money-figure .bars rect:nth-child(2){animation-delay:.63s}
.money-figure .bars rect:nth-child(3){animation-delay:.71s}
.money-figure .bars rect:nth-child(4){animation-delay:.79s}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.money-cap{font-size:11.5px;color:var(--muted);margin-top:6px}
.money-stats{display:flex;gap:48px}

/* slide 5 carries an extra figure block — tighten it to stay inside 720px */
.slide.tight .two-col{margin-top:14px}
.slide.tight .kw{padding-bottom:5px;margin-bottom:6px}
.slide.tight .kw p{font-size:14.5px;line-height:1.42}
.slide.tight .money{margin-top:10px;padding-top:10px;grid-template-columns:180px 1fr;gap:24px}
.slide.tight .money-stats{gap:34px}
.slide.tight .stat-n{font-size:30px}
.slide.tight .money-cap{margin-top:4px}
.slide.tight .source{padding-top:7px}

/* ============================================================
   SLIDE 6 · COMPARISON TABLE
   ============================================================ */
.cmp{
  width:100%;border-collapse:separate;border-spacing:0;margin-top:24px;
  box-shadow:0 22px 54px rgba(14,36,64,.16);border-radius:3px;overflow:hidden;
}
.cmp th{
  text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;padding:12px 18px;
  background:linear-gradient(120deg,var(--navy),var(--navy-l));
}
.cmp th:first-child{width:22%}
.cmp td{
  font-size:16px;line-height:1.45;padding:14px 18px;
  border-bottom:1px solid var(--hair);vertical-align:top;background:#fff;
}
.cmp tbody tr:nth-child(even) td{background:var(--panel)}
.cmp td.dim{font-weight:700;color:var(--crimson);letter-spacing:.04em;font-size:14.5px}
.cmp tbody tr{transition:background .3s ease,transform .3s var(--ease)}
.cmp tbody tr:hover td{background:rgba(201,160,99,.13)}

/* ============================================================
   SLIDE 7 · STREAMING
   ============================================================ */
.devices{width:100%;margin-bottom:12px}
.devices svg{width:100%;height:auto}
.chart-col{display:flex;flex-direction:column;transform-style:preserve-3d}
.chart-head{font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:12px;line-height:1.4}
.unit-note{font-weight:400;color:var(--muted);font-size:11.5px}
.chart{
  padding:18px 20px 12px;border-radius:3px;
  background:linear-gradient(160deg,#fff,var(--panel));
  border:1px solid var(--hair);
  box-shadow:0 18px 42px rgba(14,36,64,.14);
}
.bar-row{display:grid;grid-template-columns:104px 1fr 52px;align-items:center;gap:12px;margin-bottom:12px}
.bar-lab{font-size:14px;color:var(--ink)}
.bar-track{height:20px;background:#E4EAF1;border-radius:2px;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(14,36,64,.12)}
.bar-fill{
  height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--navy),var(--navy-l));
  box-shadow:0 0 14px rgba(42,78,124,.45);
  transition:width 1.15s var(--ease) calc(.55s + var(--i) * .1s);
}
.bar-fill.alt{background:linear-gradient(90deg,var(--crimson),var(--crimson-l));
  box-shadow:0 0 14px rgba(155,31,47,.5)}
.bar-val{font-size:15px;font-weight:700;color:var(--navy);text-align:right}
.chart-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);
  padding-left:116px;padding-right:52px;margin-top:2px}

/* ============================================================
   SLIDE 8 · SYNTHESIS — three floating columns
   ============================================================ */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px;transform-style:preserve-3d}
.tri-card{
  border-radius:3px;padding:0 25px 22px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#fff,#EEF2F8);
  border:1px solid var(--hair);
  box-shadow:0 26px 60px rgba(14,36,64,.18);
  transition:transform .5s var(--ease),box-shadow .5s ease;
}
.tri-card:hover{transform:translate3d(0,-10px,60px);box-shadow:0 40px 90px rgba(14,36,64,.32)}
.tri-bar{height:5px;margin:0 -25px 19px;
  background:linear-gradient(90deg,var(--navy),var(--navy-l))}
.tri-card.commercial .tri-bar{background:linear-gradient(90deg,var(--navy-l),#4A7BB0)}
.tri-card.streaming .tri-bar{background:linear-gradient(90deg,var(--crimson),var(--crimson-l))}
.tri-k{font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--navy);margin-bottom:15px}
.tri-item{margin-bottom:11px;padding-left:12px;border-left:2px solid var(--hair)}
.tri-item .tk{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--crimson);margin-bottom:3px}
.tri-item p{font-size:14.5px;line-height:1.45}

/* ============================================================
   SLIDE 9 · ISSUES
   ============================================================ */
.issues{margin-top:24px;display:grid;grid-template-columns:1fr 254px;gap:26px;align-items:start}
.issues>.issue{
  display:flex;gap:16px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid var(--hair);
  transition:transform .4s var(--ease),padding-left .4s var(--ease);
}
.issues>.issue:hover{transform:translate3d(8px,0,34px);padding-left:6px}
.is-ico{width:36px;height:36px;flex:none;
  filter:drop-shadow(0 4px 10px rgba(14,36,64,.22))}
.is-ico svg{width:100%;height:100%}
.is-k{font-size:12.5px;font-weight:700;letter-spacing:.18em;color:var(--navy);margin-bottom:4px}
.issues p{font-size:15.5px;line-height:1.5}
.big-figure{
  grid-column:2;grid-row:1 / span 5;border-radius:3px;text-align:center;
  padding:26px 22px;color:#fff;
  background:linear-gradient(165deg,var(--navy),#0A1B31);
  box-shadow:0 30px 70px rgba(14,36,64,.42), 0 0 0 1px rgba(201,160,99,.28) inset;
  transform:translateZ(48px);
}
.bf-n{font-size:52px;font-weight:700;line-height:1;color:#fff;
  text-shadow:0 0 30px rgba(120,170,230,.5)}
.bf-n.sm{margin-top:22px;font-size:38px}
.bf-u{font-size:18px;color:var(--gold-l);margin-left:4px}
.bf-l{font-size:11.5px;letter-spacing:.1em;color:rgba(255,255,255,.7);margin-top:8px;line-height:1.5;text-transform:uppercase}

/* ============================================================
   SLIDE 10 · CONCLUSION
   ============================================================ */
.concl{display:flex;flex-direction:column;gap:13px;margin-top:26px;transform-style:preserve-3d}
.cc{
  display:flex;gap:16px;align-items:baseline;padding:14px 20px;border-radius:3px;
  background:linear-gradient(150deg,#fff,var(--panel));
  border-left:4px solid var(--navy);
  box-shadow:0 14px 34px rgba(14,36,64,.13);
  transition:transform .45s var(--ease),box-shadow .45s ease;
}
.cc:hover{transform:translate3d(0,-5px,38px);box-shadow:0 26px 56px rgba(14,36,64,.26)}
.cc-k{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--crimson);white-space:nowrap;min-width:190px}
.cc p{font-size:16px;line-height:1.5}
.refs{
  margin-top:22px;padding:18px 22px;border-radius:3px;
  background:#fff;border:1px solid var(--hair);border-left:4px solid var(--gold);
  box-shadow:0 18px 44px rgba(14,36,64,.13);
}
.refs-k{font-size:12.5px;font-weight:700;letter-spacing:.18em;color:var(--navy);margin-bottom:11px}
.refs ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 30px}
.refs li{font-size:13px;line-height:1.45;color:var(--muted);position:relative;padding-left:16px}
.refs li::before{content:"—";position:absolute;left:0;color:var(--gold)}

/* ============================================================
   HUD / CHROME
   ============================================================ */
.hud{position:fixed;z-index:200;pointer-events:none}
.hud *{pointer-events:auto}

/* cinema letterbox bars — breathe in while the camera flies */
.cine-bar{
  position:fixed;left:0;right:0;height:0;z-index:190;
  background:#020509;pointer-events:none;
  transition:height .62s var(--ease);
}
.cine-bar.t{top:0}
.cine-bar.b{bottom:0}
body.flying .cine-bar{height:30px}
body.flying .hud-top,
body.flying .hud-bottom{opacity:.38}
.hud-top,.hud-bottom{transition:opacity .6s ease}

.hud-top{
  top:0;left:0;right:0;height:42px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;
  background:linear-gradient(180deg,rgba(3,7,14,.92),rgba(3,7,14,0));
}
.hud-brand{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;color:rgba(255,255,255,.82);
  display:flex;align-items:center;gap:10px;
}
.hud-dot{width:7px;height:7px;border-radius:50%;background:var(--crimson-l);
  box-shadow:0 0 12px rgba(196,43,61,.9);animation:hudPulse 2.4s ease-in-out infinite}
@keyframes hudPulse{0%,100%{opacity:1}50%{opacity:.35}}
.hud-right{font-size:11.5px;letter-spacing:.14em;color:rgba(255,255,255,.55)}

.hud-bottom{
  bottom:0;left:0;right:0;height:58px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;
  background:linear-gradient(0deg,rgba(3,7,14,.92),rgba(3,7,14,0));
}
.hud-left,.hud-mid,.hud-right{display:flex;align-items:center;gap:12px}
.hud-mid{gap:10px}

.btn{
  width:34px;height:34px;border-radius:3px;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.85);
  transition:all .25s ease;
}
.btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.btn.is-on{background:var(--crimson);border-color:var(--crimson-l);color:#fff}
.btn svg{width:15px;height:15px;fill:currentColor}

.nav-arrow{
  width:38px;height:38px;border:none;background:transparent;cursor:pointer;border-radius:3px;
  display:grid;place-items:center;transition:all .25s ease;
}
.nav-arrow:hover{background:rgba(255,255,255,.12)}
.nav-arrow svg{width:22px;height:22px;fill:none;stroke:rgba(255,255,255,.85);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.nav-arrow:hover svg{stroke:#fff}

.counter{font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.1em;min-width:52px;text-align:center}
.counter b{color:#fff;font-size:15px;font-weight:700}

.hud-dots{position:fixed;bottom:78px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;gap:7px}
.hud-dots i{
  display:block;width:7px;height:7px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.22);transition:all .3s ease;
}
.hud-dots i:hover{background:rgba(255,255,255,.6)}
.hud-dots i.on{background:var(--crimson-l);transform:scale(1.6);
  box-shadow:0 0 12px rgba(196,43,61,.9)}

/* progress as a thin film-strip line */
.hud-prog{position:fixed;top:42px;left:0;right:0;height:2px;z-index:200;background:rgba(255,255,255,.08)}
.hud-prog span{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--navy-l),var(--crimson-l),var(--gold-l));
  box-shadow:0 0 12px rgba(196,43,61,.7);
  transition:width .7s var(--ease)}

/* depth rail — a vertical indicator of camera Z (pure decoration, cinematic) */
.depth-rail{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:200;
  width:2px;height:180px;background:rgba(255,255,255,.10);
}
.depth-rail span{position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--gold-l);box-shadow:0 0 14px rgba(228,194,137,.9);
  transition:top .8s var(--ease)}

.hint{
  position:fixed;bottom:74px;right:26px;z-index:200;
  font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.42);
  transition:opacity .6s ease;text-align:right;line-height:1.7;
}
.hint b{color:rgba(255,255,255,.8)}
.hint.hide{opacity:0}

.hint.hide{opacity:0}

/* ---------- notes drawer ---------- */
.notes-drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  padding:18px 40px 24px;color:#fff;
  background:linear-gradient(0deg,rgba(6,13,24,.98),rgba(10,22,40,.94));
  border-top:2px solid var(--gold);
  backdrop-filter:blur(10px);
  transform:translateY(100%);transition:transform .5s var(--ease);
  max-height:44vh;overflow:auto;
}
.notes-drawer.open{transform:translateY(0)}
.nd-head{display:flex;justify-content:space-between;align-items:center;
  font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--gold-l);margin-bottom:10px}
.nd-head button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;line-height:1}
.nd-body{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.9);max-width:1080px}

/* ---------- overview (a 3D wall of pages) ---------- */
.overview{
  position:fixed;inset:0;z-index:400;
  background:radial-gradient(120% 100% at 50% 40%, rgba(10,22,40,.94), rgba(3,7,14,.98));
  backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility 0s linear .4s;
  display:flex;flex-direction:column;padding:34px 46px;
  perspective:1400px;
}
.overview.open{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s}
.ov-head{display:flex;justify-content:space-between;align-items:center;
  font-size:12px;font-weight:700;letter-spacing:.26em;color:var(--gold-l);margin-bottom:22px}
.ov-head button{background:none;border:none;color:#fff;font-size:30px;cursor:pointer;line-height:1}
.ov-wall{
  flex:1;overflow:auto;
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-content:start;
  transform-style:preserve-3d;
  transform:rotateX(6deg);
}
.ov-item{
  border-radius:3px;padding:14px;cursor:pointer;text-align:left;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.13);
  transition:all .3s var(--ease);
}
.ov-item:hover{transform:translate3d(0,-8px,40px);border-color:var(--gold);
  box-shadow:0 24px 50px rgba(0,0,0,.5)}
.ov-item.on{border-color:var(--crimson-l);background:rgba(155,31,47,.22)}
.ov-item .oi-n{font-size:22px;font-weight:700;color:var(--gold-l);line-height:1}
.ov-item.on .oi-n{color:var(--crimson-l)}
.ov-item .oi-t{font-size:13px;line-height:1.35;margin-top:8px;color:rgba(255,255,255,.85)}
.ov-item .oi-bar{height:3px;margin-top:12px;border-radius:2px;
  background:linear-gradient(90deg,var(--navy-l),var(--crimson-l))}

/* ---------- intro title card ---------- */
#intro{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;
  background:#03070E;color:#fff;
  transition:opacity 1s ease,visibility 0s linear 1s;
}
#intro.gone{opacity:0;visibility:hidden}
#intro .in-wrap{text-align:center}
#intro .in-k{font-size:12px;letter-spacing:.4em;color:var(--gold-l);margin-bottom:18px}
#intro .in-t{font-size:46px;font-weight:700;letter-spacing:-.01em}
#intro .in-s{font-size:14px;letter-spacing:.2em;color:rgba(255,255,255,.5);margin-top:16px}
#intro .in-bar{width:180px;height:2px;margin:26px auto 0;background:rgba(255,255,255,.14);overflow:hidden}
#intro .in-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--crimson-l),var(--gold-l));
  animation:inBar 1.8s var(--ease) forwards}
@keyframes inBar{to{width:100%}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}