/* ============================================================
   ZERONEX / 01X — brand activation experience
   Design tokens
   ============================================================ */
:root{
  --void:        #050507;
  --void-deep:   #000000;
  --graphite:    #131318;
  --steel:       #8a8a8f;
  --mist:        #ededef;
  --signal:      #4d8dff;
  --signal-deep: #1e4fd8;

  --bg: var(--void);
  --ink: var(--mist);
  --ink-dim: rgba(237,237,239,.34);
  --ink-faint: rgba(237,237,239,.14);
  --hairline: rgba(237,237,239,.08);
  --glow-core: rgba(120,165,255,.16);
  --glow-edge: rgba(30,79,216,0);
  --wm-opacity: .05;
  --grain-opacity: .05;
  --logo-filter: none;

  --font-ui: "Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

[data-theme="light"]{
  --bg: #f3f2f0;
  --ink: #0a0a0c;
  --ink-dim: rgba(10,10,12,.4);
  --ink-faint: rgba(10,10,12,.14);
  --hairline: rgba(10,10,12,.1);
  --glow-core: rgba(60,110,235,.12);
  --wm-opacity: .045;
  --grain-opacity: .06;
  /* supplied gradients are light metal — invert to dark metal, geometry untouched */
  --logo-filter: invert(1) brightness(.55) contrast(1.1);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-weight:300;
  overflow-x:clip;
  min-height:100vh;
  transition:background .8s var(--ease-in-out), color .8s var(--ease-in-out);
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--signal); color:#fff; }

:focus-visible{
  outline:1px solid var(--signal);
  outline-offset:6px;
  border-radius:2px;
}

/* ============================================================
   Atmosphere layers
   ============================================================ */
#atmosphere,#energy{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
#atmosphere{ z-index:0; opacity:0; transition:opacity 2.4s ease; }
#atmosphere.is-live{ opacity:1; }
#energy{ z-index:5; }

.grain{
  position:fixed; inset:-50%;
  z-index:6;
  pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation:grain-shift 9s steps(6) infinite;
}
@keyframes grain-shift{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-2%,1.4%); }
  40%{ transform:translate(1.2%,-1.8%); }
  60%{ transform:translate(-1.6%,-.8%); }
  80%{ transform:translate(1%,1.6%); }
}

.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 42%, transparent 0%, transparent 55%, rgba(0,0,0,.5) 100%);
  transition:opacity .8s ease;
}
[data-theme="light"] .vignette{ opacity:.25; }

.floor-glow{
  position:fixed; left:50%; bottom:-30vh; z-index:1;
  width:130vw; height:60vh;
  transform:translateX(-50%);
  pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, var(--glow-core) 0%, transparent 70%);
  opacity:.45;
  filter:blur(20px);
}

/* thin occasional light streak */
.streak{
  position:fixed; z-index:3;
  top:30%; left:-40%;
  width:34vw; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(160,195,255,.5), transparent);
  opacity:0;
}
.streak.is-firing{ animation:streak-pass 2.6s var(--ease-in-out); }
@keyframes streak-pass{
  0%{ opacity:0; transform:translateX(0); }
  35%{ opacity:.7; }
  100%{ opacity:0; transform:translateX(190vw); }
}

/* ============================================================
   Chrome (micro labels, toggle)
   ============================================================ */
.chrome{
  position:fixed; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:clamp(20px,3vw,36px) clamp(22px,4vw,48px);
  opacity:0;
  transition:opacity 1.6s ease .3s;
}
body.is-settled .chrome{ opacity:1; }
.chrome--top{ top:0; }
.chrome--bottom{ position:absolute; bottom:0; }

.micro-label{
  font-size:10px;
  letter-spacing:.34em;
  font-weight:400;
  color:var(--ink-dim);
  text-transform:uppercase;
  user-select:none;
  white-space:nowrap;
}
.micro-label--dim{ color:var(--ink-faint); }
.micro-label--state{ display:inline-flex; align-items:center; gap:10px; }

.state-dot{
  width:4px; height:4px; border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 8px 1px rgba(77,141,255,.8);
  animation:state-breathe 4s ease-in-out infinite;
}
@keyframes state-breathe{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}

