/*
 * 80 — Motion
 * Every animation on the site lives in this one file, so it is easy to review, tune, or remove.
 * Everything is wrapped in prefers-reduced-motion: no-preference; visitors who ask for less
 * motion get the static site. Scroll-reveal also needs JavaScript (modules/reveal.js sets
 * html.has-motion); without it nothing is ever hidden.
 *
 * Sections: 1 page load · 2 scroll reveal · 3 hover & focus · 4 ambient · 5 header & menus · 6 page transitions
 */
@media (prefers-reduced-motion: no-preference) {
  /* ---------- 1. Page load: hero content rises in, staggered ---------- */
  @keyframes rise {
    from { opacity: 0; translate: 0 2rem; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes settle {
    from { opacity: 0; translate: 2.5rem 0; scale: 0.97; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }

  /* Hero content rises in. Scoped to the active slide so every slide change replays it. */
  .hero-slide.is-active .hero__copy > *,
  .page-hero__inner > * { animation: rise 1s var(--ease) both; }
  .hero-slide.is-active .hero__copy > :nth-child(1), .page-hero__inner > :nth-child(1) { animation-delay: 80ms; }
  .hero-slide.is-active .hero__copy > :nth-child(2), .page-hero__inner > :nth-child(2) { animation-delay: 200ms; }
  .hero-slide.is-active .hero__copy > :nth-child(3), .page-hero__inner > :nth-child(3) { animation-delay: 320ms; }
  .hero-slide.is-active .hero__copy > :nth-child(4), .page-hero__inner > :nth-child(4) { animation-delay: 440ms; }
  .hero-slide.is-active .hero__copy > :nth-child(5), .page-hero__inner > :nth-child(5) { animation-delay: 560ms; }
  .hero-slide.is-active .hero__photo,
  .hero-slide.is-active .hero-note { animation: settle 1.2s var(--ease) 350ms both; }

  /* Slides cross-fade; hidden slides are not focusable (visibility) and cost nothing to paint. */
  .hero-slides.is-enhanced .hero-slide { transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s; }
  .hero-slides.is-enhanced .hero-slide.is-active { transition: opacity 0.7s var(--ease), visibility 0s; }

  /* The active dot fills over the autoplay interval. Paused or stopped = no fill. */
  @keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .hero-slides[data-state="playing"] .hero-dot.is-active::after { animation: dot-fill var(--hero-interval, 8s) linear both; }

  .stats-strip { animation: rise 1s var(--ease) 700ms both; }

  /* The underline under the hero headline draws itself */
  @keyframes draw {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  .hero-slide.is-active .hero__title .ink-underline::after { animation: draw 1.1s var(--ease) 900ms both; }

  /* ---------- 2. Scroll reveal (classes added by modules/reveal.js) ---------- */
  @keyframes reveal-failsafe {
    to { opacity: 1; translate: 0 0; scale: 1; }
  }

  html.has-motion .reveal {
    opacity: 0;
    translate: 0 2.25rem;
    transition:
      opacity 0.9s var(--ease) calc(var(--i, 0) * 90ms),
      translate 0.9s var(--ease) calc(var(--i, 0) * 90ms),
      scale 0.9s var(--ease) calc(var(--i, 0) * 90ms);
    /* Safety net: if the script stalls, content still appears after 3 s. */
    animation: reveal-failsafe 0.01s 3s forwards;
  }
  html.has-motion .reveal--scale { scale: 0.95; }
  html.has-motion .reveal--left { translate: -2.5rem 0; }
  html.has-motion .reveal--right { translate: 2.5rem 0; }
  html.has-motion .reveal.is-in { opacity: 1; translate: 0 0; scale: 1; animation: none; }

  /* Journey-stop markers draw in with their section */
  html.has-motion .stop-marker__rule { transform-origin: left; transition: transform 1.2s var(--ease) 200ms; }
  html.has-motion .stop-marker.reveal:not(.is-in) .stop-marker__rule { transform: scaleX(0); }

  /* ---------- 3. Hover & focus ---------- */
  .btn {
    transition:
      background-color var(--transition), color var(--transition), border-color var(--transition),
      translate 220ms var(--ease), box-shadow 220ms var(--ease);
  }
  .btn:hover { translate: -2px -2px; box-shadow: 4px 4px 0 rgba(4, 34, 31, 0.28); }
  .btn:active { translate: 0 0; box-shadow: none; }

  .icon-btn { transition: background-color var(--transition), translate 220ms var(--ease); }
  .icon-btn:hover { translate: 0 -2px; }

  .text-link { transition: text-underline-offset 300ms var(--ease), color var(--transition); }
  .text-link:hover { text-underline-offset: 9px; }

  .leader--cochair, .leader--staff { transition: transform 350ms var(--ease), box-shadow 350ms var(--ease); }
  .leader--cochair:hover, .leader--staff:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(28, 43, 69, 0.12); }
  .leader--officer { transition: outline-offset 400ms var(--ease); }
  .leader--officer:hover { outline-offset: 11px; }

  .card--link, .service-card, .district-card, .resource-card, .meeting-item, .news-card, .event-card {
    transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color var(--transition);
  }
  .card--link:hover, .service-card:hover, .district-card:hover, .resource-card:hover { transform: translateY(-8px); }
  .meeting-item:hover { transform: translateY(-5px); }
  .news-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(28, 43, 69, 0.14); }

  .card__cta, .service-card__cta, .district-card__cta { transition: translate 300ms var(--ease); }
  .card--link:hover .card__cta,
  .resource-card:hover .card__cta,
  .service-card:hover .service-card__cta,
  .district-card:hover .district-card__cta { translate: 0.5rem 0; }

  .news-card__media img, .district-card__logo img { transition: scale 700ms var(--ease); }
  .news-card:hover .news-card__media img, .district-card:hover .district-card__logo img { scale: 1.08; }

  .pin { transition: translate 300ms var(--ease); }
  .resource-row:hover .pin, .district-link:hover .pin, .meeting-item:hover .pin { translate: 0 -4px; }
  .resource-row, .district-link { transition: padding-left 300ms var(--ease), color var(--transition); }
  .resource-row:hover, .district-link:hover { padding-left: 0.6rem; }

  .event-card__date { transition: translate 300ms var(--ease), scale 300ms var(--ease); }
  .event-card:hover .event-card__date { translate: 0 -4px; scale: 1.05; }

  .archive-list a { transition: padding-left 300ms var(--ease), color var(--transition); }
  .archive-list a:hover { padding-left: 0.75rem; }

  .input { transition: border-color var(--transition), background-color var(--transition), outline-color var(--transition); }

  .stat { transition: translate 300ms var(--ease); }
  .stat:hover { translate: 0 -3px; }

  /* ---------- 4. Ambient: slow, quiet, always-on ---------- */
  @keyframes orbit { to { rotate: 360deg; } }
  @keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
  @keyframes dash-flow { to { stroke-dashoffset: -38; } }
  @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

  .hero__orbit { animation: orbit 90s linear infinite; }
  .page-hero::before { animation: orbit 120s linear infinite; }
  .nj-silhouette { animation: drift 9s ease-in-out infinite; }
  .hero__wave path, .join-banner__wave path { animation: dash-flow 3s linear infinite; }
  .hero__photo-seal { animation: bob 5s ease-in-out infinite; }
  .mission-photo__badge { animation: bob 4s ease-in-out infinite; }

  /* ---------- 5. Header & menus ---------- */
  .site-header { transition: box-shadow 300ms var(--ease), background-color 300ms var(--ease); }
  .site-header[data-scrolled] { box-shadow: 0 8px 28px rgba(28, 43, 69, 0.12); }
  .site-header[data-scrolled] .site-header__bar { min-height: 3.5rem; padding-block: 0.4rem; }
  .brand__seal { transition: width 300ms var(--ease), height 300ms var(--ease); }
  .brand__name { transition: font-size 300ms var(--ease); }
  .site-header[data-scrolled] .brand__seal { width: 2.75rem; height: 2.75rem; }
  .site-header[data-scrolled] .brand__name { font-size: 1.5rem; }

  @keyframes drop-in {
    from { opacity: 0; translate: 0 -10px; }
    to { opacity: 1; translate: 0 0; }
  }
  @media (min-width: 64rem) {
    .menu__item:hover > .submenu,
    .menu__item:focus-within > .submenu,
    .menu__item[data-open] > .submenu { animation: drop-in 260ms var(--ease) both; }
    .menu__link { transition: color var(--transition), border-color 300ms var(--ease); }
    .submenu__link { transition: background-color var(--transition), color var(--transition), padding-left 250ms var(--ease); }
    .submenu__link:hover { padding-left: 1.8rem; }
    .submenu-toggle svg { transition: rotate 300ms var(--ease); }
    .menu__item:hover .submenu-toggle svg, .menu__item[data-open] .submenu-toggle svg { rotate: 180deg; }
  }

  @keyframes panel-in {
    from { opacity: 0; translate: 0 -12px; }
    to { opacity: 1; translate: 0 0; }
  }
  .site-header[data-open] .site-nav { animation: panel-in 300ms var(--ease) both; }

  /* ---------- 6. Page-to-page transitions (cross-document View Transitions) ---------- */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: 220ms ease-out both fade-out; }
  ::view-transition-new(root) { animation: 380ms var(--ease) both fade-in; }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes fade-in { from { opacity: 0; } }
}