/* ▼▼▼ boydlee-fx.css  (shipped system — pasted verbatim) ▼▼▼ */
/* ════════════════════════════════════════════════════════════════════════
   BOYDLee Studio — FX SYSTEM  ·  boydlee-fx.css  ·  v1
   Single source of truth for the dark-holographic design language.

   FIVE LAYERS:  Black ground · Holo spectrum (motion/identity) ·
                 Gold (accent/bezel only) · Silver/Zinc (structure) · Glass

   HARD RULES (non-negotiable):
   • Brand name "BOYDLee Studio": caps BOYD, capital L on Lee, no space. URLs lowercase.
   • Canonical gold #C5A028 (light #E5C158, dark #A87D1F). #D4AF37 is DEPRECATED.
   • Holo spectrum = C palette ONLY. NO amber / yellow / orange / topaz / citrine / peridot.
     Gold is a SEPARATE accent layer, never part of the holo spectrum.
   • Device contract: nothing essential depends on :hover; ≥44px tap targets;
     :active feedback always; hover is pointer-only enhancement.

   REQUIRES:  Inter (400–800) + JetBrains Mono (400/500/700).
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

   @property (animated angles) needs Chrome/Edge 85+, Safari 16.4+, Firefox 128+.
   ════════════════════════════════════════════════════════════════════════ */

/* @property — enables SMOOTH animation of angle values */
@property --angle        { syntax:'<angle>'; initial-value:0deg;  inherits:false; }
@property --streak-angle { syntax:'<angle>'; initial-value:95deg; inherits:false; }

