/* ============================================================
   mascot.css — "부기" (Boogi) the owl mascot
   ------------------------------------------------------------
   Component-level sheet. Loads after fun.css so it can freely
   reuse fun.css's global keyframes (fun-pop, fun-tada) — CSS
   keyframe lookup is name-based, not scoped to a file, so this
   works regardless of link order, but we keep it after fun.css
   to signal the dependency to future readers.

   One SVG, many looks: stages and moods are pure CSS — JS only
   ever toggles `.stage-*` / `.mood-*` / `.accessory-*` classes
   on the mounted <svg class="mascot-svg"> root (see mascot.js).
   ============================================================ */

.mascot-svg {
  display: inline-block;
  overflow: visible;
  transform-origin: 50px 55px;
}

/* ════════════════════════════════════════════════════════════
   §0  KEYFRAMES — all prefixed `mascot-`
   ════════════════════════════════════════════════════════════ */

/* Idle blink: eyelid rect sits scaled to ~0 (open) almost the whole
   cycle, briefly scales up to 1 (closed) around the 96% mark. */
@keyframes mascot-blink {
  0%, 92%, 100% { transform: scaleY(0.04); }
  96%            { transform: scaleY(1);    }
}

/* Idle: very gentle float, small amplitude (this is a 64px icon,
   not a full-screen hero — fun-float's -6px would read as too big). */
@keyframes mascot-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2.5px); }
}

/* Think: slow rhythmic head bob, longer period than idle float */
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%       { transform: translateY(-3px) rotate(1.5deg); }
}

/* Sleep: each "Z" drifts up and fades, looped (staggered via delay) */
@keyframes mascot-zzz-drift {
  0%   { opacity: 0;   transform: translate(0, 6px)   scale(0.8); }
  15%  { opacity: 1;   transform: translate(0, 0)      scale(1);   }
  80%  { opacity: 1;   transform: translate(2px, -9px) scale(1.05); }
  100% { opacity: 0;   transform: translate(3px, -13px) scale(1.1); }
}


/* ════════════════════════════════════════════════════════════
   §1  STAGE — scale + accessory parts
   ════════════════════════════════════════════════════════════ */

.mascot-scale {
  transition: transform var(--dur-base) var(--ease-out);
}

/* novice: smaller body, no accessory (default look) */
.mascot-svg.stage-novice .mascot-scale { transform: scale(0.82); }

/* student / explorer / scholar / sage / master: full scale */
.mascot-svg.stage-student  .mascot-scale,
.mascot-svg.stage-explorer .mascot-scale,
.mascot-svg.stage-scholar  .mascot-scale,
.mascot-svg.stage-sage     .mascot-scale,
.mascot-svg.stage-master   .mascot-scale { transform: scale(1); }

/* All stage-specific decorative parts hidden by default */
.mascot-stage-part { display: none; }

.mascot-svg.stage-student  .mascot-part-scarf    { display: inline; }
.mascot-svg.stage-explorer .mascot-part-explorer { display: inline; }
.mascot-svg.stage-scholar  .mascot-part-glasses  { display: inline; }
.mascot-svg.stage-sage     .mascot-part-sage     { display: inline; }
.mascot-svg.stage-master   .mascot-part-master   { display: inline; }

/* master: soft accent glow (drop-shadow is the SVG-safe equivalent of
   the --sh-glow-accent box-shadow token, which only applies to boxes) */
.mascot-svg.stage-master {
  filter: drop-shadow(0 0 6px var(--accent));
}


/* ════════════════════════════════════════════════════════════
   §2  ACCESSORY SLOT — bow / star / flame
   ════════════════════════════════════════════════════════════ */

.mascot-accessory { display: none; }

.mascot-svg.accessory-bow   .mascot-accessory-bow   { display: inline; }
.mascot-svg.accessory-star  .mascot-accessory-star  { display: inline; }
.mascot-svg.accessory-flame .mascot-accessory-flame { display: inline; }

.mascot-svg.accessory-compass_charm .mascot-accessory-compass_charm,
.mascot-svg.accessory-quill_charm   .mascot-accessory-quill_charm,
.mascot-svg.accessory-seal_charm    .mascot-accessory-seal_charm,
.mascot-svg.accessory-quote_charm   .mascot-accessory-quote_charm,
.mascot-svg.accessory-crown_charm   .mascot-accessory-crown_charm,
.mascot-svg.accessory-moon_charm    .mascot-accessory-moon_charm,
.mascot-svg.accessory-sun_charm     .mascot-accessory-sun_charm { display: inline; }


