/* ============================================================
   NOVARIFT — STYLE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-text); color:var(--ink); background:var(--void);
  line-height:1.6; overflow-x:hidden; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--cyan); color:#00121b; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* custom scrollbar */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#04060c; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--cyan-deep),#123); border-radius:9px; }

/* hide native cursor on pointer devices when reticle is active */
body.has-reticle, body.has-reticle a, body.has-reticle button{ cursor:none; }

/* ===================== BACKDROP LAYERS ===================== */
#gl{ position:fixed; inset:0; width:100vw; height:100vh; z-index:var(--z-canvas);
  opacity:0; transition:opacity 1.1s var(--ease-out); }
#gl.is-ready{ opacity:1; }
#poster{ position:fixed; inset:0; z-index:var(--z-poster);
  background:
    radial-gradient(46% 52% at 50% 46%, rgba(22,224,255,.22), transparent 70%),
    radial-gradient(80% 80% at 50% 50%, rgba(10,30,60,.5), transparent 75%),
    #04050a;
}
/* tiny star specks on the poster so no-webgl still feels like space */
#poster::after{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #cfe 40%, transparent),
    radial-gradient(1px 1px at 70% 60%, #9df 40%, transparent),
    radial-gradient(1px 1px at 40% 80%, #cff 40%, transparent),
    radial-gradient(1px 1px at 85% 20%, #adf 40%, transparent);
}
.grain{ position:fixed; inset:0; z-index:var(--z-fx); pointer-events:none; opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{ position:fixed; inset:0; z-index:var(--z-fx); pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }
.nova-flash{ position:fixed; inset:0; z-index:calc(var(--z-fx) + 1); pointer-events:none;
  opacity:0; background:radial-gradient(60% 60% at 50% 48%, #dffaff, rgba(22,224,255,.5) 45%, transparent 72%); }

/* ===================== LOADER ===================== */
#loader{ position:fixed; inset:0; z-index:var(--z-loader); display:grid; place-items:center;
  background:var(--void); transition:opacity .7s var(--ease-out); }
#loader.is-done{ opacity:0; pointer-events:none; }
.loader__inner{ display:grid; place-items:center; gap:1.1rem; text-align:center; }
.loader__ring{ width:66px; height:66px; border-radius:50%;
  border:1.5px solid var(--ink-xlo); border-top-color:var(--cyan); border-right-color:var(--cyan);
  animation:spin 1s linear infinite; box-shadow:var(--glow-soft); }
@keyframes spin{ to{ transform:rotate(1turn); } }
.loader__pct{ font-family:var(--f-mono); font-size:2.4rem; color:var(--ink-hi); letter-spacing:.02em; }
.loader__pct i{ font-size:1rem; color:var(--cyan); font-style:normal; }
.loader__label{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.42em; color:var(--ink-lo); }

/* ===================== RETICLE CURSOR ===================== */
.reticle{ position:fixed; top:0; left:0; z-index:var(--z-cursor); pointer-events:none;
  transform:translate(-50%,-50%); mix-blend-mode:screen; display:none; }
body.has-reticle .reticle{ display:block; }
.reticle__ring{ position:absolute; left:50%; top:50%; width:34px; height:34px; transform:translate(-50%,-50%);
  border:1.4px solid var(--cyan); border-radius:50%; opacity:.85; transition:width .3s var(--ease-out),height .3s var(--ease-out),opacity .3s; }
.reticle__ring::before,.reticle__ring::after{ content:""; position:absolute; background:var(--cyan); opacity:.9; }
.reticle__ring::before{ left:50%; top:-6px; width:1px; height:5px; transform:translateX(-50%); }
.reticle__ring::after{ left:50%; bottom:-6px; width:1px; height:5px; transform:translateX(-50%); }
.reticle__dot{ position:absolute; left:50%; top:50%; width:4px; height:4px; transform:translate(-50%,-50%);
  background:var(--cyan-hot); border-radius:50%; box-shadow:var(--glow-cyan); }
.reticle__label{ position:absolute; left:26px; top:14px; font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.28em; color:var(--cyan); white-space:nowrap; opacity:0; transform:translateX(-4px);
  transition:opacity .2s,transform .2s; text-transform:uppercase; }
body.reticle-hot .reticle__ring{ width:56px; height:56px; opacity:1; }
body.reticle-hot .reticle__label{ opacity:1; transform:translateX(0); }

/* ===================== HUD ===================== */
.hud{ position:fixed; inset:0; z-index:var(--z-hud); pointer-events:none;
  padding:clamp(.9rem,2vw,1.5rem); font-family:var(--f-mono); text-transform:uppercase; }
.hud__corner{ position:absolute; }
.hud--tl{ top:clamp(.9rem,2vw,1.5rem); left:clamp(.9rem,2vw,1.5rem); }
.hud--tr{ top:clamp(.9rem,2vw,1.5rem); right:clamp(.9rem,2vw,1.5rem); text-align:right; }
.hud--bl{ bottom:clamp(.9rem,2vw,1.5rem); left:clamp(.9rem,2vw,1.5rem); }
.hud--br{ bottom:clamp(.9rem,2vw,1.5rem); right:clamp(.9rem,2vw,1.5rem); }
.hud__tag{ font-family:var(--f-display); font-weight:700; letter-spacing:.34em; font-size:.82rem; color:var(--ink-hi); }
.hud__sub{ font-size:.58rem; letter-spacing:.24em; color:var(--ink-lo); margin-top:.25rem; }
.blink{ animation:blink 1.1s steps(1) infinite; color:var(--cyan); }
@keyframes blink{ 50%{ opacity:0; } }
.hud__meter-label{ font-size:.56rem; letter-spacing:.26em; color:var(--ink-lo); }
.hud__bar{ width:clamp(90px,16vw,168px); height:4px; margin:.3rem 0 .28rem auto; background:#0c1626;
  border:1px solid var(--line); overflow:hidden; }
.hud__bar i{ display:block; height:100%; width:100%; transform-origin:right center;
  background:linear-gradient(90deg,var(--cyan-deep),var(--cyan),var(--cyan-hot)); box-shadow:var(--glow-cyan); }
.hud__meter-val{ font-size:.7rem; color:var(--cyan); letter-spacing:.1em; }
.tele{ font-size:.6rem; letter-spacing:.16em; color:var(--ink-lo); line-height:1.9; }
.tele em{ display:inline-block; width:44px; color:var(--ink-xlo); font-style:normal; }
.tele span{ color:var(--cyan); }
.sound{ pointer-events:auto; display:inline-flex; align-items:center; gap:.5rem; background:transparent;
  border:1px solid var(--line); color:var(--ink-lo); font-family:var(--f-mono); font-size:.58rem;
  letter-spacing:.2em; padding:.5rem .7rem; text-transform:uppercase; transition:all var(--t-ui) var(--ease-out); }
.sound:hover{ border-color:var(--line-hot); color:var(--ink-hi); }
.sound__bars{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.sound__bars i{ width:2px; height:4px; background:var(--ink-lo); transition:background .2s; }
.sound[aria-pressed="true"] .sound__bars i{ background:var(--cyan); animation:eq .9s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2){ animation-delay:.15s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3){ animation-delay:.3s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ height:4px; } 50%{ height:12px; } }

/* ===================== PROGRESS + CHAPTERS ===================== */
.progress{ position:fixed; top:0; left:0; width:100%; height:2px; z-index:var(--z-nav); background:transparent; }
.progress i{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-hot)); box-shadow:var(--glow-cyan); }
.chapters{ position:fixed; right:clamp(.9rem,2vw,1.5rem); top:50%; transform:translateY(-50%);
  z-index:var(--z-nav); display:flex; flex-direction:column; gap:.55rem; pointer-events:auto; }
.chapters a{ display:flex; align-items:center; gap:.5rem; justify-content:flex-end;
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.2em; color:var(--ink-xlo);
  transition:color var(--t-ui) var(--ease-out); text-transform:uppercase; }
.chapters a span{ display:inline-grid; place-items:center; width:22px; height:22px; border:1px solid var(--line);
  color:var(--ink-lo); transition:all var(--t-ui) var(--ease-out); }
.chapters a:hover{ color:var(--ink); } .chapters a:hover span{ border-color:var(--line-hot); }
.chapters a.is-active{ color:var(--cyan); }
.chapters a.is-active span{ border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-soft); }
@media (max-width:820px){ .chapters{ display:none; } }

/* ===================== TYPOGRAPHY HELPERS ===================== */
.kicker{ font-family:var(--f-mono); font-size:var(--step--1); letter-spacing:.34em; color:var(--cyan);
  text-transform:uppercase; }
.split-w{ display:inline-block; overflow:hidden; vertical-align:top; }
.split-w i{ display:inline-block; font-style:normal; will-change:transform; }

/* ===================== ACTS (transparent over the backdrop — NO per-section bg) ===================== */
main{ position:relative; z-index:5; }
.act{ position:relative; }

/* ---- ACT I HERO ---- */
.hero{ min-height:100svh; display:grid; align-content:center; padding:0 var(--pad); position:relative; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, var(--void) 8%, rgba(4,5,10,.66) 34%, transparent 62%); }
.hero__grid{ max-width:min(1180px,92vw); margin-inline:auto; width:100%; }
.hero .kicker{ margin-bottom:clamp(.8rem,2vh,1.6rem); }
.logotype{ font-family:var(--f-display); font-weight:700; font-size:var(--step-hero); line-height:.86;
  letter-spacing:-.02em; color:var(--ink-hi); text-transform:uppercase; white-space:nowrap;
  text-shadow:0 0 40px rgba(22,224,255,.35), 0 0 120px rgba(22,224,255,.12);
  margin-left:-.04em; }
