/* GENERATED FILE — DO NOT EDIT.
   Source: shared/design-system/motion.css
   Regenerate: node shared/design-system/sync.mjs
   Edits here are overwritten and will silently desync the other targets. */

/* ============================================================
   Focus Media Services — MOTION
   ------------------------------------------------------------
   prefers-reduced-motion overrides and the dark-mode context rules.
   Loaded LAST so its transition:none can win.

   Canonical source — edit here, then run:
       node shared/design-system/sync.mjs
   Never edit the generated copies in each target's ds folder.
   ============================================================ */

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .post-card, .navbar__menu > li > a::after { transition: none; }
}

/* ---------- Load-in + reveal-on-scroll ----------
   main.js adds html.anim (gated on JS and prefers-reduced-motion). The
   navbar and hero then choreograph themselves in with the CSS animations
   below — nav drops first, the hero copy cascades, the photo wash and the
   hero's companion piece follow. Page components get .reveal from main.js
   and rise via .is-inview as the scroll brings them in; the classes strip
   on transitionend so component hover transitions come back. Without JS
   nothing is ever hidden. */
html.anim .navbar {
    animation: nav-drop .6s cubic-bezier(.16, 1, .3, 1) .1s both;
}
html.anim .hero__copy > *,
html.anim .page-head .container-large > * {
    animation: rise-in .75s cubic-bezier(.16, 1, .3, 1) .25s both;
}
html.anim .hero__copy > :nth-child(2),
html.anim .page-head .container-large > :nth-child(2) { animation-delay: .35s; }
html.anim .hero__copy > :nth-child(3),
html.anim .page-head .container-large > :nth-child(3) { animation-delay: .45s; }
html.anim .hero__copy > :nth-child(4),
html.anim .page-head .container-large > :nth-child(4) { animation-delay: .55s; }
html.anim .hero__copy > :nth-child(5),
html.anim .page-head .container-large > :nth-child(5) { animation-delay: .65s; }
html.anim .hero__copy > :nth-child(6),
html.anim .page-head .container-large > :nth-child(6) { animation-delay: .75s; }
html.anim .hero::before { animation: wash-in 1.4s ease-out .3s both; }
html.anim .module-card { animation: rise-in .8s cubic-bezier(.16, 1, .3, 1) .55s both; }
html.anim .vert-stage { animation: wash-in 1.2s ease-out .45s both; }

html.anim .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .7s cubic-bezier(.16, 1, .3, 1),
        transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
html.anim .reveal.is-inview {
    opacity: 1;
    transform: none;
}

@keyframes rise-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@keyframes nav-drop {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}
@keyframes wash-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html.anim .navbar,
    html.anim .hero__copy > *,
    html.anim .page-head .container-large > *,
    html.anim .hero::before,
    html.anim .module-card,
    html.anim .vert-stage { animation: none; }
    html.anim .reveal { opacity: 1; transform: none; transition: none; }
}


/* ============================================================
   DARK MODE (demo Theme toggle / ?theme=dark) — html.mode-dark
   remaps the surface tokens; the handful of rules below cover
   colors that intentionally differ by context. Navy brand bands
   (.bg-primary/.bg-secondary) stay as-is.
   ============================================================ */
/* The html.mode-dark token remap moved to shared/design-system/tokens.css.
   The context-specific rules below stay here - they are per-target. */

/* headings that use the navy/blue "light context" palette flip to light */
html.mode-dark .bg-light .text-white,
html.mode-dark .bg-cool .text-white,
html.mode-dark .bg-muted .text-white,
html.mode-dark .bg-white .text-white { color: var(--heading); }
html.mode-dark .bg-light .text-emphasis,
html.mode-dark .bg-cool .text-emphasis,
html.mode-dark .bg-muted .text-emphasis,
html.mode-dark .bg-white .text-emphasis { color: var(--emphasis); }
html.mode-dark .text-primary { color: var(--emphasis); }

html.mode-dark .hero h1,
html.mode-dark .page-head h1,
html.mode-dark .tiles-title,
html.mode-dark .gov-centered h2,
html.mode-dark .team-intro h2 { color: var(--heading); }

html.mode-dark .hero__accent,
html.mode-dark .tiles-title .accent,
html.mode-dark .gov-centered h2 .accent,
html.mode-dark .team-intro h2 .accent { color: var(--emphasis); }

/* links & interactive accents step up to the light blue */
html.mode-dark .link-more,
html.mode-dark .post-card__body h3 a,
html.mode-dark .learn-video-note a { color: var(--emphasis); }

/* outline buttons need light strokes on dark */
html.mode-dark .btn--navy {
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}
html.mode-dark .btn--navy:hover {
    background: #fff;
    color: var(--primary);
}

/* nav: light links, dark stuck bar */
html.mode-dark .navbar__menu > li > a { color: #fff; }
html.mode-dark .navbar__toggle span { background: #fff; }
html.mode-dark .navbar.is-stuck {
    background-color: rgba(13, 26, 38, .95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
}

/* small pieces */
html.mode-dark .note-dashed {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .25);
}
html.mode-dark .hero__checks li::before,
html.mode-dark .gov-caps li::before,
html.mode-dark .step-card__num {
    background: rgba(120, 198, 31, .16);
    color: #a5dd6b;
}