/* ============================================================
   CODEGENESIS – base layout, layers, hero, final, UI chrome
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  overflow: hidden;                 /* slide navigation – no page scrolling */
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
body.is-locked { overflow: hidden; height: 100vh; }

/* keep the stage hidden until the preloader finishes, so nothing flashes behind it */
body:not(.ready) .hero,
body:not(.ready) #capsules-layer,
body:not(.ready) .nav { visibility: hidden; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--cyan) 40%, transparent); color: #fff; }

/* --- fixed WebGL canvas behind everything --- */
#scene-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100dvh;
  z-index: var(--z-scene);
  display: block;
}

/* atmospheric vignette over the canvas (deepens with tunnel) */
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, transparent 34%, rgba(3,4,8,0.55) 78%, rgba(3,4,8,0.92) 100%);
  opacity: 0.65; transition: opacity 0.4s var(--ease-cine);
}
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   HERO – the mouth of the tunnel
   ============================================================ */
.hero {
  position: fixed; inset: 0; z-index: var(--z-hero);
  display: grid; place-items: center; text-align: center;
  padding: 6vw; pointer-events: none;
  will-change: transform, opacity, filter;
}
/* frameless: a soft radial darkening behind the copy (no visible box) */
.hero__inner { max-width: 60rem; position: relative; padding: clamp(1.2rem, 3vw, 2.2rem); }
.hero__inner::before {
  content: ""; position: absolute; inset: -34% -22%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 62% at 50% 50%, rgba(4,5,9,0.74), rgba(4,5,9,0.36) 54%, rgba(4,5,9,0) 78%);
}
.hero__kicker {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--cyan);
  opacity: 0.9; margin: 0 0 1.4rem;
  text-shadow: 0 0 18px rgba(0,240,255,0.45);
}
.hero__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.1; letter-spacing: -0.02em;
  margin: 0; text-wrap: balance; color: #F2F3F7;
  text-shadow: 0 0 60px rgba(0,0,0,0.95), 0 2px 12px rgba(0,0,0,0.85), 0 0 34px rgba(0,240,255,0.12);
}
.hero__title .amber { color: var(--amber); text-shadow: 0 0 34px rgba(255,184,0,0.4), 0 2px 10px rgba(0,0,0,0.8); }
/* supporting description paragraph under the title */
.hero__desc {
  margin: 1.5rem auto 0; max-width: 40rem;
  font-family: var(--font-body); font-size: var(--step-1); line-height: 1.5;
  color: var(--muted); text-wrap: balance;
  text-shadow: 0 1px 8px rgba(0,0,0,0.75);
}
/* the typed technical line under the title */
.hero__sub {
  margin: 1.9rem auto 0; max-width: 46rem; min-height: 1.6em;
  font-family: var(--font-mono); font-size: var(--step-0); line-height: 1.5;
  color: var(--cyan); letter-spacing: 0.02em;
  text-shadow: 0 0 20px rgba(0,240,255,0.4), 0 1px 6px rgba(0,0,0,0.8);
}
.hero__sub .caret {
  display: inline-block; width: 0.6ch; margin-left: 1px;
  background: var(--cyan); color: transparent;
  box-shadow: 0 0 10px rgba(0,240,255,0.8);
  animation: caretblink 1s steps(1) infinite;
}
@keyframes caretblink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
.hero__scroll {
  margin-top: 2.6rem; font-family: var(--font-mono);
  font-size: var(--step--1); letter-spacing: 0.2em; color: var(--faint);
  display: inline-flex; align-items: center; gap: 0.6em;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 26px;
  background: linear-gradient(var(--cyan), transparent);
  animation: scrollpulse 1.8s var(--ease-cine) infinite;
}
@keyframes scrollpulse { 0%,100%{transform:scaleY(.4);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

/* per-word wrapping: letters/chars sit in nowrap .word boxes so words never split
   mid-word; lines break only at the spaces between words */
.hero__title .word, .manifest__title .word,
.manifest__body .word, .manifest__code .word { display: inline-block; white-space: nowrap; }
.hero__title .chr, .manifest__title .chr,
.manifest__body .chr, .manifest__code .chr { display: inline-block; }
/* hero sub: each item stays on one line; amber diamond separators between items */
.hero__sub .item { white-space: nowrap; }
.hero__sub .sep {
  color: var(--amber); font-size: 0.66em; vertical-align: 0.1em;
  opacity: 0.9; text-shadow: 0 0 10px rgba(255,184,0,0.55);
}

/* ============================================================
   MANIFEST – the bridge screen (Z ≈ 400)
   ============================================================ */
.manifest {
  position: fixed; inset: 0; z-index: 22;   /* above hero (20) so any overlap resolves in its favour */
  display: grid; place-items: center; text-align: center; padding: 6vw;
  opacity: 0; visibility: hidden; pointer-events: none;
  will-change: opacity, transform;
}
.manifest.is-live { visibility: visible; }
.manifest__inner { max-width: 54rem; position: relative; padding: clamp(1.2rem, 3vw, 2.2rem); }
.manifest__inner::before {
  content: ""; position: absolute; inset: -40% -24%; z-index: -1; pointer-events: none;
  background: radial-gradient(56% 60% at 50% 50%, rgba(4,5,9,0.76), rgba(4,5,9,0.36) 54%, rgba(4,5,9,0) 78%);
}
/* same visual system as the hero title (display, non-italic, amber accent word) */
.manifest__title {
  font-family: var(--font-display); font-weight: 500;
  /* same scale as the hero title (slide 1) */
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0;
  text-wrap: balance;
  color: #F2F3F7; text-shadow: 0 0 50px rgba(0,0,0,0.9), 0 2px 12px rgba(0,0,0,0.8), 0 0 34px rgba(0,240,255,0.12);
}
.manifest__title .amber { color: var(--amber); text-shadow: 0 0 30px rgba(255,184,0,0.4), 0 2px 10px rgba(0,0,0,0.8); }
.manifest__body {
  margin: 1.6rem auto 0; max-width: 38rem; color: var(--muted);
  font-size: var(--step-1); line-height: 1.55; text-wrap: balance;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
.manifest__code {
  margin: 1.8rem 0 0; font-family: var(--font-mono); font-size: var(--step-0);
  color: var(--cyan); text-shadow: 0 0 20px rgba(0,240,255,0.4);
}

/* ---- slide-2 ambient depth: orbs + rotating ring + sparks + corner ticks ---- */
.manifest__amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.manifest__amb .ring {
  position: absolute; left: 50%; top: 50%; width: min(50rem, 84vw); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px dashed rgba(0,240,255,0.10);
  animation: m-spin 46s linear infinite;
}
.manifest__amb .ring::after {
  content: ""; position: absolute; inset: 13%; border-radius: 50%;
  border: 1px solid rgba(255,184,0,0.06);
}
.manifest__amb .orb { position: absolute; border-radius: 50%; filter: blur(34px); mix-blend-mode: screen; opacity: 0.5; will-change: transform; }
.manifest__amb .orb.o1 { width: 26vw; height: 26vw; left: 4%;  top: 10%;  background: radial-gradient(circle, rgba(255,184,0,0.26), transparent 70%); animation: m-drift 16s ease-in-out infinite; }
.manifest__amb .orb.o2 { width: 24vw; height: 24vw; right: 3%; top: 16%;  background: radial-gradient(circle, rgba(0,240,255,0.22), transparent 70%); animation: m-drift 21s ease-in-out infinite reverse; }
.manifest__amb .orb.o3 { width: 22vw; height: 22vw; left: 8%;  bottom: 4%; background: radial-gradient(circle, rgba(123,97,255,0.22), transparent 70%); animation: m-drift 25s ease-in-out infinite; }
.manifest__amb .spark { position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(0,240,255,0.85); box-shadow: 0 0 10px rgba(0,240,255,0.9); opacity: 0; will-change: transform, opacity;
  animation: m-spark 6.5s ease-in-out infinite; }
.manifest__amb .spark.s1 { left: 20%; top: 40%; animation-delay: 0s; }
.manifest__amb .spark.s2 { right: 18%; top: 32%; background: rgba(255,184,0,0.9); box-shadow: 0 0 10px rgba(255,184,0,0.9); animation-delay: 1.6s; }
.manifest__amb .spark.s3 { left: 32%; bottom: 22%; animation-delay: 3.1s; }
.manifest__amb .spark.s4 { right: 28%; bottom: 30%; background: rgba(123,97,255,0.9); box-shadow: 0 0 10px rgba(123,97,255,0.9); animation-delay: 4.4s; }
@keyframes m-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(2.5%,-3%) scale(1.09); } }
@keyframes m-spin  { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes m-spark { 0%,100% { opacity: 0; transform: translateY(0) scale(.5); } 40% { opacity: .9; } 72% { opacity: .5; } 100% { transform: translateY(-42px) scale(1); } }
/* corner brackets framing the copy */
.manifest__tick {
  position: absolute; width: 18px; height: 18px; z-index: 2; pointer-events: none;
  border: 1.5px solid rgba(0,240,255,0.35); box-shadow: 0 0 10px rgba(0,240,255,0.18);
  animation: m-tick 4s ease-in-out infinite;
}
.manifest__tick.tl { left: -8px; top: -8px;    border-right: none; border-bottom: none; }
.manifest__tick.tr { right: -8px; top: -8px;    border-left: none;  border-bottom: none; }
.manifest__tick.bl { left: -8px; bottom: -8px;  border-right: none; border-top: none; }
.manifest__tick.br { right: -8px; bottom: -8px; border-left: none;  border-top: none; }
@keyframes m-tick { 0%,100% { opacity: 0.3; } 50% { opacity: 0.75; } }

/* ============================================================
   CAPSULE LAYER – the 3D depth stage
   ============================================================ */
#capsules-layer {
  position: fixed; inset: 0; z-index: var(--z-capsules);
  perspective: var(--perspective);
  transform-style: preserve-3d;
  pointer-events: none;
  overflow: visible;
  opacity: 0;                         /* render() drives this per-frame (1 − text-slide opacity) */
}
#capsules-layer > * { pointer-events: auto; }

/* section gates – glowing rings the camera flies through */
.gate {
  position: absolute; left: 50%; top: 50%;
  width: 62vmin; height: 62vmin; margin: -31vmin 0 0 -31vmin;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
  box-shadow: 0 0 24px rgba(0,240,255,0.15), inset 0 0 30px rgba(123,97,255,0.08);
  transform-style: preserve-3d; pointer-events: none;
  will-change: transform, opacity;
}
.gate::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent);
}

