:root {
    --miras-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --miras-motion-fast: 160ms;
    --miras-motion-ui: 250ms;
    --miras-motion-exit: 200ms;
    --miras-motion-reveal: 300ms;
}

/* Added by JS only while a target is still off-screen. No initial page hiding,
   no transform, and no transition into the pending state. */
@media (prefers-reduced-motion: no-preference) {
    html[data-miras-motion="on"][data-miras-input="pointer"] [data-miras-reveal-pending] {
        opacity: 0;
        transition: none;
    }
}

/* Frequent actions: only a small physical press, never a bouncing hover. */
html[data-miras-motion="on"][data-miras-input="pointer"] :is(.miras-shell-header__apply, .miras-shell-footer__visit-link, .miras-form-modal__close, .miras-lead-form button[type="submit"], .miras-home-motion-control) {
    transition: transform var(--miras-motion-fast) var(--miras-ease), background-color var(--miras-motion-fast) ease, color var(--miras-motion-fast) ease;
}
html[data-miras-motion="on"][data-miras-input="pointer"] :is(.miras-shell-header__apply, .miras-shell-footer__visit-link, .miras-form-modal__close, .miras-lead-form button[type="submit"], .miras-home-motion-control):active {
    transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
    .miras-home-program-media img { transition: transform var(--miras-motion-ui) var(--miras-ease); }
    .miras-home-program-meta { transition: color var(--miras-motion-fast) ease, transform var(--miras-motion-ui) var(--miras-ease); }
}

.miras-form-modal[data-motion-enter]::backdrop {
    opacity: 1;
    transition: opacity var(--miras-motion-ui) var(--miras-ease);
}
@starting-style {
    .miras-form-modal[data-motion-enter]::backdrop { opacity: 0; }
}
.miras-form-modal[data-motion-closing]::backdrop {
    opacity: 0;
    transition: opacity var(--miras-motion-exit) var(--miras-ease);
}

/* Keyboard actions and an explicit accessibility stop never wait for motion. */
html:is([data-miras-motion="off"], [data-miras-input="keyboard"]) :is(.miras-home-why-item, .miras-home-why-item *, .miras-mega-panel, .miras-language-panel, .miras-home-program-card *, .miras-form-modal, .miras-form-modal *, [data-miras-form-modal], .miras-layout-details, .miras-layout-details *, .is-style-miras-disclosure, .is-style-miras-disclosure *),
html:is([data-miras-motion="off"], [data-miras-input="keyboard"]) :is(.miras-home-why-sign, .miras-home-program-card, .miras-layout-details summary, .is-style-miras-disclosure summary)::before,
html:is([data-miras-motion="off"], [data-miras-input="keyboard"]) :is(.miras-home-why-sign, .miras-home-program-card, .miras-layout-details summary, .is-style-miras-disclosure summary)::after {
    transition: none !important;
    animation: none !important;
}
html:is([data-miras-motion="off"], [data-miras-input="keyboard"]) .miras-form-modal::backdrop { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .miras-form-modal::backdrop { transition: none !important; }
}
@media print {
    .miras-main *, .miras-editorial-content * { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* The accessibility widget can stop motion by setting either the root data
 * state or its stop class. Keep the editorial colour bands static in both
 * cases, including the hover transitions declared by the inner-page layer. */
html:is([data-miras-motion="off"], [data-miras-input="keyboard"], .cya11y-stop-animations) .miras-layout-page :is(.miras-horizontal-sections, .miras-link-grid, .miras-layout-process) > :is(.miras-layout-section, .miras-horizontal-row, .wp-block-miras-content-row, .miras-link-card),
html:is([data-miras-motion="off"], [data-miras-input="keyboard"], .cya11y-stop-animations) .miras-layout-page .miras-french-school-link a {
    transition: none !important;
}