/* ============================================================
   base.css — reset, atmosphere, typography foundation, a11y
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* reserve the scrollbar gutter so locking body scroll on modal open
     doesn't shift the page (CLS). */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
  position: relative;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Typography base ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 460;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-optical-sizing: auto;
  text-wrap: balance;
}
p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--gold-soft);
}

.serif { font-family: var(--font-display); }
.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   Atmosphere — fixed full-screen overlays
   ============================================================ */

/* Digital-sunset canvas lives here (nebula + starfield + horizon) */
#scene-canvas {
  position: fixed;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Drifting aurora orbs — soft radial glow (no blur filter), screen-blended.
   This is the depth + colour that lifts the scene out of "flat". */
.atmos-orbs {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  will-change: transform;
}
.orb--iris {
  width: 54vw; height: 54vw; top: -14%; left: -10%;
  background: radial-gradient(circle at 50% 50%, oklch(70% 0.19 285 / 0.55), transparent 66%);
  animation: orb-a 32s ease-in-out infinite;
}
.orb--cyan {
  width: 46vw; height: 46vw; top: 30%; right: -14%;
  background: radial-gradient(circle at 50% 50%, oklch(82% 0.14 200 / 0.42), transparent 66%);
  animation: orb-b 38s ease-in-out infinite;
}
.orb--gold {
  width: 50vw; height: 50vw; bottom: -18%; left: 20%;
  background: radial-gradient(circle at 50% 50%, oklch(83% 0.13 79 / 0.4), transparent 66%);
  animation: orb-c 30s ease-in-out infinite;
}
.orb--rose {
  width: 38vw; height: 38vw; top: 6%; left: 46%;
  background: radial-gradient(circle at 50% 50%, oklch(74% 0.18 8 / 0.32), transparent 66%);
  animation: orb-d 44s ease-in-out infinite;
}
@keyframes orb-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(12vw, 8vh) scale(1.15); } }
@keyframes orb-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-10vw, 6vh) scale(1.2); } }
@keyframes orb-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(8vw, -10vh) scale(1.1); } }
@keyframes orb-d { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-14vw, 10vh) scale(1.25); } }
body[data-motion="off"] .orb { animation: none; }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

/* Warm horizon glow bleeding up from the bottom */
.atmos-sunset {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--grad-sunset);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Vignette to focus the eye */
.atmos-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(130% 90% at 50% 8%,
                transparent 40%,
                oklch(8% 0.02 275 / 0.55) 100%);
}

/* Film grain — animated, respects reduced motion */
.atmos-grain {
  position: fixed;
  inset: -50%;
  z-index: 900;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-drift 6s steps(6) infinite;
}
@keyframes grain-drift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(4%, -6%); }
  60%  { transform: translate(-4%, 6%); }
  80%  { transform: translate(6%, -4%); }
  100% { transform: translate(0,0); }
}

/* Fine scanlines — the "signal" texture */
.atmos-scan {
  position: fixed;
  inset: 0;
  z-index: 901;
  pointer-events: none;
  opacity: 0.35;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    oklch(0% 0 0 / 0.16) 3px,
    transparent 4px);
  mix-blend-mode: multiply;
}

body[data-motion="off"] .atmos-grain { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .atmos-grain { animation: none; }
}

/* ============================================================
   Layout helpers
   ============================================================ */
.shell {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
}
.shell-narrow {
  width: min(100% - var(--gutter) * 2, var(--maxw-narrow));
  margin-inline: auto;
}
.section { padding-block: var(--space-section); position: relative; }

/* Skip link */
.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 1000;
  padding: 0.7rem 1.2rem;
  background: var(--gold);
  color: var(--text-ink);
  font-weight: 600;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.skip-link:focus { transform: translate(-50%, 0); }

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

/* Scroll reveal primitive — controlled by IntersectionObserver */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Read-in: each word illuminates in a left-to-right reading cadence */
.rw {
  display: inline-block;
  opacity: 0.08;
  filter: blur(5px);
  transform: translateY(0.12em);
  transition: opacity 0.6s var(--ease-out-expo),
              filter 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo);
}
[data-read].reading .rw { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rw { opacity: 1; filter: none; transform: none; transition: none; }
}