/* ══════════════════════════════════════════
   PARTICLE EFFECTS, WEATHER, DAY/NIGHT
   ══════════════════════════════════════════ */

/* ── Heart particles on click ── */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 27;
  overflow: hidden;
}

.particle {
  position: absolute;
  pointer-events: none;
  animation: particle-rise 1s ease-out forwards;
  font-size: 18px;
  opacity: 0;
}

.particle.heart { color: hsl(350, 80%, 60%); }
.particle.sparkle { color: hsl(45, 100%, 70%); }
.particle.star { color: hsl(45, 90%, 75%); }

@keyframes particle-rise {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(0.5) rotate(0deg);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) translateX(var(--drift, 0px)) scale(1.2) rotate(20deg);
  }
}

/* ── Floating XP numbers ── */
.xp-popup {
  position: absolute;
  pointer-events: none;
  font-weight: 900;
  font-size: 24px;
  color: hsl(45, 100%, 70%);
  text-shadow:
    0 0 12px hsla(45, 100%, 60%, 0.8),
    0 0 24px hsla(45, 100%, 50%, 0.4),
    0 1px 3px hsla(0, 0%, 0%, 0.6);
  animation: xp-float 1.4s ease-out forwards;
  z-index: 27;
  white-space: nowrap;
}

@keyframes xp-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.6);
  }
  20% {
    opacity: 1;
    transform: translateY(-15px) scale(1.3);
  }
  50% {
    opacity: 1;
    transform: translateY(-45px) scale(1.0);
  }
  100% {
    opacity: 0;
    transform: translateY(-90px) scale(0.8);
  }
}

/* ══════════════════════════════════════════
   SCENE ENVIRONMENT
   ══════════════════════════════════════════ */
.scene {
  width: var(--scene-width);
  height: var(--scene-height);
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}

/* ── Sky ── */
.sky {
  position: absolute;
  inset: 0;
  bottom: 35%;
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-bottom) 100%
  );
  transition: background 2s ease;
}

/* ── Sun ── */
.sun {
  position: absolute;
  width: 50px;
  height: 50px;
  background: radial-gradient(
    circle,
    hsl(45, 100%, 92%) 30%,
    hsl(45, 100%, 75%) 60%,
    transparent 70%
  );
  top: 12%;
  right: 15%;
  border-radius: 50%;
  box-shadow: 0 0 40px 10px hsla(45, 100%, 70%, 0.3);
  animation: sun-pulse 5s ease-in-out infinite;
  transition: opacity 1s ease, transform 1s ease;
}

@keyframes sun-pulse {
  0%, 100% { box-shadow: 0 0 40px 10px hsla(45, 100%, 70%, 0.3); }
  50% { box-shadow: 0 0 50px 15px hsla(45, 100%, 70%, 0.4); }
}

/* ── Moon ── */
.moon {
  position: absolute;
  width: 40px;
  height: 40px;
  background: radial-gradient(
    circle at 35% 35%,
    hsl(45, 30%, 92%) 40%,
    hsl(45, 20%, 80%) 60%,
    transparent 70%
  );
  top: 12%;
  right: 15%;
  border-radius: 50%;
  box-shadow: 0 0 30px 8px hsla(220, 50%, 80%, 0.2);
  opacity: 0;
  transition: opacity 1s ease;
}

/* ── Stars ── */
.stars {
  position: absolute;
  inset: 0;
  bottom: 40%;
  opacity: 0;
  transition: opacity 2s ease;
}

.star-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ── Clouds ── */
.cloud {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.85);
  border-radius: 50%;
  width: 70px;
  height: 28px;
  top: 18%;
  animation: cloud-drift 25s linear infinite;
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.cloud::before {
  width: 40px;
  height: 40px;
  top: -20px;
  left: 12px;
}

.cloud::after {
  width: 30px;
  height: 30px;
  top: -14px;
  right: 10px;
}

.cloud:nth-child(2) {
  top: 8%;
  width: 55px;
  height: 22px;
  animation-duration: 32s;
  animation-delay: -8s;
  opacity: 0.6;
}

