/* ═══════════════════════════════════════════════════════════════════
   BG LOGIN — Nebula Orbs · Star Field · Sound Waves
   100% CSS keyframes. Zero JS timers.
   ═══════════════════════════════════════════════════════════════════ */

/* Star seed data: [left%, top%, sizePx, colorIdx, delayS, durationS, glowIdx] */
const STARS = [
  [  2, 14, 1.0, 0, 0.0, 3.2, 0], [  7, 49, 1.5, 1, 1.1, 4.5, 1],
  [ 13,  8, 1.0, 2, 2.2, 3.8, 0], [ 19, 65, 2.0, 1, 0.5, 5.1, 2],
  [ 25, 29, 1.0, 2, 1.8, 3.5, 0], [ 31, 82, 1.5, 0, 3.1, 4.2, 1],
  [ 36, 16, 1.0, 1, 0.9, 3.9, 0], [ 43, 54, 2.0, 1, 2.4, 5.3, 2],
  [ 48, 33, 1.0, 0, 1.6, 3.7, 0], [ 54, 76, 1.5, 2, 0.3, 4.8, 1],
  [ 59, 20, 1.0, 1, 2.7, 3.4, 0], [ 65, 47, 2.0, 0, 1.2, 5.0, 2],
  [ 71, 10, 1.0, 1, 3.5, 3.6, 0], [ 78, 68, 1.5, 2, 0.7, 4.4, 1],
  [ 84, 39, 1.0, 2, 2.0, 3.3, 0], [ 90, 84, 2.0, 1, 1.4, 5.2, 2],
  [ 95, 23, 1.0, 0, 3.8, 3.9, 0], [  6, 92, 1.5, 2, 0.6, 4.6, 1],
  [ 11, 36, 1.0, 1, 2.3, 3.7, 0], [ 17, 73, 2.5, 0, 1.0, 5.4, 2],
  [ 23, 53, 1.0, 1, 3.3, 3.8, 0], [ 29, 19, 1.5, 2, 0.4, 4.1, 1],
  [ 35, 89, 1.0, 0, 2.8, 3.5, 0], [ 41, 42, 2.0, 1, 1.7, 5.0, 2],
  [ 47, 69, 1.0, 1, 0.2, 3.9, 0], [ 53, 26, 1.5, 0, 3.6, 4.3, 1],
  [ 58, 93, 1.0, 2, 1.5, 3.6, 0], [ 64, 58, 2.0, 1, 2.1, 5.1, 2],
  [ 70, 34, 1.0, 0, 0.8, 3.8, 0], [ 76, 79, 1.5, 2, 3.0, 4.7, 1],
  [ 82, 15, 1.0, 1, 1.9, 3.4, 0], [ 88, 52, 2.0, 2, 0.1, 5.3, 2],
  [ 93, 71, 1.0, 0, 2.6, 3.7, 0], [  3, 59, 1.5, 1, 1.3, 4.5, 1],
  [  9, 21, 1.0, 2, 3.4, 3.6, 0], [ 20, 96, 2.0, 1, 0.5, 5.0, 2],
  [ 32, 45, 1.0, 0, 2.5, 3.8, 0], [ 44, 11, 1.5, 1, 1.6, 4.2, 1],
  [ 50, 87, 1.0, 2, 3.7, 3.5, 0], [ 56, 38, 2.5, 1, 0.9, 5.2, 2],
  [ 67, 76, 1.0, 0, 2.2, 3.9, 0], [ 73, 55, 1.5, 2, 1.0, 4.6, 1],
  [ 80, 28, 1.0, 2, 3.1, 3.7, 0], [ 86, 91, 2.0, 1, 0.3, 5.1, 2],
  [ 92, 45, 1.0, 0, 2.0, 3.8, 0], [ 15, 83, 1.5, 1, 1.8, 4.4, 1],
  [ 28,  7, 1.0, 2, 3.2, 3.6, 0], [ 38, 63, 2.0, 0, 0.7, 5.0, 2],
  [ 62, 97, 1.0, 1, 2.4, 3.9, 0], [ 75,  9, 1.5, 2, 1.1, 4.3, 1],
  [ 87, 33, 1.0, 2, 3.9, 3.7, 0], [ 97, 61, 2.0, 0, 0.4, 5.2, 1],
];

/* Color palette for stars */
const SC = [
  'rgba(255,255,255,.88)',   /* 0 — pure white            */
  'rgba(0,218,240,.95)',     /* 1 — electric teal/cyan    */
  'rgba(240,55,148,.90)',    /* 2 — hot pink / magenta    */
];

/* Glow box-shadows by intensity index */
const SG = [
  'none',
  '0 0 4px rgba(0,218,240,.55), 0 0 10px rgba(0,180,210,.22)',
  '0 0 6px rgba(0,218,240,.7),  0 0 14px rgba(0,180,210,.3), 0 0 22px rgba(0,150,190,.12)',
];

function BgLoginScene() {
  return (
    <div className="bg-scene" aria-hidden="true">

      {/* ── Nebula orbs ────────────────────────────────────────────── */}
      <div className="bg-orb bg-orb-t" />
      <div className="bg-orb bg-orb-p" />
      <div className="bg-orb bg-orb-c" />

      {/* ── Sound waves (7 rings, staggered 1.14s each) ────────────── */}
      {Array.from({ length: 7 }, (_, i) => (
        <div key={i}
             className={'bg-wave ' + (i % 2 === 0 ? 'bg-wave-a' : 'bg-wave-b')}
             style={{ animationDelay: (i * 8 / 7).toFixed(2) + 's' }} />
      ))}

      {/* ── Star field ─────────────────────────────────────────────── */}
      {STARS.map(([x, y, s, c, delay, dur, g], i) => (
        <div key={i} className="bg-star" style={{
          left: x + '%',
          top:  y + '%',
          width:  s + 'px',
          height: s + 'px',
          background: SC[c],
          boxShadow:  SG[g],
          animationDelay:    delay + 's',
          animationDuration: dur   + 's',
        }} />
      ))}

      {/* ── Vignette ───────────────────────────────────────────────── */}
      <div className="bg-vignette" />
    </div>
  );
}

/* Passthrough — all timing lives in CSS */
function LoopStage({ children }) {
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      {children}
    </div>
  );
}

window.LoopStage    = LoopStage;
window.BgLoginScene = BgLoginScene;