/* ============================================================
   CTRLHex — 3D scrollytelling journey
   obsidian + champagne · "precision instrument"
   ============================================================ */

:root{
  --bg:        #0a0a0c;
  --ink:       #ECEAE4;
  --muted:     #a39f95;
  --faint:     #6a675f;
  --line:      rgba(236,234,228,0.12);
  --line-soft: rgba(236,234,228,0.06);
  --gold:      #c8a76d;
  --gold-hi:   #e8d6ad;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;
  --mono:  'JetBrains Mono', monospace;

  --gut: clamp(24px, 6vw, 90px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:300; line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---------- fixed world ---------- */
#scene{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block; }
/* WebGL unavailable: hide the dead canvas; body --bg + .grade overlay carry the backdrop. */
html.no-webgl #scene{ display:none; }
.grade{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 44%, transparent 55%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(10,10,12,.55), transparent 22% 78%, rgba(10,10,12,.65)); }
.grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- scroll track ---------- */
.track{ position:relative; width:1px; height:780vh; pointer-events:none; }

/* ---------- loader ---------- */
.loader{ position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  transition:opacity 1.1s ease .2s, visibility 1.1s .2s; }
.loader.done{ opacity:0; visibility:hidden; }
.loader-word{ font-family:var(--serif); font-weight:300; font-size:2rem; }
.loader-word em{ font-style:italic; color:var(--gold); }
.loader-line{ width:170px; height:1px; background:var(--line); overflow:hidden; }
.loader-line i{ display:block; height:100%; width:0; background:var(--gold); transition:width .2s ease; }
.loader-sub{ font-family:var(--mono); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--faint); }

/* ---------- typography primitives ---------- */
.eyebrow, .ch-no{ font-family:var(--mono); font-size:.7rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold); display:inline-block; }
h1,h2{ font-family:var(--serif); font-weight:300; line-height:1.02; letter-spacing:-0.02em; }
h1{ font-size:clamp(3rem,8vw,6rem); }
h2{ font-size:clamp(2.3rem,5.6vw,4.4rem); }
h1 em, h2 em{ font-style:italic; color:var(--gold-hi); font-weight:400; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--sans); font-weight:500;
  font-size:.92rem; padding:.82em 1.5em; border-radius:2px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:background .35s, color .35s, border-color .35s, transform .35s; }
.btn .arrow{ transition:transform .35s; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-solid{ background:var(--gold); color:#1a1408; }
.btn-solid:hover{ background:var(--gold-hi); }
.btn-outline{ border-color:var(--line); color:var(--ink); background:rgba(10,10,12,.3); backdrop-filter:blur(6px); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-hi); }

/* ---------- nav ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--gut); }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);
  mix-blend-mode:difference; }
.brand-mark{ width:18px; height:18px; }
.brand-mark svg{ width:100%; height:100%; }
.brand-mark polygon{ fill:none; stroke:var(--gold); stroke-width:6; }
.brand-name{ font-family:var(--serif); font-weight:400; font-size:1.28rem; }
.brand-name em{ font-style:italic; color:var(--gold); }

/* ---------- progress rail ---------- */
.rail{ position:fixed; right:clamp(16px,3vw,40px); top:50%; transform:translateY(-50%);
  z-index:55; display:flex; align-items:flex-start; gap:16px; }
.rail-track{ position:relative; width:1px; height:230px; background:var(--line); margin-top:6px; }
.rail-track i{ position:absolute; top:0; left:0; width:100%; height:0; background:var(--gold);
  transition:height .15s linear; }
.rail-dots{ list-style:none; display:flex; flex-direction:column; justify-content:space-between;
  height:240px; }
.rail-dots li{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.rail-dots li span{ width:6px; height:6px; border-radius:50%; background:var(--faint);
  transition:background .3s, transform .3s; flex:none; }
.rail-dots li em{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); font-style:normal; opacity:0; transform:translateX(6px);
  transition:opacity .3s, transform .3s, color .3s; white-space:nowrap; }
.rail-dots li:hover em{ opacity:1; transform:none; color:var(--muted); }
.rail-dots li.on span{ background:var(--gold); transform:scale(1.5); }
.rail-dots li.on em{ opacity:1; transform:none; color:var(--gold-hi); }
@media (max-width:720px){ .rail{ display:none; } }

/* ---------- chapter stage ---------- */
.stage{ position:fixed; inset:0; z-index:40; pointer-events:none; }
.chapter{ position:absolute; inset:0; display:flex; align-items:center; padding:0 var(--gut);
  opacity:0; visibility:hidden; transition:opacity .85s ease, visibility .85s; }
.chapter.active{ opacity:1; visibility:visible; }
.chapter.left{ justify-content:flex-start; }
.chapter.right{ justify-content:flex-end; }
.chapter.center{ justify-content:center; text-align:center; }

.chapter .inner{ max-width:540px; transform:translateY(26px);
  transition:transform 1s cubic-bezier(.2,.6,.2,1); }
.chapter.active .inner{ transform:none; }
.chapter.center .inner{ max-width:680px; }

.chapter h1, .chapter h2{ margin:22px 0 24px; }
.chapter p{ color:var(--muted); font-size:clamp(1.02rem,1.5vw,1.18rem); max-width:460px; }
.chapter.center p{ margin-inline:auto; }

/* interactive bits opt back into pointer events */
.chapter .inner a, .chapter .inner button, .chapter .inner input{ pointer-events:auto; }

/* shadow plate so text stays legible over bright chrome */
.chapter .inner{ text-shadow:0 2px 40px rgba(8,8,10,.85), 0 1px 10px rgba(8,8,10,.7); }

/* scroll cue */
.cue{ margin-top:40px; display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:var(--faint); }
.cue i{ width:1px; height:42px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.cue i::after{ content:''; position:absolute; inset:0; height:14px; background:var(--gold-hi);
  animation:drop 2s infinite; }
@keyframes drop{ 0%{transform:translateY(-16px)} 100%{transform:translateY(44px)} }

/* final chapter form */
.cta-form{ display:flex; gap:10px; max-width:440px; margin:36px auto 0; flex-wrap:wrap; justify-content:center; }
.cta-form input{ flex:1; min-width:210px; padding:.9em 1.2em; border-radius:2px;
  background:rgba(236,234,228,0.04); border:1px solid var(--line); color:var(--ink);
  font-family:var(--sans); font-size:.98rem; transition:border-color .3s; }
.cta-form input::placeholder{ color:var(--faint); }
.cta-form input:focus{ outline:none; border-color:var(--gold); }
.final-foot{ display:block; margin-top:42px; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .cue i::after{ display:none; }
}