.cloud:nth-child(3) {
  top: 28%;
  width: 45px;
  height: 18px;
  animation-duration: 20s;
  animation-delay: -15s;
  opacity: 0.4;
}

@keyframes cloud-drift {
  from { transform: translateX(-120px); }
  to { transform: translateX(calc(var(--scene-width) + 120px)); }
}

/* ── Ground ── */
.ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(
    180deg,
    var(--ground-color) 0%,
    var(--ground-dark) 100%
  );
  transition: background 2s ease;
}

/* Grass blades */
.grass {
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 15px;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
}

.grass-blade {
  width: 4px;
  height: 14px;
  background: hsl(120, 40%, 50%);
  border-radius: 80% 80% 0 0;
  transform-origin: bottom center;
  animation: grass-sway 3s ease-in-out infinite;
}

.grass-blade:nth-child(even) {
  animation-delay: -1.5s;
  height: 10px;
  background: hsl(120, 35%, 45%);
}

.grass-blade:nth-child(3n) {
  animation-delay: -0.7s;
  height: 12px;
}

@keyframes grass-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* ══════════════════════════════════════════
   DAY / NIGHT CYCLE
   ══════════════════════════════════════════ */
.scene.night {
  --sky-top: hsl(230, 40%, 12%);
  --sky-bottom: hsl(240, 30%, 20%);
  --ground-color: hsl(120, 20%, 25%);
  --ground-dark: hsl(120, 15%, 15%);
}

.scene.night .sun { opacity: 0; transform: translateY(40px); }
.scene.night .moon { opacity: 1; }
.scene.night .stars { opacity: 1; }
.scene.night .cloud { opacity: 0.15; }

.scene.sunset {
  --sky-top: hsl(25, 80%, 50%);
  --sky-bottom: hsl(45, 90%, 70%);
  --ground-color: hsl(120, 25%, 40%);
  --ground-dark: hsl(120, 20%, 25%);
}

.scene.sunrise {
  --sky-top: hsl(200, 60%, 60%);
  --sky-bottom: hsl(35, 85%, 75%);
}

/* ══════════════════════════════════════════
   WEATHER: RAIN
   ══════════════════════════════════════════ */
.rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

.scene.raining .rain { opacity: 1; }
.scene.raining {
  --sky-top: hsl(210, 20%, 45%);
  --sky-bottom: hsl(210, 15%, 60%);
}

.raindrop {
  position: absolute;
  width: 2px;
  height: 18px;
  background: linear-gradient(
    to bottom,
    transparent,
    hsla(200, 60%, 80%, 0.6)
  );
  border-radius: 0 0 50% 50%;
  animation: rain-fall linear infinite;
}

@keyframes rain-fall {
  0% { transform: translateY(-30px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(calc(var(--scene-height) + 30px)); opacity: 0; }
}

/* ══════════════════════════════════════════
   CRITICAL HIT EFFECTS
   ══════════════════════════════════════════ */
.xp-popup.crit {
  font-size: 32px;
  color: hsl(45, 100%, 55%);
  text-shadow:
    0 0 20px hsla(45, 100%, 60%, 1),
    0 0 40px hsla(45, 100%, 50%, 0.6),
    0 0 60px hsla(30, 100%, 50%, 0.3),
    0 1px 3px hsla(0, 0%, 0%, 0.6);
  animation: xp-float-crit 1.8s ease-out forwards;
}

@keyframes xp-float-crit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.4);
  }
  15% {
    opacity: 1;
    transform: translateY(-10px) scale(1.8);
  }
  40% {
    opacity: 1;
    transform: translateY(-40px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(0.9);
  }
}

.pet-card__burst.flash-crit {
  animation: burst-crit 0.5s ease-out forwards;
}

@keyframes burst-crit {
  0% { opacity: 0; }
  20% { opacity: 0.6; }
  100% { opacity: 0; }
}

/* ══════════════════════════════════════════
   THOUGHT BUBBLE
   ══════════════════════════════════════════ */
