/* ==========================================================================
   AI FOR PARENTS - Animations & Keyframes
   ========================================================================== */

/* Staggered Animations for Elements inside active slide */
.slide.active [data-animate="fade-up"] {
  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide.active [data-animate="fade-in"] {
  animation: fadeIn 0.4s ease forwards;
}

.slide.active [data-animate="scale-in"] {
  animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide.active [data-animate="slide-right"] {
  animation: slideRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger Delays */
.delay-1 { animation-delay: 0.08s !important; opacity: 0; }
.delay-2 { animation-delay: 0.16s !important; opacity: 0; }
.delay-3 { animation-delay: 0.24s !important; opacity: 0; }
.delay-4 { animation-delay: 0.32s !important; opacity: 0; }
.delay-5 { animation-delay: 0.40s !important; opacity: 0; }
.delay-6 { animation-delay: 0.48s !important; opacity: 0; }

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(-24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Pulse & Glow Effects */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(240, 90, 40, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(240, 90, 40, 0);
  }
}

.pulse-primary {
  animation: pulseGlow 2.5s infinite;
}

/* Float subtle animation for illustrations */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.float-animation {
  animation: floatSlow 4s ease-in-out infinite;
}

/* Timer Blinking State when running */
@keyframes timerPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.timer-running .timer-digits {
  color: #FF7A45;
}

.timer-finished .timer-digits {
  animation: timerPulse 0.8s infinite;
  color: #EF4444 !important;
}

/* Ripple effect on click */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.ripple:focus:not(:active)::after {
  animation: rippleAnimation 0.6s ease-out;
}

@keyframes rippleAnimation {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(30, 30);
    opacity: 0;
  }
}