/* main.css — global layout, body chrome, shared section primitives */

html, body { background: var(--void); color: var(--white); }

body {
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(123, 47, 255, 0.10), transparent 55%),
    radial-gradient(ellipse at 85% 115%, rgba(0, 245, 255, 0.06), transparent 50%),
    #000206;
}

/* ---- Silky momentum scroll ---- */
.smooth-scroll #app {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
}
.scroll-spacer { width: 1px; pointer-events: none; }

/* ---- Cinematic atmosphere ---- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.atmosphere__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,1,4,0.55) 88%, rgba(0,1,4,0.92) 100%);
}
.atmosphere__grain {
  position: absolute; inset: 0;
  opacity: 0.045;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  animation: grainShift 0.7s steps(4) infinite;
}
@keyframes grainShift {
  0% { background-position: 0 0; } 25% { background-position: -24px 12px; }
  50% { background-position: 18px -18px; } 75% { background-position: -12px 24px; }
  100% { background-position: 0 0; }
}
.atmosphere__scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
  opacity: 0.35;
}

/* ---- Scroll progress meter ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: var(--z-nav);
  background: rgba(255,255,255,0.04);
}
.scroll-progress__bar {
  display: block; height: 100%;
  width: calc(var(--scroll-progress, 0) * 100%);
  background: linear-gradient(90deg, var(--purple), var(--cyan), var(--magenta));
  box-shadow: 0 0 12px rgba(0,245,255,0.6);
}

/* Hide custom cursor on touch / coarse pointers */
@media (pointer: fine) { body { cursor: none; } body * { cursor: none; } }

/* The persistent WebGL canvas */
.webgl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-webgl);
  pointer-events: none;
}

#app { position: relative; z-index: var(--z-content); }

/* Locked scroll while loader is active */
body.is-loading { overflow: hidden; height: 100vh; }

/* Generic section frame */
.section {
  position: relative;
  width: 100%;
  padding: var(--section-pad) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section__head {
  max-width: 1100px;
  margin: 0 auto clamp(4rem, 9vh, 8rem);
  text-align: center;
}
/* mono eyebrow above each section title */
.section__head::before {
  content: attr(data-eyebrow);
  display: block;
  margin-bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(0, 245, 255, 0.55);
}

.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 0.98;
  letter-spacing: -0.03em;
  background: linear-gradient(118deg, #ffffff 18%, var(--purple) 62%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 40px rgba(123, 47, 255, 0.25));
}

.section__lede {
  margin-top: 1.6rem;
  font-size: var(--step-1);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  max-width: 42ch;
  margin-inline: auto;
  line-height: 1.5;
}

/* Mono accent label utility */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Sound toggle */
.sound-toggle {
  position: fixed;
  top: clamp(1rem, 2vw, 2rem);
  right: clamp(1rem, 2vw, 2rem);
  z-index: var(--z-nav);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--glass);
  backdrop-filter: blur(10px);
  font-size: 1.1rem;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.sound-toggle:hover { border-color: var(--purple); box-shadow: var(--glow-purple); transform: scale(1.05); }
.sound-toggle.is-on { border-color: var(--cyan); box-shadow: var(--glow-cyan); }