.hero__line{ max-width:34ch; font-size:var(--step-1); color:var(--ink);
  margin-top:clamp(1rem,3vh,2rem); }
.hero__line b{ color:var(--ink-hi); font-weight:600; }
.hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:clamp(1.4rem,4vh,2.6rem); }
.hero__stats{ display:flex; gap:clamp(1.5rem,5vw,4rem); flex-wrap:wrap; margin-top:clamp(2rem,6vh,3.6rem);
  border-top:1px solid var(--line); padding-top:1.2rem; max-width:720px; }
.hero__stats b{ font-family:var(--f-mono); font-size:var(--step-2); color:var(--cyan); display:block; line-height:1;
  letter-spacing:-.01em; }
.hero__stats em{ font-style:normal; font-size:.66rem; letter-spacing:.16em; color:var(--ink-lo);
  text-transform:uppercase; font-family:var(--f-mono); }
.scroll-hint{ position:absolute; left:50%; bottom:clamp(1.2rem,4vh,2.4rem); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.32em; color:var(--ink-lo); text-transform:uppercase; }
.scroll-hint i{ width:1px; height:34px; background:linear-gradient(var(--cyan),transparent);
  animation:drop 1.8s var(--ease-io) infinite; }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---- BUTTONS ---- */
.btn{ position:relative; display:inline-flex; align-items:center; gap:.6rem; overflow:hidden;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1rem 1.5rem; border:1px solid transparent; will-change:transform; isolation:isolate;
  transition:transform var(--t-micro) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), border-color var(--t-ui); }
