/* ============================================================
   ANIMATIONS — Avon Protection Presentation
   ============================================================ */

/* Fade in + rise */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in + scale */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide in from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Counter / number roll-up (used with JS) */
@keyframes countPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Glow pulse for accent elements */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.2);
  }
  50% {
    box-shadow: 0 0 35px rgba(0, 180, 216, 0.5);
  }
}

/* Dot / bullet entrance */
@keyframes dotPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   ANIMATION UTILITY CLASSES
   Apply these to child elements within .slide.active to
   stagger entrance animations via --delay.
   ============================================================ */

.anim-fade-up {
  opacity: 0;
  transform: translateY(40px);
}

.slide.active .anim-fade-up {
  animation: fadeInUp var(--duration-slide) var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}

.anim-fade-scale {
  opacity: 0;
  transform: scale(0.9);
}

.slide.active .anim-fade-scale {
  animation: fadeInScale var(--duration-slide) var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}

.anim-slide-left {
  opacity: 0;
  transform: translateX(-60px);
}

.slide.active .anim-slide-left {
  animation: slideInLeft var(--duration-slide) var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}

.anim-slide-right {
  opacity: 0;
  transform: translateX(60px);
}

.slide.active .anim-slide-right {
  animation: slideInRight var(--duration-slide) var(--ease-out) forwards;
  animation-delay: var(--delay, 0ms);
}