/* ============================================================
   NEON ARCADE — style.css
   Cyberpunk arcade layout. Content sits ABOVE #gl (z-index).
   Uses only tokens from tokens.css.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--neutral);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.55;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.02;text-transform:uppercase}
p{margin:0}

/* ---- content stacks above the WebGL canvas (#gl is z-index:0) ---- */
.nav,main{position:relative;z-index:2}

/* ============================================================
   ATMOSPHERE OVERLAYS — scanlines + grain (fixed, non-interactive)
   ============================================================ */
.scanlines{
  position:fixed;inset:0;z-index:40;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.16) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode:multiply;opacity:.5;
}
.grain{
  position:fixed;inset:0;z-index:41;pointer-events:none;opacity:.05;
  background-image:url("../assets/img/texture/tex_grain.png");
  background-size:340px 340px;
  mix-blend-mode:overlay;
}
/* faint cyan vignette to frame the CRT */
body::after{
  content:"";position:fixed;inset:0;z-index:39;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%);
}

/* ============================================================
   NAV — sticky glass bar with neon underline
   ============================================================ */
.nav{
  position:sticky;top:0;
  display:flex;align-items:center;gap:1.5rem;
  padding:.85rem clamp(1rem,4vw,2.4rem);
  background:linear-gradient(180deg,rgba(5,8,7,.82),rgba(5,8,7,.35));
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid color-mix(in srgb,var(--primary) 22%,transparent);
}
.nav::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,transparent,var(--primary),var(--accent),transparent);
  opacity:.7;box-shadow:var(--glow-g);
}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.brand-mark{
  color:var(--primary);font-size:1.1rem;line-height:1;
  text-shadow:var(--glow-g);animation:pulse 2.4s ease-in-out infinite;
}
.brand-name{
  font-family:var(--font-display);font-weight:900;letter-spacing:.32em;
  font-size:.82rem;color:var(--ink);text-shadow:0 0 10px rgba(216,255,232,.25);
}
.nav-links{display:flex;gap:1.6rem}
.nav-links a{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-dim);position:relative;padding:.3rem 0;
  transition:color .25s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--primary);box-shadow:var(--glow-g);transition:width .3s ease;
}
.nav-links a:hover{color:var(--primary)}
.nav-links a:hover::after{width:100%}

/* ============================================================
   CTA BUTTONS — neon outline, flood-fill + glow on hover
   ============================================================ */
.cta{
  --c:var(--primary);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c);
  border:1.5px solid var(--c);background:transparent;
  overflow:hidden;isolation:isolate;cursor:pointer;
  transition:color .3s ease,box-shadow .3s ease,transform .12s ease;
  will-change:transform;
}
.cta .cta-label{position:relative;z-index:1}
.cta::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--c);transform:translateY(101%);
  transition:transform .32s cubic-bezier(.6,.05,.2,1);
}
.cta:hover{color:var(--neutral);box-shadow:0 0 18px color-mix(in srgb,var(--c) 60%,transparent),0 0 46px color-mix(in srgb,var(--c) 30%,transparent)}
.cta:hover::before{transform:translateY(0)}
.cta:active{transform:scale(.97)}
.cta-sm{font-size:.68rem;padding:.6rem 1.1rem}
.cta-lg{--c:var(--primary);font-size:.86rem;padding:1rem 2.2rem}
.arrival .cta-lg{--c:var(--accent)}

/* ============================================================
   HERO — ACT I : huge Orbitron neon headline + glitch
   ============================================================ */
.hero{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:6rem clamp(1.2rem,6vw,5rem) 4rem;
}
.hero-inner{max-width:min(760px,92vw)}
.hero-kicker{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.4em;
  color:var(--accent);text-shadow:var(--glow-c);margin-bottom:1.4rem;
}
.hero h1{
  font-weight:900;
  font-size:clamp(2.6rem,8.5vw,6.4rem);
  letter-spacing:.01em;
  color:var(--ink);
  text-shadow:
    0 0 8px rgba(57,255,20,.55),
    0 0 34px rgba(57,255,20,.32),
    0 0 70px rgba(0,229,255,.18);
}
.promise{
  margin-top:1.6rem;max-width:52ch;
  font-size:clamp(1rem,1.5vw,1.22rem);color:var(--ink);
  font-weight:400;line-height:1.6;
}
.hero .cta-lg{margin-top:2.4rem}
.scroll-hint{
  margin-top:3.4rem;display:flex;align-items:center;gap:.8rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.32em;
  color:var(--ink-dim);text-transform:uppercase;
}
.scroll-arrow{color:var(--primary);text-shadow:var(--glow-g);animation:bob 1.8s ease-in-out infinite}

