/* WordQuest VFX — CSS animations for the polish sweep (build 50). */

/* Sparkle particles — 12 spawned per burst, animated outward + fade. */
.wq-sparkle {
  position: fixed;
  pointer-events: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #fff6d8 0%, #e8a838 50%, transparent 70%);
  box-shadow: 0 0 8px rgba(232, 168, 56, 0.9);
  z-index: 9999;
  opacity: 0;
  animation: wq-sparkle-burst 800ms ease-out forwards;
}
@keyframes wq-sparkle-burst {
  0%   { opacity: 0; transform: translate(0,0) scale(0.3); }
  20%  { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
  60%  { opacity: 1; transform: translate(calc(var(--dx) * 1.6), calc(var(--dy) * 1.6)) scale(0.9); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 2.2), calc(var(--dy) * 2.2)) scale(0.4); }
}

/* Gold trail dot (letter-tap) — drifts upward, fades. */
.wq-gold-trail {
  position: fixed;
  pointer-events: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffce5c 0%, transparent 70%);
  box-shadow: 0 0 6px rgba(232, 168, 56, 0.7);
  z-index: 9999;
  opacity: 0;
  animation: wq-gold-trail-up 700ms ease-out forwards;
}
@keyframes wq-gold-trail-up {
  0%   { opacity: 0; transform: translate(0,0) scale(0.5); }
  20%  { opacity: 0.9; transform: translate(var(--dx), -20px) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.3), -90px) scale(0.4); }
}

/* Confetti pieces — drift downward with sway. */
.wq-confetti {
  position: fixed;
  pointer-events: none;
  width: 8px; height: 12px;
  z-index: 9999;
  top: -20px;
  animation: wq-confetti-fall var(--dur, 2.2s) linear forwards;
  border-radius: 1px;
}
@keyframes wq-confetti-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--sway, 60px), 110vh) rotate(var(--rot, 720deg)); opacity: 0.8; }
}

/* Crown bounce — quest pass overlay. Spring entry then float-twinkle. */
.wq-crown {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%) translateY(-200px) scale(0.4);
  font-size: 88px;
  z-index: 10000;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(232, 168, 56, 0.8));
  animation: wq-crown-bounce 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes wq-crown-bounce {
  0%   { transform: translateX(-50%) translateY(-200px) scale(0.4); opacity: 0; }
  40%  { transform: translateX(-50%) translateY(0) scale(1.15); opacity: 1; }
  55%  { transform: translateX(-50%) translateY(-20px) scale(1.0); }
  70%  { transform: translateX(-50%) translateY(0) scale(1.08); }
  100% { transform: translateX(-50%) translateY(0) scale(1.0); opacity: 1; }
}

/* Active step-indicator pulse. */
.step-dot.active {
  animation: wq-step-pulse 1.6s ease-in-out infinite;
}
@keyframes wq-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 168, 56, 0.7); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(232, 168, 56, 0); transform: scale(1.18); }
}

/* Mascot spring-in animation. Used by triggerMascot. */
.wq-mascot-spring {
  animation: wq-mascot-spring-in 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes wq-mascot-spring-in {
  0%   { transform: translateY(40vh) scale(0.6); opacity: 0; }
  60%  { transform: translateY(-8px) scale(1.06); opacity: 1; }
  80%  { transform: translateY(2px) scale(0.98); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Story-screen subtle slow zoom for "living" feel. Disabled on
   prefers-reduced-motion via the @media query below. */
@media (prefers-reduced-motion: no-preference) {
  #s-story .scene-bg, #s-story .story-illo-bg {
    animation: wq-story-breathe 12s ease-in-out infinite alternate;
    transform-origin: center 60%;
  }
}
@keyframes wq-story-breathe {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.035); }
}

