/* 
  Animations & Keyframes
*/

/* General Utils */
.reveal-text, .animate-up, .animate-left, .animate-right {
  opacity: 0;
  will-change: opacity, transform;
}

.animate-up { transform: translateY(40px); }
.animate-left { transform: translateX(-40px); }
.animate-right { transform: translateX(40px); }

/* Animation Classes applied via JS Intersection Observer */
.is-visible {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Stagger Delays */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }

/* For grid stagger elements */
.stagger:nth-child(1) { transition-delay: 0.05s !important; }
.stagger:nth-child(2) { transition-delay: 0.1s !important; }
.stagger:nth-child(3) { transition-delay: 0.15s !important; }
.stagger:nth-child(4) { transition-delay: 0.2s !important; }
.stagger:nth-child(5) { transition-delay: 0.25s !important; }
.stagger:nth-child(6) { transition-delay: 0.3s !important; }

/* Keyframes */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  40% {
    transform: translateY(-20px) translateX(-50%);
  }
  60% {
    transform: translateY(-10px) translateX(-50%);
  }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 180, 0, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(244, 180, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 180, 0, 0); }
}

/* Hover effects enhancement */
.btn, .course-card, .why-box, .social-icons a, .nav-link {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page load sequence classes */
.page-loaded .hero-title {
  animation: slideUpFade 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

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