/*
  ============================================================
  MVP Algebra 1 — Theme Engine styles (shared)
  © 2026 Alondra Delgado. All rights reserved.
  Part of the MVP Algebra 1 platform.

  Phase 2 — Pass A / Batch A.4 (critical-path CSS split).
  Extracted VERBATIM from drill.html (theme variables L37–105 +
  rich animated backgrounds L117–457). "Refactoring is a MOVE, not a
  REDESIGN" (CLAUDE.md §12.2): no theme value (color, font, gradient,
  animation timing, decoration parameter) is changed here.

  This file is the theme system's CSS half. It is loaded via a
  render-blocking <link> in each consuming page's <head> (BEFORE the
  page's inline <style> and before the deferred module script) so the
  :root defaults, per-theme palettes, and base backgrounds apply at
  first paint — eliminating the unstyled-content flash that a
  JS-injected <style> caused (the deferred ES module ran after first
  paint). The JS half (theme switching/persistence + decoration
  builders) lives in shared/theme_engine.js.

  NOT included here (kept inline in the consuming page): the global
  reset / html,body base, the theme-picker chrome, and the
  component-conditional theme overrides (e.g. body.theme-sakura
  .topbar / .footer / .speed-prompt-info / .confirm-info).
  ============================================================
*/
  /* ============ THEME VARIABLES ============ */
  :root {
    --bg-1: #050818; --bg-2: #0e1438; --bg-3: #1a1245;
    --cyan: #00e5ff; --cyan-glow: #00e5ff80;
    --gold: #ffc233; --gold-glow: #ffc23380;
    --pink: #ff2d95; --green: #39ff14; --red: #ff3b3b;
    --text: #f0f4ff; --text-dim: #8a92b8;
    --panel: rgba(255, 255, 255, 0.04);
    --panel-border: rgba(255, 255, 255, 0.12);
    --primary-deep: #0099cc; --primary-darker: #006080;
    --grid-line: rgba(0, 229, 255, 0.04);
    --orb-1: rgba(0, 229, 255, 0.12);
    --orb-2: rgba(255, 45, 149, 0.10);
  }
  body.theme-neon {
    --bg-1: #02010a; --bg-2: #07051c; --bg-3: #0c0828;
    --cyan: #00f0ff; --cyan-glow: rgba(0, 240, 255, 0.6);
    --gold: #b6ff00; --gold-glow: rgba(182, 255, 0, 0.5);
    --pink: #ff2bd6; --green: #b6ff00; --red: #ff3060;
    --text: #f5fafe; --text-dim: #7a8aa0;
    --primary-deep: #00cce0; --primary-darker: #007a8a;
    --grid-line: rgba(0, 240, 255, 0.05);
    --orb-1: rgba(0, 240, 255, 0.14); --orb-2: rgba(255, 43, 214, 0.12);
  }
  body.theme-galaxy {
    --bg-1: #0a0420; --bg-2: #1a0a40; --bg-3: #2d1560;
    --cyan: #b794ff; --cyan-glow: rgba(183, 148, 255, 0.5);
    --gold: #ffd700; --gold-glow: rgba(255, 215, 0, 0.5);
    --pink: #ff6ad5; --green: #5dffd6; --red: #ff5577;
    --text: #f0e8ff; --text-dim: #9c8bbc;
    --primary-deep: #8a5cd9; --primary-darker: #5e3995;
    --grid-line: rgba(183, 148, 255, 0.05);
    --orb-1: rgba(183, 148, 255, 0.14); --orb-2: rgba(255, 106, 213, 0.12);
  }
  body.theme-matrix {
    --bg-1: #000000; --bg-2: #001a0a; --bg-3: #00331f;
    --cyan: #00ff41; --cyan-glow: rgba(0, 255, 65, 0.5);
    --gold: #ff5500; --gold-glow: rgba(255, 85, 0, 0.5);
    --pink: #00ffaa; --green: #00ff41; --red: #ff3030;
    --text: #d0ffd0; --text-dim: #5a8a5a;
    --primary-deep: #00cc33; --primary-darker: #008822;
    --grid-line: rgba(0, 255, 65, 0.05);
    --orb-1: rgba(0, 255, 65, 0.13); --orb-2: rgba(0, 255, 170, 0.10);
  }
  body.theme-sakura {
    --bg-1: #fff5f7; --bg-2: #ffe5ed; --bg-3: #ffd5e3;
    --cyan: #d63384; --cyan-glow: rgba(214, 51, 132, 0.4);
    --gold: #c9303a; --gold-glow: rgba(201, 48, 58, 0.4);
    --pink: #5b3fa0; --green: #2d8a4d; --red: #c9303a;
    --text: #2d1f3a; --text-dim: #6b5878;
    --panel: rgba(45, 31, 58, 0.05);
    --panel-border: rgba(45, 31, 58, 0.18);
    --primary-deep: #a02466; --primary-darker: #6e1845;
    --grid-line: rgba(214, 51, 132, 0.06);
    --orb-1: rgba(214, 51, 132, 0.12); --orb-2: rgba(91, 63, 160, 0.10);
  }
  body.theme-court {
    /* Light hardwood-tan palette with navy + orange accents */
    --bg-1: #f5e6c8; --bg-2: #ead4ad; --bg-3: #dec092;
    --cyan: #1d3557; --cyan-glow: rgba(29, 53, 87, 0.4);
    --gold: #e76f00; --gold-glow: rgba(231, 111, 0, 0.45);
    --pink: #c9303a; --green: #2d8a4d; --red: #c9303a;
    --text: #1a2b40; --text-dim: #5a6b80;
    --panel: rgba(255, 250, 240, 0.55);
    --panel-border: rgba(29, 53, 87, 0.2);
    --primary-deep: #14253f; --primary-darker: #0c1a2e;
    --grid-line: rgba(29, 53, 87, 0.05);
    --orb-1: rgba(231, 111, 0, 0.10); --orb-2: rgba(29, 53, 87, 0.08);
  }

  /* ============================================================
     RICH THEME BACKGROUNDS (animated)
     The #themeBg container holds all per-theme moving elements.
     Animations are dampened during active drill via .drill-active.
  ============================================================ */
  #themeBg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }

  /* Phones: the drifting shapes are sized for a desktop canvas. At 390px one
     shape can span half the screen and land directly on a card, washing out
     the content underneath. Keep the motion and the colour; drop the
     dominance so they read as background texture instead of foreground. */
  @media (max-width: 700px) {
    #themeBg { opacity: 0.22; }
  }
  @media (prefers-reduced-motion: reduce) {
    #themeBg { opacity: 0.15; }
    #themeBg * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
  }

  /* === NEON: cyberpunk midnight + drifting neon-tube outlines === */
  body.theme-neon {
    background:
      linear-gradient(180deg,
        #02010a 0%,
        #04031a 35%,
        #07051c 65%,
        #02010a 100%);
  }
  /* Soft neon glow accents radiating from corners */
  body.theme-neon::after {
    content: '';
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse 500px 600px at 0% 100%, rgba(0, 240, 255, 0.16), transparent 60%),
      radial-gradient(ellipse 500px 600px at 100% 0%, rgba(255, 43, 214, 0.14), transparent 60%),
      radial-gradient(ellipse 400px 400px at 100% 100%, rgba(182, 255, 0, 0.08), transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
  /* Subtle scanline overlay for the cyberpunk display feel */
  .neon-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(0, 240, 255, 0.025) 3px,
      rgba(0, 240, 255, 0.025) 4px
    );
    pointer-events: none;
    z-index: 4;
  }
  /* Neon-tube outline shapes that drift slowly across the screen */
  .neon-shape {
    position: absolute;
    pointer-events: none;
    animation: neonDrift linear forwards;
    opacity: 0;
  }
  .neon-shape svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }
  @keyframes neonDrift {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translate(var(--drift-x, 200px), var(--drift-y, -40px)) rotate(var(--spin, 60deg)); }
    90%  { opacity: 1; }
    100% { transform: translate(calc(var(--drift-x, 200px) * 2), calc(var(--drift-y, -40px) * 2)) rotate(calc(var(--spin, 60deg) * 2)); opacity: 0; }
  }
  /* Slow, hypnotic flicker on a small subset of shapes for that authentic broken-tube vibe */
  @keyframes neonFlicker {
    0%, 100% { filter: brightness(1); }
    47% { filter: brightness(1); }
    48% { filter: brightness(0.3); }
    49% { filter: brightness(1.2); }
    50% { filter: brightness(0.5); }
    51% { filter: brightness(1); }
  }
  .neon-shape.flicker svg { animation: neonFlicker 6s infinite; }

  /* === GALAXY: floating stars + shooting stars + nebula === */
  body.theme-galaxy {
    background:
      radial-gradient(ellipse 700px 400px at 18% 28%, rgba(180, 110, 255, 0.22), transparent 60%),
      radial-gradient(ellipse 600px 400px at 82% 72%, rgba(255, 100, 200, 0.18), transparent 60%),
      radial-gradient(ellipse 500px 400px at 50% 50%, rgba(100, 80, 200, 0.12), transparent 60%),
      linear-gradient(180deg, #0a0420 0%, #1a0a40 50%, #2d1560 100%);
  }
  .galaxy-stars {
    position: absolute; inset: 0;
  }
  .galaxy-stars span {
    position: absolute;
    width: 2px; height: 2px;
    background: white; border-radius: 50%;
    opacity: 0.85;
    animation: twinkle var(--twinkle-dur, 3s) ease-in-out infinite;
  }
  .galaxy-stars span.big {
    width: 3px; height: 3px;
    box-shadow: 0 0 6px white, 0 0 14px rgba(255, 255, 255, 0.5);
  }
  .galaxy-stars span.huge {
    width: 4px; height: 4px;
    box-shadow: 0 0 8px white, 0 0 18px var(--cyan-glow);
  }
  @keyframes twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.7); }
    50%      { opacity: 1;    transform: scale(1.2); }
  }
  .shooting-star {
    position: absolute;
    width: 3px; height: 3px;
    background: white; border-radius: 50%;
    box-shadow: 0 0 6px white, 0 0 16px white;
    opacity: 0;
  }
  .shooting-star::before {
    content: '';
    position: absolute;
    top: 50%; right: 100%;
    width: 140px; height: 1.5px;
    margin-top: -0.75px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85));
    transform-origin: right center;
  }
  .shooting-star.fly {
    animation: shoot 1.5s linear forwards;
  }
  @keyframes shoot {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translate(480px, 320px); opacity: 0; }
  }

  /* === SAKURA: soft clouds + falling cherry blossom petals === */
  body.theme-sakura {
    background:
      radial-gradient(ellipse at 15% 5%, #ffe5ed 0%, transparent 45%),
      radial-gradient(ellipse at 85% 95%, #ffd5e3 0%, transparent 45%),
      linear-gradient(180deg, #fff8fa 0%, #fff0f4 50%, #ffe5ed 100%);
  }
  .sakura-cloud {
    position: absolute;
    opacity: 0.9;
    animation: cloudDrift linear infinite;
    filter: drop-shadow(0 4px 12px rgba(214, 51, 132, 0.08));
  }
  .sakura-cloud svg {
    width: 100%;
    height: auto;
    display: block;
  }
  @keyframes cloudDrift {
    0%   { transform: translateX(-280px); }
    100% { transform: translateX(calc(100vw + 80px)); }
  }
  .petal {
    position: absolute;
    top: -30px;
    animation: petalFall linear forwards;
    pointer-events: none;
  }
  .petal svg {
    width: 100%;
    height: auto;
    display: block;
  }
  @keyframes petalFall {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    8%   { opacity: 0.9; }
    100% {
      transform: translate(var(--sway, 60px), 110vh) rotate(var(--spin, 720deg));
      opacity: 0.5;
    }
  }

  /* === MATRIX: scanlines + glitch + falling characters === */
  body.theme-matrix {
    background: linear-gradient(180deg, #000000 0%, #001508 100%);
  }
  .matrix-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 255, 65, 0.045) 2px,
      rgba(0, 255, 65, 0.045) 3px
    );
    pointer-events: none;
    z-index: 5;
  }
  .matrix-scan-bar {
    position: absolute;
    left: 0; right: 0;
    height: 100px;
    background: linear-gradient(0deg,
      transparent,
      rgba(0, 255, 65, 0.04) 30%,
      rgba(0, 255, 65, 0.10) 50%,
      rgba(0, 255, 65, 0.04) 70%,
      transparent);
    animation: scanBar 7s linear infinite;
    pointer-events: none;
    z-index: 4;
  }
  @keyframes scanBar {
    0%   { top: -120px; }
    100% { top: 100vh; }
  }
  .matrix-glitch {
    position: absolute;
    inset: 0;
    background: rgba(0, 255, 65, 0.06);
    opacity: 0;
    pointer-events: none;
    z-index: 6;
    mix-blend-mode: screen;
  }
  .matrix-glitch.fire { animation: glitchFlick 0.22s; }
  @keyframes glitchFlick {
    0%   { opacity: 0; transform: translateX(0); filter: hue-rotate(0deg); }
    15%  { opacity: 1; transform: translateX(-6px); filter: hue-rotate(120deg); }
    30%  { opacity: 0.5; transform: translateX(8px); }
    50%  { opacity: 1; transform: translateX(-3px); filter: hue-rotate(-40deg); }
    75%  { opacity: 0.7; transform: translateX(2px); }
    100% { opacity: 0; transform: translateX(0); filter: hue-rotate(0deg); }
  }
  .matrix-column {
    position: absolute;
    top: -250px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    animation: matrixFall linear infinite;
    pointer-events: none;
    line-height: 1.2;
    color: rgba(0, 255, 65, 0.65);
    text-shadow: 0 0 4px currentColor;
    z-index: 2;
  }
  .matrix-column span:last-child {
    color: rgba(225, 255, 225, 1);
    text-shadow: 0 0 8px #00ff41, 0 0 14px #00ff41;
  }
  @keyframes matrixFall {
    0%   { transform: translateY(0); }
    100% { transform: translateY(calc(100vh + 250px)); }
  }

  /* === DAMPEN ANIMATIONS DURING ACTIVE DRILL (Option B) ===
     When the student is on the active question screen, all theme
     animations are paused or reduced to keep focus on the question.
     This applies during the drill screen ONLY — picker, results,
     welcome, confirm, speed prompt all keep full animations. */
  body.drill-active .matrix-scan-bar,
  body.drill-active .matrix-glitch,
  body.drill-active .galaxy-stars span {
    animation-play-state: paused;
  }
  body.drill-active .shooting-star,
  body.drill-active .petal,
  body.drill-active .sakura-cloud,
  body.drill-active .matrix-column,
  body.drill-active .neon-shape,
  body.drill-active .basketball {
    display: none;
  }
  /* Per-theme question card overlay so background doesn't fight the text */
  body.theme-neon .question-card    { background: rgba(2, 1, 10, 0.65); }
  body.theme-galaxy .question-card { background: rgba(10, 6, 28, 0.55); }
  body.theme-matrix .question-card { background: rgba(0, 10, 5, 0.65); }
  body.theme-sakura .question-card { background: rgba(255, 252, 254, 0.70); }
  body.theme-court .question-card { background: rgba(255, 250, 240, 0.85); }

  /* === COURT: hardwood-tan + accurate court lines + bouncing basketballs === */
  body.theme-court {
    background:
      radial-gradient(ellipse at 50% 0%, #fff4dc 0%, transparent 40%),
      linear-gradient(180deg, #f5e6c8 0%, #ead4ad 50%, #dec092 100%);
  }
  /* Half-court markings — drawn as SVG so lines are crisp at any size.
     Width bumped wider to fill more of the screen, opacity lowered for a more subtle backdrop. */
  .court-markings {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(95vw, 1100px);
    height: min(95vw, 1100px); /* square aspect; on shorter screens the top of the court extends above the viewport */
    margin-left: calc(min(95vw, 1100px) / -2);
    z-index: 1;
    pointer-events: none;
    opacity: 0.28;
  }
  .court-markings svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  /* Bouncing basketballs */
  .basketball {
    position: absolute;
    pointer-events: none;
    animation: basketballBounce linear forwards;
    filter: drop-shadow(0 8px 12px rgba(80, 40, 10, 0.3));
  }
  .basketball svg {
    width: 100%;
    height: auto;
    display: block;
    animation: basketballSpin linear infinite;
  }
  @keyframes basketballSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(720deg); }
  }
  /* Bounces in arcs across the screen with realistic bounce physics */
  .basketball.from-left  { animation-name: basketballArcRight; left: -100px; }
  .basketball.from-right { animation-name: basketballArcLeft;  right: -100px; }
  @keyframes basketballArcRight {
    0%   { transform: translate(0, 0); opacity: 0; }
    8%   { opacity: 1; }
    25%  { transform: translate(28vw, -180px); }
    50%  { transform: translate(50vw, 60px); }
    75%  { transform: translate(75vw, -120px); }
    92%  { opacity: 1; }
    100% { transform: translate(120vw, 100px); opacity: 0; }
  }
  @keyframes basketballArcLeft {
    0%   { transform: translate(0, 0); opacity: 0; }
    8%   { opacity: 1; }
    25%  { transform: translate(-28vw, -180px); }
    50%  { transform: translate(-50vw, 60px); }
    75%  { transform: translate(-75vw, -120px); }
    92%  { opacity: 1; }
    100% { transform: translate(-120vw, 100px); opacity: 0; }
  }

  /* ============ END RICH THEME BACKGROUNDS ============ */
