/* ============================================================
   RZEC Motion Kit v1 — "The System Comes Alive"
   Loaded on all content pages. Every rule is gated behind
   html.m-on (added by motion.js) so no-JS = static site,
   and behind prefers-reduced-motion: no-preference.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

/* ---------- 1. Scroll reveal ---------- */
html.m-on .m-r{opacity:0;transform:translateY(24px);transition:opacity .65s cubic-bezier(.22,.61,.36,1) var(--mrd,0ms),transform .65s cubic-bezier(.22,.61,.36,1) var(--mrd,0ms);will-change:opacity,transform}
html.m-on .m-r.m-in{opacity:1;transform:none}

/* ---------- 2. Icon stroke draw-in ---------- */
html.m-on .m-r :is(.ico,.vico) svg :is(path,circle,rect,line,polyline,polygon){stroke-dasharray:130;stroke-dashoffset:130}
html.m-on .m-r.m-in :is(.ico,.vico) svg :is(path,circle,rect,line,polyline,polygon){animation:m-draw .85s ease calc(var(--mrd,0ms) + 180ms) forwards}
@keyframes m-draw{to{stroke-dashoffset:0}}

/* ---------- 3. Hero: Ken Burns drift ---------- */
html.m-on .hero-banner{overflow:hidden}
html.m-on .m-kb{animation:m-kb 22s ease-out .3s forwards;transform-origin:62% 38%;will-change:transform}
@keyframes m-kb{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ---------- 4. Riser charge line (scroll progress) ---------- */
.m-riser{position:fixed;left:14px;top:14px;bottom:14px;width:3px;z-index:80;pointer-events:none;background:rgba(31,42,55,.08);border-radius:2px}
.m-riser i{position:absolute;left:0;bottom:0;width:100%;height:0;background:linear-gradient(0deg,#C8102E,#e6394f);border-radius:2px}
.m-riser b{position:absolute;left:50%;bottom:0;width:9px;height:9px;border-radius:50%;background:#e6394f;transform:translate(-50%,50%);box-shadow:0 0 10px rgba(200,16,46,.7)}
.m-riser.m-full i{background:linear-gradient(0deg,#C8102E 60%,#F4A100)}
.m-riser.m-full b{background:#F4A100;box-shadow:0 0 12px rgba(244,161,0,.95)}
@media (max-width:1279px){.m-riser{display:none}}

/* ---------- 5. Process steps arm in sequence ---------- */
html.m-on .step.m-in .num{animation:m-arm .5s ease calc(var(--mrd,0ms) + .35s) both}
@keyframes m-arm{0%{background:var(--navy,#1F2A37)}55%{background:var(--red,#C8102E);transform:scale(1.15)}100%{background:var(--navy,#1F2A37);transform:scale(1)}}

/* ---------- 7. Alarm-beacon pulse on WhatsApp float ---------- */
html.m-on .wa{will-change:transform}
html.m-on .wa::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;animation:m-beacon 3.8s ease-out 2.5s infinite}
@keyframes m-beacon{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}75%{box-shadow:0 0 0 20px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- 8. Client logo marquee ---------- */
html.m-on .logos.m-mq{display:flex;gap:0;overflow:hidden;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
html.m-on .m-mq-t{display:flex;gap:16px;flex-shrink:0;min-width:100%;padding-right:16px;animation:m-mq 38s linear infinite}
html.m-on .logos.m-mq:hover .m-mq-t{animation-play-state:paused}
html.m-on .m-mq-t .logo-chip{min-width:190px}
@keyframes m-mq{to{transform:translateX(-100%)}}

/* ---------- 10. Header shadow on scroll ---------- */
html.m-on header{transition:box-shadow .3s ease}
html.m-scroll header{box-shadow:0 8px 28px rgba(31,42,55,.10)}

} /* end no-preference */