.btn--primary{ background:var(--cyan); color:#00151d; font-weight:700; box-shadow:var(--glow-cyan);
  clip-path:polygon(0 0,100% 0,100% 70%,calc(100% - 14px) 100%,0 100%); }
.btn--primary:hover{ box-shadow:0 0 30px rgba(22,224,255,.7),0 0 80px rgba(22,224,255,.3); }
.btn--primary .btn__glint{ position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-120%); }
.btn--primary:hover .btn__glint{ opacity:1; animation:glint .8s var(--ease-out); }
@keyframes glint{ to{ transform:translateX(120%); } }
.btn--ghost{ border-color:var(--line-hot); color:var(--ink-hi); background:rgba(8,14,26,.4); backdrop-filter:blur(4px);
  clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 30%); }
.btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn--big{ padding:1.3rem 2.2rem; font-size:.86rem; }
.btn:focus-visible{ outline:2px solid var(--cyan-hot); outline-offset:4px; }

/* ---- ACT II JOURNEY (chapters pinned; text overlays the persistent scene) ---- */
.journey{ position:relative; }
.chapter{ min-height:100svh; display:grid; align-content:center; padding:0 var(--pad);
  max-width:min(1180px,92vw); margin-inline:auto; position:relative; }
/* full-bleed scrim on the TEXT side so copy stays readable over the live core */
.chapter::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%); z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(4,5,10,.92) 0%, rgba(4,5,10,.72) 28%, rgba(4,5,10,.32) 50%, transparent 68%); }
.chapter:nth-child(even)::before{
  background:linear-gradient(270deg, rgba(4,5,10,.92) 0%, rgba(4,5,10,.72) 28%, rgba(4,5,10,.32) 50%, transparent 68%); }