:root {
  /* ── SURFACES ── */
  --bg: #050505;
  --bg-elevated: #15151b;
  --border: #27272A;

  /* ── GOLD (accent / bezel only — NOT part of the holo spectrum) ── */
  --gold: #C5A028;
  --gold-light: #E5C158;
  --gold-dark: #A87D1F;

  /* ── SILVER / ZINC (structure) ── */
  --silver-1: #FFFFFF;
  --silver-2: #E4E4E7;
  --silver-3: #71717A;
  --silver-4: #52525B;

  /* ── C PALETTE (the holo spectrum) ── */
  --ruby: #DC143C;
  --magenta: #ff0080;
  --amethyst: #9944FF;
  --indigo: #3F2785;
  --sapphire: #0070f3;
  --cyan: #00dfd8;
  --jade: #00B894;

  /* ── A PALETTE (minimal utility) ── */
  --a1: #ff0080; --a2: #7928ca; --a3: #0070f3; --a4: #00dfd8;

  /* ── SIGNATURE HOLO GRADIENT ──
     The canonical "optics-aware" streak: transparent edges, a clear centre,
     and dark-centre inversions between amethyst↔indigo. Used by holo-box(streak),
     holo-comet, holo-line, sig-beam, sig-holo-edge, button hover, and Effect-B text. */
  --holo-stops: transparent 0%, transparent 8%, #DC143C 14%, #ff0080 19%, #9944FF 25%, rgba(0,0,0,0.7) 28%, rgba(0,0,0,0.7) 30%, #3F2785 33%, #0070f3 36.5%, #00dfd8 39.5%, #00B894 42.5%, rgba(0,184,148,0.4) 43.5%, transparent 45%, transparent 55%, rgba(0,184,148,0.4) 56.5%, #00B894 57.5%, #00dfd8 60%, #0070f3 62.5%, #3F2785 65%, rgba(0,0,0,0.7) 67%, rgba(0,0,0,0.7) 68.5%, #9944FF 70%, #ff0080 72%, #DC143C 74.5%, transparent 80%, transparent 100%;
  --holo-grad: linear-gradient(95deg, var(--holo-stops));

  /* ── TEXT FLOW GRADIENT (Effect A) ──
     Single rainbow streak with feathered transparent ends + a feathered dark
     band between amethyst↔indigo. Flows continuously; text dissolves at the gaps. */
  --holo-text-stops: transparent 0%, rgba(220,20,60,0.18) 4%, rgba(220,20,60,0.6) 8%, #DC143C 13%, #ff0080 21%, #9944FF 30%, rgba(0,0,0,0.2) 31.5%, rgba(0,0,0,0.5) 33.5%, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.9) 37%, rgba(0,0,0,0.5) 38.5%, rgba(0,0,0,0.2) 40.5%, #3F2785 42.5%, #0070f3 53%, #00dfd8 64%, #00B894 75%, rgba(0,184,148,0.6) 81%, rgba(0,184,148,0.18) 87%, transparent 95%, transparent 100%;
  --holo-text-grad: linear-gradient(95deg, var(--holo-text-stops));

  --conic-holo: conic-gradient(from var(--angle), var(--ruby), var(--magenta), var(--amethyst), var(--sapphire), var(--cyan), var(--jade), var(--ruby));
  --ring-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

  /* ── CRYSTAL PANEL (locked) ── */
  --panel-blur: 5px;
  --panel-radius: 10px;
  --panel-shadow: 0 8px 6px rgba(0,0,0,0.40);

  /* ── TYPE SCALE (responsive) ── */
  --fs-display: clamp(2.5rem, 6vw, 4.25rem);
  --fs-h1: clamp(2rem, 4.2vw, 2.85rem);
  --fs-h2: clamp(1.5rem, 3vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;

  --maxw: 1080px;
}

/* Gentle base (optional — the system assumes border-box) */
*, *::before, *::after { box-sizing: border-box; }

/* ════════ TYPOGRAPHY ════════ */
.t-display { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: var(--silver-1); }
.t-h1 { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--silver-1); }
.t-h2 { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--silver-1); }
.t-h3 { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--silver-1); }
.t-body { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-body); font-weight: 400; line-height: 1.65; color: var(--silver-2); }
.t-small { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-small); font-weight: 400; color: var(--silver-3); }
.t-label { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

/* ════════════════════════════════════════════════════════════════════════
   HOLO  —  the signature motion layer
   PHASE-LOCK: all share animation-delay:0 and harmonic durations
   (sweeps = 3s base · flow/comet = 6s = 2× base) so they pulse in sync.
   ════════════════════════════════════════════════════════════════════════ */
@keyframes holo-sweep {
  0%   { background-position: 160% 0; opacity: 0; }
  5%   { opacity: 1; animation-timing-function: cubic-bezier(0.2,0.7,0.8,0.2); }
  38%  { opacity: 1; animation-timing-function: linear; }
  50%  { background-position: -80% 0; opacity: 0; }
  100% { background-position: -80% 0; opacity: 0; }
}

/* ── TEXT · EFFECT A — HOLOGRAPHIC FLOW ──
   Whole word is one rainbow; colours stream and the word dissolves at the
   transparent gaps. Continuous. (No silver base.) */
.holo-text {
  display: inline-block;
  background: var(--holo-text-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: holo-flow 6s linear infinite;
}
/* fixed diagonal — animating the angle of a clipped-text gradient breaks the clip in Chromium */
.holo-text.rotate { background: linear-gradient(122deg, var(--holo-text-stops)); background-size: 200% 100%; }
@keyframes holo-flow { from { background-position: 0% 0; } to { background-position: -200% 0; } }

/* ── TEXT · EFFECT B — SIGNATURE SWEEP ──
   Text rests at normal silver; the SIGNATURE streak (--holo-grad) sweeps across
   once, fully clearing both ends (no-repeat = single band), then holds silver.
   Two clipped layers: top = signature streak, bottom = solid silver. */
.holo-streak {
  display: inline-block;
  background: var(--holo-grad), linear-gradient(var(--silver-1), var(--silver-1));
  background-size: 200% 100%, 100% 100%;
  background-position: -100% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: holo-streak-sweep 3s ease-in-out infinite;
}
.holo-streak.rotate { background: linear-gradient(122deg, var(--holo-stops)), linear-gradient(var(--silver-1), var(--silver-1)); background-size: 200% 100%, 100% 100%; background-position: -100% 0, 0 0; background-repeat: no-repeat, no-repeat; }
@keyframes holo-streak-sweep {
  0%   { background-position: -100% 0, 0 0; }  /* fully clear (band off RIGHT) */
  8%   { background-position: -100% 0, 0 0; }  /* brief clear hold */
  54%  { background-position: 170% 0, 0 0; }   /* swept fully across (band off LEFT) */
  100% { background-position: 170% 0, 0 0; }   /* clear hold; loops clear→clear */
}

/* ── BOX — contained narrow streak (sleek light glint, cyan→dark→violet) ── */
.holo-box { position: relative; overflow: hidden; }
.holo-box > * { position: relative; z-index: 1; }
.holo-box::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgba(0,223,216,0.55) 47%, rgba(0,0,0,0.6) 49.5%, rgba(153,68,255,0.55) 52%, transparent 55%);
  background-size: 250% 100%; mix-blend-mode: screen;
  animation: holo-streak-narrow 3s ease-in-out infinite;
}
/* BOX · ±45° ROTATION — true animated angle swing (no text-clip here, so it works) */
.holo-box.rotate::after {
  background: linear-gradient(var(--streak-angle), transparent 44%, rgba(0,223,216,0.55) 47%, rgba(0,0,0,0.6) 49.5%, rgba(153,68,255,0.55) 52%, transparent 55%);
  background-size: 250% 100%;
  animation: holo-streak-rot 3s ease-in-out infinite;
}
@keyframes holo-streak-narrow {
  0%{ background-position:150% 0; opacity:0 } 8%{ opacity:1 }
  45%{ opacity:1 } 55%{ background-position:-50% 0; opacity:0 } 100%{ background-position:-50% 0; opacity:0 }
}
@keyframes holo-streak-rot {
  0%  { background-position:150% 0; opacity:0; --streak-angle:60deg }
  8%  { opacity:1 }
  45% { opacity:1 }
  50% { background-position:-50% 0; opacity:0; --streak-angle:150deg }
  100%{ background-position:-50% 0; opacity:0; --streak-angle:150deg }
}

