@media (prefers-reduced-motion: no-preference) {
  @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-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; }

  .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; }

  @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; }

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

  @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; }

  @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);
    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; }

  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); }

  .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, .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, .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 { transition: translate 300ms var(--ease); }
  .card--link:hover .card__cta,
  .resource-card:hover .card__cta,
  .service-card:hover .service-card__cta,

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

  .pin { transition: translate 300ms var(--ease); }
  .resource-row:hover .pin, .meeting-item:hover .pin { translate: 0 -4px; }
  .resource-row { transition: padding-left 300ms var(--ease), color var(--transition); }
  .resource-row: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); }

  .highlight, .highlight__arrow { transition: filter var(--transition), translate 300ms var(--ease); }
  .highlight:hover .highlight__arrow { translate: 0.5rem 0; }

  @keyframes orbit { to { rotate: 360deg; } }
  @keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
  @keyframes dash-flow { to { stroke-dashoffset: -38; } }
  @keyframes dash-flow-join { to { stroke-dashoffset: -56; } }
  @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 { animation: dash-flow 3s linear infinite; }
  .join-banner__wave path { animation: dash-flow-join 3.2s linear infinite; }
  .hero__photo-seal { animation: bob 5s ease-in-out infinite; }
  .mission-photo__badge { animation: bob 4s ease-in-out infinite; }

  .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: 3.1rem; height: 3.1rem; }
  .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), box-shadow var(--transition); }
    .submenu__link--external::after { translate: -6px 0; transition: opacity var(--transition), translate 250ms var(--ease); }
    .submenu__link--external:hover::after, .submenu__link--external:focus-visible::after { translate: 0 0; }
    .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; }

  @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; } }
}