/* Neptox HQ — toegangssequentie.
 *
 * Ontwerp van Isac, overgenomen uit `Crazy tech home page`. Twee dingen zijn
 * bewust aangepast en verder niets:
 *   1. de regels die op `body` aangrepen staan nu op `body.hq-locked`, want
 *      achtergrond, kleur en `overflow:hidden` mogen het dashboard niet raken
 *      zodra er is ingelogd;
 *   2. het geheel hangt onder `#login`, dat na het inloggen wordt verborgen.
 * De scèneklassen `body.breach`, `body.entered` en `body.charged` zijn ongewijzigd
 * gebleven; die gelden alleen zolang het toegangsscherm zichtbaar is.
 */

:root{
  --void:#070b14;
  --deep:#0b1220;
  --petrol:#16233a;
  --line:rgba(90,120,170,.26);
  --line-soft:rgba(90,120,170,.11);
  --ice:#e9eef6;
  --ice-dim:rgba(233,238,246,.48);
  --ice-faint:rgba(233,238,246,.24);
  --gold:#5f7db0;
  --copper:#8fa8d4;
  --cyan:#2fb6c9;
  --grid:44px;
  --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body.hq-locked{
  margin:0;
  background:var(--void);
  color:var(--ice);
  font-family:var(--ui);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px;}
::selection{background:rgba(47,182,201,.24);color:var(--ice);}

/* ─── stage ─────────────────────────────────────────────── */
.stage{
  position:fixed;inset:0;
  display:grid;place-items:center;
  padding:max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  isolation:isolate;
}

/* ─── background: one layered field ─────────────────────── */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}

.field .ground{
  position:absolute;inset:-10%;
  background:
    radial-gradient(120% 90% at 50% 46%, #14243c 0%, #0b1220 40%, var(--void) 76%);
}
#fieldCanvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;animation:canvasIn 2.4s .5s ease-out forwards;
}
@keyframes canvasIn{to{opacity:1;}}
.field .grid{
  position:absolute;inset:-20%;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:var(--grid) var(--grid);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 48%, #000 0%, rgba(0,0,0,.55) 45%, transparent 82%);
          mask-image:radial-gradient(70% 60% at 50% 48%, #000 0%, rgba(0,0,0,.55) 45%, transparent 82%);
  opacity:0;
  animation:gridIn 2.2s .25s ease-out forwards, drift 60s linear 2s infinite;
}
.field .grid.fine{
  background-size:calc(var(--grid)/4) calc(var(--grid)/4);
  opacity:0;
  animation:gridInFine 2.6s .5s ease-out forwards;
}
/* single coherent sweep: light passes, grid answers */
.field .sweep{
  position:absolute;left:-30%;right:-30%;height:52vh;top:-60vh;
  background:linear-gradient(180deg, transparent, rgba(47,182,201,.055) 42%, rgba(95,125,176,.05) 52%, transparent);
  transform:rotate(-6deg);
  animation:sweep 26s 2s cubic-bezier(.42,0,.32,1) infinite;
}
.field .rule{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 22%, rgba(47,182,201,.34) 50%, var(--line) 78%, transparent);
  opacity:.5;
}
.field .rule.r1{top:23%;animation:slide 58s linear infinite;}
.field .rule.r2{top:71%;animation:slide 74s linear -12s infinite reverse;opacity:.32;}
.field .rule.r3{top:44%;height:1px;opacity:.16;
  background:linear-gradient(90deg,transparent,rgba(95,125,176,.5),transparent);
  animation:slide 96s linear -20s infinite;}
.field .node{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px rgba(47,182,201,.9);
}
.field .node.n1{top:23%;margin-top:-1px;animation:travel 58s linear infinite;}
.field .node.n2{top:71%;margin-top:-1px;background:var(--gold);box-shadow:0 0 8px rgba(95,125,176,.8);animation:travel 74s linear -18s infinite reverse;}
.field .node.n3{top:44%;margin-top:-1px;width:2px;height:2px;opacity:.7;animation:travel 96s linear -6s infinite;}
.field .vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(78% 66% at 50% 46%, transparent 42%, rgba(2,5,7,.55) 78%, rgba(2,5,7,.92) 100%),
    linear-gradient(180deg, rgba(2,5,7,.5), transparent 22%, transparent 78%, rgba(2,5,7,.6));
}