/* ── COMET — chromatic comet w/ dark-centre inversion orbiting a border ── */
.holo-comet { position: relative; }
.holo-comet::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background: conic-gradient(from var(--angle),
    transparent 0deg, transparent 248deg,
    var(--cyan) 288deg, var(--sapphire) 318deg,
    rgba(0,0,0,0.92) 333deg,
    var(--amethyst) 348deg, var(--magenta) 357deg, transparent 360deg);
  -webkit-mask: var(--ring-mask); mask: var(--ring-mask);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite;
}
/* COMET · GOLD — premium variant (gold comet, dark-centre optics) */
.holo-comet-gold { position: relative; }
.holo-comet-gold::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background: conic-gradient(from var(--angle),
    transparent 0deg, transparent 248deg,
    var(--gold-light) 288deg, var(--gold) 318deg,
    rgba(0,0,0,0.88) 333deg,
    var(--gold) 348deg, var(--gold-light) 357deg, transparent 360deg);
  -webkit-mask: var(--ring-mask); mask: var(--ring-mask);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite;
}

/* ── LINE — thin continuous holo sweep (dividers, card-bottom accents) ── */
.holo-line { height:2px; border-radius:2px; background: var(--holo-grad); background-size:200% 100%; animation: holo-line-sweep 4s linear infinite; }
@keyframes holo-line-sweep { to { background-position:-200% 0; } }

/* ── ICON — silver base glyph + masked rainbow sweep.
   Set --icon-mask to an SVG data-URI of the glyph. ── */
.holo-icon { position: relative; width: 28px; height: 28px; display: inline-block; }
.holo-icon::before, .holo-icon::after { content: ''; position: absolute; inset: 0; -webkit-mask: var(--icon-mask) center/contain no-repeat; mask: var(--icon-mask) center/contain no-repeat; }
.holo-icon::before { background: var(--silver-2); }
.holo-icon::after { background: var(--holo-grad); background-size: 200% 100%; animation: holo-sweep 3s ease-in-out infinite; }