.thought-bubble {
  position: absolute;
  /* Pet sits at bottom: 38% with a 120px box; transform-origin defaults to
     center, so its visual top is at 38% + 60px + 60px * scale. We park the
     bubble's bottom 6px above that. */
  bottom: calc(38% + 60px + 60px * var(--pet-scale, 1) + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  transform-origin: bottom center;
  background: hsla(0, 0%, 100%, 0.95);
  color: hsl(230, 20%, 25%);
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  width: max-content;
  max-width: min(260px, calc(var(--scene-width) - 24px));
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.2);
}

.thought-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: hsla(0, 0%, 100%, 0.95);
}

.thought-bubble.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: thought-bob 2s ease-in-out infinite 0.4s;
}

.thought-bubble.actionable {
  background: hsla(45, 100%, 95%, 0.98);
  border: 1.5px solid hsl(45, 100%, 60%);
  box-shadow: 0 2px 12px hsla(45, 100%, 50%, 0.4), 0 0 20px hsla(45, 100%, 50%, 0.15);
  color: hsl(30, 80%, 25%);
}

.thought-bubble.actionable::after {
  border-top-color: hsl(45, 100%, 60%);
}

@keyframes thought-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

/* ══════════════════════════════════════════
   COMBO COUNTER
   ══════════════════════════════════════════ */
.combo-counter {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  text-align: center;
  min-height: 22px;
  font-weight: 900;
  font-size: 16px;
  color: hsl(30, 100%, 60%);
  text-shadow:
    0 0 10px hsla(30, 100%, 50%, 0.5),
    0 0 20px hsla(30, 100%, 50%, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 27;
}

.combo-counter.active {
  opacity: 1;
}

.combo-counter.hot {
  color: hsl(0, 100%, 60%);
  text-shadow:
    0 0 10px hsla(0, 100%, 50%, 0.6),
    0 0 20px hsla(0, 100%, 50%, 0.3);
  font-size: 18px;
}

.combo-counter.fire {
  color: hsl(45, 100%, 55%);
  text-shadow:
    0 0 12px hsla(45, 100%, 50%, 0.8),
    0 0 24px hsla(30, 100%, 50%, 0.4);
  font-size: 20px;
}

.combo-counter.bump {
  animation: combo-bump 0.12s ease-out;
}

@keyframes combo-bump {
  0% { transform: translateX(-50%) scale(1.4); }
  100% { transform: translateX(-50%) scale(1); }
}

/* ══════════════════════════════════════════
   GOLDEN STAR (Lucky Event)
   ══════════════════════════════════════════ */
.golden-star {
  position: absolute;
  z-index: 15;
  cursor: pointer;
  pointer-events: auto;
  font-size: 36px;
  filter:
    drop-shadow(0 0 12px hsla(45, 100%, 60%, 0.9))
    drop-shadow(0 0 24px hsla(45, 100%, 50%, 0.5));
  animation: golden-pulse 1s ease-in-out infinite, golden-float 3s ease-in-out infinite;
  transition: transform 0.15s ease;
}

.golden-star:hover {
  transform: scale(1.3);
}

.golden-star:active {
  transform: scale(0.9);
}

.golden-star__icon {
  display: block;
  animation: golden-spin 4s linear infinite;
}

@keyframes golden-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 12px hsla(45, 100%, 60%, 0.9))
      drop-shadow(0 0 24px hsla(45, 100%, 50%, 0.5));
  }
  50% {
    filter:
      drop-shadow(0 0 20px hsla(45, 100%, 60%, 1))
      drop-shadow(0 0 40px hsla(45, 100%, 50%, 0.7));
  }
}

@keyframes golden-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -8px; }
}

@keyframes golden-spin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* Golden star fade-in */
.golden-star.spawning {
  animation: golden-spawn 0.5s ease-out forwards, golden-pulse 1s ease-in-out infinite 0.5s, golden-float 3s ease-in-out infinite 0.5s;
}