/* perspective deck — the floor of the room */
.field .deck{
  position:absolute;left:-60%;right:-60%;bottom:-4%;height:48vh;
  background-image:
    linear-gradient(90deg, rgba(90,120,170,.16) 1px, transparent 1px),
    linear-gradient(rgba(90,120,170,.16) 1px, transparent 1px);
  background-size:72px 72px;
  transform:perspective(560px) rotateX(75deg);
  transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent 4%, #000 58%, transparent);
          mask-image:linear-gradient(180deg, transparent 4%, #000 58%, transparent);
  opacity:0;
  animation:deckIn 2.4s .7s ease-out forwards, deckRun 18s linear 2s infinite;
}
@keyframes deckIn{to{opacity:.55;}}
@keyframes deckRun{to{background-position:0 72px, 0 72px;}}

/* instrument rings behind the mark */
.field .reticle{
  position:absolute;left:50%;top:50%;
  width:min(126vmin,1020px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  opacity:0;animation:retIn 2.6s .8s ease-out forwards;
}
@keyframes retIn{to{opacity:.6;}}
.field .reticle svg{width:100%;height:100%;display:block;overflow:visible;}
.field .reticle .rot{transform-origin:50% 50%;animation:spinSlow 220s linear infinite;}
.field .reticle .rot.b{animation-duration:320s;animation-direction:reverse;}
.field .reticle .rot.c{animation-duration:130s;}
@keyframes spinSlow{to{transform:rotate(360deg);}}

/* radar sweep */
.field .radar{
  position:absolute;left:50%;top:50%;
  width:min(116vmin,920px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, rgba(47,182,201,.16), rgba(47,182,201,.03) 16%, transparent 30%);
  -webkit-mask-image:radial-gradient(circle, transparent 33%, #000 41%, #000 76%, transparent 82%);
          mask-image:radial-gradient(circle, transparent 33%, #000 41%, #000 76%, transparent 82%);
  opacity:0;animation:radarIn 2s 1.1s ease-out forwards, sweepSpin 52s linear 1.1s infinite;
}
@keyframes radarIn{to{opacity:.85;}}
@keyframes sweepSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}

.field .scanlines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(180deg, rgba(233,238,246,.028) 0 1px, transparent 1px 3px);
  opacity:.7;
}

/* ─── HUD frame: brackets, rails, telemetry ticks ───────── */
.hud{position:fixed;inset:0;z-index:3;pointer-events:none;
  opacity:0;animation:hudIn 1.4s 1.2s ease-out forwards;}
@keyframes hudIn{to{opacity:1;}}
.hud .corner{position:absolute;width:52px;height:52px;border:1px solid rgba(95,125,176,.45);}
.hud .corner::after{content:"";position:absolute;width:5px;height:5px;background:rgba(95,125,176,.7);}
.hud .corner.tl{top:20px;left:20px;border-right:0;border-bottom:0;}
.hud .corner.tl::after{top:-1px;left:-1px;}
.hud .corner.tr{top:20px;right:20px;border-left:0;border-bottom:0;}
.hud .corner.tr::after{top:-1px;right:-1px;}
.hud .corner.bl{bottom:20px;left:20px;border-right:0;border-top:0;}
.hud .corner.bl::after{bottom:-1px;left:-1px;}
.hud .corner.br{bottom:20px;right:20px;border-left:0;border-top:0;}
.hud .corner.br::after{bottom:-1px;right:-1px;}

.hud .ticks{
  position:absolute;left:90px;right:90px;height:7px;
  background:repeating-linear-gradient(90deg, rgba(233,238,246,.20) 0 1px, transparent 1px 24px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hud .ticks.top{top:21px;}
.hud .ticks.bottom{bottom:21px;}
.hud .rail{
  position:absolute;top:90px;bottom:90px;width:7px;
  background:repeating-linear-gradient(180deg, rgba(233,238,246,.14) 0 1px, transparent 1px 24px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.hud .rail.left{left:21px;}
.hud .rail.right{right:21px;}
.hud .cursor{
  position:absolute;top:19px;width:2px;height:11px;background:var(--cyan);
  box-shadow:0 0 10px rgba(47,182,201,.9);
  animation:cursorRun 46s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes cursorRun{
  0%{left:90px;opacity:0;}
  6%{opacity:1;}
  46%{left:calc(100% - 92px);opacity:1;}
  54%{left:calc(100% - 92px);opacity:1;}
  94%{left:90px;opacity:1;}
  100%{left:90px;opacity:0;}
}

/* signal stacks — telemetry without text */
.hud .stack{
  position:absolute;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:4px;
}
.hud .stack.left{left:40px;align-items:flex-start;}
.hud .stack.right{right:40px;align-items:flex-end;}
.hud .stack i{
  display:block;height:2px;width:14px;
  background:rgba(47,182,201,.5);
  animation:bar 7s ease-in-out infinite;
}
.hud .stack.right i{background:rgba(95,125,176,.42);animation-duration:9s;}
.hud .stack i:nth-child(2n){animation-delay:-1.1s;}
.hud .stack i:nth-child(3n){animation-delay:-2.4s;width:26px;}
.hud .stack i:nth-child(4n){animation-delay:-3.8s;width:9px;}
.hud .stack i:nth-child(5n){animation-delay:-5.2s;width:34px;}
@keyframes bar{
  0%,100%{transform:scaleX(.35);opacity:.35;}
  50%{transform:scaleX(1);opacity:1;}
}
.hud .stack.left i{transform-origin:0 50%;}
.hud .stack.right i{transform-origin:100% 50%;}

@keyframes gridIn{to{opacity:.9;}}
@keyframes gridInFine{to{opacity:.28;}}
@keyframes drift{to{background-position:var(--grid) var(--grid), var(--grid) var(--grid);}}
@keyframes sweep{
  0%{top:-60vh;opacity:0;}
  12%{opacity:1;}
  72%{opacity:1;}
  100%{top:120vh;opacity:0;}
}
@keyframes slide{
  0%{transform:translate3d(-6%,0,0);}
  100%{transform:translate3d(6%,0,0);}
}
@keyframes travel{
  0%{left:-4%;opacity:0;}
  8%{opacity:1;}
  88%{opacity:1;}
  100%{left:104%;opacity:0;}
}

/* ─── gate ──────────────────────────────────────────────── */
.gate{
  position:relative;z-index:2;
  width:100%;max-width:760px;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(28px,5vh,56px);
}
.aura{
  position:absolute;left:50%;top:50%;width:min(150vw,1100px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.86);
  background:radial-gradient(circle, rgba(47,182,201,.10) 0%, rgba(47,182,201,.04) 34%, transparent 62%);
  opacity:.55;pointer-events:none;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
  animation:breathe 8s ease-in-out 2s infinite;
}
@keyframes breathe{50%{opacity:.8;}}

/* wordmark = the whole button */
.mark{
  position:relative;
  appearance:none;background:none;border:0;padding:14px 6px;margin:0;
  cursor:pointer;color:inherit;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:transform .9s cubic-bezier(.22,.8,.2,1), opacity .7s ease;
}
.mark .word{
  display:block;
  font-size:clamp(2.6rem, 11.4vw, 8.4rem);
  font-weight:500;
  letter-spacing:.20em;
  text-indent:.20em;
  line-height:1;
  white-space:nowrap;
  background:linear-gradient(180deg, #ffffff 0%, var(--ice) 34%, #9fc3c7 78%, #628f95 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 26px rgba(47,182,201,.20));
  transition:letter-spacing .9s cubic-bezier(.22,.8,.2,1), filter .5s ease;
}
/* refined hairlines, faded at the ends */
.mark .hair{
  display:block;width:min(78vw,520px);height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 18%, rgba(233,238,246,.34) 50%, var(--line) 82%, transparent);
  transform:scaleX(.2);opacity:0;
  animation:hairIn 1.6s .9s cubic-bezier(.22,.8,.2,1) forwards;
}
.mark .hair.top{order:-1;}
.mark .sub{
  display:block;
  font-size:clamp(.56rem, 1.55vw, 1.05rem);
  font-weight:500;
  letter-spacing:.66em;
  text-indent:.66em;
  line-height:1;
  white-space:nowrap;
  color:rgba(233,238,246,.58);
  transition:letter-spacing .9s cubic-bezier(.22,.8,.2,1), color .5s ease;
}
.mark:hover .sub,.mark:focus-visible .sub{color:var(--gold);letter-spacing:.72em;text-indent:.72em;}
/* geometric notches */
.mark .notch{
  position:absolute;top:50%;width:9px;height:9px;
  border:1px solid rgba(95,125,176,.55);
  transform:translateY(-50%) rotate(45deg);
  opacity:0;animation:hairIn 1.2s 1.5s ease-out forwards;
}
.mark .notch.l{left:-26px;}
.mark .notch.r{right:-26px;}
@keyframes hairIn{to{transform:scaleX(1);opacity:1;}}
.mark .notch.l,.mark .notch.r{animation-name:notchIn;}
@keyframes notchIn{to{opacity:.9;}}

/* target lock brackets */
.mark .lock{
  position:absolute;width:20px;height:20px;
  border:1px solid rgba(47,182,201,.85);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease, transform .5s cubic-bezier(.22,.8,.2,1);
}
.mark .lock.a{top:-16px;left:-22px;border-right:0;border-bottom:0;transform:translate(14px,14px);}
.mark .lock.b{top:-16px;right:-22px;border-left:0;border-bottom:0;transform:translate(-14px,14px);}
.mark .lock.c{bottom:-16px;left:-22px;border-right:0;border-top:0;transform:translate(14px,-14px);}
.mark .lock.d{bottom:-16px;right:-22px;border-left:0;border-top:0;transform:translate(-14px,-14px);}
.mark:hover .lock,.mark:focus-visible .lock{opacity:1;transform:none;}
body.entered .mark .lock{opacity:0 !important;}

.mark:hover .word,.mark:focus-visible .word{
  letter-spacing:.235em;text-indent:.235em;
  filter:drop-shadow(0 0 34px rgba(47,182,201,.42));
}
.gate:hover .aura{transform:translate(-50%,-50%) scale(1.06);opacity:.95;}
.mark:active{transform:scale(.985);}

/* opening animation */
.mark{opacity:0;animation:markIn 1.6s .35s cubic-bezier(.22,.8,.2,1) forwards;}
@keyframes markIn{
  from{opacity:0;transform:translateY(10px) scale(1.04);}
  to{opacity:1;transform:none;}
}

/* scene 2: the mark retracts */
body.entered .mark{
  transform:scale(.30);
  opacity:.5;
  cursor:default;
  animation:none;
  margin-bottom:calc(-1 * clamp(24px,4vh,60px));
}
body.entered .mark .hair{opacity:0;}
body.entered .mark .sub{opacity:0;}
body.entered .mark .notch{opacity:0;}
body.entered .aura{transform:translate(-50%,-50%) scale(1.16);opacity:.7;}

/* ─── overlay: the step field, no card ──────────────────── */
.overlay{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:22px;
  opacity:0;
  animation:panelIn .9s .12s cubic-bezier(.22,.8,.2,1) forwards;
}
@keyframes panelIn{from{opacity:0;}to{opacity:1;}}
.overlay > form,.overlay > .designation{
  animation:panelRise .9s .12s cubic-bezier(.22,.8,.2,1) both;
}
@keyframes panelRise{from{transform:translateY(14px);}to{transform:none;}}

.close{
  position:fixed;top:22px;right:22px;z-index:6;
  appearance:none;background:none;border:1px solid rgba(233,238,246,.14);
  width:34px;height:34px;border-radius:2px;
  color:var(--ice-dim);cursor:pointer;
  display:grid;place-items:center;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.close:hover{border-color:rgba(95,125,176,.55);color:var(--gold);background:rgba(95,125,176,.06);}
.close svg{width:12px;height:12px;}

form{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;}
[data-step-panel]{
  width:100%;
  display:flex;flex-direction:column;align-items:stretch;gap:14px;
  animation:stepIn .6s cubic-bezier(.22,.8,.2,1) both;
}
@keyframes stepIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
#loginForm[data-step="email"] [data-step-panel="password"]{display:none;}
#loginForm[data-step="password"] [data-step-panel="email"]{display:none;}

.designation{
  font-size:.62rem;font-weight:600;letter-spacing:.42em;text-indent:.42em;
  color:rgba(47,182,201,.72);
  display:flex;align-items:center;gap:12px;
}
.designation::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}

.slot{position:relative;width:100%;
  background:linear-gradient(180deg, rgba(47,182,201,.045), rgba(47,182,201,.008));
  border:1px solid rgba(90,120,170,.22);
  border-bottom-color:rgba(90,120,170,.34);
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.slot::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg, transparent, rgba(90,120,170,.5), transparent);
  transition:background .3s ease;
}
.slot:focus-within{
  border-color:rgba(47,182,201,.55);
  background:linear-gradient(180deg, rgba(47,182,201,.09), rgba(47,182,201,.015));
  box-shadow:0 0 26px rgba(47,182,201,.07);
}
.slot:focus-within::before{background:linear-gradient(180deg, transparent, var(--cyan), transparent);}
.slot.ok{border-color:rgba(47,182,201,.5);}
.slot input{
  appearance:none;-webkit-appearance:none;
  width:100%;display:block;
  background:transparent;border:0;outline:0;border-radius:0;
  color:var(--ice);
  font-family:inherit;
  font-size:clamp(1.05rem,3.2vw,1.55rem);
  font-weight:400;letter-spacing:.09em;
  padding:16px 58px 18px 18px;
}
.slot input::placeholder{color:rgba(233,238,246,.20);letter-spacing:.16em;}
.slot input:-webkit-autofill{
  -webkit-text-fill-color:var(--ice);
  -webkit-box-shadow:0 0 0 1000px #0b1220 inset;
  caret-color:var(--cyan);
  transition:background-color 9999s ease-out;
}
.slot .base{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.slot .live{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(47,182,201,.9) 20%, rgba(95,125,176,.9) 80%, transparent);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.22,.8,.2,1);
}
.slot input:focus ~ .live{transform:scaleX(1);}
.slot .tick{
  position:absolute;right:18px;bottom:18px;
  width:7px;height:7px;border:1px solid rgba(95,125,176,.5);transform:rotate(45deg);
  opacity:0;transition:opacity .4s ease;
}
.slot input:focus ~ .tick{opacity:1;animation:tick 2.4s ease-in-out infinite;}
@keyframes tick{50%{opacity:.28;}}
.slot .enter{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:22px;height:18px;color:rgba(233,238,246,.22);
  transition:color .3s ease, transform .3s ease;pointer-events:none;
}
.slot .enter svg{width:100%;height:100%;display:block;}
.slot.has .enter{color:var(--cyan);}
.slot.has .tick{opacity:0 !important;animation:none;}
.slot .scan{
  position:absolute;left:0;bottom:-1px;height:1px;width:24%;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0;
}
.slot.verify .scan{opacity:1;animation:scanRun .62s ease-in-out 2;}
.slot.verify{border-color:rgba(47,182,201,.7);}
@keyframes scanRun{from{transform:translateX(-20%);}to{transform:translateX(340%);}}

/* password: no dots — segments carry the count */
#loginPassword{
  color:transparent;
  caret-color:transparent;
  text-shadow:none;
  letter-spacing:.6em;
}
.cipher{
  position:absolute;left:18px;right:58px;bottom:19px;
  display:flex;gap:7px;align-items:center;
  pointer-events:none;min-height:16px;
}
#loginCipherTrack span{
  width:9px;height:15px;
  background:linear-gradient(180deg, rgba(47,182,201,.85), rgba(47,182,201,.32));
  box-shadow:0 0 10px rgba(47,182,201,.28);
  animation:seg .34s cubic-bezier(.22,.8,.2,1) both;
}
#loginCipherTrack span:last-child{
  background:linear-gradient(180deg, var(--gold), rgba(95,125,176,.35));
  box-shadow:0 0 12px rgba(95,125,176,.4);
}
@keyframes seg{from{transform:scaleY(.2);opacity:0;}to{transform:none;opacity:1;}}

.identity{
  font-size:.72rem;letter-spacing:.14em;color:var(--ice-dim);
  display:flex;align-items:center;gap:9px;
}
.identity::before{
  content:"";width:5px;height:5px;background:var(--cyan);border-radius:50%;
  box-shadow:0 0 8px rgba(47,182,201,.8);
}
.minor{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:2px;
}
.link{
  appearance:none;background:none;border:0;padding:9px 0;
  color:rgba(233,238,246,.62);cursor:pointer;
  font-family:inherit;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  transition:color .25s ease;
}
.link:hover{color:var(--gold);}
.feedback{
  margin:0;min-height:1em;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper);text-align:center;
}

/* ─── scene 3: vault ────────────────────────────────────── */
.vault{position:fixed;inset:0;z-index:9;display:none;perspective:1400px;}
body.breach .vault{display:block;animation:rumble .85s ease-out;}
@keyframes rumble{
  0%,100%{transform:none;}
  8%{transform:translate3d(1.5px,-1px,0);}
  18%{transform:translate3d(-2px,1px,0);}
  30%{transform:translate3d(1px,1.5px,0);}
  44%{transform:translate3d(-1px,-1px,0);}
  60%{transform:translate3d(.8px,.6px,0);}
  78%{transform:translate3d(-.5px,0,0);}
}
.vault .seam{
  position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(233,238,246,.85) 22%, rgba(47,182,201,.9) 50%, rgba(233,238,246,.85) 78%, transparent);
  filter:blur(1px);opacity:0;
}
body.breach .vault .seam{animation:seamLight 1.4s .5s ease-out forwards;}
@keyframes seamLight{30%{opacity:1;}100%{opacity:0;}}

