/* ============================================================================
   base.css — reset, global background (aurora + grain + vignette), typography.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; } /* Lenis owns smooth scroll */
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select { font: inherit; color: inherit; }

/* ---- Background stack (fixed, never repaints on scroll) ----
   Wide soft colour BANDS that always span the full width (never leave the
   screen) and undulate like a liquid aurora current — overlapping ellipses of
   different colour/speed, not circular blobs travelling across. */
.aurora {
  position: fixed; inset: -10%; z-index: -3;
  filter: blur(85px); overflow: hidden; pointer-events: none;
  animation: auroraspin 32s ease-in-out infinite;   /* subtle whole-field tilt */
}
/* Lava-lamp field: soft RADIAL-GRADIENT clouds (colour core → transparent edge,
   so they're inherently smooth gradients) scattered across 2D. Each drifts,
   rotates and swells widely on its own path/speed, so they overlap, interact and
   wave into one another through screen blend. Magenta (--aur-2 #9d3063) is on 3
   large, high-opacity clouds so it clearly dominates the field. */
.aurora__blob {
  position: absolute; mix-blend-mode: screen; will-change: transform;
  background-repeat: no-repeat;
}
.aurora__blob.n1 { background: radial-gradient(closest-side, var(--aur-1), transparent); opacity: 0.62; top: -16%; left: -10%; width: 76vw; height: 58vw; animation: lava1 6.5s ease-in-out infinite; animation-delay:  -2.3s; }
.aurora__blob.n2 { background: radial-gradient(closest-side, var(--aur-2), transparent); opacity: 0.80; top:  14%; left: 42%; width: 72vw; height: 76vw; animation: lava2 8.4s ease-in-out infinite; animation-delay:  -5.1s; }
.aurora__blob.n3 { background: radial-gradient(closest-side, var(--aur-1), transparent); opacity: 0.54; top:  42%; left:  0%; width: 70vw; height: 54vw; animation: lava3 5.8s ease-in-out infinite; animation-delay:  -6.7s; }
.aurora__blob.n4 { background: radial-gradient(closest-side, var(--aur-2), transparent); opacity: 0.68; top:   0%; left: 54%; width: 62vw; height: 68vw; animation: lava3 7.4s ease-in-out infinite; animation-delay:  -9.4s; }
.aurora__blob.n5 { background: radial-gradient(closest-side, var(--aur-2), transparent); opacity: 0.74; top:  46%; left: 56%; width: 72vw; height: 56vw; animation: lava1 9.0s ease-in-out infinite; animation-delay:  -1.8s; }
.aurora__blob.n6 { background: radial-gradient(closest-side, var(--aur-3), transparent); opacity: 0.52; top:  -6%; left: 24%; width: 56vw; height: 66vw; animation: lava2 6.9s ease-in-out infinite; animation-delay: -12.5s; }

.vignette {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  /* fade to a deep BLUE (never pure black), keep more colour toward the top */
  background: radial-gradient(135% 110% at 50% -5%, transparent 45%, var(--bg-deep) 96%);
}

.grain {
  position: fixed; inset: -50%; z-index: 9999; pointer-events: none;
  opacity: 0.55; mix-blend-mode: overlay;
  background-image: url('../assets/grain.svg?v=8');
  background-size: 240px 240px;   /* 480px SVG shown at 240px → 2:1, crisp on retina */
}

/* ---- Typography helpers ---- */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; }
.mono { font-family: var(--font-mono); }
h1 { font-size: clamp(2.4rem, 6vw, var(--fs-3xl)); }
h2 { font-size: clamp(1.8rem, 4vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-lg); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2rem); }
section { padding-block: var(--space-section); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-faint);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before { content: ""; width: 3px; height: 1em; background: var(--orange); border-radius: 2px; }