.theme-toggle{
  appearance:none; border:1px solid var(--hairline);
  background:transparent;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  cursor:pointer;
  transition:border-color .4s ease;
}
.theme-toggle:hover{ border-color:var(--ink-dim); }
.theme-toggle__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--ink-dim);
  transition:background .4s ease, transform .4s var(--ease-out);
}
.theme-toggle:hover .theme-toggle__dot{ background:var(--signal); transform:scale(1.2); }

/* ============================================================
   Hero + lockup
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  z-index:10;
}

.lockup{
  width:min(56vw,640px);
  display:flex; flex-direction:column; align-items:center;
  transform:translateY(1.5vh);
}
.lockup__parallax{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  will-change:transform;
}

/* --- 01X icon ------------------------------------------------ */
.icon-wrap{
  position:relative;
  width:clamp(150px, 34%, 230px);
  z-index:2;
  outline:none;
  /* pre-reveal state */
  opacity:0;
  transform:scale(.9) translateY(1vh);
  filter:blur(14px);
  transition:
    opacity 1.8s var(--ease-out),
    transform 1.8s var(--ease-out),
    filter 1.8s var(--ease-out);
  cursor:default;
}
body.p-icon .icon-wrap{
  opacity:1; transform:scale(1) translateY(0); filter:blur(0);
}
/* gather: minute tension before the burst */
body.p-gather .icon-wrap{
  transform:scale(1.02);
  transition-duration:.7s;
}
/* settled: idle, hover becomes possible */
body.is-settled .icon-wrap{
  transition:transform 1.1s var(--ease-out);
  cursor:pointer;
}
body.is-settled .icon-wrap:hover,
body.is-settled .icon-wrap:focus-visible{
  transform:scale(1.03);
}

.icon-svg{ width:100%; height:auto; display:block; position:relative; z-index:2; }
/* theme inversion is applied per metal path so the blue energy overlay is never inverted */
.icon-svg .ip{ filter:var(--logo-filter); transition:filter .8s var(--ease-in-out); }

/* energy overlay traced through the exact geometry */
.icon-energy{ opacity:0; transition:opacity .6s ease; }
.icon-energy .ep{
  fill:none;
  stroke:var(--signal);
  stroke-width:2.4;
  stroke-linejoin:round;
  stroke-dasharray:150 1100;
  stroke-dashoffset:0;
  filter:drop-shadow(0 0 6px rgba(77,141,255,.9));
}
body.is-settled .icon-wrap:hover .icon-energy,
body.is-settled .icon-wrap:focus-visible .icon-energy,
body.p-gather .icon-energy,
body.p-burst .icon-energy{
  opacity:.9;
}
body.is-settled .icon-wrap:hover .icon-energy .ep,
body.is-settled .icon-wrap:focus-visible .icon-energy .ep,
body.p-gather .icon-energy .ep,
body.p-burst .icon-energy .ep{
  animation:energy-travel 2.8s linear infinite;
}
@keyframes energy-travel{
  to{ stroke-dashoffset:-1250; }
}

/* breathing glow bed */
.icon-glow{
  position:absolute;
  left:50%; top:0;
  width:70vmin; height:70vmin;
  max-width:640px; max-height:640px;
  transform:translate(-50%,-32%);
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, var(--glow-core) 0%, rgba(30,79,216,.05) 40%, transparent 70%);
  opacity:0;
  transition:opacity 2s ease;
  filter:blur(6px);
}
body.p-activate .icon-glow{ opacity:.7; animation:glow-breathe 6s ease-in-out infinite; }
body.p-gather .icon-glow{ opacity:1; transition-duration:.6s; }
body.is-settled .icon-glow{ opacity:.5; animation:glow-breathe 12s ease-in-out infinite; }
@keyframes glow-breathe{
  0%,100%{ transform:translate(-50%,-32%) scale(1); }
  50%{ transform:translate(-50%,-32%) scale(1.07); }
}

/* the burst flash — brief, then gone */
.icon-bloom{
  position:absolute;
  left:50%; top:0;
  width:60vmin; height:60vmin;
  max-width:560px; max-height:560px;
  transform:translate(-50%,-30%) scale(.4);
  z-index:1;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle, rgba(240,246,255,.5) 0%, rgba(120,165,255,.25) 30%, transparent 65%);
  opacity:0;
  filter:blur(4px);
}
body.p-burst .icon-bloom{
  animation:bloom-pop .62s var(--ease-out) forwards;
}
@keyframes bloom-pop{
  0%{ opacity:0; transform:translate(-50%,-30%) scale(.35); }
  18%{ opacity:.95; }
  100%{ opacity:0; transform:translate(-50%,-30%) scale(1.5); }
}

