/* motion.css - layout, scenes and animation for nullsovereign.com ().
   components.css  loads after this and owns buttons, links, form controls, focus.
   Static layout is the base (no JS / reduced motion). html.motion switches on the pinned scenes. */

:root{
  --void:#05060a; --panel:#0c0e16; --ink:#eef1f8; --muted:#a4adc2; --line:#232838;
  --ember:#ff7a1a; --amber:#ffb020; --gold:#ffd76a; --crimson:#ff5a70; --nebula:#7a5cff;
  --split-r:#e2453c; --split-b:#3d63ff;
  --gutter:max(16px,4vw);
  --vh:100vh;
  --display:'Unbounded','Arial Black','Helvetica Neue',Arial,sans-serif;
  --body:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --ease:cubic-bezier(.16,.84,.24,1);
}
@supports (height:100svh){:root{--vh:100svh}}
*{box-sizing:border-box}
html{background:var(--void);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--void);color:var(--ink);font:400 1.0625rem/1.6 var(--body);overflow-x:clip}
img,video,canvas{display:block;max-width:100%}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{width:100%;max-width:1480px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:-999px;top:8px;z-index:200;padding:.6rem .9rem;font-weight:600}
.skip:focus{left:8px}

/* ---------- global overlays ---------- */
.veil{position:fixed;inset:0;z-index:40;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(0,0,0,.5) 100%)}
.fx{position:fixed;inset:0;width:100%;height:100%;z-index:35;pointer-events:none;display:none}
.motion .fx{display:block}

/* ---------- HUD ---------- */
.hud{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gutter);background:linear-gradient(rgba(5,6,10,.9) 0,rgba(5,6,10,.9) 68%,rgba(5,6,10,0));pointer-events:none}
.hud a{pointer-events:auto}
.hud-mark{display:inline-block;padding:16px 8px;margin:-16px -8px;font:800 .78rem/1 var(--display);letter-spacing:.02em;text-decoration:none;color:var(--ink)}
.hud-links{display:flex;gap:clamp(14px,2.4vw,34px)}
.hud-links a{font:500 .95rem/1 var(--body);letter-spacing:.03em;padding:15px 6px;text-decoration:none;display:inline-block}
.hud-bar{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.06)}
.hud-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ember),var(--amber));transform:scaleX(var(--prog,0));transform-origin:0 50%}
.hud-rail{position:fixed;right:clamp(8px,1.4vw,22px);top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:16px}
.motion .hud-rail{display:flex}
.hud-rail li{height:2px;width:14px;position:relative}
.hud-rail i{position:absolute;right:0;top:0;height:2px;width:100%;background:rgba(238,241,248,.38);transform-origin:100% 50%;transition:transform .35s var(--ease),background-color .25s}
.hud-rail li.on i{transform:scaleX(2.2);background:var(--amber)}
@media (max-width:640px){.hud-links li:not(:last-child){display:none}.hud-rail{display:none!important}}

/* ---------- boot overlay ---------- */
.boot{position:fixed;inset:0;z-index:300;background:var(--void);display:none;place-items:center;transition:clip-path .7s var(--ease),opacity .4s .5s;clip-path:inset(0 0 0 0)}
.booting .boot{display:grid}
.boot.out{clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none}
.boot-in{width:min(560px,86vw)}
.boot-title{font:800 clamp(1.6rem,6.4vw,3.4rem)/1 var(--display);letter-spacing:-.01em;position:relative;margin:0 0 1.2rem;word-break:keep-all}
.boot-title::before,.boot-title::after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none}
.boot-title::before{color:var(--split-r);mix-blend-mode:screen}
.boot-title::after{color:var(--split-b);mix-blend-mode:screen}
.boot.glitch .boot-title::before{opacity:.8;transform:translateX(-6px);clip-path:inset(10% 0 55% 0)}
.boot.glitch .boot-title::after{opacity:.8;transform:translateX(6px);clip-path:inset(55% 0 10% 0)}
.boot-line{font:500 1rem/1.3 var(--body);color:var(--muted);letter-spacing:.04em;margin-bottom:1rem}
.boot-bar{height:2px;background:rgba(255,255,255,.1);overflow:hidden}
.boot-bar i{display:block;height:100%;background:var(--amber);transform:scaleX(var(--bp,0));transform-origin:0 50%}
.boot-pct{font:500 .9rem/1 var(--body);color:var(--muted);margin-top:.7rem;font-variant-numeric:tabular-nums}

