@keyframes aparecer {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes latir {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@keyframes subir {
  from { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; }
  12%  { opacity: 0.65; }
  88%  { opacity: 0.45; }
  to   { transform: translateY(-118vh) translateX(4vw) scale(1.15); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .burbuja, .splash__logo, .splash__pista, .vista--entrando, .tarjeta__jugar,
  .hotspot, .hotspot--tocado::after, .hotspot--rebote, .hotspot--flotar, .hotspot--brillo,
  .mision-objetivo, .mision-pista, .medalla, .confeti, .sprite { animation: none !important; }
  /* .medalla parte de opacity: 0 y depende de la animación (forwards) para
     llegar a opacity: 1. Sin la animación se quedaría invisible para
     siempre, así que forzamos la opacidad final aquí. Las medallas
     pendientes ya tienen su propia opacidad (0.35) y quedan fuera. */
  .medalla:not(.medalla--pendiente) { opacity: 1; }
  /* El destello de un hotspot tocado es puro `animation`, así que sin ella el
     toque no daría ninguna respuesta visual: solo sonido. Se sustituye por un
     halo estático. montarHotspots quita la clase a los 700 ms, así que el halo
     también desaparece — es feedback, no una marca permanente. */
  .hotspot--tocado::after { opacity: 1; }
}

@keyframes ken-burns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.2%, -1.8%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .escena__imagen { animation: none !important; }
}

@keyframes destello {
  from { opacity: 0.95; transform: scale(0.55); }
  to   { opacity: 0;    transform: scale(1.5); }
}

@keyframes rebote {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@keyframes flotar {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  30%      { transform: translateX(3%) rotate(2.5deg); }
  70%      { transform: translateX(-3%) rotate(-2.5deg); }
}

@keyframes brillo {
  0%   { filter: brightness(1); }
  45%  { filter: brightness(1.7) saturate(1.4); }
  100% { filter: brightness(1); }
}

@keyframes pulso-mision {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

@keyframes caer-confeti {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(60vh) rotate(720deg); opacity: 0; }
}

@keyframes transformacion {
  0%   { transform: scale(1) rotate(0deg); filter: none; }
  50%  { transform: scale(1.7) rotate(180deg); filter: brightness(2) hue-rotate(90deg); }
  100% { transform: scale(0) rotate(360deg); filter: brightness(3); }
}

@keyframes medalla-entra {
  from { opacity: 0; transform: scale(0.2) rotate(-40deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}