/* Magenta motion system (replaces the package's motion.css; both sites load it last).
   Rules: transform and opacity only, plus colour on small controls. Tokens below are the only durations and easings.
   The build (scripts/motion.mjs) rewrites every other stylesheet's transitions to these tokens. */
:root{--motion-fast:150ms;--motion-base:250ms;--motion-slow:450ms;--motion-reveal:650ms;--ease-out:cubic-bezier(.22,.72,.28,1);--ease-inout:cubic-bezier(.4,0,.2,1);--lift:-2px;--zoom:1.02;--reveal-y:10px}
@media(max-width:640px){:root{--reveal-y:8px}}

/* Links, buttons, controls: colour only, one speed. */
a,button,summary,input,textarea,select{transition:color var(--motion-fast) var(--ease-out),background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}
body .button:hover,body .button:focus-visible{transform:none}
body .button:active{transform:translateY(1px);transition-duration:var(--motion-fast)}
body a:focus-visible,body button:focus-visible,body summary:focus-visible{outline:2px solid #a46a9d;outline-offset:4px}
body input:not([type=range]):focus-visible,body textarea:focus-visible,body select:focus-visible{border-color:#94518a;box-shadow:0 0 0 3px rgba(143,69,133,.12);outline:2px solid transparent;outline-offset:2px}

/* Cards: a card without a photo lifts 2px; a card with a photo zooms the photo. Never both. */
body :is(.solution-card,.directory-card){transition:transform var(--motion-base) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}
:is(.industry-card,.core-use-photo,.leader-card,.reserve-industry-portrait,.blog-card) img{transition:transform var(--motion-slow) var(--ease-out)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 body :is(.solution-card,.directory-card):hover{transform:translateY(var(--lift))}
 body :is(.industry-card,.core-use-photo,.leader-card,.reserve-industry-portrait,.blog-card):hover img{transform:scale(var(--zoom))}
}

/* Menus, dialogs and opened accordions enter the same way: 4px and a fade. */
@keyframes mf-enter{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.nav-menu.open>.dropdown-menu,.resources-menu.states-open .state-panel,.resources-menu.industries-open .industry-panel,.resources-menu.needs-open .need-panel,.primary-nav.nav-open,.reserve-menu[open]>div,.mobile-menu:not([hidden]),dialog[open],details.mf-opened>:not(summary){animation:mf-enter var(--motion-base) var(--ease-out)}
dialog[open]::backdrop{animation:mf-fade var(--motion-base) var(--ease-out)}
@keyframes mf-fade{from{opacity:0}to{opacity:1}}

/* Scroll reveals. motion.js adds .js and tags only elements below the first screen, so nothing is ever hidden
   without script, in the hero, or above the fold. [data-reveal=""] is hidden, "in" is the end state, then the attribute is removed. */
.js [data-reveal=""]{opacity:0;transform:translateY(var(--reveal-y));transition:none}
.js [data-reveal=in]{opacity:1;transform:none;transition:opacity var(--motion-reveal) var(--ease-out) var(--reveal-delay,0ms),transform var(--motion-reveal) var(--ease-out) var(--reveal-delay,0ms)}
/* Lazy photos fade in once decoded (motion.js). */
img.mf-img-pending{opacity:0}
main img[loading=lazy]{transition:opacity var(--motion-slow) var(--ease-out),transform var(--motion-slow) var(--ease-out)}
html{scroll-behavior:auto} /* anchor jumps stay instant; only the industries carousel scrolls smoothly */
.industry-cards{scroll-behavior:smooth}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
 [data-reveal]{opacity:1!important;transform:none!important}
}
@media print{[data-reveal]{opacity:1!important;transform:none!important}}