/* Background colours are set per-scene by background.js.
   Registering them lets the browser animate between scenes. */
@property --bg-a { syntax: '<color>'; inherits: true; initial-value: #0b0c12; }
@property --bg-b { syntax: '<color>'; inherits: true; initial-value: #12131c; }
@property --bg-c { syntax: '<color>'; inherits: true; initial-value: #07080c; }

:root { color-scheme: dark; }

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

html, body { height: 100%; }

body {
  overflow: hidden;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background-color: var(--bg-c);
  background-image:
    radial-gradient(110% 90% at 15% 10%, var(--bg-b) 0%, transparent 60%),
    radial-gradient(110% 90% at 90% 100%, var(--bg-a) 0%, transparent 65%);
  transition: --bg-a 1.6s ease, --bg-b 1.6s ease, --bg-c 1.6s ease;
  -webkit-font-smoothing: antialiased;
}

/* ── Background layers ─────────────────────────────────────────── */

#scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.9s ease;
}
#scene.ready { opacity: 1; }
#scene canvas { position: absolute; will-change: transform; }

/* film grain: hides gradient banding and makes the blur feel "photographic" */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.42) 100%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}