/* Site-wide motion utilities — loaded after fonts.css on every page.
   Rules here are deliberately generic; page styles may extend them. */

/* Page entry fade (CSS only, no library) */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: pageFadeIn 0.4s ease-out; }

/* Balanced headline wrapping — avoids orphaned last words */
h1, h2, h3 { text-wrap: balance; }

/* Skip link for keyboard users: visually hidden until focused */
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--accent, #00D4AA);
  color: #06110d;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 12px; }

/* Active page indicator in the navbar */
.nav-links a { position: relative; }
.nav-links a.active,
.nav-links a[aria-current="page"] { color: var(--text, #F0F4F3); }
.nav-links a.active::after,
.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, #00D4AA);
}

/* Reduced motion: kill animations/transitions and force revealed content visible */
@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;
  }
  .js .reveal, .js .reveal-hero {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Nav: eight links stop fitting on one line below ~1100px. Tighten the
   gaps on narrow desktops, then hand over to the hamburger menu.
   "body" outranks each page's own inline .nav-links rules. */
@media (max-width: 1240px) {
  body .nav-links { gap: 28px; }
}
@media (max-width: 1100px) {
  body .nav-links, body .nav-cta { display: none; }
  body .hamburger { display: flex; }
}

/* Mobile menu: nine entries. Centred while they fit; on short screens the
   list tightens, starts below the header bar and scrolls instead of being
   cut off. margin:auto centres without clipping the top the way
   justify-content:center does once the list overflows. */
body #mobileNav, body #mobNav { overflow-y: auto; overscroll-behavior: contain; }
body #mobileNav > ul, body #mobNav > ul { margin: auto; padding: 80px 0 32px; }
@media (max-height: 760px) {
  body #mobileNav > ul, body #mobNav > ul { gap: 4px; padding-top: 72px; }
  body #mobileNav a:not([class*="btn"]), body #mobNav a:not([class*="btn"]) {
    display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 24px;
  }
}