/* Motion layer for Design B — only transform/opacity, 150–600ms, disabled for prefers-reduced-motion */
@media (prefers-reduced-motion:no-preference){
/* hero: staggered entrance on load */
.hero-l .in>*,.hero-r .in>*{animation:mo-up .7s cubic-bezier(.2,.7,.2,1) both}
.hero-l .in>:nth-child(1){animation-delay:.05s}.hero-l .in>:nth-child(2){animation-delay:.12s}.hero-l .in>:nth-child(3){animation-delay:.2s}
.hero-l .in>:nth-child(4){animation-delay:.28s}.hero-l .in>:nth-child(5){animation-delay:.36s}.hero-l .in>:nth-child(n+6){animation-delay:.44s}
.hero-r .in>*{animation-delay:.3s}
@keyframes mo-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* scroll reveal (class added by motion.js only for elements below the fold) */
.mo-hide{opacity:0;transform:translateY(20px)}
.mo-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--mo-d,0s)}
/* lines that "draw" on reveal */
.tile,.it,.stat{--line:0}
.tile::before,.it::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.it{position:relative}
.tile:hover::before,.it:hover::before{transform:scaleX(1)}
/* buttons: 1px lift, no layout change */
.btn{transition:background .15s,color .15s,border-color .15s,transform .18s cubic-bezier(.2,.7,.2,1)}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.btn svg{transition:transform .18s}.btn:hover svg{transform:translateX(2px)}
/* tile arrow */
.tile .more svg{transition:transform .2s}.tile:hover .more svg{transform:translateX(4px)}
/* header shadow after scroll */
.top{transition:box-shadow .25s}.top.mo-scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px -16px rgba(0,0,0,.35)}
/* step numbers rise */
.step b.n{transition:transform .5s cubic-bezier(.2,.7,.2,1)}.step:hover b.n{transform:translateX(6px)}
}
/* RTL (Arabic): mirror directions */
@media (prefers-reduced-motion:no-preference){
[dir=rtl] .btn:hover svg{transform:translateX(-2px)}
[dir=rtl] .tile:hover .more svg{transform:translateX(-4px)}
[dir=rtl] .step:hover b.n{transform:translateX(-6px)}
[dir=rtl] .tile::before,[dir=rtl] .it::before{transform-origin:right}
/* keep mirrored arrows (.ico-dir = scaleX(-1)) mirrored while the hover nudge is applied */
[dir=rtl] .btn:hover svg.ico-dir{transform:translateX(-2px) scaleX(-1)}
[dir=rtl] .tile:hover .more svg.ico-dir{transform:translateX(-4px) scaleX(-1)}
}
@media (prefers-reduced-motion:reduce){.mo-hide{opacity:1!important;transform:none!important}}