/* ============================================================
   Rocket — the Frontier Guide · Animation System
   FrontierIQ · vanilla CSS, no runtime dependency
   ------------------------------------------------------------
   Attach these to the inline <svg class="rocket-svg"> that contains
   the layer classes shipped in rocket-character.svg.

   AMBIENT (always on): idle bob, breathing, eye blink, glow pulse, twinkle.
   CONTINUOUS states (toggle a class):  .is-thinking .is-processing
                                        .is-listening .is-streak
   ONE-SHOT states (add class, auto-removed by controller on animationend):
                                        .is-correct .is-incorrect .is-celebrate

   All animated sub-layers use `transform-box: fill-box` so
   `transform-origin: center` is relative to each layer's own box.
   Honors prefers-reduced-motion at the bottom.
   ============================================================ */

.rocket-svg { overflow: visible; display: block; }

.rocket-svg .rocket-root,
.rocket-svg .rocket-float,
.rocket-svg .rocket-body,
.rocket-svg .rocket-eyes,
.rocket-svg .rocket-orbitals,
.rocket-svg .rocket-orb,
.rocket-svg .rocket-tail,
.rocket-svg .rocket-glow,
.rocket-svg .rocket-particle {
  transform-box: fill-box;
  transform-origin: center;
}
.rocket-svg .rocket-tail { transform-origin: top center; }

/* ---------- AMBIENT (idle personality, always running) ---------- */
.rocket-svg .rocket-float    { animation: rocket-bob 4.6s ease-in-out infinite; }
.rocket-svg .rocket-body     { animation: rocket-breathe 4.6s ease-in-out infinite; }
.rocket-svg .rocket-glow     { animation: rocket-glow-pulse 4.6s ease-in-out infinite; }
.rocket-svg .rocket-eyes     { animation: rocket-blink 6.2s ease-in-out infinite; }
.rocket-svg .rocket-particle { animation: rocket-twinkle 3.4s ease-in-out infinite; }
.rocket-svg .rocket-particle:nth-child(2) { animation-delay: .5s; }
.rocket-svg .rocket-particle:nth-child(3) { animation-delay: 1.1s; }
.rocket-svg .rocket-particle:nth-child(4) { animation-delay: 1.7s; }
.rocket-svg .rocket-particle:nth-child(5) { animation-delay: 2.3s; }

@keyframes rocket-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes rocket-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}
@keyframes rocket-glow-pulse {
  0%, 100% { opacity: .78; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
@keyframes rocket-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%           { transform: scaleY(0.08); }
  96%           { transform: scaleY(1); }
}
@keyframes rocket-twinkle {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

/* ---------- THINKING · surrounding starbursts twinkle slowly ---------- */
.rocket-svg.is-thinking .rocket-orb    { animation: rocket-star-twinkle 2.4s ease-in-out infinite; }
.rocket-svg.is-thinking .rocket-orb-r  { animation-delay: 1.2s; }

/* ---------- AI PROCESSING · surrounding starbursts twinkle fast ---------- */
.rocket-svg.is-processing .rocket-orb   { animation: rocket-star-twinkle 0.7s ease-in-out infinite; }
.rocket-svg.is-processing .rocket-orb-r { animation-delay: 0.35s; }

@keyframes rocket-star-twinkle {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .25; transform: scale(0.5); }
}

/* ---------- LISTENING · the outer glow pulses ---------- */
.rocket-svg.is-listening .rocket-glow { animation: rocket-listen 1.1s ease-in-out infinite; }
@keyframes rocket-listen {
  0%, 100% { opacity: .6;  transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.16); }
}

/* ---------- STREAK · tail becomes an energetic flame ---------- */
.rocket-svg.is-streak .rocket-float      { animation: rocket-bob 1.7s ease-in-out infinite; }
.rocket-svg.is-streak .rocket-tail       { animation: rocket-streak 0.5s ease-in-out infinite alternate; }
.rocket-svg.is-streak .rocket-tail-streak{ animation: rocket-flicker 0.28s steps(2, jump-none) infinite; }
@keyframes rocket-streak {
  from { transform: scaleY(1)    scaleX(1);   }
  to   { transform: scaleY(1.38) scaleX(0.88);}
}
@keyframes rocket-flicker {
  0% { opacity: .35; } 100% { opacity: .9; }
}

/* ---------- CORRECT ANSWER · quick upward bounce + tail sparkle (one-shot) ---------- */
.rocket-svg.is-correct .rocket-root { animation: rocket-correct 0.7s cubic-bezier(.34,1.56,.64,1); }
.rocket-svg.is-correct .rocket-particle { animation: rocket-spark 0.7s ease-out; }
@keyframes rocket-correct {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-10px) scale(1.06); }
  62%  { transform: translateY(2px)  scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes rocket-spark {
  0%   { opacity: 0;  transform: scale(0.4); }
  40%  { opacity: 1;  transform: scale(1.5); }
  100% { opacity: .45; transform: scale(1); }
}

/* ---------- INCORRECT ANSWER · gentle tilt + reassuring recovery (one-shot) ---------- */
.rocket-svg.is-incorrect .rocket-root { animation: rocket-incorrect 0.9s ease-in-out; }
@keyframes rocket-incorrect {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(-7deg); }
  45%  { transform: rotate(5deg); }
  70%  { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}

/* ---------- CELEBRATION · spin + pop + radial particle burst (one-shot) ---------- */
.rocket-svg.is-celebrate .rocket-root { animation: rocket-celebrate 1.15s cubic-bezier(.34,1.4,.6,1); }
.rocket-svg.is-celebrate .rocket-particle { animation: rocket-burst 1.15s ease-out; }
@keyframes rocket-celebrate {
  0%   { transform: rotate(0) scale(1); }
  30%  { transform: rotate(180deg) scale(1.12); }
  62%  { transform: rotate(360deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes rocket-burst {
  0%   { opacity: 0;  transform: translate(0,0) scale(0.4); }
  25%  { opacity: 1;  transform: translate(calc(var(--tx,0px)*.5), calc(var(--ty,0px)*.5)) scale(1.4); }
  100% { opacity: 0;  transform: translate(var(--tx,0px), var(--ty,0px)) scale(0.2); }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .rocket-svg *,
  .rocket-svg.is-thinking .rocket-orb,
  .rocket-svg.is-processing .rocket-orb,
  .rocket-svg.is-listening .rocket-glow,
  .rocket-svg.is-streak .rocket-tail {
    animation: none !important;
  }
  /* keep a single soft breath so Rocket still feels alive */
  .rocket-svg .rocket-glow { animation: rocket-glow-pulse 6s ease-in-out infinite; }
}