/* --- signal line --------------------------------------------- */
.signal-line{
  width:0%;
  height:1px;
  margin:clamp(26px,5.5vh,54px) 0 0;
  background:linear-gradient(90deg, transparent, rgba(140,180,255,.85), transparent);
  opacity:0;
}
body.p-word .signal-line{
  animation:signal-draw 1.15s var(--ease-out) forwards;
}
body.is-settled .signal-line{
  width:100%; opacity:.1;
  transition:opacity 2s ease;
}
@keyframes signal-draw{
  0%{ width:0%; opacity:0; }
  25%{ opacity:.9; }
  100%{ width:100%; opacity:.28; }
}

/* --- ZERONEX wordmark ---------------------------------------- */
.word-wrap{
  width:100%;
  margin-top:clamp(18px,3.2vh,34px);
  z-index:2;
}
.word-svg{ width:100%; height:auto; display:block; overflow:visible; }

/* letters condense out of the signal */
.word-svg .wp{
  opacity:0;
  transform:translateY(10px) scale(1.04);
  transform-origin:center;
  transform-box:fill-box;
  filter:var(--logo-filter) blur(7px);
}
body.p-word .word-svg .wp,
body.is-settled .word-svg .wp{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:var(--logo-filter) blur(0);
  transition:
    opacity 1.15s var(--ease-out) var(--d,0s),
    transform 1.15s var(--ease-out) var(--d,0s),
    filter 1.15s var(--ease-out) var(--d,0s);
}
/* whole word: micro compression release */
body.p-word .word-svg{ animation:word-settle 1.7s var(--ease-out) both; }
@keyframes word-settle{
  0%{ transform:scaleX(1.045); }
  100%{ transform:scaleX(1); }
}

/* wordmark responds while the symbol is engaged */
body.is-settled .lockup:has(.icon-wrap:hover) .word-svg,
body.is-settled .lockup:has(.icon-wrap:focus-visible) .word-svg{
  filter:brightness(1.18) drop-shadow(0 0 14px rgba(77,141,255,.14));
}
body.is-settled .word-svg{ transition:filter .7s ease; }

/* ============================================================
   Statement section
   ============================================================ */
.statement{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column;
  justify-content:center;
  padding:clamp(72px,12vh,130px) clamp(24px,7vw,110px) clamp(36px,6vh,64px);
  overflow:clip; /* clip, never scrollable — focus/scrollIntoView can't shift the section */
  z-index:8;
}

.statement__watermark{
  position:absolute;
  right:-14vw; top:50%;
  width:min(78vh,760px);
  transform:translateY(-50%) rotate(-4deg);
  color:var(--ink);
  opacity:var(--wm-opacity);
  pointer-events:none;
}
.statement__watermark svg{ width:100%; height:auto; display:block; }

.statement__text{
  display:flex; flex-direction:column;
  gap:clamp(4px,1vh,12px);
  font-weight:300;
}
.statement__line{
  display:block;
  font-size:clamp(42px,8.4vw,124px);
  letter-spacing:.02em;
  line-height:1.04;
  color:var(--ink);
  opacity:0;
  transform:translateY(34px);
  filter:blur(6px);
  transition:
    opacity 1.3s var(--ease-out) var(--d,0s),
    transform 1.3s var(--ease-out) var(--d,0s),
    filter 1.3s var(--ease-out) var(--d,0s);
}
.statement__line.is-in{
  opacity:.92; transform:translateY(0); filter:blur(0);
}
.statement__line--accent{
  color:transparent;
  -webkit-text-stroke:1px var(--ink-dim);
  position:relative;
}
.statement__line--accent::after{
  content:"";
  position:absolute; left:0; bottom:-.16em;
  width:1.6em; height:1px;
  background:linear-gradient(90deg, var(--signal), transparent);
  opacity:0;
  transition:opacity 1.4s ease .9s;
}
.statement__line--accent.is-in::after{ opacity:.8; }

.statement__foot{
  margin-top:clamp(56px,10vh,110px);
}

/* ============================================================
   Signal form — one email, on launch day
   ============================================================ */
