/* --mx/--my are live custom properties driven by parallax.js (mouse-reactive
   depth layers). Referencing them inside the keyframes — rather than in a
   separate inline transform — lets the idle float and the pointer parallax
   compose smoothly instead of one overriding the other every frame. */
@keyframes sparkle-float {
  0%, 100% { transform: translate(var(--mx,0px), var(--my,0px)) translateY(0) rotate(0deg); opacity: .85; }
  50% { transform: translate(var(--mx,0px), var(--my,0px)) translateY(-14px) rotate(12deg); opacity: 1; }
}
@keyframes blob-float {
  0%, 100% { transform: translate(var(--mx,0px), var(--my,0px)) translateY(0) translateX(0) scale(1); }
  33% { transform: translate(var(--mx,0px), var(--my,0px)) translateY(-10px) translateX(6px) scale(1.04); }
  66% { transform: translate(var(--mx,0px), var(--my,0px)) translateY(6px) translateX(-8px) scale(.97); }
}
@keyframes drip-grow {
  from { transform: scaleY(0); transform-origin: top; }
  to { transform: scaleY(1); transform-origin: top; }
}
@keyframes fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes pop-in {
  0% { opacity: 0; transform: scale(.85); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes drip-sway {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.035); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: var(--shadow-md); }
  50% { box-shadow: 0 22px 46px rgba(53,182,232,.28); }
}
@keyframes gentle-rotate {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}