.vault .leaf{
  position:absolute;top:0;bottom:0;width:50.3%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 26%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(180deg, rgba(0,0,0,.20) 0 2px, transparent 2px 9px),
    radial-gradient(150% 110% at 50% 50%, #22383e 0%, #14262b 38%, #0a171b 68%, #050d10 100%);
  box-shadow:0 0 120px rgba(0,0,0,.85) inset, 0 0 90px rgba(0,0,0,.75);
}
/* machined edge + rivet column along the seam */
.vault .leaf::before{
  content:"";position:absolute;top:0;bottom:0;width:26px;
  background:linear-gradient(90deg, rgba(0,0,0,.5), rgba(233,238,246,.16) 55%, rgba(0,0,0,.35));
}
.vault .leaf::after{
  content:"";position:absolute;top:6%;bottom:6%;width:10px;
  background-image:radial-gradient(circle at 50% 50%, rgba(233,238,246,.55) 0 1.6px, rgba(0,0,0,.5) 2px, transparent 2.6px);
  background-size:10px 46px;opacity:.6;
}
.vault .leaf.l{left:0;}
.vault .leaf.l::before{right:0;}
.vault .leaf.l::after{right:40px;}
.vault .leaf.r{right:0;}
.vault .leaf.r::before{left:0;transform:scaleX(-1);}
.vault .leaf.r::after{left:40px;}
/* throw bolts crossing the seam */
.vault .throw{
  position:absolute;height:16px;width:96px;
  background:linear-gradient(180deg, #d9c98f, var(--gold) 42%, rgba(120,78,40,.9));
  box-shadow:0 1px 0 rgba(0,0,0,.6), 0 0 18px rgba(95,125,176,.25);
}
.vault .throw::after{
  content:"";position:absolute;top:3px;bottom:3px;width:5px;
  background:rgba(0,0,0,.35);
}
.vault .leaf.l .throw{right:-48px;}
.vault .leaf.l .throw::after{right:10px;}
.vault .leaf.r .throw{left:-48px;}
.vault .leaf.r .throw::after{left:10px;}
.vault .throw.t1{top:9%;}
.vault .throw.t2{top:24%;}
.vault .throw.t3{bottom:24%;}
.vault .throw.t4{bottom:9%;}
body.breach .vault .leaf.l .throw{animation:throwL .55s .28s cubic-bezier(.6,0,.25,1) forwards;}
body.breach .vault .leaf.r .throw{animation:throwR .55s .28s cubic-bezier(.6,0,.25,1) forwards;}
body.breach .vault .throw.t2{animation-delay:.36s;}
body.breach .vault .throw.t3{animation-delay:.32s;}
body.breach .vault .throw.t4{animation-delay:.42s;}
@keyframes throwL{to{transform:translateX(-104px);}}
@keyframes throwR{to{transform:translateX(104px);}}

body.breach .vault .leaf.l{animation:leafL 1.5s .95s cubic-bezier(.62,0,.18,1) forwards;}
body.breach .vault .leaf.r{animation:leafR 1.5s .95s cubic-bezier(.62,0,.18,1) forwards;}
@keyframes leafL{from{transform:translateX(0);}to{transform:translateX(-101%);}}
@keyframes leafR{from{transform:translateX(0);}to{transform:translateX(101%);}}

.vault .hub{
  position:absolute;left:50%;top:50%;
  width:min(44vmin,330px);aspect-ratio:1;
  transform:translate(-50%,-50%);
}
.vault .hub svg{width:100%;height:100%;display:block;overflow:visible;}
.vault .hub .wheel{transform-origin:50% 50%;}
body.breach .vault .hub .wheel{animation:spin 1.15s .18s cubic-bezier(.45,0,.15,1) forwards;}
@keyframes spin{from{transform:rotate(0);}to{transform:rotate(126deg);}}
body.breach .vault .hub{animation:hubOut .55s .95s ease-in forwards;}
@keyframes hubOut{to{opacity:0;transform:translate(-50%,-50%) scale(1.3);}}
.vault .hub .pin{transform-origin:50% 50%;}
body.breach .vault .hub .pin{animation:pinIn .45s .22s cubic-bezier(.6,0,.2,1) forwards;}
@keyframes pinIn{to{transform:scale(.62);opacity:.3;}}

.vault .flash{
  position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, rgba(233,238,246,.9), rgba(47,182,201,.25) 30%, transparent 62%);
  opacity:0;
}
body.breach .vault .flash{animation:flash 1.1s .9s ease-out forwards;}
@keyframes flash{18%{opacity:.85;}100%{opacity:0;}}
body.breach .gate,body.breach .close{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease, visibility 0s .35s;
}

/* ─── scene 4: inner chamber, second key ─────────────────── */
.chamber{
  position:fixed;inset:0;z-index:12;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,3.4vh,34px);
  padding:24px;
  opacity:0;animation:chamberIn 1.4s cubic-bezier(.22,.8,.2,1) forwards;
}
@keyframes chamberIn{to{opacity:1;}}
.chamber .designation{justify-content:center;color:rgba(47,182,201,.8);}
.chamber .designation::after{display:none;}
.chamber form{gap:clamp(16px,2.6vh,26px);}

