/* ================================================================
   FutureHorizons – Navigation Animations & Page Transitions
   ================================================================ */

/* ── SMOOTH SCROLL ── */
html { scroll-behavior: smooth; }

/* ── PAGE ENTER ── */
@keyframes fh-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
body {
  animation: fh-enter 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ── PAGE EXIT + PROGRESS BAR ── */
@keyframes fh-leave {
  to { opacity: 0; }
}
@keyframes fh-progress {
  from { width: 0; }
  to   { width: 100%; }
}
html.is-leaving body {
  animation: fh-leave 0.26s ease-in forwards;
  pointer-events: none;
}
html.is-leaving::before {
  content: '';
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue, #1B6FB5) 0%, var(--orange, #F5A623) 60%, var(--blue, #1B6FB5) 100%);
  animation: fh-progress 0.32s ease-out forwards;
  z-index: 9999;
}

/* ── HERO STAGGER ENTRANCE ── */
@keyframes fh-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge   { animation: fh-up 0.42s 0.04s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero h1      { animation: fh-up 0.42s 0.14s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero p       { animation: fh-up 0.42s 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero-actions { animation: fh-up 0.42s 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* ── NAV UNDERLINE SLIDE ── */
.nav-links li a:not(.nav-cta) {
  position: relative;
  padding-bottom: 4px;
}
.nav-links li a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--orange, #F5A623);
  border-radius: 1px;
  transition: left 0.22s ease, right 0.22s ease;
}
.nav-links li a:not(.nav-cta):hover::after,
.nav-links li a:not(.nav-cta).active::after { left: 0; right: 0; }
/* Replace static border-bottom with animated ::after */
.nav-links a.active { border-bottom: none; padding-bottom: 4px; }

/* ── ICON FLOAT ON CARD HOVER ── */
@keyframes fh-float {
  0%,100% { transform: translateY(0) scale(1); }
  40%     { transform: translateY(-8px) scale(1.15); }
  70%     { transform: translateY(-3px) scale(1.06); }
}
.service-card:hover .service-icon,
.value-card:hover .value-icon {
  display: inline-block;
  animation: fh-float 0.55s ease-out both;
}

/* ── BUTTON SHINE SWEEP ── */
.btn-primary, .btn-white, .form-submit, .btn-add, .nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::before, .btn-white::before, .form-submit::before,
.btn-add::before, .nav-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 80%
  );
  transform: translateX(-120%) skewX(-15deg);
  transition: transform 0.52s ease;
  pointer-events: none;
}
.btn-primary:hover::before, .btn-white:hover::before,
.form-submit:hover::before, .btn-add:hover::before,
.nav-cta:hover::before {
  transform: translateX(220%) skewX(-15deg);
}

/* ── NAV LOGO HOVER ── */
.logo-wrap img, .logo-text {
  transition: opacity 0.18s ease;
}
.logo-wrap:hover img, .logo-text:hover { opacity: 0.85; }

/* ── SECTOR / FILTER BUTTON TRANSITION ── */
.sector-btn, .home-sector-btn {
  transition: all 0.18s ease;
}

/* ── STATS COUNTER FADE ── */
.stat-number { transition: color 0.3s ease; }

/* ── MOBILE: disable nav underline (vertical layout) ── */
@media (max-width: 900px) {
  .nav-links li a:not(.nav-cta) { padding-bottom: 0; }
  .nav-links li a:not(.nav-cta)::after { display: none; }
  .nav-links a.active { border-bottom: none; padding-bottom: 0; }
}