/* ════════════════════════════════════════════════════════════
   §3  EYES — open (default) / happy arcs / sleep lines
   ════════════════════════════════════════════════════════════ */

.mascot-eye-happy,
.mascot-eye-sleep,
.mascot-zzz { display: none; }

.mascot-eyelid { transform: scaleY(0.04); } /* open by default outside idle */
.mascot-eyelid-l { transform-origin: 38px 48px; }
.mascot-eyelid-r { transform-origin: 62px 48px; }

.mascot-pupil { transition: transform var(--dur-base) var(--ease-out); }
.mascot-pupil-l { transform-origin: 38px 48px; }
.mascot-pupil-r { transform-origin: 62px 48px; }


/* ════════════════════════════════════════════════════════════
   §4  WINGS — down (default) / raised (cheer)
   ════════════════════════════════════════════════════════════ */

.mascot-wing-up { display: none; }
.mascot-wing-down { display: inline; }


/* ════════════════════════════════════════════════════════════
   §5  MOODS
   ════════════════════════════════════════════════════════════ */

/* ── idle: slow blink + very gentle float ───────────────────── */
.mascot-svg.mood-idle .mascot-eyelid {
  animation: mascot-blink 4s var(--ease-in-out) infinite;
}
.mascot-svg.mood-idle {
  animation: mascot-float 3.6s var(--ease-in-out) infinite;
}

/* ── happy: quick pop + upward-arc eyes ─────────────────────── */
.mascot-svg.mood-happy {
  animation: fun-pop var(--dur-base) var(--ease-spring) both;
}
.mascot-svg.mood-happy .mascot-eye-open { display: none; }
.mascot-svg.mood-happy .mascot-eye-happy { display: block; }

/* ── cheer: big tada bounce + wings raised ──────────────────── */
.mascot-svg.mood-cheer {
  animation: fun-tada var(--dur-slow) var(--ease-spring) both;
}
.mascot-svg.mood-cheer .mascot-wing-down { display: none; }
.mascot-svg.mood-cheer .mascot-wing-up { display: inline; }

/* ── sad: slight head tilt + eyes look down (gently disappointed,
   not crying — no tears/frown, matches the app's kind failure
   feedback elsewhere) ───────────────────────────────────────── */
.mascot-svg.mood-sad {
  transform: rotate(-5deg);
}
.mascot-svg.mood-sad .mascot-pupil {
  transform: translateY(3px);
}

/* ── think: pupils shifted to one side + slow head bob ──────── */
.mascot-svg.mood-think {
  animation: mascot-bob 2.6s var(--ease-in-out) infinite;
}
.mascot-svg.mood-think .mascot-pupil {
  transform: translateX(3px);
}

/* ── sleep: eyes closed + drifting Z's ──────────────────────── */
.mascot-svg.mood-sleep .mascot-eye-open { display: none; }
.mascot-svg.mood-sleep .mascot-eye-sleep { display: block; }
.mascot-svg.mood-sleep .mascot-zzz { display: block; }
.mascot-svg.mood-sleep .mascot-z {
  animation: mascot-zzz-drift 2.4s var(--ease-out) infinite;
}
.mascot-svg.mood-sleep .mascot-z1 { animation-delay: 0s; }
.mascot-svg.mood-sleep .mascot-z2 { animation-delay: 0.5s; }
.mascot-svg.mood-sleep .mascot-z3 { animation-delay: 1s; }


/* ════════════════════════════════════════════════════════════
   §6  REDUCED MOTION
   ------------------------------------------------------------
   Freezes every mascot animation on its first/neutral frame,
   mirroring the pattern in css/fun.css §10.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .mascot-svg.mood-idle .mascot-eyelid,
  .mascot-svg.mood-idle,
  .mascot-svg.mood-happy,
  .mascot-svg.mood-cheer,
  .mascot-svg.mood-think,
  .mascot-svg.mood-sleep .mascot-z {
    animation: none !important;
  }
  .mascot-scale {
    transition: none !important;
  }
  .mascot-pupil {
    transition: none !important;
  }
}