/* ============================================================
   Backdrops (loaded only on /docs/ui-kit)
   ============================================================
   Proposed canonical for dark-canvas glow backdrops, after
   color-banding was reported on CSS radial gradients across
   the user's monitors. The winner of the experiment phase:
   a JS-rendered radial with per-pixel dithering and chaotic
   per-grain drift, painted on a <canvas class="uk-backdrop-radial">
   by public/js/backdrops-radial.js.

   Same gradient shape as the legacy CSS technique
   (ellipse 80% 50% at 50% 0%; stops 0.18 → 0.05 @ 35% → 0 @ 70%),
   but rendered pixel-by-pixel so we can:
     - dither the alpha channel to kill 8-bit quantization rings;
     - move every grain on its own Lissajous orbit inside a
       bounded radius — atmosphere instead of a static wash;
     - sample with edge-clamping so the silhouette never goes
       transparent.
   ============================================================ */

.uk-doc-backdrop-demo {
    position: relative;
    overflow: hidden;
    height: 600px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    isolation: isolate;
}

.uk-doc-backdrop-demo-label {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 2;
    padding: 0.25rem 0.625rem;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono, monospace);
    font-size: var(--font-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.uk-backdrop-radial {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
}