/**
 * MathGuru Mascot System — Universal CSS
 * ========================================
 *
 * Imported by every mascot (Berry, Sun, future characters).
 * Locks in shared timing, color cues, and helper animations so kids
 * see consistent emotional language across all 55 games.
 *
 * See MASCOT-SYSTEM.md for the full spec.
 *
 * Naming convention: all mascot-system identifiers use --mascot-* /
 * .mascot-* prefix to avoid clashing with per-game CSS.
 *
 * Usage: include in a game template with
 *   <link rel="stylesheet"
 *         href="{{ url_for('static', filename='css/mascot-system.css') }}">
 * BEFORE the per-mascot SVG/CSS.
 */

:root {

  /* === TIMING (spec §2 — immutable, never override per-mascot) === */

  --mascot-breath-duration: 3.0s;
  --mascot-blink-duration: 4.5s;
  --mascot-track-duration: 350ms;
  --mascot-cheer-duration: 2.0s;
  --mascot-excited-duration: 2.5s;
  --mascot-sad-duration: 2.0s;
  --mascot-surprised-duration: 1.5s;
  --mascot-wink-duration: 600ms;
  --mascot-idle-to-think-ms: 5000;          /* read by mascot.js — not used in CSS directly */
  --mascot-wink-cooldown-rounds: 3;         /* read by mascot.js */
  --mascot-wink-chance: 0.25;               /* read by mascot.js */

  /* === COLOR & EFFECT CUES (spec §3 — immutable) === */

  /* Warm gold glow — celebration (cheer + excited).
     Kids learn: golden glow = "I did something right". */
  --mascot-glow:
    drop-shadow(0 6px 14px rgba(245, 180, 0, 0.40))
    drop-shadow(0 0 22px rgba(255, 220, 120, 0.55));

  /* Default soft shadow — alive but neutral */
  --mascot-shadow-default:
    drop-shadow(0 6px 10px rgba(31, 39, 71, 0.22));

  /* Sad — desaturation + smaller shadow.
     Kids learn: dimmer colors = "try again, it's OK". */
  --mascot-sad-filter:
    drop-shadow(0 8px 10px rgba(31, 39, 71, 0.18))
    saturate(0.85);

  /* === SQUASH-AND-STRETCH AMPLITUDES (spec §3) === */
  /* Use these in keyframes for body bounce/stretch so all mascots
     stretch/squash by the same proportions. */

  --mascot-stretch-y: 1.18;   /* tall thin (gasp, jump up) */
  --mascot-squash-y: 0.94;    /* short wide (landing, sigh) */
  --mascot-stretch-x: 0.96;   /* narrow (paired with stretch-y) */
  --mascot-squash-x: 1.08;    /* wide  (paired with squash-y) */

  /* Sad body — horizontal-major-axis ellipse (spec §3) */
  --mascot-sad-scale-y: 0.96;
  --mascot-sad-scale-x: 1.06;
}

/* ===================================================================
 *  STATE-FILTER DEFAULTS
 *  Each mascot can override with a higher-specificity selector if its
 *  anatomy needs different filters, but the defaults below give every
 *  mascot the universal color cue automatically.
 * =================================================================== */

.mascot.expr-cheer,
.mascot.expr-excited,
.hero-sun.expr-cheer,
.hero-sun.expr-excited {
  filter: var(--mascot-glow);
}

.mascot.expr-sad,
.hero-sun.expr-sad {
  filter: var(--mascot-sad-filter);
}

.mascot,
.hero-sun {
  filter: var(--mascot-shadow-default);
}

/* ===================================================================
 *  UNIVERSAL TRACK GAZE-FLICK
 *  Spec §5: on every user input the mascot's eyes briefly dart
 *  toward where the user tapped, then return. Each mascot wraps its
 *  eye sparkles (white highlight dots) in a sub-group classed
 *  .mascot-sparkle / .mascot-sparkle-left / .mascot-sparkle-right.
 *  When .expr-track is added to the mascot root for 350ms, the
 *  sparkles shift right and back — universal "I see your move" signal.
 * =================================================================== */

.mascot.expr-track .mascot-sparkle,
.mascot.expr-track .mascot-sparkle-left,
.mascot.expr-track .mascot-sparkle-right,
.hero-sun.expr-track .mascot-sparkle,
.hero-sun.expr-track .mascot-sparkle-left,
.hero-sun.expr-track .mascot-sparkle-right {
  animation: mascot-track-flick var(--mascot-track-duration) ease-out forwards;
  transform-origin: center;
}