@keyframes golden-spawn {
  0% { opacity: 0; transform: scale(0) rotate(-180deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Golden star collected burst */
.golden-star.collected {
  animation: golden-burst 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes golden-burst {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.8); }
  100% { opacity: 0; transform: scale(2.5); }
}

/* ══════════════════════════════════════════
   FRENZY OVERLAY
   ══════════════════════════════════════════ */
.frenzy-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.frenzy-overlay.active {
  opacity: 1;
  border: 3px solid hsla(45, 100%, 60%, 0.6);
  border-radius: 0;
  box-shadow:
    inset 0 0 30px hsla(45, 100%, 50%, 0.15),
    inset 0 0 60px hsla(45, 100%, 50%, 0.08);
  animation: frenzy-border 0.8s ease-in-out infinite;
}

.frenzy-overlay .frenzy-label {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: hsla(45, 100%, 15%, 0.9);
  color: hsl(45, 100%, 70%);
  padding: 4px 16px;
  border-radius: 20px;
  border: 1px solid hsl(45, 100%, 50%);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 0 8px hsla(45, 100%, 50%, 0.5);
}

@keyframes frenzy-border {
  0%, 100% { border-color: hsla(45, 100%, 60%, 0.4); }
  50% { border-color: hsla(45, 100%, 60%, 0.8); }
}

/* ══════════════════════════════════════════
   EVENT FORESHADOW — Scene Vignette
   ══════════════════════════════════════════ */
.pet-card__scene.event-foreshadow {
  animation: foreshadow-vignette 1.5s ease-in-out;
}

.pet-card__scene.event-foreshadow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  border-radius: inherit;
  animation: foreshadow-glow 1.5s ease-in-out forwards;
}

@keyframes foreshadow-vignette {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(0.85); }
  100% { filter: brightness(1); }
}

@keyframes foreshadow-glow {
  0%   { box-shadow: inset 0 0 0 0 transparent; opacity: 0; }
  40%  { box-shadow: inset 0 0 40px 10px hsla(0, 0%, 0%, 0.3); opacity: 1; }
  100% { box-shadow: inset 0 0 0 0 transparent; opacity: 0; }
}

/* Category-specific foreshadow tints */
.pet-card__scene.foreshadow-forest::after  { box-shadow: inset 0 0 40px 10px hsla(120, 50%, 30%, 0.35); }
.pet-card__scene.foreshadow-spooky::after  { box-shadow: inset 0 0 40px 10px hsla(270, 50%, 20%, 0.4); }
.pet-card__scene.foreshadow-ocean::after   { box-shadow: inset 0 0 40px 10px hsla(200, 60%, 30%, 0.35); }
.pet-card__scene.foreshadow-sky::after     { box-shadow: inset 0 0 40px 10px hsla(220, 50%, 40%, 0.3); }
.pet-card__scene.foreshadow-food::after    { box-shadow: inset 0 0 40px 10px hsla(30, 70%, 35%, 0.3); }
.pet-card__scene.foreshadow-adventure::after { box-shadow: inset 0 0 40px 10px hsla(350, 60%, 30%, 0.35); }
.pet-card__scene.foreshadow-rare::after    { box-shadow: inset 0 0 40px 10px hsla(45, 100%, 40%, 0.4); }

/* ══════════════════════════════════════════
   EVENT VISITORS — Base + 12 Animation Types
   ══════════════════════════════════════════ */
.event-visitor {
  position: absolute;
  font-size: 42px;
  /* Above the pet (z-index: 26) so visitors appear in front of the vicherl. */
  z-index: 27;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px hsla(0, 0%, 0%, 0.4));
  opacity: 0;
}

.event-visitor.visitor-fade {
  transition: opacity 0.5s ease-out;
  opacity: 0 !important;
}

