/* ==========================================================================
   HERO SECTION ANIMATIONS ONLY
   Simplified CSS-Only Animations for Hero Section
   ========================================================================== */

/* ==========================================================================
   ENHANCED SMOOTH SCROLLING
   ========================================================================== */

/* Enhanced smooth scroll behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Account for fixed header */
}

/* Smooth scroll for all anchor links */
a[href^="#"] {
  scroll-behavior: smooth;
}

/* ==========================================================================
   HERO SECTION ANIMATIONS
   ========================================================================== */

/* Animation Variables */
:root {
  --animation-duration: 0.8s;
  --animation-delay: 0.1s;
  --animation-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --animation-distance: 30px;
}

/* Fade in animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(var(--animation-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(calc(var(--animation-distance) * -1));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ==========================================================================
   HERO COMPONENT ANIMATIONS
   ========================================================================== */

/* Header animations */
.header {
  animation: fadeInDown 1s ease-out;
}

/* Hero section animations */
.hero-title {
  animation: fadeInUp 1s ease-out 0.3s both;
}

.hero-subtitle {
  animation: fadeInUp 1s ease-out 0.5s both;
}

.hero-actions {
  animation: fadeInUp 1s ease-out 0.7s both;
}

/* Page load animation */
body {
  animation: fadeIn 0.5s ease-out;
}

/* ==========================================================================
   BASIC HOVER ANIMATIONS (Keep for buttons and cards)
   ========================================================================== */

/* Enhanced hover animations for interactive elements */
.btn,
.course-card,
.featured-card,
.team-member,
.nav-link {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover scale animation */
.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Hover lift animation */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/* Enable hardware acceleration for animated elements */
.hero-title,
.hero-subtitle,
.hero-actions,
.hover-scale,
.hover-lift {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ==========================================================================
   ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero-title,
  .hero-subtitle,
  .hero-actions {
    opacity: 1;
    transform: none;
  }
}