.signal-form{
  margin-top:clamp(40px,7vh,72px);
  max-width:560px;
  opacity:0;
  transform:translateY(28px);
  filter:blur(4px);
  transition:
    opacity 1.3s var(--ease-out) var(--d,0s),
    transform 1.3s var(--ease-out) var(--d,0s),
    filter 1.3s var(--ease-out) var(--d,0s);
  position:relative;
  z-index:3;
}
.signal-form.is-in{ opacity:1; transform:translateY(0); filter:blur(0); }

.signal-form__pill{
  display:flex; align-items:center;
  gap:8px;
  padding:8px 8px 8px clamp(18px,3vw,26px);
  border-radius:999px;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  backdrop-filter:blur(8px);
  transition:border-color .5s ease, box-shadow .5s ease;
}
[data-theme="light"] .signal-form__pill{
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
}
.signal-form__pill:focus-within{
  border-color:rgba(77,141,255,.45);
  box-shadow:0 0 0 1px rgba(77,141,255,.12), 0 0 34px rgba(30,79,216,.14);
}
.signal-form__pill.is-error{
  border-color:rgba(255,110,110,.5);
  animation:pill-nudge .34s var(--ease-out);
}
@keyframes pill-nudge{
  0%,100%{ transform:translateX(0); }
  30%{ transform:translateX(-5px); }
  60%{ transform:translateX(4px); }
}

.signal-form__input{
  flex:1 1 auto;
  min-width:0;
  border:0; outline:0;
  background:transparent;
  color:var(--ink);
  font:300 15px/1 var(--font-ui);
  letter-spacing:.02em;
  padding:14px 6px;
}
.signal-form__input::placeholder{ color:var(--ink-dim); }

.signal-form__btn{
  flex:0 0 auto;
  appearance:none; border:0;
  cursor:pointer;
  border-radius:999px;
  padding:14px clamp(20px,2.6vw,30px);
  font:400 14px/1 var(--font-ui);
  letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(160deg, #5c94ff 0%, var(--signal) 42%, var(--signal-deep) 100%);
  box-shadow:0 6px 22px rgba(30,79,216,.32), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .35s var(--ease-out), box-shadow .35s ease, filter .35s ease;
  white-space:nowrap;
}
.signal-form__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(30,79,216,.42), inset 0 1px 0 rgba(255,255,255,.3);
}
.signal-form__btn:active{ transform:translateY(0) scale(.98); }
.signal-form__btn:disabled{ cursor:default; filter:saturate(.4) brightness(.85); }

.signal-form__note{
  margin-top:14px;
  padding-left:clamp(18px,3vw,26px);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--ink-dim);
  transition:color .6s ease;
}
.signal-form.is-done .signal-form__note{ color:var(--signal); }

/* success: pill condenses into a confirmation line */
.signal-form.is-done .signal-form__pill{
  border-color:rgba(77,141,255,.35);
  box-shadow:0 0 34px rgba(30,79,216,.12);
}

.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .lockup{ width:min(78vw,560px); }
}
@media (max-width:600px){
  .lockup{ width:84vw; transform:translateY(0); }
  .icon-wrap{ width:clamp(120px,42%,170px); }
  .signal-line{ margin-top:clamp(20px,4.5vh,36px); }
  .word-wrap{ margin-top:clamp(14px,2.6vh,24px); }
  .statement__watermark{
    right:auto; left:50%; top:46%;
    width:120vw;
    transform:translate(-50%,-50%) rotate(-4deg);
  }
  .statement{ align-items:flex-start; }
  .signal-form{ max-width:100%; width:100%; margin-top:clamp(32px,6vh,52px); }
  .signal-form__pill{ padding-left:16px; }
  .signal-form__btn{ padding:13px 18px; font-size:13px; }
  .signal-form__input{ font-size:14px; padding:13px 4px; }
  .chrome{ padding:18px 20px; }
  .micro-label{ font-size:9px; letter-spacing:.28em; }
}
@media (max-width:380px){
  .statement__line{ font-size:clamp(34px,11vw,48px); }
}

/* ============================================================
   Reduced motion — calm, complete, beautiful
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.2s !important;
  }
  .icon-wrap{ opacity:1; transform:none; filter:none; }
  .word-svg .wp{ opacity:1; transform:none; filter:var(--logo-filter); }
  .signal-line{ width:100%; opacity:.1; }
  .icon-glow{ opacity:.4; }
  .chrome{ opacity:1; }
  .statement__line{ opacity:.92; transform:none; filter:none; }
  .grain{ animation:none; }
  #atmosphere,#energy{ display:none; }
  .streak{ display:none; }
}