/* ── Type 1: Walk — approach from left with hops ── */
.anim-walk {
  animation: anim-walk 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes anim-walk {
  0%   { left: -12%; bottom: 36%; opacity: 0; transform: scaleX(-1); }
  12%  { opacity: 1; }
  45%  { left: 38%; bottom: 36%; }
  55%  { left: 42%; bottom: 44%; transform: scaleX(-1) scale(1.1); }
  65%  { left: 44%; bottom: 36%; transform: scaleX(-1) scale(1); }
  100% { left: 44%; bottom: 38%; opacity: 1; transform: scaleX(-1); }
}

/* ── Type 2: Haunt — ghostly flicker materialization ── */
.anim-haunt {
  animation: anim-haunt 2.2s ease-out forwards;
}
@keyframes anim-haunt {
  0%   { left: 42%; bottom: 50%; opacity: 0; transform: scale(0.2) rotate(-20deg); }
  25%  { opacity: 0.7; transform: scale(1.15) rotate(5deg); }
  40%  { opacity: 0.5; transform: scale(0.95) rotate(-3deg); }
  55%  { opacity: 0.9; transform: scale(1.05) rotate(2deg); }
  75%  { opacity: 0.6; transform: scale(1) rotate(-1deg); }
  100% { left: 42%; bottom: 45%; opacity: 0.85; transform: scale(1) rotate(0deg); }
}

/* ── Type 3: Swim — undulating wave from right ── */
.anim-swim {
  animation: anim-swim 2.2s ease-in-out forwards;
}
@keyframes anim-swim {
  0%   { right: -12%; bottom: 30%; left: auto; opacity: 0; }
  15%  { opacity: 1; }
  25%  { bottom: 36%; }
  40%  { right: 40%; bottom: 30%; }
  55%  { bottom: 38%; }
  70%  { right: 38%; bottom: 32%; }
  85%  { bottom: 36%; }
  100% { right: 38%; bottom: 34%; opacity: 1; left: auto; }
}

/* ── Type 4: Fall — drift down from top with rotation ── */
.anim-fall {
  animation: anim-fall 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  left: var(--spawn-x, 42%);
}
@keyframes anim-fall {
  0%   { top: -12%; opacity: 0; transform: rotate(-30deg) scale(0.6); }
  20%  { opacity: 1; transform: rotate(-15deg) scale(0.9); }
  50%  { top: 22%; transform: rotate(5deg) scale(1.05); }
  70%  { top: 18%; transform: rotate(-3deg) scale(1); }
  85%  { top: 22%; transform: rotate(1deg); }
  100% { top: 20%; opacity: 1; transform: rotate(0deg) scale(1); }
}

/* ── Type 5: Streak — fast diagonal across scene with trail ── */
.anim-streak {
  animation: anim-streak 1.5s linear forwards;
}
@keyframes anim-streak {
  0%   { left: -10%; top: 5%; opacity: 0; transform: rotate(-25deg) scale(0.7); }
  8%   { opacity: 1; }
  40%  { left: 35%; top: 30%; transform: rotate(-25deg) scale(1.2);
         filter: drop-shadow(0 0 15px hsla(45, 100%, 60%, 0.8)); }
  70%  { left: 65%; top: 50%; opacity: 1; transform: rotate(-25deg) scale(1.1);
         filter: drop-shadow(0 0 10px hsla(45, 100%, 60%, 0.5)); }
  100% { left: 110%; top: 70%; opacity: 0; transform: rotate(-25deg) scale(0.8);
         filter: drop-shadow(0 0 0 transparent); }
}

.anim-streak::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 3px;
  background: linear-gradient(to left, hsla(45, 100%, 70%, 0.8), transparent);
  top: 50%;
  right: 80%;
  transform: translateY(-50%);
  filter: blur(2px);
  border-radius: 2px;
}

/* ── Type 6: Dance — rhythmic bounce near pet ── */
.anim-dance {
  animation: anim-dance 2.8s ease-in-out forwards;
}
@keyframes anim-dance {
  0%   { left: 30%; bottom: 36%; opacity: 0; transform: scale(0.5); }
  8%   { opacity: 1; transform: scale(1); }
  /* Beat 1 */
  15%  { bottom: 48%; transform: rotate(-15deg) scaleX(1); }
  22%  { bottom: 36%; transform: rotate(0deg) scaleX(-1); }
  /* Beat 2 */
  30%  { bottom: 48%; transform: rotate(15deg) scaleX(-1); }
  37%  { bottom: 36%; transform: rotate(0deg) scaleX(1); }
  /* Beat 3 */
  45%  { bottom: 48%; transform: rotate(-15deg) scaleX(1); }
  52%  { bottom: 36%; transform: rotate(0deg) scaleX(-1); }
  /* Beat 4 */
  60%  { bottom: 48%; transform: rotate(15deg) scaleX(-1); }
  67%  { bottom: 36%; transform: rotate(0deg) scaleX(1); }
  /* Settle */
  80%  { bottom: 40%; transform: rotate(-5deg); }
  100% { left: 30%; bottom: 38%; opacity: 1; transform: rotate(0deg) scale(1); }
}