.chapter__index{ font-family:var(--f-mono); font-size:var(--step-2); color:var(--ink-xlo); letter-spacing:.05em;
  -webkit-text-stroke:1px var(--line-hot); color:transparent; margin-bottom:.6rem; }
.chapter__title{ font-family:var(--f-display); font-weight:700; font-size:var(--step-3); line-height:1.02;
  letter-spacing:-.01em; color:var(--ink-hi); max-width:16ch; text-transform:uppercase; }
.chapter__body{ max-width:46ch; font-size:var(--step-1); color:var(--ink); margin-top:1.3rem; }
.chapter__body b{ color:var(--cyan); font-weight:600; }
/* even chapters push right for asymmetry (break the stack) */
.chapter:nth-child(even){ text-align:right; justify-items:end; }
.chapter:nth-child(even) .chapter__title,
.chapter:nth-child(even) .chapter__body,
.chapter:nth-child(even) .spec{ margin-left:auto; }

.spec{ list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-top:1.6rem; max-width:38ch; }
.spec li{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--ink-lo);
  border-left:2px solid var(--line-hot); padding:.35rem 0 .35rem .8rem; text-transform:uppercase; }
.spec li em{ color:var(--cyan); font-style:normal; margin-right:.6rem; }
.chapter:nth-child(even) .spec li{ border-left:0; border-right:2px solid var(--line-hot); padding:.35rem .8rem .35rem 0; }

.pull{ font-family:var(--f-display); font-weight:600; font-size:var(--step-2); color:var(--ink-hi);
  max-width:20ch; margin-top:1.6rem; line-height:1.15; }
.pull{ text-shadow:0 0 40px rgba(22,224,255,.25); }

.arsenal{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem 1.4rem; margin-top:1.8rem; max-width:640px; }
.arsenal__item{ display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:.7rem;
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.06em; color:var(--ink-hi);
  border-bottom:1px solid var(--line); padding-bottom:.5rem; text-transform:uppercase;
  transition:border-color var(--t-ui),color var(--t-ui); }
.arsenal__item span{ color:var(--cyan); font-size:.62rem; }
.arsenal__item em{ grid-column:2; font-style:normal; font-size:.58rem; color:var(--ink-lo); letter-spacing:.14em; }
.arsenal__item:hover{ border-color:var(--cyan); color:var(--cyan-hot); }