/* ============================================================
   FINAL – point of contact
   ============================================================ */
.final {
  position: fixed; inset: 0; z-index: var(--z-final);
  display: grid; place-items: center; text-align: center; padding: 6vw;
  opacity: 0; visibility: hidden; pointer-events: none;
  will-change: opacity, transform;
}
.final.is-live { visibility: visible; pointer-events: auto; }
.final__inner { max-width: 40rem; position: relative; padding: clamp(1.2rem, 3vw, 2.2rem); }
.final__inner::before {
  content: ""; position: absolute; inset: -40% -24%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 62% at 50% 50%, rgba(4,5,9,0.76), rgba(4,5,9,0.38) 54%, rgba(4,5,9,0) 80%);
}
.final__glow {
  position: absolute; left: 50%; top: 50%; width: 60vmin; height: 60vmin;
  transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,184,0,0.22), transparent 62%);
  filter: blur(20px);
}
.final__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 1.1rem + 2.3vw, 3rem);
  letter-spacing: -0.02em; margin: 0; line-height: 1.1;
}
.final__sub { color: var(--muted); font-size: var(--step-0); margin: 1.1rem auto 1.9rem; max-width: 32rem; }

.cta {
  --p: 14px;
  position: relative; display: inline-flex; align-items: center; gap: 0.7em;
  padding: 1.1rem 2.2rem; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: #120a00; border-radius: 4px;
  background: linear-gradient(100deg, var(--amber), var(--amber-2));
  box-shadow: 0 0 0 rgba(255,184,0,0);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  clip-path: polygon(var(--p) 0, 100% 0, 100% calc(100% - var(--p)), calc(100% - var(--p)) 100%, 0 100%, 0 var(--p));
}
.cta:hover, .cta:focus-visible { transform: translateY(-2px) scale(1.04); box-shadow: 0 0 44px rgba(255,184,0,0.5); outline: none; }
.cta:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.7), 0 0 44px rgba(255,184,0,0.5); }