/* ════════ CRYSTAL TEXT (etched glass, size-responsive stroke) ════════ */
.crystal-text {
  color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.03) 22%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.30) 70%, rgba(255,255,255,0.03) 82%, rgba(255,255,255,0.02) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke-width: clamp(0.08px, 0.007em, 0.3px);
  -webkit-text-stroke-color: rgba(255,255,255,0.9);
}
.crystal-text--gold {
  background: linear-gradient(180deg, rgba(229,193,88,0.60) 0%, rgba(229,193,88,0.04) 22%, rgba(229,193,88,0.03) 55%, rgba(229,193,88,0.35) 70%, rgba(229,193,88,0.04) 82%, rgba(229,193,88,0.03) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke-color: rgba(229,193,88,0.95);
}

/* ════════ CRYSTAL PANELS (frosted glass — needs motion/content behind to refract) ════════ */
.crystal-panel {
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(220%);
  backdrop-filter: blur(var(--panel-blur)) saturate(220%);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: var(--panel-radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), var(--panel-shadow);
}
.crystal-panel--gold {            /* gold sits NEUTRAL (saturate 100%) so the tint stays clean */
  background: rgba(229,193,88,0.20);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(100%);
  backdrop-filter: blur(var(--panel-blur)) saturate(100%);
  border: 1px solid rgba(229,193,88,0.25);
  border-radius: var(--panel-radius);
  box-shadow: inset 0 1px 0 rgba(229,193,88,0.15), var(--panel-shadow);
}

/* ════════ BENTO CARD SYSTEM (the cohesive container — glass border, gold only as accent) ════════ */
.bento {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.018), rgba(255,255,255,0.004));
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);   /* faint frost so the field refracts */
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.32);
  transition: border-color .24s ease;
}
.bento-head { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:15px 20px; border-bottom:1px solid var(--border); }
.bento-title { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:0.20em; text-transform:uppercase; color:var(--silver-2); }
.bento-body { padding:24px 20px; }
.bento-foot { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:15px 20px; border-top:1px solid var(--border); }
@media (hover:hover) and (pointer:fine) { .bento:hover { border-color: rgba(255,255,255,0.18); } }

/* gold accents (minimal) */
.plate { padding:3px 9px; background:rgba(197,160,40,0.10); border:1px solid rgba(197,160,40,0.40); border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.16em; color:var(--gold-light); white-space:nowrap; }
.gold-dot { width:5px; height:5px; border-radius:999px; background:var(--gold); flex:none; }
.chip { padding:3px 9px; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--silver-3); border:1px solid rgba(255,255,255,0.12); border-radius:4px; }
.card-title { font-size:17px; font-weight:400; letter-spacing:-0.01em; color:var(--silver-2); }
.card-sub { font-size:12px; color:var(--silver-3); line-height:1.5; margin-top:5px; }
.stage { background: radial-gradient(120% 100% at 50% 0%, rgba(0,112,243,0.08), transparent 60%); }  /* transparent-ish so the field shows through */

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS — DEVICE-ADAPTIVE CONTRACT
   1. Resting state carries the whole meaning.
   2. Hover = pointer-only enhancement  (@media hover/fine)
   3. :active = touch feedback.   4. ≥44px targets · .btn--icon collapse.
   5. PRIMARY always-on signature is a MENU: bezel · beam · beam-gold · sheen · holo-edge.
   ════════════════════════════════════════════════════════════════════════ */