.arcs{
  position:absolute;left:50%;top:50%;width:min(96vmin,760px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
}
.arcs svg{width:100%;height:100%;display:block;overflow:visible;}
.arcs .slow{transform-origin:50% 50%;animation:spinSlow 180s linear infinite;}
.arcs .slow.rev{animation-duration:260s;animation-direction:reverse;}

.cells{
  display:flex;gap:clamp(8px,1.8vw,16px);justify-content:center;
  position:relative;
}
.cell{
  position:relative;
  width:clamp(38px,8.4vw,62px);height:clamp(54px,11.5vw,86px);
  display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(47,182,201,.055), rgba(47,182,201,.012));
  border:1px solid rgba(90,120,170,.30);
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.cell::before,.cell::after{
  content:"";position:absolute;width:7px;height:7px;
  border:1px solid rgba(95,125,176,.55);
}
.cell::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.cell::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.cell b{
  display:block;
  width:clamp(12px,2.6vw,18px);height:clamp(12px,2.6vw,18px);
  background:linear-gradient(180deg, var(--cyan), rgba(47,182,201,.32));
  box-shadow:0 0 16px rgba(47,182,201,.45);
  opacity:0;transform:scale(.35);
  transition:opacity .25s ease, transform .35s cubic-bezier(.22,.8,.2,1);
}
.cell .beam{
  position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0;transition:opacity .3s ease;
}
.cell.on{
  border-color:rgba(47,182,201,.8);
  background:linear-gradient(180deg, rgba(47,182,201,.14), rgba(47,182,201,.03));
  box-shadow:inset 0 0 26px rgba(47,182,201,.14), 0 0 22px rgba(47,182,201,.10);
}
.cell.on b{opacity:1;transform:none;}
.cell.on .beam{opacity:1;}
.cell.active{border-color:rgba(95,125,176,.75);}
.cell.active::before,.cell.active::after{border-color:var(--gold);}
.cell.active .beam{
  opacity:1;background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:caret 1.15s steps(1,end) infinite;
}
@keyframes caret{50%{opacity:0;}}

#secondCode{
  position:absolute;inset:0;width:100%;height:100%;
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;outline:0;
  color:transparent;caret-color:transparent;
  font-size:16px;letter-spacing:2em;text-indent:-9999px;
  cursor:default;
}
#secondCode:-webkit-autofill{-webkit-text-fill-color:transparent;-webkit-box-shadow:0 0 0 1000px transparent inset;}
.cells:focus-within .cell.active{box-shadow:0 0 22px rgba(95,125,176,.16);}

