/* Night workspace — one colour per chapter */
:root{
  --paper:#0a0a0c; --ink:#f4f2ee; --mute:#8f8b83; --line:rgba(244,242,238,.14);
  --gold:#e9dcc0; --accent:#e9dcc0;
  --bar:7vh; --pad:max(6vw,24px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body.locked{overflow:hidden;height:100vh}
.scroll-space{height:800vh}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased;cursor:default}
body.idle{cursor:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#0a0a0c}
.mono{font-family:'Space Mono',monospace}

#gl,#gl canvas{position:fixed;inset:0;width:100%;height:100%;display:block}

/* Soft finishing layers */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 95% at 50% 48%,transparent 50%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.85) 100%)}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:3;opacity:.1;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* Typographic transitions: a giant word the camera flies through */
.tword{position:fixed;inset:0;z-index:6;display:grid;place-items:center;pointer-events:none;visibility:hidden;overflow:hidden}
.tw{position:relative;display:inline-block;font-weight:900;line-height:.8;letter-spacing:-.045em;text-transform:uppercase;color:#0a0a0c;-webkit-text-stroke:max(2px,.008em) var(--accent);white-space:nowrap;will-change:transform}
.tw .m{padding:.06em .02em .02em;margin:-.06em -.02em -.02em}

/* Scenes */
.stage{position:fixed;inset:0;z-index:5;pointer-events:none}
.sc{position:absolute;inset:0;visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--bar) + 4vh) var(--pad)}
.sc.side-left{align-items:flex-start;text-align:left}
.sc.side-right{align-items:flex-end;text-align:right}
.col{max-width:min(46vw,680px);display:grid}
.phase{grid-area:1/1;align-self:center}

.line{display:block}
.split .w{display:inline-block;white-space:nowrap}
.m{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .04em .1em;margin:-.12em -.04em -.1em}
.c{display:inline-block;will-change:transform,opacity,filter}

.kicker{margin:0 0 2.2vh;font-size:clamp(10px,1vw,13px);letter-spacing:.38em;text-transform:uppercase;color:var(--mute)}
.label{margin:0 0 2.4vh;font-size:clamp(10px,.95vw,12px);letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.mega{margin:0;font-weight:900;font-size:clamp(48px,11.5vw,190px);line-height:.88;letter-spacing:-.035em;text-transform:uppercase}
.big{margin:0;font-weight:900;font-size:clamp(40px,7vw,116px);letter-spacing:-.03em;line-height:.95;text-transform:uppercase}
.serif{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;letter-spacing:-.01em}
.gold{color:var(--gold)}
.stack{margin:0;font-weight:900;font-size:clamp(40px,6.4vw,108px);line-height:.92;letter-spacing:-.035em;text-transform:uppercase}
.stack.fit{font-size:clamp(32px,4.6vw,82px)}
.accent{color:var(--accent)}
.body{margin:3vh 0 0;font-size:clamp(14px,1.2vw,18px);line-height:1.6;color:rgba(244,242,238,.66);max-width:44ch}
.side-right .body,.side-right .lead{margin-left:auto}
.lead{margin:0;font-weight:700;font-size:clamp(20px,2.1vw,34px);line-height:1.2;letter-spacing:-.015em;max-width:24ch}
.lead-serif{margin:2.4vh 0 0;font-size:clamp(22px,2.6vw,42px);color:var(--accent)}
.statement{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--bar) + 10vh);margin:0;font-size:clamp(30px,4.6vw,76px);line-height:1.05;color:var(--ink)}
.m-a{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--bar) + 10vh)}
.cap{font-size:clamp(9px,.85vw,11px);letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}

.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:2.8vh}
.pills span{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:clamp(11px,.9vw,13px);color:var(--ink);background:rgba(16,16,20,.55);backdrop-filter:blur(6px)}

.intro-tag{margin:2.6vh 0 0;font-size:clamp(24px,3vw,48px)}
.codeline{display:flex;align-items:center;gap:2px;margin:3.2vh 0 0;font-size:clamp(12px,1.15vw,15px);color:var(--accent);padding:11px 15px;background:rgba(10,10,12,.7);border:1px solid var(--line);border-radius:10px;width:max-content;max-width:100%;backdrop-filter:blur(6px)}
.caret{display:inline-block;width:8px;height:1.1em;background:var(--accent);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9vh}
.ladder li{position:relative;display:flex;flex-direction:column;gap:3px;padding:.8vh 0 .8vh 18px;margin-left:calc(var(--i) * clamp(10px,1.6vw,26px));opacity:0}
.ladder li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform-origin:top;transform:scaleY(var(--p,0))}
.ladder span{font-size:clamp(9px,.85vw,11px);letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.ladder b{font-weight:800;font-size:clamp(15px,1.5vw,24px);letter-spacing:-.01em;line-height:1.15}
.ladder i{font-style:normal;font-size:clamp(12px,1vw,14px);line-height:1.45;color:rgba(244,242,238,.55)}
.ladder li.now b{color:var(--accent);font-size:clamp(20px,2.1vw,34px)}

.flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.6vh;max-width:40ch}
.side-right .flow{margin-left:auto}
.flow li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;text-align:left}
.flow em{grid-row:1/3;font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--accent);padding-top:.5em}
.flow b{font-weight:800;font-size:clamp(18px,1.8vw,28px);letter-spacing:-.01em;line-height:1.1}
.flow i{font-style:normal;font-size:clamp(12px,1vw,14px);line-height:1.45;color:rgba(244,242,238,.58)}