/* glitch on the hero headline */
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  clip-path:inset(0 0 0 0);pointer-events:none;
}
.glitch::before{color:var(--hot);opacity:.55;animation:glitchA 4.6s steps(2,end) infinite}
.glitch::after{color:var(--accent);opacity:.5;animation:glitchB 5.4s steps(2,end) infinite}
@keyframes glitchA{
  0%,92%,100%{transform:translate(0,0);clip-path:inset(0 0 100% 0)}
  93%{transform:translate(-2px,-1px);clip-path:inset(8% 0 62% 0)}
  96%{transform:translate(2px,1px);clip-path:inset(48% 0 20% 0)}
}
@keyframes glitchB{
  0%,90%,100%{transform:translate(0,0);clip-path:inset(0 0 100% 0)}
  91%{transform:translate(2px,0);clip-path:inset(20% 0 54% 0)}
  95%{transform:translate(-2px,1px);clip-path:inset(66% 0 8% 0)}
}

/* ============================================================
   JOURNEY — ACT II : chapters + collection
   ============================================================ */
#journey{position:relative;padding:2rem 0 4rem}
.chapter{
  position:relative;
  min-height:82vh;display:flex;flex-direction:column;justify-content:center;
  max-width:min(640px,88vw);
  padding:4rem clamp(1.2rem,6vw,5rem);
}
/* localized dark scrim so copy stays legible over the powered neon scene,
   without boxing it in (fades out, keeps the 3D world visible around it) */
.chapter::before{
  content:"";position:absolute;inset:-4% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 68% at 28% 50%,
    rgba(3,7,6,.86), rgba(3,7,6,.5) 42%, transparent 74%);
}
.chapter:nth-child(even){margin-left:auto;text-align:right}
.chapter:nth-child(even)::before{
  background:radial-gradient(62% 68% at 72% 50%,
    rgba(3,7,6,.86), rgba(3,7,6,.5) 42%, transparent 74%);
}
.chapter-index{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.34em;
  color:var(--accent);text-shadow:var(--glow-c);margin-bottom:1.1rem;
}
.chapter h2{
  font-size:clamp(1.7rem,4.4vw,3.1rem);font-weight:700;
  color:var(--ink);text-shadow:0 0 24px rgba(57,255,20,.28);
}
.chapter-body{
  margin-top:1.2rem;max-width:46ch;color:var(--ink);
  font-size:clamp(1rem,1.4vw,1.14rem);
}
.chapter:nth-child(even) .chapter-body{margin-left:auto}

/* ---- collection ---- */
.collection{position:relative;padding:4rem clamp(1.2rem,5vw,4rem) 6rem;max-width:var(--maxw);margin:0 auto}
/* full-bleed dark ground so the product catalog reads on a stable backdrop
   (the immersive 3D owns the hero + chapters + arrival; the grid is a catalog),
   fading top/bottom so it blends into the journey above and the finale below */
.collection::before{
  content:"";position:absolute;top:-3rem;bottom:-3rem;left:50%;transform:translateX(-50%);
  width:100vw;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    transparent, rgba(4,8,7,.9) 10%, rgba(4,8,7,.95) 86%, transparent);
}
.collection-head{margin-bottom:2.6rem}
.section-kicker{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.34em;
  color:var(--accent);text-shadow:var(--glow-c);margin-bottom:.8rem;
}
.collection-head h2{
  font-size:clamp(1.8rem,4.6vw,3.2rem);font-weight:700;color:var(--ink);
  text-shadow:0 0 24px rgba(57,255,20,.25);
}
.grid{
  display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}

/* ---- product card : dark glass + neon border, hover lift/glow ---- */
.card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(10,18,16,.72),rgba(5,8,7,.86));
  border:1px solid color-mix(in srgb,var(--primary) 24%,transparent);
  border-radius:4px;overflow:hidden;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease;
  will-change:transform;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:4px;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .3s ease;
}
.card:hover{
  transform:translateY(-8px);
  border-color:var(--primary);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 40%,transparent),
             0 18px 46px rgba(0,0,0,.6),
             0 0 34px color-mix(in srgb,var(--primary) 22%,transparent);
}

.card-media{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:
    radial-gradient(80% 70% at 50% 20%,color-mix(in srgb,var(--primary) 28%,transparent),transparent 60%),
    radial-gradient(70% 60% at 70% 90%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 65%),
    linear-gradient(160deg,#06140e,var(--neutral));
}
.card-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease,opacity .3s ease;
}
.card:hover .card-media img{transform:scale(1.06)}
.card-media::after{ /* scanline sheen on media */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.18) 3px,rgba(0,0,0,0) 4px);
  opacity:.35;mix-blend-mode:multiply;
}

/* graceful fallback : missing image -> neon block + machine name */
.card-fallback{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;text-align:center;
  padding:1.4rem;
  font-family:var(--font-display);font-weight:900;letter-spacing:.14em;
  font-size:clamp(1rem,2.4vw,1.5rem);color:var(--ink);
  text-shadow:var(--glow-g);
}
.card-media img.noimg{opacity:0}
.card-media:has(img.noimg) .card-fallback{display:flex}