/* ---------- shared scene pieces (static base) ---------- */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,6,10,.82) 0,rgba(5,6,10,.42) 42%,rgba(5,6,10,0) 78%),
             linear-gradient(0deg,rgba(5,6,10,.78) 0,rgba(5,6,10,0) 42%)}
.big{font:800 clamp(2.1rem,7vw,6.8rem)/.98 var(--display);letter-spacing:-.025em}
.big .ln,.fin-title .ln,.fl-title .ln,.card-name .ln,.bn .ln{display:block}
.k2{--k:2}.k3{--k:3}.k4{--k:4}.k5{--k:5}.k6{--k:6}.k7{--k:7}.k8{--k:8}.k9{--k:9}.k10{--k:10}.k11{--k:11}.k12{--k:12}.k13{--k:13}.k14{--k:14}

.tear{display:none}

/* static sections */
.track{position:relative}
.pin{position:relative;padding:clamp(56px,10vw,110px) var(--gutter)}
.cv,.srcs [data-deco],.boss-mask,.cue{display:none}
.hero .pin{min-height:var(--vh);display:flex;align-items:flex-end;padding-top:100px;overflow:hidden}
.hero-layers{position:absolute;inset:0}
.layer{position:absolute}
.l-sky,.l-ceil{inset:0;width:100%;height:100%;object-fit:cover}
.l-far,.l-mid{left:-15%;bottom:0;height:66%;width:auto;min-width:130%;object-fit:cover;object-position:left bottom}
.l-queen{right:1%;top:9%;width:clamp(210px,34vw,560px);height:auto}
.l-organic{left:68%;bottom:20%;width:clamp(130px,17vw,320px);height:auto}
.l-fog{inset:auto 0 0 0;height:46%;background:linear-gradient(0deg,rgba(5,6,10,.95),transparent)}
.hero-copy{position:relative;padding-bottom:clamp(28px,8vh,80px)}
.title{font:800 clamp(2.2rem,9.6vw,10.4rem)/.9 var(--display);letter-spacing:-.03em;position:relative;margin-bottom:.22em}
.title .ln{display:block;white-space:nowrap}
.title .ch{display:inline-block;will-change:transform}
.title::before,.title::after{content:attr(data-text);position:absolute;left:0;top:0;width:min-content;opacity:0;pointer-events:none;mix-blend-mode:screen;white-space:normal}
.title::before{color:var(--split-r)}.title::after{color:var(--split-b)}
.tagline{font:800 clamp(.85rem,2.6vw,1.3rem)/1.2 var(--body);letter-spacing:.34em;color:#ffd9b0;margin:0 0 1.1rem .1em;min-height:1.2em}
.desc{font:400 clamp(1.05rem,2.2vw,1.35rem)/1.5 var(--body);color:#dfe5f3;max-width:34ch;margin-bottom:1.5rem}
.beats{position:relative}
.beat{padding:0 0 34px}
.beat:empty{display:none}
.bn .ln{font:800 clamp(2.2rem,7vw,6.4rem)/.98 var(--display);letter-spacing:-.025em}
.realms .pin,.wipe .pin{background:var(--panel)}
.realm-head{font:500 1rem/1 var(--display);color:var(--amber);margin:0 0 24px;display:inline-block;padding:9px 12px;background:rgba(5,6,10,.94)}
.srcs{display:grid;gap:18px;margin-top:20px}
.srcs>*{width:100%}
.srcs img,.srcs video{aspect-ratio:16/9;object-fit:cover;background:#02030a;border:1px solid var(--line)}
.b-fig{margin:0}
.b-fig figcaption{font:800 clamp(1.6rem,5vw,3rem)/1 var(--display);padding:12px 0 18px}
.boss-name{display:none}
.rm .boss-name,html:not(.motion) .boss-name{display:none}
.boss-scene .scrim,.wipe .scrim,.flight .scrim{display:none}
.boss-scene .b-fig [data-state=sil]{display:none}
.boss-scene .b-fig.sil-only [data-state=sil]{display:block}
.boss-rail,.sr-list{display:none}
.bodies .pin{display:grid;gap:22px}
.card{position:relative;overflow:hidden;aspect-ratio:16/10;border:1px solid rgba(255,255,255,.14);background:#02030a}
.card-stage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-shade{position:absolute;inset:0;background:linear-gradient(270deg,rgba(5,6,10,.72),transparent 60%),linear-gradient(0deg,rgba(5,6,10,.7),transparent 50%)}
.card-name{position:absolute;right:5%;bottom:7%;text-align:right}
.card-name .ln{font:800 clamp(1.7rem,6vw,5rem)/1 var(--display);letter-spacing:-.025em}
.card-stage{object-position:35% 50%}
.flight .pin{display:grid;gap:18px}
.fl-bg{position:absolute;inset:0;overflow:hidden}
.fl-bg img{width:100%;height:100%;object-fit:cover;opacity:.85}
.fl-title,.fl-org,.flight .fl-cv{position:relative}
.fl-title .ln{font:800 clamp(2.2rem,8.4vw,8.8rem)/.96 var(--display);letter-spacing:-.03em}
.fl-org{width:clamp(150px,34vw,300px);margin-left:var(--gutter);position:relative}
.fl-org img{width:100%;height:auto}
.fl-org img:not(.on){display:none}
.fl-cv{display:none}
.finale{position:relative;overflow:hidden;padding:clamp(84px,13vh,150px) 0 clamp(40px,7vh,90px)}
.fin-bg{position:absolute;inset:0}
.fin-bg img{width:100%;height:100%;object-fit:cover;object-position:78% 40%;opacity:.38;filter:saturate(.7)}
.fin-in{position:relative}
.fin-title .ln{font:800 clamp(2.6rem,9vw,8.6rem)/.92 var(--display);letter-spacing:-.035em}
.plat{margin:clamp(28px,6vh,64px) 0 clamp(26px,5vh,48px)}
.plat-h{font:500 clamp(.95rem,1.6vw,1.2rem)/1.2 var(--display);color:var(--amber);margin-bottom:1rem}
.plat-l{font:500 clamp(1.15rem,2.6vw,1.8rem)/1.35 var(--body);color:var(--ink);max-width:none;margin-bottom:.25rem}
.signup-form{max-width:640px}
.signup-form label{display:block;margin:0 0 .5rem}
.field{display:flex;flex-direction:column;gap:14px}
@media (min-width:600px){.field{flex-direction:row;align-items:flex-start}.field .btn{flex:none;height:52px}}
.foot{position:relative;z-index:2;padding:36px 0 56px;background:var(--void);color:var(--muted);font-size:.95rem}
.foot-in{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline}
.foot-name{font:800 .9rem/1 var(--display);color:var(--ink)}
.hero .cta{margin:0}

/* ---------- reduced motion: calm fades only ---------- */
.rm .veil{background:radial-gradient(ellipse at 50% 45%,transparent 60%,rgba(0,0,0,.4) 100%)}
.js.rm [data-fade]{opacity:0;transition:opacity .8s ease}
.js.rm [data-fade].in{opacity:1}

/* =====================================================================
   MOTION MODE
   ===================================================================== */
.motion .track{height:calc(var(--vh)*var(--k,1))}
.motion .pin{position:sticky;top:0;height:var(--vh);padding:0;overflow:hidden}
.motion .srcs,.motion .b-fig{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;clip-path:inset(50%);margin:0;display:block}
.motion .srcs>*,.motion .srcs [data-deco]{display:block;width:1px;height:1px}
.motion .b-fig figcaption{display:none}
.motion .b-fig [data-state=sil]{display:block}
.motion .cv{display:block;position:absolute;inset:0;width:100%;height:100%}
.motion .boss-name,.motion .boss-mask{display:block}
.motion .boss-scene .scrim,.motion .wipe .scrim,.motion .flight .scrim{display:block}
.motion .realms .pin,.motion .wipe .pin{background:var(--void)}

.motion .beats{position:absolute;inset:0;padding:0 var(--gutter);max-width:none;pointer-events:none}
.motion .beat{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(54px,13vh,150px);padding:0;opacity:0;transition:opacity .3s}
.motion .beat.on{opacity:1}
.motion .beat .ln{opacity:0;transform:translate3d(var(--sx,-5vw),0,0);transition:transform .8s var(--ease),opacity .45s}
.motion .beat .ln:nth-child(even){--sx:5vw}
.motion .beat.on .ln{opacity:1;transform:none}
.motion .beat.on .ln:nth-child(2){transition-delay:.09s}
.motion .beat.on .ln:nth-child(3){transition-delay:.18s}
.motion .beat .bn{max-width:none}
.motion .boss-mask .ln{height:.62em;margin:.18em 0;background:rgba(238,241,248,.16);clip-path:polygon(0 0,100% 0,96% 100%,0 100%)}
.bn-mask .ln[data-w="1"]{width:0.66em}
.bn-mask .ln[data-w="2"]{width:1.32em}
.bn-mask .ln[data-w="3"]{width:1.98em}
.bn-mask .ln[data-w="4"]{width:2.64em}
.bn-mask .ln[data-w="5"]{width:3.30em}
.bn-mask .ln[data-w="6"]{width:3.96em}
.bn-mask .ln[data-w="7"]{width:4.62em}
.bn-mask .ln[data-w="8"]{width:5.28em}
.bn-mask .ln[data-w="9"]{width:5.94em}
.bn-mask .ln[data-w="10"]{width:6.60em}
.bn-mask .ln[data-w="11"]{width:7.26em}
.bn-mask .ln[data-w="12"]{width:7.92em}
.bn-mask .ln[data-w="13"]{width:8.58em}
.bn-mask .ln[data-w="14"]{width:9.24em}
.bn-mask .ln[data-w="15"]{width:9.90em}
.bn-mask .ln[data-w="16"]{width:10.56em}

.motion .beat .ln.jit{animation:jit .18s steps(2,end) 1}
@keyframes jit{0%{transform:translate3d(-8px,0,0) skewX(-6deg)}50%{transform:translate3d(6px,0,0)}100%{transform:none}}

/* hero */
.motion .hero .pin{display:block}
.motion .hero-layers{inset:-6% -4%}
.motion .hero-layers .layer{will-change:transform}
.motion .scrim{display:block}
.motion .hero-copy{position:absolute;left:0;right:0;bottom:clamp(40px,11vh,120px);padding-bottom:0}
.motion .cue{display:block;position:absolute;left:50%;bottom:16px;width:1px;height:46px;background:linear-gradient(var(--ink),transparent);transform-origin:50% 0;animation:cue 2.4s ease-in-out infinite;opacity:.5}
@keyframes cue{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.title.burst::before{opacity:.75;transform:translateX(-7px);clip-path:inset(8% 0 55% 0)}
.title.burst::after{opacity:.75;transform:translateX(7px);clip-path:inset(52% 0 6% 0)}
.title.burst .ch{transform:none}
.tagline .cur{display:inline-block;width:.5em;height:1em;background:var(--amber);vertical-align:-.12em;margin-left:.2em;animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.motion .hero-copy .desc,.motion .hero-copy .cta{opacity:0;transform:translate3d(-3vw,0,0);transition:opacity .7s,transform .9s var(--ease)}
.motion .hero-copy .cta{transition-delay:.12s}
.motion .hero-copy.live .desc,.motion .hero-copy.live .cta{opacity:1;transform:none}

/* flight */
.motion .flight .pin{display:block}
.motion .fl-bg{inset:0 -6%}
.motion .fl-bg img{opacity:.9;will-change:transform}
.motion .fl-title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);max-width:none}
.motion .fl-title .ln{opacity:1;transform:translate3d(var(--fx,0),0,0);will-change:transform;white-space:nowrap}
.motion .fl-cv{display:block;position:absolute;inset:0;width:100%;height:100%}
.motion .fl-org{position:absolute;left:0;top:0;width:clamp(150px,19vw,300px);margin:0;will-change:transform}
.motion .fl-org img{position:absolute;left:0;top:0;opacity:0;display:block}
.motion .fl-org img:first-child{position:relative}
.motion .fl-org img.on{opacity:1}
.motion .fl-org.swap{animation:jit .2s steps(2,end) 1}

/* bodies */
.motion .bodies .pin{display:block;background:var(--void)}
.motion .card{position:absolute;left:50%;top:50%;width:min(88vw,1180px);height:min(calc(var(--vh)*.74),680px);aspect-ratio:auto;transform:translate3d(-50%,-50%,0);will-change:transform,opacity;
  box-shadow:0 30px 90px rgba(0,0,0,.7)}
.motion .card-name{right:5%;bottom:7%}
.motion .card-name .ln{opacity:0;transform:translate3d(5vw,0,0);transition:transform .8s var(--ease),opacity .45s}
.motion .card.on .card-name .ln{opacity:1;transform:none}

/* boss scene */
.motion .boss-rail{display:flex;position:absolute;right:calc(var(--gutter) + 18px);bottom:clamp(54px,13vh,150px);gap:8px}
.boss-rail i{width:24px;height:3px;background:rgba(238,241,248,.25);transition:background-color .3s}
.boss-rail i.on{background:var(--amber)}

/* finale */
.motion .fin-bg{inset:-8% 0}
.motion .fin-bg img{will-change:transform}
.motion .fin-title .ln{opacity:0;transform:translate3d(-6vw,0,0);transition:transform 1s var(--ease),opacity .5s}
.motion .fin-title.on .ln{opacity:1;transform:none}
.motion .fin-title.on .ln:nth-child(2){transition-delay:.1s}
.motion .plat-h,.motion .plat-l{opacity:0;transform:translate3d(5vw,0,0);transition:transform .9s var(--ease),opacity .5s}
.motion .plat.on .plat-h,.motion .plat.on .plat-l{opacity:1;transform:none}
.motion .plat.on .plat-l:nth-of-type(1){transition-delay:.12s}
.motion .plat.on .plat-l:nth-of-type(2){transition-delay:.24s}

/* tears: torn seams between sections */
.motion .tear{display:block;position:relative;z-index:5;height:12vh;margin:-6vh 0;background:var(--void);pointer-events:none}
.tear b{position:absolute;left:0;right:0;height:2px;opacity:.7;will-change:transform}
.tear b:nth-child(1){top:32%;background:var(--split-r)}
.tear b:nth-child(2){top:58%;background:var(--split-b);height:3px}
.tear b:nth-child(3){top:76%;background:var(--ink);opacity:.25;height:1px}

@media (max-width:640px){
  .big{font-size:clamp(2rem,10.5vw,3.4rem)}
  .motion .card{width:90vw;height:min(calc(var(--vh)*.7),600px)}
  .motion .beat{bottom:12vh}
  .fl-org{width:46vw}
}
@media (prefers-reduced-motion:reduce){.cue{animation:none}}

/* additions */
.title .ch{text-shadow:calc(var(--rg,0)*-1px) 0 rgba(226,69,60,.85),calc(var(--rg,0)*1px) 0 rgba(61,99,255,.85)}
.motion .hero-copy.settled .desc,.motion .hero-copy.settled .cta{transition:none}
.card-dim{position:absolute;inset:0;background:var(--void);opacity:0;pointer-events:none}
.boot-bar i{transform:scaleX(var(--bp,0))}
.signup-form.done .field,.signup-form.done label,.signup-form.done .privacy{display:none}
.motion html{scroll-behavior:auto}
@media (max-width:640px){.big{font-size:clamp(1.9rem,9.2vw,3rem)}.title{font-size:10.4vw}.card-stage{object-position:16% 50%}}

/* footer mail links: bare words, spacing only */
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-links a,.foot-in p a{display:inline-block;padding:10px 0}

.motion .fl-title{z-index:3}
.motion .fl-org,.motion .fl-cv{z-index:1}

/* motion opt-in/out button (only rendered when the OS requests reduced motion) */
.motion-toggle{position:fixed;right:var(--gutter,16px);bottom:16px;z-index:60;font:600 11px/1 var(--ns-mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#e8eaf2;background:rgba(5,6,10,.85);border:1px solid #5a6078;padding:10px 12px;cursor:pointer}
.motion-toggle:hover,.motion-toggle:focus-visible{border-color:var(--ns-amber,#ffb000);color:var(--ns-amber,#ffb000);outline:none}