/* ================================================
   COD-YQ Academy — Animations & Keyframes
   ================================================ */

/* ================================================================
   KEYFRAMES
   ================================================================ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%   { box-shadow: 0 4px 20px rgba(247, 148, 29, 0.25), 0 0 0 0 rgba(247, 148, 29, 0.35); }
  70%  { box-shadow: 0 4px 20px rgba(247, 148, 29, 0.25), 0 0 0 14px rgba(247, 148, 29, 0); }
  100% { box-shadow: 0 4px 20px rgba(247, 148, 29, 0.25), 0 0 0 0 rgba(247, 148, 29, 0); }
}

/* ================================================================
   HERO — Page Load Stagger Animations
   ================================================================ */

.hero__eyebrow {
  animation: fadeUp 0.5s ease-out both;
  animation-delay: 0.1s;
}

.hero__title {
  animation: fadeUp 0.5s ease-out both;
  animation-delay: 0.2s;
}

.hero__subtitle {
  animation: fadeUp 0.5s ease-out both;
  animation-delay: 0.3s;
}

.hero__cta {
  animation: fadeUp 0.5s ease-out both;
  animation-delay: 0.4s;
}

/* ================================================================
   SCROLL REVEAL — Intersection Observer targets
   ================================================================ */

/* Single element reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

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

/* Parent with staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal-stagger.visible > *:nth-child(1)  { transition-delay: 0.00s; }
.reveal-stagger.visible > *:nth-child(2)  { transition-delay: 0.10s; }
.reveal-stagger.visible > *:nth-child(3)  { transition-delay: 0.20s; }
.reveal-stagger.visible > *:nth-child(4)  { transition-delay: 0.30s; }
.reveal-stagger.visible > *:nth-child(5)  { transition-delay: 0.40s; }
.reveal-stagger.visible > *:nth-child(6)  { transition-delay: 0.50s; }
.reveal-stagger.visible > *:nth-child(7)  { transition-delay: 0.60s; }
.reveal-stagger.visible > *:nth-child(8)  { transition-delay: 0.70s; }

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
   FLOATING WHATSAPP — Pulse Animation
   ================================================================ */

.whatsapp-float {
  animation: pulse 2.5s infinite;
}

.whatsapp-float:hover {
  animation: none;
}

/* ================================================================
   REDUCED MOTION — Accessibility
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__title,
  .hero__subtitle,
  .hero__cta {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .whatsapp-float {
    animation: none;
  }
}