/* ==========================================================================
   ANIMACIONES & MICROINTERACCIONES CINEMÁTICAS GHIBLI 🎨🏔️✨
   ========================================================================== */

/* Nubes Volumétricas en Acuarela */
@keyframes cloudDriftVolumetric {
  0% { transform: translateX(-4%) translateY(0); }
  50% { transform: translateX(4%) translateY(-6px); }
  100% { transform: translateX(-4%) translateY(0); }
}

/* Niebla Flotante entre Valles */
@keyframes valleyMistDrift {
  0% { transform: translateX(-8%) scaleY(1); opacity: 0.25; }
  50% { transform: translateX(8%) scaleY(1.15); opacity: 0.5; }
  100% { transform: translateX(-8%) scaleY(1); opacity: 0.25; }
}

/* Balanceo de Árboles y Flores Alpinas */
@keyframes breezeSwayOrganic {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(1.5deg) skewX(0.5deg); }
  70% { transform: rotate(-1.2deg) skewX(-0.5deg); }
}

/* Ondas de Audio */
@keyframes audioWave {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

/* Resplandor Cálido de Farolillo */
@keyframes lanternPulseGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.6)) drop-shadow(0 0 45px rgba(245, 158, 11, 0.35));
  }
  50% {
    filter: drop-shadow(0 0 35px rgba(251, 191, 36, 0.9)) drop-shadow(0 0 70px rgba(245, 158, 11, 0.55));
  }
}

/* Estela de Huellitas y Polvo Estelar */
@keyframes stardustPaw {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.6) rotate(var(--rot, 0deg));
  }
  50% {
    opacity: 0.9;
    transform: translate(var(--tx, 10px), var(--ty, -25px)) scale(1.15) rotate(var(--rot, 10deg));
    filter: drop-shadow(0 0 10px #fbbf24);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx, 20px), var(--ty, -55px)) scale(0.7) rotate(var(--rot, 20deg));
  }
}

.paw-stardust-node {
  position: fixed;
  pointer-events: none;
  font-size: 1.4rem;
  z-index: 9995;
  animation: stardustPaw 1.4s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes floatSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}