/* ============================================================
   EDULOGIX — ANIMATIONS
   Keyframes and reusable animation utilities
   ============================================================ */

/* Fade up on scroll entrance */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gentle pulse for CTA button */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 119, 34, 0.5); }
  50%       { box-shadow: 0 0 0 10px rgba(232, 119, 34, 0); }
}

/* Hero headline reveal */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Navbar scroll shrink handled in JS, but transition here */
.navbar { transition: box-shadow 0.3s ease, padding 0.3s ease; }
.navbar.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.12); }

/* Animate hero headline */
.hero__headline { animation: slideInLeft 0.7s 0.1s both ease-out; }

/* Animate hero finder bar */
.hero__finder { animation: fadeUp 0.7s 0.35s both ease-out; }

/* Scroll reveal utility — applied by JS */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Staggered delay helpers for grid items */
.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; }

/* CTA button pulse (fallback) */
#hero-get-started-btn {
  animation: pulse 2.5s infinite;
}

/* ============================================================
   IMMIGRATION BUTTON — CONTINUOUS AIRPLANE FLIGHT & TEXT LOOP
   ============================================================ */
.navbar__immigration-btn {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 175px !important;
  height: 42px !important;
  padding: 0 1.25rem !important;
  background: linear-gradient(135deg, #ff6b35 0%, #e8561a 50%, #d03d04 100%) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 18px rgba(232, 86, 34, 0.42), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.navbar__immigration-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(232, 86, 34, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

/* Track across the button */
.nav-plane-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* Continuous Airplane Flying Left to Right */
.nav-plane-icon {
  position: absolute;
  top: 50%;
  left: -28px;
  width: 18px;
  height: 18px;
  color: #ffffff;
  transform: translateY(-50%) rotate(90deg);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95)) drop-shadow(-4px 0 8px rgba(255, 180, 50, 0.8));
  animation: planeFlyCycle 3.8s cubic-bezier(0.42, 0, 0.2, 1) infinite;
}

/* Contrail / Vapor Trail behind plane */
.nav-plane-trail {
  position: absolute;
  top: 50%;
  left: -120px;
  height: 2px;
  width: 90px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.85) 100%);
  border-radius: 2px;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
  animation: planeTrailCycle 3.8s cubic-bezier(0.42, 0, 0.2, 1) infinite;
}

/* Airplane Keyframes */
@keyframes planeFlyCycle {
  0% {
    left: -32px;
    opacity: 0;
    transform: translateY(-50%) rotate(90deg) scale(0.8);
  }
  6% {
    opacity: 1;
    transform: translateY(-50%) rotate(90deg) scale(1);
  }
  38% {
    transform: translateY(-54%) rotate(90deg) scale(1.1);
  }
  58% {
    left: calc(100% + 10px);
    opacity: 1;
    transform: translateY(-50%) rotate(90deg) scale(1);
  }
  64%, 100% {
    left: calc(100% + 35px);
    opacity: 0;
    transform: translateY(-50%) rotate(90deg) scale(0.8);
  }
}

@keyframes planeTrailCycle {
  0% {
    left: -120px;
    opacity: 0;
  }
  6% {
    opacity: 0.9;
  }
  58% {
    left: calc(100% - 75px);
    opacity: 0.85;
  }
  64%, 100% {
    left: calc(100% - 50px);
    opacity: 0;
  }
}

/* Text that arrives / animates in sequence with plane */
.nav-immigration-text {
  position: relative;
  z-index: 2;
  font-family: var(--font-display, 'Satoshi', sans-serif);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  animation: textArriveCycle 3.8s cubic-bezier(0.42, 0, 0.2, 1) infinite;
}

@keyframes textArriveCycle {
  0% {
    opacity: 0.2;
    transform: translateX(-18px) scale(0.96);
    filter: blur(1.5px);
  }
  20% {
    opacity: 0.45;
    transform: translateX(-10px) scale(0.98);
    filter: blur(1px);
  }
  42% {
    opacity: 0.85;
    transform: translateX(-2px) scale(1);
    filter: blur(0.3px);
  }
  52%, 84% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
  }
  94% {
    opacity: 0.7;
    transform: translateX(6px) scale(0.99);
    filter: blur(0.5px);
  }
  100% {
    opacity: 0.2;
    transform: translateX(14px) scale(0.96);
    filter: blur(1.5px);
  }
}