/* ==========================================================================
   ANIMATIONS.CSS — Scroll reveal, counters, micro-interactions
   All effects are GPU-cheap (transform/opacity only) and respect
   prefers-reduced-motion via base.css's global override.
   ========================================================================== */

/* [data-reveal] elements are visible by default — this is the no-JS /
   JS-failed baseline. scroll.js adds ".reveal-pending" itself, right before
   it starts observing, so the hidden-then-fade-in effect only ever applies
   when the script has actually run. Content must never depend on JS to be
   visible. */
[data-reveal].reveal-pending {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].reveal-pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.u-float { animation: floatY 5s ease-in-out infinite; }

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.hero__badges .badge {
  animation: fadeInScale var(--dur-slow) var(--ease-out) both;
}
.hero__badges .badge:nth-child(1) { animation-delay: 120ms; }
.hero__badges .badge:nth-child(2) { animation-delay: 220ms; }
.hero__badges .badge:nth-child(3) { animation-delay: 320ms; }
.hero__badges .badge:nth-child(4) { animation-delay: 420ms; }

.mobile-nav a {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mobile-nav.is-open a {
  opacity: 1;
  transform: translateX(0);
}
.mobile-nav.is-open a:nth-child(1) { transition-delay: 60ms; }
.mobile-nav.is-open a:nth-child(2) { transition-delay: 110ms; }
.mobile-nav.is-open a:nth-child(3) { transition-delay: 160ms; }
.mobile-nav.is-open a:nth-child(4) { transition-delay: 210ms; }
.mobile-nav.is-open a:nth-child(5) { transition-delay: 260ms; }

/* subtle ambient drift for hero scrim, very low amplitude */
@keyframes drift {
  0% { background-position: 0% 0%; }
  100% { background-position: 6% 4%; }
}

.loading-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--accent-cta);
  z-index: 9999;
  transition: width 400ms var(--ease-out), opacity 300ms ease;
}