/*! frb-backdrop.css — the field the backdrops draw on, and the picker.
 *
 * There were nine files in /home/, eight of which were the SAME PAGE with a
 * different animated background behind it — written that way because there was
 * no way to give one page more than one look. Nothing in the product linked to
 * any of them; they only existed so a background could be seen.
 *
 * A background is not a page. The layer is one element deep, sits behind
 * everything at `z-index: -1`, and the effect is an attribute on <html>:
 *
 *     <html data-frb-backdrop="circuit">
 *
 * so switching is one attribute rather than one navigation, and the choice can
 * be remembered like the theme is.
 *
 * THE EFFECTS THEMSELVES ARE NO LONGER HERE. Five of the nine used to be CSS
 * keyframes on a handful of divs while three used a canvas — two engines, two
 * ways to be theme-aware, two places to honour reduced motion, and no way at
 * all to draw a still of a CSS effect for the picker. frb-backdrop.js draws all
 * nine now and takes its colour from `--accent-primary` READ OFF <body>, where
 * the theme classes actually live. What is left here is the field, and the
 * picker that chooses what goes on it.
 *
 * `pointer-events: none` on every layer, always: scenery must never eat a click
 * meant for the page. Reduced motion is handled in the script — the effect is
 * drawn as one still frame and the loop never starts — because a stopped
 * animation and an unstarted one look the same and only one of them costs a
 * repaint.
 */

.frb-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
.frb-backdrop * { pointer-events: none; }
.frb-backdrop canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
}

/* ── none ────────────────────────────────────────────────────────────────── */
[data-frb-backdrop="none"] .frb-backdrop { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PICKER
   A row of swatches, each one a small live still of what it selects rather
   than a word for it — "beams" and "aurora" mean nothing until you have seen
   them, and a name you have to click to understand is not a choice.

   The stills are the effects: frb-backdrop.js runs the same size()/frame()
   pair for forty frames into a 120px buffer and stops it. There is no separate
   preview artwork to keep in sync, which is why the swatches can finally show
   what the file has claimed since it was written.
   ═══════════════════════════════════════════════════════════════════════════ */
.frb-bd-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frb-bd-swatch {
    position: relative;
    width: 34px; height: 34px;
    border-radius: 10px;
    border: 1px solid var(--glass-border-color, rgba(127, 127, 127, .3));
    background: var(--bg-solid, #0a0a0a);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    transition: border-color .16s, transform .16s;
}
.frb-bd-swatch:hover { transform: translateY(-2px); }
.frb-bd-swatch[aria-pressed="true"] {
    border-color: var(--accent-primary, #d4af37);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, #d4af37) 35%, transparent);
}
.frb-bd-swatch:focus-visible {
    outline: 2px solid var(--accent-primary, #d4af37);
    outline-offset: 2px;
}
/* The still is drawn at 120px and shown at 34, so it stays sharp on a retina
   panel without the script having to know what size the swatch is. */
.frb-bd-swatch canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
}
/* ── WHERE it runs, beside WHICH one runs ────────────────────────────────── */
/* Built by the script from one empty container, like the picker. The geometry
   is the same welded segmented control the rest of the product uses: cells
   sharing a one-pixel edge, mono label, no radius. */
.frb-bd-scope {
    display: inline-flex; padding: 0; gap: 1px;
    background: var(--glass-border-color, rgba(127, 127, 127, .3));
    border: 1px solid var(--glass-border-color, rgba(127, 127, 127, .3));
}
.frb-bd-scope-btn {
    padding: 9px 14px; border: none; border-radius: 0;
    background: var(--frb-cell, var(--bg-solid, #0a0a0a));
    cursor: pointer;
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 10px; font-weight: 400;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--text-secondary);
    transition: background .2s, color .2s;
}
.frb-bd-scope-btn:hover { color: var(--accent-text, var(--accent-primary)); }
.frb-bd-scope-btn[aria-pressed="true"] {
    background: var(--accent-primary, #d4af37);
    color: var(--btn-text, #000);
    box-shadow: 0 0 16px var(--accent-glow, transparent);
}
.frb-bd-scope-btn:focus-visible {
    outline: 2px solid var(--accent-primary, #d4af37);
    outline-offset: 2px;
}

.frb-bd-swatch i {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 12px;
    color: var(--accent-text, var(--accent-primary, #d4af37));
    font-style: normal;
}