/* animations.css - Entry animations for elements to create a dynamic feel */

/* Fade Up General Class */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUpAnim 0.8s forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

@keyframes fadeUpAnim {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Specific section animations (will run on elements even without JS observer if we prefer, but let's just use CSS keyframes on load) */
.hero-content {
  animation: fadeUpAnim 1s ease-out forwards;
}

.service-card:nth-child(1) { animation: fadeUpAnim 0.6s ease-out 0.2s forwards; opacity: 0; }
.service-card:nth-child(2) { animation: fadeUpAnim 0.6s ease-out 0.4s forwards; opacity: 0; }
.service-card:nth-child(3) { animation: fadeUpAnim 0.6s ease-out 0.6s forwards; opacity: 0; }

.course-card:nth-child(1) { animation: fadeUpAnim 0.6s ease-out 0.2s forwards; opacity: 0; }
.course-card:nth-child(2) { animation: fadeUpAnim 0.6s ease-out 0.3s forwards; opacity: 0; }
.course-card:nth-child(3) { animation: fadeUpAnim 0.6s ease-out 0.4s forwards; opacity: 0; }
.course-card:nth-child(4) { animation: fadeUpAnim 0.6s ease-out 0.5s forwards; opacity: 0; }

/* Pulse animation for play buttons */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(88, 166, 255, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(88, 166, 255, 0); }
}

.play-button-large {
  animation: pulse 2s infinite;
}