/* ============================================================
   Beautiful Alarms — Motion
   Restrained interpretation of ndstudio.gov motion vocabulary.
   Philosophy: slow, deliberate, never bouncy. Type arrives with
   a soft blur-to-focus + slide-up. Sections settle in on scroll.
   No marquees, no per-character flips, no custom cursor — that
   register is too theatrical for a strategic studio.
   ============================================================ */

:root {
  --ba-mo-ease:    cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quart */
  --ba-mo-dur-s:   480ms;
  --ba-mo-dur-m:   720ms;
  --ba-mo-dur-l:   1100ms;
  --ba-mo-blur:    8px;
  --ba-mo-rise:    14px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ba-mo-blur: 0px; --ba-mo-rise: 0px; }
  .ba-rise, .ba-rise-stagger > *, .ba-reveal { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- Load cascade --------------------------------- */
/* Apply .ba-rise to elements that should arrive on page load.
   Add inline style="--d:120ms" (delay) to stagger siblings. */
@keyframes ba-rise {
  from { opacity: 0; transform: translateY(var(--ba-mo-rise)); filter: blur(var(--ba-mo-blur)); }
  to   { opacity: 1; transform: translateY(0);                  filter: blur(0); }
}
.ba-rise {
  opacity: 0;
  animation: ba-rise var(--ba-mo-dur-m) var(--ba-mo-ease) forwards;
  animation-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

/* Auto-stagger direct children: 0, 100ms, 200ms, ... */
.ba-rise-stagger > * {
  opacity: 0;
  animation: ba-rise var(--ba-mo-dur-m) var(--ba-mo-ease) forwards;
  will-change: opacity, transform, filter;
}
.ba-rise-stagger > *:nth-child(1) { animation-delay: 0ms; }
.ba-rise-stagger > *:nth-child(2) { animation-delay: 120ms; }
.ba-rise-stagger > *:nth-child(3) { animation-delay: 240ms; }
.ba-rise-stagger > *:nth-child(4) { animation-delay: 360ms; }
.ba-rise-stagger > *:nth-child(5) { animation-delay: 480ms; }
.ba-rise-stagger > *:nth-child(6) { animation-delay: 600ms; }

/* ---------- Scroll-triggered reveal ---------------------- */
/* Set initial state in CSS; JS toggles .is-in when the element
   crosses the viewport threshold (handled by motion.js). */
.ba-reveal {
  opacity: 0;
  transform: translateY(var(--ba-mo-rise));
  filter: blur(var(--ba-mo-blur));
  transition:
    opacity     var(--ba-mo-dur-l) var(--ba-mo-ease),
    transform   var(--ba-mo-dur-l) var(--ba-mo-ease),
    filter      var(--ba-mo-dur-l) var(--ba-mo-ease);
  will-change: opacity, transform, filter;
}
.ba-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---------- Hover states --------------------------------- */
/* Hover effects on links: animated hairline underline only —
   text opacity always stays at 100% (per brand spec). Hover
   transitions are handled in component JSX (Nav, SectionRow). */

/* ---------- Hero image slow drift ------------------------ */
/* Already on hero: 12s scale(1) → scale(1.04). Restated here
   for reference; the inline style in Hero.jsx wins. */
@keyframes ba-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}