/* Arizona Sheriffs' Association — site motion.
   Restrained and steady. Everything is scoped to html.asa-motion, which
   /assets/motion.js adds only when the visitor hasn't asked for reduced
   motion. Without that class the site is exactly as before. */

@keyframes asa-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes asa-photo {
  from { opacity: 0; background-position: center 36%; }
  to   { opacity: 1; background-position: center 28%; }
}

/* Home hero — the photo fades up from black and settles, then the
   headline, mission line and buttons follow in sequence. */
.asa-motion .hero .hero-top {
  animation: asa-photo 2200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.asa-motion .hero .hero-top h1 {
  animation: asa-rise 1100ms cubic-bezier(0.22, 1, 0.36, 1) 350ms both;
}
.asa-motion .hero .hero-bottom .lede {
  animation: asa-rise 1100ms cubic-bezier(0.22, 1, 0.36, 1) 650ms both;
}
.asa-motion .hero .hero-bottom .ctas {
  animation: asa-rise 1100ms cubic-bezier(0.22, 1, 0.36, 1) 850ms both;
}

/* Inner-page banners — breadcrumb, title and intro ease in. */
.asa-motion .page-hero .container > * {
  animation: asa-rise 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.asa-motion .page-hero .container > :nth-child(1) { animation-delay: 100ms; }
.asa-motion .page-hero .container > :nth-child(2) { animation-delay: 220ms; }
.asa-motion .page-hero .container > :nth-child(3) { animation-delay: 340ms; }
.asa-motion .page-hero .container > :nth-child(n+4) { animation-delay: 460ms; }

/* Header — a soft shadow appears once the page scrolls under it. */
.asa-motion header.site { transition: box-shadow 400ms ease; }
.asa-motion header.site.is-scrolled { box-shadow: 0 8px 24px rgba(0, 19, 47, 0.08); }

/* Scroll reveals — fade up, staggered within each group. motion.js
   removes these classes once settled so hover effects are untouched. */
.asa-motion .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--asa-i, 0) * 90ms);
}
.asa-motion .reveal.is-in { opacity: 1; transform: none; }

/* Search & Rescue photo settles into its frame as it appears. */
.asa-motion .sar-image.reveal img {
  scale: 1.08;
  transition: scale 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.asa-motion .sar-image.reveal.is-in img { scale: 1; }

/* Stat numbers count up; tabular figures keep them from jittering. */
.asa-motion .stat .num { font-variant-numeric: tabular-nums; }

@media print {
  .asa-motion .reveal { opacity: 1 !important; transform: none !important; }
}