/* ============================================================
   Homepage motion layer — animation-only rules.
   No visual styling lives here: every rule either moves/fades
   existing elements or supports the JS in homepage-motion.js.
   All hm-* classes are added by JS, so without JS the page
   renders exactly as before.
   ============================================================ */

/* ---- Reveal on scroll ---- */
.hm-r{
    opacity:0;transform:translateY(18px);
    transition:opacity .65s var(--ease),transform .65s var(--ease);
    will-change:opacity,transform;
}
.hm-r.hm-in{opacity:1;transform:none}

/* ---- Engine tabs: auto-cycle progress bar ---- */
.eng-tab{position:relative;overflow:hidden}
.hm-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;display:none;pointer-events:none}
.eng-tab.active .hm-prog{display:block;background:var(--accent-line)}
.hm-prog i{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.engines.hm-cycling .eng-tab.active .hm-prog i{animation:hm-fill var(--hm-cycle,6.5s) linear forwards}
@keyframes hm-fill{to{transform:scaleX(1)}}

/* ---- Incident timeline: staged reveal ---- */
.hm-tl{opacity:.22;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hm-tl.hm-lit{opacity:1;transform:none}

/* ---- Hero dashboard: smooth state flips on the monitor cards ---- */
.hero-dash-wrap .mcard{transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.hero-dash-wrap .mcard .mcard-ms{transition:opacity .25s var(--ease)}

/* ---- Reduced motion: neutralise everything above ---- */
@media (prefers-reduced-motion: reduce){
    .hm-r{opacity:1;transform:none;transition:none}
    .hm-tl{opacity:1;transform:none;transition:none}
    .hm-prog{display:none!important}
}