.btn {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  padding: 13px 22px; min-height: 44px; border-radius: 8px; border: none; cursor: pointer;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  white-space: nowrap; color: var(--silver-1); background: transparent;
  transition: transform .18s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--icon { padding: 0; width: 44px; height: 44px; gap: 0; }   /* mobile-collapsed form */
.btn--icon svg { width: 18px; height: 18px; }
.btn .lbl { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; }

/* PRIMARY: dark fill + always-on signature; rainbow hover sweep is the enhancement */
.btn-primary { background: #0a0a0f; overflow: hidden; }
.btn-primary .holo-fill { position: absolute; inset: 0; background: var(--holo-grad); background-size: 200% 100%; mix-blend-mode: screen; opacity: 0; background-position: 160% 0; pointer-events: none; z-index: 0; }

.sig-bezel { border: 1px solid var(--gold); }
.sig-beam { border: 1px solid rgba(255,255,255,0.07); }
.sig-beam::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:conic-gradient(from var(--angle), transparent 0deg, transparent 248deg, var(--cyan) 288deg, var(--sapphire) 318deg, rgba(0,0,0,0.92) 333deg, var(--amethyst) 348deg, var(--magenta) 357deg, transparent 360deg); -webkit-mask:var(--ring-mask); mask:var(--ring-mask); -webkit-mask-composite:xor; mask-composite:exclude; animation:spin 3s linear infinite; }
.sig-beam-gold { border: 1px solid rgba(197,160,40,0.18); }
.sig-beam-gold::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:conic-gradient(from var(--angle), transparent 0deg, transparent 252deg, var(--gold-light) 290deg, var(--gold) 318deg, rgba(0,0,0,0.85) 333deg, var(--gold) 348deg, var(--gold-light) 357deg, transparent 360deg); -webkit-mask:var(--ring-mask); mask:var(--ring-mask); -webkit-mask-composite:xor; mask-composite:exclude; animation:spin 3s linear infinite; }
.sig-sheen { border: 1px solid rgba(255,255,255,0.1); }
.sig-sheen::after { content:''; position:absolute; top:0; bottom:0; width:55%; left:-60%; background:linear-gradient(105deg, transparent, rgba(255,255,255,0.22), transparent); animation:glint 3.6s ease-in-out infinite; z-index:0; }
.sig-holo-edge { border:1px solid transparent; background-image: linear-gradient(#0a0a0f,#0a0a0f), var(--holo-grad); background-size:auto, 200% 100%; background-origin:border-box; background-clip:padding-box, border-box; animation:holo-edge 5s linear infinite; }

@keyframes spin { to { --angle: 360deg; } }
@keyframes glint { 0%{left:-60%} 32%{left:130%} 100%{left:130%} }
@keyframes holo-edge { 0%{background-position:0 0,0% 0} 100%{background-position:0 0,200% 0} }
@keyframes sweep-once { 0%{background-position:160% 0;opacity:0} 10%{opacity:1} 100%{background-position:-80% 0;opacity:1} }

/* SECONDARY */
.btn-crystal-silver {
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(5px) saturate(220%); backdrop-filter: blur(5px) saturate(220%);
  border: 1px solid rgba(255,255,255,0.12);
}
.btn-outline-gold { border: 1px solid var(--gold); color: var(--gold-light); }

/* GHOST (icon-led; .fwd / .back add directional arrows via markup) */
.btn-ghost { color: var(--silver-3); border-radius: 8px; min-height: 44px; }
.btn-ghost .arr { display: inline-flex; transition: transform .2s ease; }

/* :ACTIVE press feedback (all devices — the touch equivalent of hover) */
.btn:active { transform: translateY(1px); }
.btn-primary:active { box-shadow: inset 0 0 0 100px rgba(255,255,255,0.06); }
.btn-crystal-silver:active, .btn-outline-gold:active, .btn-ghost:active { background: rgba(255,255,255,0.08); }

/* HOVER = POINTER-ONLY ENHANCEMENT (never essential) */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-primary:hover .holo-fill { animation: sweep-once 1.1s cubic-bezier(0.2,0.7,0.8,0.2) forwards; }
  .sig-bezel:hover, .sig-beam:hover, .sig-beam-gold:hover, .sig-sheen:hover, .sig-holo-edge:hover { border-color: var(--gold-light); }
  .btn-crystal-silver:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
  .btn-outline-gold:hover { background: rgba(229,193,88,0.20); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-color: var(--gold-light); transform: translateY(-1px); }
  .btn-ghost:hover { color: var(--silver-1); background: rgba(255,255,255,0.05); }
  .btn-ghost.fwd:hover .arr { transform: translateX(4px); }
  .btn-ghost.back:hover .arr { transform: translateX(-4px); }
}

/* Accessibility — freeze all motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   OPTIONAL MODULE — MOVING BACKGROUND FIELD  (depth / "transparency check")
   Fixed behind everything (z-index:-1) so glass refracts it and bento shows it
   through. 8 fields, toggled by  body[data-bg="aurora|mesh|bars|waves|beams|grid|dots|off"].
   Intensity via  --bg-intensity  (0–1) on :root.  Parallax + toggles need the JS
   snippet documented in BOYDLee-FX-System.md.
   ════════════════════════════════════════════════════════════════════════ */
.bg-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: var(--bg-intensity, 0.65); transition: opacity .4s ease; }
.bg-parallax { position: absolute; left: 0; right: 0; top: 0; height: 100%; will-change: transform; }  /* JS sets height + translateY(scroll × 0.15) */
.bg-field .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.drift-orb { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; }