/* Camera-shake (quest-fail cinematic + thunder moments). */
.wq-shake { animation: wq-shake-kf 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes wq-shake-kf {
  10%, 90% { transform: translate(-2px, 0); }
  20%, 80% { transform: translate(3px, 0); }
  30%, 50%, 70% { transform: translate(-5px, 1px); }
  40%, 60% { transform: translate(5px, -1px); }
}

/* Sepia tint for consequence/fail moments. */
.wq-sepia { animation: wq-sepia-pulse 1.2s ease-in-out both; }
@keyframes wq-sepia-pulse {
  0%, 100% { filter: none; }
  50%      { filter: sepia(0.6) contrast(0.95); }
}

/* Full-screen lightning flash (storm scenes). */
.wq-flash {
  position: fixed; inset: 0;
  background: white;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  animation: wq-flash-kf 600ms ease-out forwards;
}
@keyframes wq-flash-kf {
  0%   { opacity: 0; }
  6%   { opacity: 0.85; }
  10%  { opacity: 0.2; }
  20%  { opacity: 0.75; }
  100% { opacity: 0; }
}

/* Scroll unfurl — equipment-card reveal moment. */
.wq-scroll-unfurl { animation: wq-scroll-unfurl-kf 600ms cubic-bezier(0.34, 1.20, 0.64, 1) both; transform-origin: top center; }
@keyframes wq-scroll-unfurl-kf {
  0%   { transform: scaleY(0.05) translateY(-20px); opacity: 0; }
  60%  { transform: scaleY(1.06) translateY(0); opacity: 1; }
  100% { transform: scaleY(1.0) translateY(0); opacity: 1; }
}

/* Mascot idle blink (Phase 3 — purely cosmetic).
   Applied on the .wq-mascot-face span if present. */
.wq-mascot-eye { display: inline-block; animation: wq-mascot-blink 4.2s ease-in-out infinite; }
@keyframes wq-mascot-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(0.1); }
}

/* ============================================================
   BUILD 52 — Phase 5/6 polish layer
   ============================================================ */

/* ── Cat-character mascot ──────────────────────────────────── */
/* The cat lives inline next to the speech bubble (positioned by #mascot-img
   in index.html). We just add a slide-in pop + an idle bobble.            */
.wq-cat-char {
  animation: wq-cat-slide-in 540ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform-origin: bottom right;
}
.wq-mascot-overlay.show .wq-cat-char {
  animation: wq-cat-slide-in 540ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
             wq-cat-bobble 2.4s ease-in-out 540ms infinite;
}
@keyframes wq-cat-slide-in {
  0%   { transform: translateX(40%) rotate(-8deg) scale(0.85); opacity: 0; }
  60%  { transform: translateX(-4%) rotate(2deg) scale(1.04); opacity: 1; }
  80%  { transform: translateX(0) rotate(-1deg) scale(0.98); opacity: 1; }
  100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
}
@keyframes wq-cat-bobble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(0.6deg); }
}

