/* spktkl-lights.css
   House Lights + Intro Lights — SPKTKL Design System
*/

/* ---------- TOKENS ---------- */
:root {
  --spktkl-gold: #E6B800;

  /* House Lights positions (animated by JS) */
  --spot1-x: 50%;
  --spot1-y: 22%;
  --spot2-x: 62%;
  --spot2-y: 38%;
  --sh1-x: 50%;
  --sh1-y: 22%;
  --sh2-x: 62%;
  --sh2-y: 38%;

  /* Intro Lights gate */
  --intro-lights-enabled: 0;

  /* Intro Lights defaults (overwritten by JS) */
  --introL1-x: 50%; --introL1-y: 30%; --introL1-size: 860px; --introL1-a: 0.10; --introL1-rgb: 230 184 0;
  --introL2-x: 65%; --introL2-y: 45%; --introL2-size: 780px; --introL2-a: 0.09; --introL2-rgb: 109 94 247;
  --introL3-x: 35%; --introL3-y: 55%; --introL3-size: 920px; --introL3-a: 0.08; --introL3-rgb: 0 209 178;
  --introL4-x: 20%; --introL4-y: 25%; --introL4-size: 740px; --introL4-a: 0.07; --introL4-rgb: 230 184 0;
  --introL5-x: 80%; --introL5-y: 20%; --introL5-size: 980px; --introL5-a: 0.06; --introL5-rgb: 109 94 247;
}

/* Theme mode tokens */
:root[data-theme="dark"]{
  --canvas-hi:#21242B;
  --canvas-mid:#111317;
  --canvas-low:#1B1E24;
  --canvas-edgeL:#080A0D;
  --canvas-edgeR:#14161B;

  --spot1-a: 0.10;
  --spot2-a: 0.07;

  /* counter-shadow */
  --shadow1-a: 0.18;
  --shadow2-a: 0.14;

  --grain-opacity: 0.032;

  /* global intro multiplier (alpha multiplied inside radial gradients) */
  --intro-base: 0.55;
}

:root[data-theme="light"]{
  --canvas-hi:#FFFFFF;
  --canvas-mid:#FAF8F4;
  --canvas-low:#F0ECE4;
  --canvas-edgeL:#E6E1D6;
  --canvas-edgeR:#E6E1D6;

  --spot1-a: 0.04;
  --spot2-a: 0.03;

  --shadow1-a: 0.06;
  --shadow2-a: 0.05;

  --grain-opacity: 0.010;

  --intro-base: 0.35;
}

/* ---------- HOUSE LIGHTS LAYER ---------- */
.spktkl-app-bg {
  min-height: 100vh;
  position: relative;
  isolation: isolate;

  background:
    radial-gradient(900px 650px at var(--spot1-x) var(--spot1-y),
      rgba(255,255,255,var(--spot1-a)) 0%,
      rgba(255,255,255,0.05) 30%,
      rgba(0,0,0,0) 62%),
    radial-gradient(800px 520px at var(--spot2-x) var(--spot2-y),
      rgba(255,255,255,var(--spot2-a)) 0%,
      rgba(255,255,255,0.04) 28%,
      rgba(0,0,0,0) 60%),

    radial-gradient(1050px 740px at var(--sh1-x) var(--sh1-y),
      rgba(0,0,0,var(--shadow1-a)) 0%,
      rgba(0,0,0,0.08) 34%,
      rgba(0,0,0,0) 72%),
    radial-gradient(900px 620px at var(--sh2-x) var(--sh2-y),
      rgba(0,0,0,var(--shadow2-a)) 0%,
      rgba(0,0,0,0.06) 32%,
      rgba(0,0,0,0) 70%),

    radial-gradient(1100px 720px at 50% 22%,
      var(--canvas-hi) 0%,
      var(--canvas-mid) 42%,
      var(--canvas-low) 78%,
      var(--canvas-edgeL) 100%),
    linear-gradient(to right,
      var(--canvas-edgeL) 0%,
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,0) 78%,
      var(--canvas-edgeR) 100%);
}

/* grain (Option B) */
.spktkl-app-bg::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  filter: url(#spktkl-grain);
  mix-blend-mode: soft-light;
  opacity: var(--grain-opacity);
}

/* ---------- INTRO LIGHTS OVERLAY (phase gated) ---------- */
.spktkl-intro-lights::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;

  background:
    radial-gradient(var(--introL1-size) var(--introL1-size) at var(--introL1-x) var(--introL1-y),
      rgb(var(--introL1-rgb) / calc(var(--intro-base) * var(--introL1-a) * var(--intro-lights-enabled))) 0%,
      rgb(var(--introL1-rgb) / 0) 68%),
    radial-gradient(var(--introL2-size) var(--introL2-size) at var(--introL2-x) var(--introL2-y),
      rgb(var(--introL2-rgb) / calc(var(--intro-base) * var(--introL2-a) * var(--intro-lights-enabled))) 0%,
      rgb(var(--introL2-rgb) / 0) 68%),
    radial-gradient(var(--introL3-size) var(--introL3-size) at var(--introL3-x) var(--introL3-y),
      rgb(var(--introL3-rgb) / calc(var(--intro-base) * var(--introL3-a) * var(--intro-lights-enabled))) 0%,
      rgb(var(--introL3-rgb) / 0) 68%),
    radial-gradient(var(--introL4-size) var(--introL4-size) at var(--introL4-x) var(--introL4-y),
      rgb(var(--introL4-rgb) / calc(var(--intro-base) * var(--introL4-a) * var(--intro-lights-enabled))) 0%,
      rgb(var(--introL4-rgb) / 0) 68%),
    radial-gradient(var(--introL5-size) var(--introL5-size) at var(--introL5-x) var(--introL5-y),
      rgb(var(--introL5-rgb) / calc(var(--intro-base) * var(--introL5-a) * var(--intro-lights-enabled))) 0%,
      rgb(var(--introL5-rgb) / 0) 68%);
}


/* Ensure app chrome/content renders above intro/grain overlays */
/* .spktkl-app-bg > * {
  position: relative;
  z-index: 2;
} */