/* ============================================================
   Get Nito — Home hero journey (vortex → globe → Lincoln).
   Fixed Three.js canvas + pinned stage copy, driven by the
   .scroll-space spacer. Sits behind <main> (z-index 2); the
   canvas fades out as the page content scrolls up over it.
   JS: assets/hero.js. Palette/fonts come from index.html :root.
   ============================================================ */

#scene {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 1; display: block; pointer-events: none;
}

/* ambient brand glows behind the canvas (canvas is alpha) */
.bgglow { position: fixed; border-radius: 50%; filter: blur(120px); z-index: -1; pointer-events: none; }
.bgglow.g1 { width: 60vmax; height: 60vmax; top: -22vmax; left: -16vmax; background: radial-gradient(circle, #c8f542, transparent 60%); opacity: .2;  animation: gnDriftA 40s ease-in-out infinite alternate; }
.bgglow.g2 { width: 58vmax; height: 58vmax; bottom: -24vmax; right: -20vmax; background: radial-gradient(circle, #2fa084, transparent 60%); opacity: .28; animation: gnDriftB 46s ease-in-out infinite alternate; }
.bgglow.g3 { width: 40vmax; height: 40vmax; top: 30vh; right: 10vw; background: radial-gradient(circle, #6fcf97, transparent 60%); opacity: .16; animation: gnDriftA 52s ease-in-out infinite alternate; }
.bgglow.g4 { width: 46vmax; height: 46vmax; bottom: -12vmax; left: -8vmax; background: radial-gradient(circle, #6fcf97, transparent 60%); opacity: .2;  animation: gnDriftB 44s ease-in-out infinite alternate; }
.bgglow.g5 { width: 48vmax; height: 48vmax; top: -14vmax; right: -10vmax; background: radial-gradient(circle, #c8f542, transparent 60%); opacity: .18; animation: gnDriftA 50s ease-in-out infinite alternate; }
.bgglow.g6 { width: 34vmax; height: 34vmax; bottom: 16vh; left: 20vw; background: radial-gradient(circle, #2fa084, transparent 60%); opacity: .15; animation: gnDriftB 58s ease-in-out infinite alternate; }
.bgglow.g7 { width: 32vmax; height: 32vmax; top: 12vh; left: 38vw; background: radial-gradient(circle, #c8f542, transparent 60%); opacity: .12; animation: gnDriftA 64s ease-in-out infinite alternate; }
@keyframes gnDriftA { to { transform: translate(14vmax, 10vmax) scale(1.2); } }
@keyframes gnDriftB { to { transform: translate(-16vmax, -8vmax) scale(1.15); } }

/* the tall spacer that drives the scroll scrub (taller = slower journey) */
.scroll-space { position: relative; z-index: 0; height: 780vh; }

/* pinned overlay copy keyed to journey stages */
.stage { position: fixed; left: 0; right: 0; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; pointer-events: none; opacity: 0; z-index: 8; }
.stage .eyebrow { font-family: 'Space Mono', monospace; font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--lime); margin-bottom: 1rem; text-shadow: 0 0 18px rgba(0,0,0,.85); }
.stage .eyebrow b { color: #fff; font-weight: 700; }
.stage h1, .stage h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -.02em; text-shadow: 0 2px 44px rgba(0,0,0,.8), 0 0 16px rgba(0,0,0,.6); }
.stage h1 em, .stage h2 em { font-style: normal; color: var(--teal); }
.stage p { color: var(--muted); font-weight: 300; margin-top: 1rem; max-width: 30ch; }

/* top navbar starts hidden; hero.js adds .nav-in as the globe settles on Lincoln */
.nav { transform: translateY(-115%); opacity: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.nav.nav-in { transform: none; opacity: 1; z-index: 1000; }

/* horizontal scan line also held back until the content is in view */
.page-scan { visibility: hidden; }
body.content-in .page-scan { visibility: visible; }

/* scroll hint for the journey, held back until the intro hands off */
.gn-hint { position: fixed; bottom: 1.6rem; left: 0; right: 0; text-align: center; font-family: 'Space Mono', monospace; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); z-index: 3; visibility: hidden; animation: gnBob 2.4s ease-in-out infinite; }
body.intro-done:not(.content-in) .gn-hint { visibility: visible; }
@keyframes gnBob { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }

/* ── intro / page-load brand moment ──────────────────── */
.intro { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; text-align: center; padding: 0 1.5rem; pointer-events: none; transition: opacity .8s ease, transform .8s ease; }
.intro-mark { font-family: 'Space Mono', monospace; font-weight: 700; font-size: clamp(1.8rem, 5.2vw, 3rem); letter-spacing: .04em; color: #fff; opacity: 1; animation: introMark 1.1s cubic-bezier(.2,.7,.2,1) .2s both; text-shadow: 0 2px 30px rgba(0,0,0,.7); }
.intro-mark .n { color: var(--lime); animation: introAccent .6s ease 1.05s both; }
.intro-cue { display: flex; flex-direction: column; align-items: center; gap: .45rem; font-family: 'Space Mono', monospace; font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); opacity: .82; animation: introCue .8s ease 1.5s both; }
.intro-cue .chev { font-size: 1.1rem; line-height: 1; animation: introBob 1.8s ease-in-out 2.2s infinite; }
.intro.intro-gone { opacity: 0; transform: translateY(-24px); }
@keyframes introMark { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes introAccent { from { opacity: 0; } to { opacity: 1; } }
@keyframes introCue { from { opacity: 0; } to { opacity: .82; } }
@keyframes introBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (prefers-reduced-motion: reduce) {
  .gn-hint { display: none; }
  .bgglow { animation: none !important; }
  .intro-mark, .intro-mark .n, .intro-cue { animation: none; opacity: 1; transform: none; }
  .intro-cue { opacity: .82; }
  .intro-cue .chev { animation: none; }
  .intro.intro-gone { opacity: 0; }
}