@keyframes mascot-track-flick {
  0%   { transform: translate(0, 0); }
  40%  { transform: translate(2.5px, -0.5px); }
  100% { transform: translate(0, 0); }
}

/* ===================================================================
 *  UNIVERSAL BLINK ENVELOPE
 *  Spec §2: every mascot blinks on a 4.5s cycle with the same triple-
 *  blink pattern. Each mascot still owns its eye SVG and applies
 *  scaleY(0) however its anatomy needs, but uses this @keyframes
 *  envelope so the rhythm is identical across mascots.
 *
 *  Per-mascot CSS pattern:
 *      .my-mascot .my-eyes {
 *        animation: mascot-blink-triple var(--mascot-blink-duration)
 *                   ease-in-out infinite;
 *        transform-origin: <eye-center>;
 *      }
 * =================================================================== */

@keyframes mascot-blink-triple {
  0%, 92%, 100%       { transform: scaleY(1);    }
  94%, 96%, 98%       { transform: scaleY(0.08); }
}

/* ===================================================================
 *  UNIVERSAL BREATH ENVELOPE
 *  Spec §2: every mascot breathes on a 3.0s cycle. Each mascot
 *  applies this envelope to whichever element makes sense
 *  (whole body for Sun, upper-body for Berry).
 *
 *  Universal envelope: subtle vertical stretch + matching X squash
 *  for cartoon "breathing in" effect.
 * =================================================================== */

@keyframes mascot-breath {
  0%, 100% { transform: scaleY(1)    scaleX(1);     }
  50%      { transform: scaleY(1.035) scaleX(0.985); }
}

/* ===================================================================
 *  UNIVERSAL SAD SWAY ENVELOPE
 *  Spec §3: sad face = horizontal ellipse + slight side-to-side sway.
 *  4-second cycle so it feels heavy/slow. Per-mascot CSS combines
 *  this with its own droopy-face details.
 * =================================================================== */

@keyframes mascot-sad-sway {
  0%, 100% { transform: scaleY(var(--mascot-sad-scale-y))
                        scaleX(var(--mascot-sad-scale-x))
                        rotate(-1.5deg); }
  25%      { transform: scaleY(var(--mascot-sad-scale-y))
                        scaleX(var(--mascot-sad-scale-x))
                        rotate(0deg);    }
  50%      { transform: scaleY(calc(var(--mascot-sad-scale-y) - 0.02))
                        scaleX(calc(var(--mascot-sad-scale-x) + 0.02))
                        rotate(1.5deg);  }
  75%      { transform: scaleY(var(--mascot-sad-scale-y))
                        scaleX(var(--mascot-sad-scale-x))
                        rotate(0deg);    }
}

/* ===================================================================
 *  UNIVERSAL SURPRISED-STRETCH ENVELOPE
 *  Spec §3: gasp = brief vertical stretch (tall thin) at 18%
 *  then settle. 1.5s total. Per-mascot CSS uses this envelope.
 * =================================================================== */

@keyframes mascot-surprise-stretch {
  0%   { transform: scaleX(1) scaleY(1) translateY(0); }
  18%  { transform: scaleX(var(--mascot-stretch-x))
                    scaleY(var(--mascot-stretch-y))
                    translateY(-4px); }
  100% { transform: scaleX(0.98) scaleY(1.06) translateY(-1px); }
}

/* ===================================================================
 *  UNIVERSAL EXCITED-BOUNCE ENVELOPE
 *  Spec §3: in-place squat-bounce. Mascot rises then squats then
 *  rises. Loops for the 2.5s excited duration. Each mascot pairs
 *  this with its own arm/anatomy animation.
 * =================================================================== */

@keyframes mascot-excited-bounce {
  0%, 100% { transform: translateY(0)    scaleY(1);    }
  50%      { transform: translateY(-6px) scaleY(1.04); }
}

/* ===================================================================
 *  ACCESSIBILITY — reduced motion
 *  Honour prefers-reduced-motion: still show state changes via filter
 *  cues (glow, desat) but kill the bouncing/swaying motion.
 * =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mascot, .hero-sun,
  .mascot *, .hero-sun * {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}