/* § user request: an ambient backdrop for the PUBLIC identity pages, in the
   spirit of https://codepen.io/JonasBadalic/pen/ExqNzZ — a diagonal
   gradient, two soft light bands crossing it, and a slow drift of small
   particles.

   Loaded only by layouts/auth.html on the public host. The landing, pricing
   and contact pages deliberately do NOT use it: they already carry the same
   language (landing.css's hero glow and engineering grid) under an opaque
   wrapper, and stacking a second full-page treatment underneath would make
   the public site less coherent, not more.

   Three rules this file follows so it can never break a page:
     * It is decoration behind content, at z-index 0, with the header and
       card already at z-10 in the layout.
     * Every colour is a token defined for BOTH themes right here, so the
       light and dark variants can never fall out of step (§8.7 — a theme
       that only one of them was designed for is the usual way this fails).
     * No `filter: blur()`. A blurred full-viewport layer is one of the most
       expensive things a page can ask a compositor for; soft-stop gradients
       give the same look for free. */

:root {
  /* Dark is the product default (§6.1), so it lives on the bare selector —
     same convention as tokens.css. */
  --ambient-from: #10132a;
  --ambient-mid: #232742;
  --ambient-to: #33285a;
  --ambient-band: 255 255 255;
  --ambient-band-alpha: 0.055;
  --ambient-particle: 255 255 255;
  --ambient-particle-alpha: 0.55;
}

:root[data-theme="light"] {
  --ambient-from: #eceffb;
  --ambient-mid: #f6f7fc;
  --ambient-to: #dcefec;
  --ambient-band: 255 255 255;
  --ambient-band-alpha: 0.55;
  /* Brand teal rather than white: a light particle on a light ground is
     invisible, and a neutral grey one reads as dust. */
  --ambient-particle: 13 148 136;
  --ambient-particle-alpha: 0.5;
}

.public-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 82% 8%, rgb(var(--brand-rgb) / 0.16), transparent 68%),
    radial-gradient(52% 46% at 6% 92%, rgb(var(--purple-rgb) / 0.14), transparent 70%),
    linear-gradient(25deg, var(--ambient-from), var(--ambient-mid) 52%, var(--ambient-to));
}

/* The two crossing bands. The reference draws them on their own canvases;
   a rotated element with a soft-stopped gradient is visually equivalent
   here and costs one paint instead of a second animation loop. */
.public-ambient::before,
.public-ambient::after {
  content: "";
  position: absolute;
  width: 190%;
  height: 42%;
  left: -45%;
  transform: rotate(-20deg);
  background: linear-gradient(
    to bottom,
    transparent,
    rgb(var(--ambient-band) / var(--ambient-band-alpha)) 45%,
    transparent
  );
}

.public-ambient::before {
  top: -6%;
}

.public-ambient::after {
  bottom: -4%;
  transform: rotate(-14deg);
  opacity: 0.75;
}

.public-ambient__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The layout's own gradient would sit on top of all of this. */
.auth-bg.has-ambient {
  background: var(--ambient-mid);
}

/* Motion is an enhancement (§8.7). public-ambient.js also checks this and
   paints a single static frame instead of animating; the rule here is the
   belt-and-braces half, in case the script is blocked but the canvas has
   already been drawn once. */
@media (prefers-reduced-motion: reduce) {
  .public-ambient__canvas {
    opacity: 0.5;
  }
}