/* Floaters */

@keyframes float {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate3d(12px, -18px, 0) scale(1.04);
    opacity: 0.85;
  }
  100% {
    transform: translate3d(-10px, -4px, 0) scale(0.98);
    opacity: 0.4;
  }
}

/* Paw wiggle */

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  15%      { transform: rotate(-5deg) translateY(-1px); }
  30%      { transform: rotate(4deg) translateY(0); }
  45%      { transform: rotate(-3deg) translateY(-1px); }
  60%      { transform: rotate(2deg) translateY(0); }
}

/* Card shimmer */

@keyframes shimmer {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Sparkle twinkle */

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.9) translateY(0); }
  50%      { opacity: 1; transform: scale(1.1) translateY(-2px); }
}

/* Scroll reveal – extra variants if you want */

.reveal.fade-up {
  transform: translateY(26px);
}

.reveal.fade-up.is-visible {
  transform: translateY(0);
}

.reveal.scale-in {
  transform: scale(0.96);
}

.reveal.scale-in.is-visible {
  transform: scale(1);
}

/* You can mix these classes in JS if you want different feels */