/* ============================================================
   FlightsFareSolutions — Animation System
   GPU-accelerated: transform + opacity only
   ============================================================ */

/* ============================================================
   1. ANTI-GRAVITY FLOATING EFFECTS
   ============================================================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(15px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(2deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}

.float { animation: float 6s ease-in-out infinite; }
.float--reverse { animation: floatReverse 6s ease-in-out infinite; }
.float--slow { animation: floatSlow 8s ease-in-out infinite; }
.float--delay-1 { animation-delay: 0.5s; }
.float--delay-2 { animation-delay: 1s; }
.float--delay-3 { animation-delay: 1.5s; }
.float--delay-4 { animation-delay: 2s; }

/* ============================================================
   2. FADE & SLIDE REVEALS (Scroll Triggered)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

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

.reveal--left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal--left.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal--right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal--right.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal--scale.reveal--visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for children */
.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.15s; }
.stagger > *:nth-child(4) { transition-delay: 0.2s; }
.stagger > *:nth-child(5) { transition-delay: 0.25s; }
.stagger > *:nth-child(6) { transition-delay: 0.3s; }
.stagger > *:nth-child(7) { transition-delay: 0.35s; }
.stagger > *:nth-child(8) { transition-delay: 0.4s; }

/* ============================================================
   3. HERO LOAD CHOREOGRAPHY
   ============================================================ */
.hero-anim {
  opacity: 0;
  transform: translateY(30px);
}

.hero-anim--loaded {
  animation: heroFadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.hero-anim--delay-1 { animation-delay: 0.1s !important; }
.hero-anim--delay-2 { animation-delay: 0.2s !important; }
.hero-anim--delay-3 { animation-delay: 0.4s !important; }
.hero-anim--delay-4 { animation-delay: 0.6s !important; }
.hero-anim--delay-5 { animation-delay: 0.8s !important; }
.hero-anim--delay-6 { animation-delay: 1.0s !important; }

/* ============================================================
   4. GLOW & PULSE EFFECTS
   ============================================================ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); }
  50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.5); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

/* ============================================================
   5. COUNTER ANIMATION
   ============================================================ */
.counter {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ============================================================
   6. SKELETON LOADING STATES
   ============================================================ */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.skeleton {
  background: linear-gradient(90deg, var(--clr-border) 0%, var(--clr-light-bg) 50%, var(--clr-border) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton--text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton--title {
  height: 2em;
  width: 60%;
  margin-bottom: 0.5em;
}

.skeleton--image {
  height: 200px;
}

/* ============================================================
   7. CARD HOVER ELEVATIONS
   ============================================================ */
@keyframes cardHoverGlow {
  0%, 100% { box-shadow: 0 10px 40px rgba(139, 92, 246, 0.0); }
  50% { box-shadow: 0 10px 40px rgba(139, 92, 246, 0.15); }
}

/* ============================================================
   8. ANIMATED UNDERLINE
   ============================================================ */
.animated-underline {
  position: relative;
  display: inline-block;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--clr-sky);
  border-radius: 1px;
  transition: width var(--transition-base), left var(--transition-base);
}

.animated-underline:hover::after {
  width: 100%;
  left: 0;
}

/* ============================================================
   9. ROTATE ANIMATIONS
   ============================================================ */
@keyframes rotateOrbit {
  0% { transform: rotate(0deg) translateX(180px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(180px) rotate(-360deg); }
}

@keyframes rotateSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================================
   10. FLIGHT ROUTE LINES
   ============================================================ */
@keyframes drawRoute {
  0% { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

.route-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawRoute 3s ease-in-out forwards;
}

/* ============================================================
   11. PARTICLE FLOAT
   ============================================================ */
@keyframes particleFloat {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10vh) scale(1);
    opacity: 0;
  }
}

/* ============================================================
   12. ACCORDION OPEN/CLOSE
   ============================================================ */
@keyframes accordionOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.faq__item.active .faq__answer-inner {
  animation: accordionOpen 0.3s ease forwards;
}

/* ============================================================
   13. MAGNETIC BUTTON EFFECT
   ============================================================ */
.magnetic-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   14. PAGE TRANSITIONS
   ============================================================ */
@keyframes fadeInPage {
  from { opacity: 0; }
  to { opacity: 1; }
}

main {
  animation: fadeInPage 0.5s ease forwards;
}

/* ============================================================
   15. SCROLL INDICATOR
   ============================================================ */
@keyframes scrollDown {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.5; }
  100% { transform: translateY(0); opacity: 1; }
}

.scroll-indicator {
  animation: scrollDown 2s ease-in-out infinite;
}

/* ============================================================
   16. REDUCED MOTION SUPPORT
   ============================================================ */
@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;
  }

  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale {
    opacity: 1;
    transform: none;
  }

  .hero-anim {
    opacity: 1;
    transform: none;
  }

  .float,
  .float--reverse,
  .float--slow {
    animation: none;
  }

  .testimonials__track {
    animation: none;
  }
}