/* ---- the plasma, as the page's background (js/plasma.js, started in main.js) ----
   A fixed layer behind every section below the reel: a slow warm glow — the
   lamps' tungsten — instead of flat black. It fades in once it's running
   (html.has-plasma); without WebGL 2 the page keeps its black ground and
   its sections keep their own backgrounds, exactly as before.

   The plasma is a cone of light, wide and bright at the top of its frame and
   thin at the bottom, so the canvas is 190% of the viewport and only its upper
   half — where the glow spans the whole width — is on screen. */

.site-plasma {
  position: fixed; inset: 0 0 auto 0; height: 190vh; z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.site-plasma canvas { display: block; width: 100%; height: 100%; }
/* a light scrim over the visible part — just enough to keep body copy crisp; the
   glow itself stays the ground (the first cut used .55 here and hid it) */
.site-plasma::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 52.7%;
  background: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(8, 9, 10, .32), rgba(8, 9, 10, .06) 80%);
}
html.has-plasma .site-plasma { opacity: 1; }

/* Sections that painted their own solid ground let the glow through. Translucent only —
   no backdrop blur, which would re-blur the moving plasma on every frame. */
html.has-plasma .strip { background: rgba(15, 18, 17, .42); }
html.has-plasma .finale { background: radial-gradient(ellipse at 50% 125%, rgba(12, 101, 56, .6), transparent 62%); }
html.has-plasma .reviews blockquote { background: rgba(15, 18, 17, .72); }
html.has-plasma .footer { background: rgba(5, 6, 6, .82); }

@media (prefers-reduced-motion: reduce) {
  .site-plasma { transition: none; }
}