/* ── Type 7: Parade — steady march left to right with hops ── */
.anim-parade {
  animation: anim-parade 3.5s linear forwards;
}
@keyframes anim-parade {
  0%   { left: -15%; bottom: 36%; opacity: 0; transform: scaleX(-1); }
  5%   { opacity: 1; }
  20%  { left: 15%; bottom: 42%; transform: scaleX(-1) scale(1.05); }
  30%  { left: 30%; bottom: 36%; transform: scaleX(-1) scale(1); }
  45%  { left: 50%; bottom: 42%; transform: scaleX(-1) scale(1.05); }
  55%  { left: 60%; bottom: 36%; transform: scaleX(-1) scale(1); }
  70%  { left: 75%; bottom: 42%; transform: scaleX(-1) scale(1.05); }
  80%  { left: 85%; bottom: 36%; transform: scaleX(-1) scale(1); }
  95%  { opacity: 1; }
  100% { left: 115%; bottom: 36%; opacity: 0; transform: scaleX(-1); }
}

/* ── Type 8: Flutter — zigzag erratic path ── */
.anim-flutter {
  animation: anim-flutter 2.8s ease-in-out forwards;
}
@keyframes anim-flutter {
  0%   { right: -10%; top: 15%; left: auto; opacity: 0; transform: scale(0.6) rotate(-10deg); }
  10%  { opacity: 1; }
  20%  { right: 20%; top: 25%; transform: scale(0.9) rotate(10deg); }
  35%  { right: 45%; top: 12%; transform: scale(1) rotate(-8deg); }
  50%  { right: 30%; top: 30%; transform: scale(1.05) rotate(6deg); }
  65%  { right: 50%; top: 18%; transform: scale(1) rotate(-5deg); }
  80%  { right: 40%; top: 28%; transform: scale(1.05) rotate(3deg); }
  100% { right: 38%; top: 25%; left: auto; opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Type 9: Rise — emerge from below ground ── */
.anim-rise {
  animation: anim-rise 2.0s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes anim-rise {
  0%   { left: 42%; bottom: -10%; opacity: 0; transform: scale(0.7); }
  15%  { opacity: 1; }
  30%  { bottom: 28%; transform: scale(1.05) translateX(-4px); }
  40%  { transform: scale(1) translateX(4px); }
  55%  { bottom: 38%; transform: scale(1.08) translateX(-2px); }
  70%  { transform: scale(1) translateX(2px); }
  85%  { bottom: 40%; transform: scale(1.02); }
  100% { left: 42%; bottom: 38%; opacity: 1; transform: scale(1) translateX(0); }
}

/* ── Type 10: Orbit — elliptical path circling the pet ── */
.anim-orbit {
  animation: anim-orbit 2.5s linear forwards;
}
@keyframes anim-orbit {
  0%   { left: 50%; bottom: 55%; opacity: 0; transform: scale(0.5); }
  8%   { opacity: 1; }
  /* Loop 1 */
  16%  { left: 65%; bottom: 45%; transform: scale(0.9); }
  25%  { left: 50%; bottom: 35%; transform: scale(0.7); }
  33%  { left: 35%; bottom: 45%; transform: scale(0.9); }
  41%  { left: 50%; bottom: 55%; transform: scale(1.1); }
  /* Loop 1.5 */
  50%  { left: 65%; bottom: 45%; transform: scale(0.9); }
  58%  { left: 50%; bottom: 35%; transform: scale(0.7); }
  66%  { left: 35%; bottom: 45%; transform: scale(0.9); }
  75%  { left: 50%; bottom: 55%; transform: scale(1.1); }
  /* Settle */
  88%  { left: 55%; bottom: 48%; transform: scale(1); }
  100% { left: 50%; bottom: 48%; opacity: 1; transform: scale(1); }
}

/* ── Type 11: Sneak — slow creep from right with pauses ── */
.anim-sneak {
  animation: anim-sneak 2.8s ease-in-out forwards;
}
@keyframes anim-sneak {
  0%   { right: -10%; bottom: 36%; left: auto; opacity: 0; transform: scaleX(1) scale(0.8); }
  10%  { opacity: 1; right: 5%; transform: scale(0.85); }
  /* Pause 1 — freeze */
  20%  { right: 15%; transform: scale(0.9); }
  30%  { right: 15%; transform: scale(0.85); }
  /* Move again */
  45%  { right: 30%; transform: scale(0.95); }
  /* Pause 2 — freeze */
  55%  { right: 32%; transform: scale(0.9); }
  65%  { right: 32%; transform: scale(0.85); }
  /* Final approach */
  80%  { right: 38%; transform: scale(1.05); }
  90%  { transform: scale(0.98); }
  100% { right: 36%; bottom: 36%; left: auto; opacity: 1; transform: scale(1); }
}

/* ── Type 12: Burst — explosive sparkle pop-in ── */
.anim-burst {
  animation: anim-burst 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes anim-burst {
  0%   { left: 42%; bottom: 42%; opacity: 0; transform: scale(0) rotate(-180deg);
         filter: drop-shadow(0 0 20px hsla(45, 100%, 60%, 1)); }
  30%  { opacity: 1; transform: scale(1.6) rotate(20deg);
         filter: drop-shadow(0 0 30px hsla(45, 100%, 60%, 1)); }
  50%  { transform: scale(0.85) rotate(-10deg);
         filter: drop-shadow(0 0 15px hsla(45, 100%, 60%, 0.6)); }
  70%  { transform: scale(1.1) rotate(5deg); }
  85%  { transform: scale(0.95) rotate(-2deg); }
  100% { left: 42%; bottom: 42%; opacity: 1; transform: scale(1) rotate(0deg);
         filter: drop-shadow(0 2px 8px hsla(0, 0%, 0%, 0.4)); }
}

/* ══════════════════════════════════════════
   PER-EVENT ANIMATION OVERRIDES
   ══════════════════════════════════════════ */

/* Shooting star / comet — brighter, longer trail */
.event-shooting_star.anim-streak::after,
.event-comet_ride.anim-streak::after {
  width: 80px;
  height: 4px;
  background: linear-gradient(to left, hsla(45, 100%, 80%, 1), hsla(30, 100%, 60%, 0.5), transparent);
  filter: blur(3px);
}

/* Phoenix feather — orange/red trail */
.event-phoenix_feather.anim-streak::after {
  background: linear-gradient(to left, hsla(15, 100%, 60%, 0.9), hsla(30, 100%, 50%, 0.4), transparent);
}

/* Rainbow slide — colorful trail */
.event-rainbow_slide.anim-streak::after {
  width: 70px;
  height: 5px;
  background: linear-gradient(to left, hsl(0, 80%, 60%), hsl(60, 80%, 60%), hsl(120, 80%, 60%), hsl(240, 80%, 60%), transparent);
  filter: blur(2px);
}

/* Elephant parade — larger, heavier feel */
.event-elephant_parade.anim-parade {
  font-size: 52px;
}

/* Skeleton dance — spooky filter */
.event-skeleton_dance.anim-dance {
  filter: drop-shadow(0 2px 8px hsla(270, 50%, 30%, 0.6));
}

/* Candy rain — random horizontal positioning via --spawn-x */
.event-candy_rain.anim-fall {
  left: var(--spawn-x, 40%);
}

/* Whale ride — larger scale */
.event-whale_ride.anim-swim {
  font-size: 52px;
}

/* Beehive bees — smaller, faster */
.event-beehive.anim-orbit {
  font-size: 28px;
}

/* ══════════════════════════════════════════
   EVOLUTION FLASH
   ══════════════════════════════════════════ */
.evolution-flash {
  position: fixed;
  inset: 0;
  background: white;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
}

.evolution-flash.active {
  animation: evo-flash 2.5s ease-out forwards;
}

@keyframes evo-flash {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 0; }
}