.combo{ display:flex; align-items:center; gap:1.4rem; margin-top:1.8rem; }
.combo__num{ font-family:var(--f-mono); font-weight:700; font-size:clamp(3rem,9vw,6rem); color:var(--cyan);
  line-height:.9; text-shadow:var(--glow-cyan); }
.combo__num i{ font-style:normal; color:var(--ink-lo); font-size:.4em; }
.combo__label{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em; color:var(--ink-hi); text-transform:uppercase; }
.combo__note{ font-size:.8rem; color:var(--ink-lo); max-width:26ch; margin-top:.2rem; }

/* ---- ACT III ARRIVAL ---- */
.arrival{ min-height:100svh; display:grid; align-content:center; gap:clamp(2rem,6vh,3.4rem);
  padding:clamp(4rem,12vh,8rem) var(--pad) clamp(2rem,6vh,4rem);
  max-width:min(1180px,92vw); margin-inline:auto; position:relative; }
.arrival::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%); z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(4,5,10,.92) 0%, rgba(4,5,10,.7) 30%, rgba(4,5,10,.3) 52%, transparent 70%); }
.nova-title .kicker{ color:var(--danger); }
.detonate{ font-family:var(--f-display); font-weight:700; font-size:var(--step-4); line-height:.9;
  color:var(--ink-hi); text-transform:uppercase; letter-spacing:-.02em; margin-top:.6rem;
  text-shadow:0 0 60px rgba(22,224,255,.5),0 0 160px rgba(22,224,255,.2); }
.arrival__line{ max-width:52ch; font-size:var(--step-1); color:var(--ink); margin-top:1.3rem; }
.arrival__line b{ color:var(--ink-hi); }
.release{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
  border-top:1px solid var(--line); max-width:640px; }
.release__row{ display:flex; flex-direction:column; gap:.4rem; padding:1.1rem 0; border-bottom:1px solid var(--line);
  border-right:1px solid var(--line); padding-right:1rem; }
.release__row em{ font-family:var(--f-mono); font-style:normal; font-size:.58rem; letter-spacing:.24em; color:var(--ink-lo); text-transform:uppercase; }
.release__row span{ font-size:var(--step-0); color:var(--ink-hi); }
.final-cta{ display:grid; gap:1rem; justify-items:start; }
.final-cta__note{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-lo); }

.foot{ display:grid; gap:1.4rem; padding-top:clamp(2rem,6vh,4rem); margin-top:1rem; border-top:1px solid var(--line);
  grid-template-columns:1fr auto; align-items:end; }
.foot__mark{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,6vw,4rem); letter-spacing:.06em;
  color:transparent; -webkit-text-stroke:1px var(--line-hot); }
.foot__links{ display:flex; gap:1.4rem; flex-wrap:wrap; grid-column:1/-1; }
.foot__links a{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; color:var(--ink-lo);
  text-transform:uppercase; transition:color var(--t-ui); }
.foot__links a:hover{ color:var(--cyan); }
.foot__fine{ grid-column:1/-1; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.14em; color:var(--ink-xlo); text-transform:uppercase; }

/* ===================== REVEAL BASE (JS enhances; content is visible if JS/anim off) ===================== */
.js [data-reveal]{ opacity:0; }
.js [data-reveal].is-in{ opacity:1; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:640px){
  /* text is full-width on mobile — dim the whole backdrop under copy for readability */
  .hero::before, .chapter::before, .chapter:nth-child(even)::before, .arrival::before{
    background:linear-gradient(180deg, rgba(4,5,10,.72), rgba(4,5,10,.6)); }
  .arsenal{ grid-template-columns:1fr; }
  .chapter:nth-child(even){ text-align:left; justify-items:start; }
  .chapter:nth-child(even) .spec li{ border-right:0; border-left:2px solid var(--line-hot);
    padding:.35rem 0 .35rem .8rem; }
  .foot{ grid-template-columns:1fr; }
  .hero__cta .btn{ flex:1 1 auto; justify-content:center; }
}