.card-body{padding:1.15rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.card-body h3{
  font-size:1.02rem;font-weight:700;letter-spacing:.05em;color:var(--ink);
}
.card-tag{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  padding:.24rem .5rem;border-radius:3px;white-space:nowrap;text-transform:uppercase;
}
.card-body p{font-size:.92rem;color:var(--ink-dim);line-height:1.5;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.3rem}
.price{
  font-family:var(--font-mono);font-weight:700;font-size:1.15rem;
  color:var(--primary);text-shadow:var(--glow-g);letter-spacing:.02em;
}
.card-cta{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  transition:color .2s ease,text-shadow .2s ease;
}
.card-cta:hover{color:var(--primary);text-shadow:var(--glow-g)}

/* ============================================================
   ARRIVAL — ACT III
   ============================================================ */
.arrival{
  min-height:88vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:6rem clamp(1.2rem,6vw,5rem);
}
.arrival-inner{position:relative;max-width:min(720px,92vw)}
/* radial scrim keeps the finale copy legible while the lit cabinet shows around it */
.arrival-inner::before{
  content:"";position:absolute;inset:-20% -24%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 64% at 50% 50%,
    rgba(3,7,6,.92), rgba(3,7,6,.55) 50%, transparent 76%);
}
.arrival h2{
  font-size:clamp(2rem,6vw,4.4rem);font-weight:900;color:var(--ink);
  margin-top:1rem;
  text-shadow:0 0 10px rgba(0,229,255,.5),0 0 44px rgba(0,229,255,.28),0 0 80px rgba(57,255,20,.16);
}
.arrival-body{
  margin:1.5rem auto 0;max-width:50ch;color:var(--ink);
  font-size:clamp(1rem,1.5vw,1.18rem);
}
.arrival .cta-lg{margin-top:2.4rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;z-index:2;
  border-top:1px solid color-mix(in srgb,var(--primary) 22%,transparent);
  /* opaque dark ground (soft fade at the very top) so footer copy is always
     crisp; no backdrop-blur (it milk-washes the bright canvas behind it) */
  background:linear-gradient(180deg,rgba(4,9,7,.7),#030605 20%,#020403);
  padding:3.4rem clamp(1.2rem,6vw,5rem) 1.6rem;
}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:2.4rem;justify-content:space-between;
}
.footer-brand{max-width:320px}
.footer-brand .brand-name{font-size:1rem}
.footer-tag{margin-top:.7rem;color:var(--ink-dim);font-size:.9rem}
.footer-cols{display:flex;flex-wrap:wrap;gap:2.6rem}
.footer-col{display:flex;flex-direction:column;gap:.55rem}
.footer-h{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.26em;
  color:var(--accent);margin-bottom:.3rem;
}
.footer-col a{font-size:.86rem;color:var(--ink-dim);transition:color .2s ease}
.footer-col a:hover{color:var(--primary)}
.footer-base{
  max-width:var(--maxw);margin:2.6rem auto 0;padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.05);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--ink-dim);
}
.footer-status{display:inline-flex;align-items:center;gap:.5rem;color:var(--primary)}
.footer-status .dot{
  width:7px;height:7px;border-radius:50%;background:var(--primary);
  box-shadow:var(--glow-g);animation:pulse 1.8s ease-in-out infinite;
}

/* ============================================================
   REVEAL ANIMATION HOOKS (main.js reveals() drives these)
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in,.reveal.in,.reveal.visible{opacity:1;transform:none}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ============================================================
   POSTER MODE — no WebGL. Lives on #poster gradient.
   ============================================================ */
body[data-mode="poster"] #boot{display:none}
body[data-mode="poster"] .scroll-hint{display:none}
body[data-mode="poster"] .chapter{min-height:auto;padding-top:2.6rem;padding-bottom:2.6rem}
body[data-mode="poster"] .hero,
body[data-mode="poster"] .arrival{min-height:82vh}
body[data-mode="poster"] .reveal{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .nav-links{display:none}
  .chapter,.chapter:nth-child(even){text-align:left;margin-left:0}
  .chapter:nth-child(even) .chapter-body{margin-left:0}
  .chapter{min-height:auto;padding-top:3rem;padding-bottom:3rem}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .card-media{aspect-ratio:16/11}
  .hero{padding-top:5rem}
  .cta-lg{padding:.9rem 1.6rem;font-size:.78rem}
}
@media (max-width:360px){
  body{font-size:14px}
  .nav{gap:.8rem;padding:.7rem .9rem}
  .brand-name{letter-spacing:.22em}
  .cta-sm{padding:.55rem .85rem;font-size:.62rem}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .glitch::before,.glitch::after{display:none}
}