.pname{margin:0;font-weight:900;font-size:clamp(44px,6.2vw,120px);letter-spacing:-.04em;line-height:.9;text-transform:uppercase;white-space:nowrap}
.tagline-sm{margin:1.8vh 0 0;font-size:clamp(24px,2.8vw,46px);color:var(--accent)}
.features{list-style:none;margin:2.6vh 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:1vh 26px;font-size:clamp(9px,.85vw,11px);letter-spacing:.18em;text-transform:uppercase;color:rgba(244,242,238,.8)}
.side-right .features{margin-left:auto}
.features li{position:relative;padding-left:16px}
.features li::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:var(--accent)}
.side-right .features li{padding-left:0;padding-right:16px}
.side-right .features li::before{left:auto;right:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:3vh;font-size:clamp(9px,.85vw,11px);letter-spacing:.2em;text-transform:uppercase}
.side-right .chips{justify-content:flex-end}
.chips>*{padding:9px 14px;border:1px solid var(--line);border-radius:999px;color:rgba(244,242,238,.75);background:rgba(16,16,20,.55);backdrop-filter:blur(6px)}
.chips a{pointer-events:auto;color:#0a0a0c;background:var(--accent);border-color:var(--accent);transition:background .25s,color .25s}
.chips a:hover{background:var(--ink);border-color:var(--ink);color:#0a0a0c}

.tech{display:flex;flex-wrap:wrap;gap:8px;max-width:36em}
.tech span{padding:9px 15px;border-radius:10px;border:1px solid var(--line);background:rgba(16,16,20,.6);backdrop-filter:blur(6px);font:600 clamp(12px,1.05vw,15px)/1 'Archivo',sans-serif;color:var(--ink)}
.tech span:nth-child(3n+1){background:var(--accent);border-color:var(--accent);color:#0a0a0c}

.clients{list-style:none;margin:2.6vh 0 0;padding:0;display:flex;flex-direction:column;gap:.2vh;border-top:1px solid var(--line)}
.clients li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:1vh 0;border-bottom:1px solid var(--line)}
.clients b{font-weight:800;font-size:clamp(15px,1.45vw,22px);letter-spacing:-.01em}
.clients span{font-size:clamp(9px,.8vw,11px);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.reach{display:block;margin:3.4vh 0 1.2vh}
.countries{display:flex;flex-wrap:wrap;gap:6px 18px}
.countries span{font-weight:800;font-size:clamp(18px,2vw,30px);letter-spacing:-.01em;color:var(--accent)}
.and{margin-top:2vh;font-size:clamp(18px,1.9vw,30px)}

.flash{position:absolute;inset:0;display:grid;place-items:center}
.flash span{grid-area:1/1;font-weight:900;font-size:clamp(48px,12vw,200px);letter-spacing:-.04em;text-transform:uppercase;opacity:0;color:var(--ink)}
.flash span:nth-child(even){font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;text-transform:none;color:var(--accent)}

.sign{position:absolute;left:0;right:0;bottom:calc(var(--bar) + 5vh);display:flex;flex-direction:column;align-items:center}
.name{margin:0;font-weight:900;font-size:clamp(36px,6.6vw,110px);letter-spacing:-.035em;line-height:.95;text-transform:uppercase}
.tagline{margin:1.6vh 0 0;font-size:clamp(22px,2.8vw,44px)}
.services{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:2.6vh;font-size:clamp(9px,.85vw,11px);letter-spacing:.22em;text-transform:uppercase;color:rgba(244,242,238,.75)}
.services span::before{content:"◆ ";color:var(--accent)}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:3.2vh;pointer-events:auto}
.btn{appearance:none;cursor:pointer;font:600 14px/1 'Archivo',sans-serif;letter-spacing:.02em;padding:15px 28px;border-radius:999px;transition:background .25s,color .25s,border-color .25s,transform .25s;opacity:0}
.btn.solid{background:var(--ink);color:#0a0a0c;border:1px solid var(--ink)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{background:rgba(10,10,12,.4);color:var(--ink);border:1px solid rgba(244,242,238,.28);backdrop-filter:blur(8px)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn:hover{transform:translateY(-2px)}
.signature{display:block;overflow:visible}
.sig-ink{fill:var(--gold)}
.sig-glow{filter:drop-shadow(0 0 3px rgba(233,220,192,.75)) drop-shadow(0 0 14px rgba(233,220,192,.3))}
.sig-brush{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1.05}
#s-final .signature{position:absolute;left:50%;top:calc(var(--bar) + 3vh);height:38vh;width:auto;max-width:80vw;transform:translateX(-50%)}
.contact-line{margin:2.4vh 0 0;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);opacity:0}

/* HUD */
.hud{position:fixed;left:var(--pad);right:var(--pad);bottom:calc(var(--bar) * .5);transform:translateY(50%);z-index:8;display:flex;align-items:center;gap:16px;opacity:0;transition:opacity .5s}
body.entered:not(.idle) .hud,body.entered.ended .hud,body.entered.at-top .hud{opacity:1}
.hud-btn{appearance:none;background:none;border:0;padding:4px;cursor:pointer;color:var(--ink);width:28px;height:28px}
.eqi{display:flex;align-items:center;justify-content:center;gap:3px;height:100%}
.eqi i{display:block;width:3px;height:14px;border-radius:2px;background:var(--accent);transform-origin:center;animation:eqi .9s ease-in-out infinite}
.eqi i:nth-child(2){animation-delay:-.3s}.eqi i:nth-child(3){animation-delay:-.6s}.eqi i:nth-child(4){animation-delay:-.15s}
@keyframes eqi{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
body.muted .eqi i{animation:none;transform:scaleY(.18);background:var(--mute)}
.track{position:relative;flex:1;height:14px;cursor:pointer;display:flex;align-items:center}
.track::before{content:"";position:absolute;left:0;right:0;height:2px;background:rgba(244,242,238,.14);border-radius:2px}
.fill{position:absolute;left:0;height:2px;width:0;background:var(--accent);border-radius:2px}
.tick{position:absolute;top:50%;width:1px;height:8px;background:rgba(244,242,238,.3);transform:translateY(-50%)}
.tick b{position:absolute;bottom:12px;left:0;transform:translateX(-50%);font:400 9px 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);white-space:nowrap;opacity:0;transition:opacity .25s}
.track:hover .tick b{opacity:1}
.chapter{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);min-width:96px;text-align:right}
.sound-hint{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);white-space:nowrap;transition:opacity .5s}
body:not(.muted) .sound-hint,body.sound-off .sound-hint{opacity:0;pointer-events:none}