.email {
  margin-top: 1.8rem; display: flex; gap: 0.6rem; justify-content: center;
  max-width: 26rem; margin-inline: auto;
}
.email input {
  flex: 1; padding: 0.85rem 1.1rem; color: var(--text);
  background: rgba(10,15,26,0.5); border: 1px solid rgba(123,97,255,0.4);
  border-radius: 4px; font-family: var(--font-mono); font-size: var(--step--1);
  backdrop-filter: blur(8px);
}
.email input::placeholder { color: var(--faint); }
.email input:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,240,255,0.18); }

/* ============================================================
   UI chrome – brand + sound toggle
   ============================================================ */
.brand {
  position: fixed; top: 1.4rem; left: 1.6rem; z-index: var(--z-ui);
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--text);
  pointer-events: none;
  text-shadow: 0 0 18px rgba(5,6,10,0.9), 0 1px 6px rgba(5,6,10,0.85);
}
.brand b { color: var(--amber); font-weight: 700; text-shadow: 0 0 16px rgba(255,184,0,0.45); }

.progress-rail {
  position: fixed; right: 1.7rem; top: 50%; transform: translateY(-50%);
  z-index: var(--z-ui); width: 2px; height: 34vh; border-radius: 2px;
  background: rgba(255,255,255,0.08); pointer-events: none; overflow: hidden;
}
.progress-rail__fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(var(--amber), var(--cyan), var(--violet));
  box-shadow: 0 0 10px var(--cyan);
}

