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

/* Floating Stat Cards Animation */
@keyframes floaty {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Modal Open Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal Slide Down */
@keyframes slideDown {
  from {
    transform: translateY(-50px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* ==========================================================================
   FLOATING CARDS ANIMATION BINDINGS
   ========================================================================== */
.stat-card-overlay.card-1 {
  animation: floaty 4s ease-in-out infinite;
}

.stat-card-overlay.card-2 {
  animation: floaty 4.5s ease-in-out infinite;
  animation-delay: 1.2s;
}

.stat-card-overlay.card-3 {
  animation: floaty 5s ease-in-out infinite;
  animation-delay: 2.4s;
}

/* ==========================================================================
   GLOBAL HOVER INTERACTIONS
   ========================================================================== */
/* All buttons, cards, feature boxes, testimonial cards, and program cards must share the exact same hover behavior */
.btn,
.card,
.feature-box,
.program-card,
.journey-card,
.testimonial-card,
.stat-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  will-change: transform, box-shadow;
}

/* Apply hover states on user interactions */
.btn:hover,
.card:hover,
.feature-box:hover,
.program-card:hover,
.journey-card:hover,
.testimonial-card:hover,
.stat-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
}

/* Special adjustments for buttons so they do not look distorted */
.btn:hover {
  filter: brightness(1.05);
}

/* Special adjustments for stats boxes in the dark section to have a subtle shadow */
.stat-box:hover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   SCROLL REVEAL CLASS TRIGGERS
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }
.reveal-delay-7 { transition-delay: 0.7s; }

/* Custom Hover/Active states for Apply Now buttons to override global bouncy translation */
.btn-apply:hover,
.btn-white.btn-apply-trigger:hover {
  transform: translateY(-2px) scale(1.02) !important;
}

.btn-apply:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 6px 20px rgba(227, 165, 57, 0.4) !important;
}

.btn-white.btn-apply-trigger:hover {
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25) !important;
}

.btn-apply:active,
.btn-white.btn-apply-trigger:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Icon slide effect on hover */
.btn-apply:hover i,
.btn-white.btn-apply-trigger:hover i {
  transform: translateX(4px);
}