/* ── Location particle floats (forest leaves / snow / embers / wisps) ── */
.wq-particle {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  animation: wq-particle-drift var(--dur, 8s) linear forwards;
  will-change: transform, opacity;
}
@keyframes wq-particle-drift {
  0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg); }
  15%  { opacity: 0.55; }
  85%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(110vh) translateX(var(--sway, 60px)) rotate(var(--spin, 220deg)); }
}
/* Particle types */
.wq-particle.leaf  { background: linear-gradient(140deg, #d8a23e, #6e5520); border-radius: 60% 0 60% 0; width:14px; height:8px; }
.wq-particle.snow  { background: radial-gradient(circle, #fff 0%, #cfe2f0 50%, transparent 75%); box-shadow: 0 0 4px rgba(255,255,255,0.8); }
.wq-particle.ember { background: radial-gradient(circle, #ffce5c 0%, #d34020 60%, transparent 80%); box-shadow: 0 0 8px rgba(255,160,40,0.7); }
.wq-particle.wisp  { background: radial-gradient(circle, rgba(180,220,180,0.9) 0%, rgba(120,180,140,0.3) 60%, transparent 90%); box-shadow: 0 0 6px rgba(140,210,170,0.6); }
.wq-particle.spray { background: radial-gradient(circle, #d4e8f4 0%, #6a99b8 60%, transparent 80%); }
.wq-particle.smoke { background: radial-gradient(circle, rgba(200,200,200,0.65) 0%, transparent 70%); width:18px; height:18px; }
.wq-particle.ash   { background: radial-gradient(circle, rgba(160,80,60,0.65) 0%, transparent 70%); width:6px; height:6px; }

/* ── Streak flame combo ────────────────────────────────────── */
.wq-streak {
  position: fixed;
  bottom: 90px; right: 18px;
  z-index: 9998;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-display, system-ui);
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  animation: wq-streak-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.wq-streak .flame { font-size: 56px; line-height: 1; filter: drop-shadow(0 0 10px rgba(255,140,40,0.7)); animation: wq-streak-flicker 0.4s ease-in-out infinite alternate; }
.wq-streak .count { font-size: 28px; font-weight: 900; color: #fff; -webkit-text-stroke: 1px #c33; margin-top: -8px; }
.wq-streak.tier-2 .flame { font-size: 72px; filter: drop-shadow(0 0 18px rgba(255,90,30,0.85)); }
.wq-streak.tier-3 .flame { font-size: 96px; filter: drop-shadow(0 0 24px rgba(255,40,30,1)); animation-duration: 0.25s; }
@keyframes wq-streak-in {
  0%   { transform: translateY(40px) scale(0.5); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes wq-streak-flicker {
  0%   { transform: scale(1) rotate(-2deg); }
  100% { transform: scale(1.08) rotate(2deg); }
}
.wq-streak.fading { animation: wq-streak-out 380ms ease-out forwards; }
@keyframes wq-streak-out { to { transform: translateY(-30px) scale(0.7); opacity: 0; } }

/* ── Score "+1" float-up ───────────────────────────────────── */
.wq-score-pop {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-weight: 900;
  font-size: 28px;
  color: #ffce5c;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9), 0 0 14px rgba(255,200,80,0.7);
  animation: wq-score-float 900ms ease-out forwards;
}
@keyframes wq-score-float {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  20%  { transform: translateY(-6px) scale(1.2); opacity: 1; }
  100% { transform: translateY(-60px) scale(0.9); opacity: 0; }
}

/* ── Tap-response squish on buttons ───────────────────────── */
.btn, .choice-opt, .word-card, .tile, .sort-bucket, .sort-word, .peek-btn, .equip-card {
  transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn:active, .choice-opt:active, .word-card:active, .tile:active, .sort-bucket:active, .sort-word:active, .peek-btn:active, .equip-card:active {
  transform: scale(0.94);
  transition: transform 60ms ease-out;
}

/* ── Quest-start banner swoop ─────────────────────────────── */
.wq-quest-banner {
  position: fixed;
  top: 68px;
  left: -110%;
  right: auto;
  max-width: min(62vw, 340px);
  background: linear-gradient(135deg, #7a3a1a 0%, #a85020 50%, #7a3a1a 100%);
  border: 2px solid #e8a838;
  border-left: none;
  border-radius: 0 14px 14px 0;
  color: #fff6d8;
  padding: 12px 18px 12px 14px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 17px;
  font-weight: 800;
  text-align: left;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  letter-spacing: 0.04em;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  /* Build 59 — Michael 14-Jul: full-width sweep was hiding the
     instructions. Now a compact card docked top-left; slides in,
     holds 6s so it stays readable, slides back out left. */
  animation: wq-banner-sweep 7s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}
.wq-quest-banner .subtitle { display: block; font-size: 12.5px; font-weight: 400; opacity: 0.85; margin-top: 4px; letter-spacing: 0.06em; }
@keyframes wq-banner-sweep {
  0%   { left: -110%; opacity: 0; }
  7%   { left: 0; opacity: 1; }
  93%  { left: 0; opacity: 1; }
  100% { left: -110%; opacity: 0; }
}

/* ── Part-transition cinematic — bigger banner ──────────── */
.wq-part-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(40,20,10,0.92) 0%, rgba(10,5,2,0.98) 100%);
  z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  color: #fff6d8;
  text-align: center;
  font-family: var(--font-display, Georgia, serif);
  animation: wq-part-overlay 4.2s ease-in-out forwards;
}
.wq-part-overlay .part-label { font-size: 18px; letter-spacing: 0.4em; color: #e8a838; opacity: 0; animation: wq-part-fade 4.2s ease-in-out forwards; }
.wq-part-overlay .part-title { font-size: 44px; font-weight: 900; margin-top: 12px; opacity: 0; animation: wq-part-fade 4.2s ease-in-out 0.3s forwards; text-shadow: 0 4px 14px rgba(232,168,56,0.5); }
.wq-part-overlay .part-flourish { font-size: 28px; color: #e8a838; margin-top: 18px; opacity: 0; animation: wq-part-fade 4.2s ease-in-out 0.6s forwards; }
@keyframes wq-part-overlay {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes wq-part-fade {
  0%   { opacity: 0; transform: translateY(20px); }
  20%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}