/* ==========================================================================
   SCROLL-TRIGGERED & HOVER ANIMATIONS - ELEMENTS4KIDS
   ========================================================================== */

/* Fade-In and Slide-Up classes for Intersection Observer */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.6s; }

/* Scale Up Reveal (mostly for large background-like elements or pictures) */
.reveal-zoom {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-zoom.active {
  opacity: 1;
  transform: scale(1);
}

/* Micro-animations and interactions */

/* Soft Pulse for accent markers */
@keyframes softPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(51, 0, 153, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(51, 0, 153, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(51, 0, 153, 0);
  }
}

.animate-pulse-btn {
  animation: softPulse 2s infinite;
}

/* Float Animation for background decorations */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.float-slow {
  animation: float 6s ease-in-out infinite;
}

.float-slow-reverse {
  animation: float 8s ease-in-out infinite;
  animation-direction: reverse;
}

/* Shake effect for logo/icons on rare events */
@keyframes subtleShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  75% { transform: rotate(-1deg); }
}

.hover-shake:hover {
  animation: subtleShake 0.3s ease-in-out;
}