.scroll-hint{position:fixed;left:50%;bottom:calc(var(--bar) + 4vh);transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--mute);opacity:0;transition:opacity .6s;pointer-events:none}
.scroll-hint i{display:block;width:1px;height:44px;background:linear-gradient(var(--ink),transparent);transform-origin:top;animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
body.at-top .scroll-hint{opacity:1}

.skip{appearance:none;background:none;border:0;cursor:pointer;padding:0;position:fixed;top:calc(var(--bar) * .5);right:var(--pad);transform:translateY(-50%);z-index:8;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);transition:color .25s,opacity .5s}
.skip:hover{color:var(--accent)}
body.idle .skip{opacity:.35}
body.ended .skip{opacity:0;pointer-events:none}
body:not(.entered) .skip{opacity:0}

/* Loader — fades away on its own, no click needed */
.loader{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4vh;background:var(--paper)}
.loader .signature{width:min(260px,60vw);height:auto}
.loader .sig-brush{animation:sigloop 3.2s ease-in-out infinite}
@keyframes sigloop{0%{stroke-dashoffset:1.05}50%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-1.05}}
.loader p{margin:0;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--mute)}

@media (max-width:820px){
  :root{--bar:5vh}
  .sc.side-left,.sc.side-right{align-items:center;text-align:center;justify-content:flex-end;padding-bottom:calc(var(--bar) + 9vh)}
  .col{max-width:100%}
  .side-right .body,.body,.lead{margin-left:auto;margin-right:auto}
  .pills,.chips,.countries,.side-right .chips,.features,.tech{justify-content:center}
  .codeline,.flow,.features,.tech{margin-left:auto;margin-right:auto}
  .ladder{align-items:center}
  .ladder li{margin-left:0;padding-left:0;align-items:center}
  .ladder li::before,.ladder i,.flow i{display:none}
  .pname{font-size:clamp(40px,13vw,80px)}
  .stack.fit{font-size:clamp(30px,10vw,60px)}
  .kicker{letter-spacing:.2em;line-height:1.8;max-width:100%}
  .label{letter-spacing:.22em}
  .sound-hint{display:none}
}