/* ============================================================
   TAURIST — SPECTRUM HALO SYSTEM
   Drop-in atmospheric "light-streak" background layers.
   Each .fx-* is a self-contained, full-bleed effect built ONLY from
   the spectrum palette — no images. Usage:

     <div class="fx-stage">            // positioned, clips, dark base
       <div class="fx-focus-light"></div>   // the effect layer (inset:0)
       <div class="fx-content"> … </div>     // your content above it
     </div>

   The .fx-* layers are position:absolute; inset:0 — give them a
   positioned parent (.fx-stage does this for you). Tunables are
   exposed as custom properties, documented per block.
   ============================================================ */

:root {
  --fx-magenta: #F222B0;
  --fx-red: #F22248;
  --fx-orange: #F26422;
  --fx-yellow: #EEC936;
  --fx-violet: #7A2BD0;
  --fx-base: #050407; /* near-black field the streaks sit on */
}

/* ---- Stage + helpers ------------------------------------- */
.fx-stage {
  position: relative;
  overflow: hidden;
  background: var(--fx-base);
  isolation: isolate;
}
.fx-content {
  position: relative;
  z-index: 2;
}
/* every effect layer shares these */
.fx-focus-light,
.fx-signal-grid,
.fx-aurora,
.fx-spectrum-halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--fx-base);
}

/* ============================================================
   05 · FOCUS LIGHT — a cross/star burst on a horizon.
   The hero motif: three energies converging to one point.
   Tunables: --fx-x / --fx-y (burst position), --fx-intensity.
   ============================================================ */
/* tunables (set inline to override): --fx-x --fx-y --fx-intensity */
.fx-focus-light {
  background-image:
    /* horizontal spectrum beam */
    radial-gradient(72% 2px at var(--fx-x, 50%) var(--fx-y, 60%),
      rgba(255, 255, 255, 0.95), rgba(242, 100, 34, 0.55) 14%,
      rgba(242, 34, 176, 0.28) 38%, transparent 72%),
    /* vertical white beam */
    radial-gradient(2px 52% at var(--fx-x, 50%) var(--fx-y, 60%),
      rgba(255, 255, 255, 0.9), rgba(122, 43, 208, 0.4) 20%, transparent 70%),
    /* hot core bloom */
    radial-gradient(30% 30% at var(--fx-x, 50%) var(--fx-y, 60%),
      rgba(255, 255, 255, 0.85), rgba(242, 34, 72, 0.4) 28%, transparent 64%),
    /* warm horizon wash */
    radial-gradient(130% 70% at var(--fx-x, 50%) var(--fx-y, 60%),
      rgba(242, 34, 72, 0.22), rgba(122, 43, 208, 0.12) 46%, transparent 72%),
    radial-gradient(100% 100% at 50% 120%, rgba(242, 100, 34, 0.12), transparent 60%);
  opacity: clamp(0.6, var(--fx-intensity, 1), 1.4);
}

/* ============================================================
   04 · SIGNAL GRID — data-aligned perspective floor.
   Tunables: --fx-cell (grid pitch), --fx-line-a / --fx-line-b.
   ============================================================ */
/* tunables: --fx-cell (grid pitch) --fx-line-a --fx-line-b */
.fx-signal-grid {
  perspective: 460px;
  perspective-origin: 50% 0%;
}
.fx-signal-grid::before {
  content: "";
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: -12%;
  height: 165%;
  background-image:
    linear-gradient(to right, var(--fx-line-a, rgba(242, 34, 176, 0.42)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fx-line-b, rgba(242, 100, 34, 0.34)) 1px, transparent 1px);
  background-size: var(--fx-cell, 42px) var(--fx-cell, 42px);
  transform: rotateX(75deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(62% 82% at 50% 100%, #000 22%, transparent 82%);
  mask-image: radial-gradient(62% 82% at 50% 100%, #000 22%, transparent 82%);
}
.fx-signal-grid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  height: 50%;
  background: radial-gradient(58% 100% at 50% 0%, rgba(122, 43, 208, 0.32), transparent 70%);
}

/* ============================================================
   06 · AURORA DEPTH — layered atmospheres for depth & mood.
   Tunables: --fx-warm / --fx-cool hue washes.
   ============================================================ */
/* tunables: --fx-warm --fx-cool hue washes */
.fx-aurora {
  background-image:
    radial-gradient(78% 56% at 16% 86%, var(--fx-warm, rgba(242, 100, 34, 0.5)), transparent 60%),
    radial-gradient(72% 62% at 72% 28%, var(--fx-cool, rgba(122, 43, 208, 0.42)), transparent 66%),
    radial-gradient(120% 90% at 102% 102%, rgba(242, 34, 176, 0.3), transparent 60%),
    radial-gradient(60% 50% at 40% 52%, rgba(242, 34, 72, 0.16), transparent 72%);
}
.fx-aurora::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(48% 7% at 36% 70%, rgba(255, 205, 135, 0.55), transparent 70%),
    radial-gradient(62% 6% at 60% 56%, rgba(242, 100, 34, 0.5), transparent 72%),
    radial-gradient(54% 8% at 50% 44%, rgba(180, 90, 220, 0.4), transparent 72%);
  transform: rotate(-17deg);
  filter: blur(7px);
}

/* ============================================================
   01 · SPECTRUM HALO — the parent orbital ring connecting the
   three core energies. A tilted, masked spectrum annulus.
   ============================================================ */
.fx-spectrum-halo {
  perspective: 760px;
  perspective-origin: 50% 36%;
}
.fx-spectrum-halo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 64%;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  transform: rotateX(70deg);
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    var(--fx-magenta), var(--fx-red), var(--fx-orange), var(--fx-yellow),
    var(--fx-orange), var(--fx-red), var(--fx-magenta));
  -webkit-mask: radial-gradient(closest-side, transparent 77%, #000 80%, #000 100%);
  mask: radial-gradient(closest-side, transparent 77%, #000 80%, #000 100%);
  filter: blur(1.5px) drop-shadow(0 0 26px rgba(242, 34, 176, 0.6))
    drop-shadow(0 0 40px rgba(242, 100, 34, 0.35));
}
.fx-spectrum-halo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 92%;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  transform: rotateX(70deg);
  border-radius: 50%;
  border: 1px solid rgba(242, 100, 34, 0.16);
  -webkit-mask: radial-gradient(closest-side, transparent 91%, #000 93%);
  mask: radial-gradient(closest-side, transparent 91%, #000 93%);
}

/* ============================================================
   02 · ROUTING GLASS — translucent layers that guide & elevate.
   A single panel primitive; stack & stagger several to build the
   layered look. Size it yourself (width/height/transform).
   ============================================================ */
.fx-glass-panel {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(157deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.015));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 24px 60px -28px rgba(0, 0, 0, 0.85);
}
.fx-glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-spectrum);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.85;
  pointer-events: none;
}