.chamber .rungs{
  display:flex;gap:6px;justify-content:center;
}
.chamber .rungs i{
  width:26px;height:2px;background:rgba(233,238,246,.16);
  transition:background .35s ease, box-shadow .35s ease;
}
.chamber .rungs i.lit{background:var(--cyan);box-shadow:0 0 12px rgba(47,182,201,.7);}

body.charged .chamber{animation:chargeOut 1.1s .25s ease-in forwards;}
@keyframes chargeOut{to{opacity:0;transform:scale(1.06);}}
body.charged .bloom{display:block;}
.bloom{
  display:none;position:fixed;inset:0;z-index:14;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(230,247,249,.95), rgba(47,182,201,.35) 34%, transparent 70%);
  opacity:0;animation:bloom 1.5s ease-out forwards;
}
@keyframes bloom{22%{opacity:.9;}100%{opacity:0;}}

/* ─── narrow viewports ──────────────────────────────────── */
@media (max-width:760px){
  .stage{padding-left:20px;padding-right:20px;}
  .mark .notch{display:none;}
  .mark .word{letter-spacing:.16em;text-indent:.16em;}
  .mark:hover .word,.mark:focus-visible .word{letter-spacing:.185em;text-indent:.185em;}
  .mark .sub{letter-spacing:.42em;text-indent:.42em;}
  .mark:hover .sub,.mark:focus-visible .sub{letter-spacing:.46em;text-indent:.46em;}
  .hud .corner{width:34px;height:34px;}
  .hud .ticks{left:64px;right:64px;}
  .hud .rail{display:none;}
  .hud .cursor{display:none;}
  .hud .stack{display:none;}
  body.entered .mark{transform:scale(.42);}
  .close{top:14px;right:14px;}
  .link{font-size:.8rem;padding:12px 0;}
  .arcs{width:130vmin;}
}
@media (max-height:520px){
  .gate{gap:18px;}
  .mark{padding-top:0;padding-bottom:0;}
}

/* ─── reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-delay:0s !important;transition-duration:.001s !important;}
  .field .grid{opacity:.9;}
  .field .grid.fine{opacity:.28;}
  .field .sweep{display:none;}
  .field .node{display:none;}
  .field .deck{opacity:.55;}
  .field .reticle{opacity:.6;}
  .field .radar{opacity:.5;}
  .hud{opacity:1;}
  .hud .cursor{display:none;}
  #fieldCanvas{opacity:1;}
  .mark{opacity:1;}
  .mark .hair{opacity:1;transform:none;}
  .mark .notch{opacity:.9;}
  .overlay{opacity:1;}
  .overlay > form{transform:none;}
  .vault .leaf.l{transform:translateX(-101%);}
  .vault .leaf.r{transform:translateX(101%);}
  .vault .hub{opacity:0;}
  body.breach .vault .leaf.l{transform:translateX(-101%);}
  body.breach .vault .leaf.r{transform:translateX(101%);}
  .chamber{opacity:1;}
  .bloom{display:none !important;}
}