/* ambient.css — THE beam, in the shared shell (the site update, §4). Moved out
   of Home's inline sheet so every route renders the same atmosphere once,
   behind everything: the warm spots, the tile grid that lights only where they
   are, the crown motif, grain and vignette. Tokens carry literal fallbacks (Home
   has no token layer). The knob values live in SITE_DATA.ambient — never here.
   Dark only: the site ships dark; the light layer serves the product apps. */
.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(125% 95% at 50% -12%, #221f1b 0%, var(--bg, #1a1a18) 52%, #151513 100%); }
:root[data-theme="light"] .ambient { display: none; }
.sky { position: absolute; inset: 0; will-change: transform; opacity: var(--amb-sky, 1);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .2s linear; }

/* each spot: a soft warm glow, JS-positioned */
.beam { position: absolute; left: 50%; top: 50%; opacity: 0; will-change: transform, opacity; }
.beam .sun { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; filter: blur(28px);
  opacity: calc(.92 * var(--glow, 1));
  background: radial-gradient(closest-side,
    rgba(250,222,158,.58) 0%, rgba(248,206,130,.46) 18%, rgba(244,182,92,.33) 36%,
    rgba(214,146,58,.18) 54%, rgba(180,108,28,.07) 70%, rgba(133,79,11,0) 82%); }

/* the fine tile grid, revealed only where the spots are (mask = the union of
   the moving positions); the dark stays plain */
.tiles { position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none;
  opacity: calc(.55 * var(--glow, 1));
  background-image: linear-gradient(rgba(252,226,182,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(252,226,182,.42) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image:
    radial-gradient(34vw 32vh at var(--mx0,50%) var(--my0,150%), rgba(0,0,0,var(--a0,0)) 0%, transparent 70%),
    radial-gradient(34vw 32vh at var(--mx1,50%) var(--my1,150%), rgba(0,0,0,var(--a1,0)) 0%, transparent 70%),
    radial-gradient(34vw 32vh at var(--mx2,50%) var(--my2,150%), rgba(0,0,0,var(--a2,0)) 0%, transparent 70%),
    radial-gradient(34vw 32vh at var(--mx3,50%) var(--my3,150%), rgba(0,0,0,var(--a3,0)) 0%, transparent 70%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(34vw 32vh at var(--mx0,50%) var(--my0,150%), rgba(0,0,0,var(--a0,0)) 0%, transparent 70%),
    radial-gradient(34vw 32vh at var(--mx1,50%) var(--my1,150%), rgba(0,0,0,var(--a1,0)) 0%, transparent 70%),
    radial-gradient(34vw 32vh at var(--mx2,50%) var(--my2,150%), rgba(0,0,0,var(--a2,0)) 0%, transparent 70%),
    radial-gradient(34vw 32vh at var(--mx3,50%) var(--my3,150%), rgba(0,0,0,var(--a3,0)) 0%, transparent 70%);
  mask-composite: add; }

.ambient-motif { position: absolute; inset: 0; width: 100%; height: 100%; }
.ambient--no-motif .ambient-motif { display: none; }
.grain { position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vignette { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,12,10,.55) 0%, rgba(12,12,10,.12) 24%, transparent 46%), radial-gradient(120% 86% at 50% 122%, transparent 46%, rgba(12,12,10,.34) 100%); }
@media (prefers-reduced-motion: reduce) { .sky { transition: none !important; } }