.layer-aurora .o1 { background: var(--sapphire); width: 48vw; height: 48vw; top:-12%; left:-6%;  opacity:0.075; animation: drift-a 26s ease-in-out infinite; }
.layer-aurora .o2 { background: var(--amethyst); width: 44vw; height: 44vw; top:28%;  right:-8%; opacity:0.065; animation: drift-b 31s ease-in-out infinite; }
.layer-aurora .o3 { background: var(--cyan);     width: 40vw; height: 40vw; bottom:-14%; left:24%; opacity:0.055; animation: drift-c 24s ease-in-out infinite; }
.layer-aurora .o4 { background: var(--magenta);  width: 36vw; height: 36vw; top:52%;  left:6%;   opacity:0.05; animation: drift-a 33s ease-in-out infinite reverse; }
.layer-bars  { background: linear-gradient(60deg, transparent 10%, rgba(0,223,216,0.04) 25%, transparent 40%, rgba(153,68,255,0.04) 60%, transparent 75%, rgba(0,112,243,0.035) 90%, transparent); background-size: 250% 250%; filter: blur(48px); animation: pan-bars 34s linear infinite; }
.layer-grid  { background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 46px 46px; animation: pan-grid 26s linear infinite; }
.layer-mesh  { background: radial-gradient(40% 50% at 20% 30%, rgba(0,112,243,0.075), transparent 70%), radial-gradient(40% 50% at 80% 25%, rgba(153,68,255,0.07), transparent 70%), radial-gradient(45% 55% at 62% 78%, rgba(0,223,216,0.06), transparent 70%), radial-gradient(40% 50% at 32% 75%, rgba(255,0,128,0.055), transparent 70%); background-size: 200% 200%; filter: blur(40px); animation: pan-mesh 42s ease-in-out infinite; }
.layer-dots  { background-image: radial-gradient(rgba(255,255,255,0.05) 1.5px, transparent 1.6px); background-size: 30px 30px; animation: pan-dots 24s linear infinite; }
.layer-beams { inset: -50%; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(0,112,243,0.03) 28deg, transparent 60deg, transparent 168deg, rgba(153,68,255,0.03) 200deg, transparent 240deg, transparent 330deg, rgba(0,223,216,0.025) 352deg, transparent 360deg); filter: blur(34px); animation: spin-slow 55s linear infinite; }
.layer-waves { background: repeating-linear-gradient(45deg, transparent 0 42px, rgba(0,223,216,0.0225) 42px 84px, transparent 84px 126px, rgba(153,68,255,0.0225) 126px 168px); background-size: 220% 220%; filter: blur(10px); animation: pan-waves 30s linear infinite; }

@keyframes pan-mesh  { 0%,100%{background-position:0% 0%} 50%{background-position:100% 100%} }
@keyframes pan-dots  { to { background-position: 30px 30px; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes pan-waves { to { background-position: 220% 220%; } }
@keyframes pan-bars  { to { background-position: 250% 0; } }
@keyframes pan-grid  { to { background-position: 46px 46px; } }
@keyframes drift-a { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(80px,40px) scale(1.1)} 66%{transform:translate(-40px,70px) scale(0.95)} }
@keyframes drift-b { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-70px,-50px) scale(1.05)} 66%{transform:translate(50px,-30px) scale(1.15)} }
@keyframes drift-c { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,-60px) scale(1.2)} }

body[data-bg="aurora"] .layer-aurora { opacity: 1; }
body[data-bg="mesh"]   .layer-mesh   { opacity: 1; }
body[data-bg="bars"]   .layer-bars   { opacity: 1; }
body[data-bg="waves"]  .layer-waves  { opacity: 1; }
body[data-bg="beams"]  .layer-beams  { opacity: 1; }
body[data-bg="grid"]   .layer-grid   { opacity: 1; }
body[data-bg="dots"]   .layer-dots   { opacity: 1; }
body[data-bg="off"]    .bg-field     { opacity: 0 !important; }

/* ▲▲▲ end boydlee-fx.css ▲▲▲ */