/* preloader overlay – above absolutely everything at boot */
#preloader { position: fixed; inset: 0; z-index: 9999; }
#preloader:empty { display: none; }

/* skip preloader – strictly above the preloader so it stays clickable */
.skip {
  position: fixed; bottom: 1.4rem; left: 1.6rem; z-index: 10000;
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.16em;
  color: var(--faint); background: none; border: 0; cursor: pointer; text-transform: uppercase;
}
.skip:hover { color: var(--text); }

/* ============================================================
   NAV – slide arrows (← Назад / Вперёд →)
   ============================================================ */
.nav {
  position: fixed; left: 0; right: 0; bottom: 1.7rem; z-index: var(--z-ui);
  display: flex; justify-content: center; gap: 0.9rem;
  pointer-events: none;                 /* the full-width bar never blocks the scene… */
}
.nav__btn {
  pointer-events: auto;                 /* …only the buttons themselves are interactive */
  display: inline-flex; align-items: center; gap: 0.55em;
  height: 48px; padding: 0 1.2rem;
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
  letter-spacing: 0.08em; color: var(--text);
  background: rgba(5,5,8,0.6); border: 1px solid var(--faint); border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out),
              transform .25s var(--ease-out), opacity .25s;
}
.nav__btn:hover:not(:disabled),
.nav__btn:focus-visible:not(:disabled) {
  border-color: var(--amber); box-shadow: 0 0 14px rgba(255,184,0,0.32);
  transform: translateY(-2px); outline: none;
}
.nav__btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.nav__glyph { font-size: 18px; line-height: 1; }
.nav__label { line-height: 1; }

/* ============================================================
   FLAT MODE – mobile / reduced-motion keep the same Z-slide stage;
   only the rendering is lighter (scene quality set in JS)
   ============================================================ */
body.flat-mode .gate { display: none; }

/* hide the depth rail on tablets/narrow so it can't overlap captions */
@media (max-width: 900px) { .progress-rail { display: none; } }

/* ---- responsive: tablet ---- */
@media (max-width: 1024px) {
  .nav__btn { height: 44px; font-size: 13px; padding: 0 1rem; }
}
/* ---- responsive: phone ---- */
@media (max-width: 767px) {
  .nav { left: 0; right: 0; bottom: 1.4rem; justify-content: center; gap: 1.5rem; }
  .nav__btn { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
  .nav__label { display: none; }
  .nav__glyph { font-size: 22px; }
  .hero__inner, .manifest__inner, .final__inner { padding: 1.4rem; }
  /* full-screen case modal on phones */
  .cg-modal {
    width: 100vw !important; height: 100dvh !important;
    max-width: none !important; max-height: none !important; border-radius: 0 !important;
  }
}

/* respect reduced motion globally as a safety net */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll::after,
  .hero__sub .caret { animation: none !important; }
  .cta:hover, .cta:focus-visible { transform: none; }
}