/* motion.css — premium lightweight animations (Nov 3). Hidden states apply only once motion.js adds .mo-on to <html>, so content stays visible if JS fails. */
@keyframes moUp{from{opacity:0;translate:0 26px}to{opacity:1;translate:none}}
@keyframes moZoom{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes moFloat{50%{translate:0 -12px}}
@keyframes moFloat2{50%{translate:0 -8px}}
@keyframes moShine{from{left:-60%}to{left:130%}}
@keyframes moRing{0%{opacity:.75;scale:1}100%{opacity:0;scale:1.55}}
@keyframes moGlow{50%{opacity:.82}}
/* hero entrance on load */
.mo-on .hero-copy>*:not(.reveal){animation:moUp .85s cubic-bezier(.2,.75,.2,1) both}
.mo-on .hero-copy>*:not(.reveal):nth-child(1){animation-delay:.05s}.mo-on .hero-copy>*:not(.reveal):nth-child(2){animation-delay:.16s}.mo-on .hero-copy>*:not(.reveal):nth-child(3){animation-delay:.28s}.mo-on .hero-copy>*:not(.reveal):nth-child(4){animation-delay:.4s}.mo-on .hero-copy>*:not(.reveal):nth-child(5){animation-delay:.52s}.mo-on .hero-copy>*:not(.reveal):nth-child(6){animation-delay:.64s}
.mo-on .hero-art:not(.reveal){animation:moZoom 1s .25s cubic-bezier(.2,.75,.2,1) both}
/* gentle float on phone mockups and chips (translate property, so existing rotate/transform is kept) */
.card-shot.s1,.phone.p-left{animation:moFloat 7s ease-in-out infinite}
.card-shot.s2,.phone.p-right{animation:moFloat 8s 1.2s ease-in-out infinite}
.chip.c1,.chip.c2,.chip.c3{animation:moFloat2 6.5s ease-in-out infinite}.chip.c2{animation-delay:1.4s}.chip.c3{animation-delay:.7s}
.hero-art .glow{animation:moGlow 6s ease-in-out infinite}
/* scroll reveal */
.mo-on .mo{opacity:0;translate:0 26px;transition:opacity .75s ease,translate .75s cubic-bezier(.2,.75,.2,1);will-change:opacity,translate}
.mo-on .mo.in{opacity:1;translate:none}
/* buttons: lift, press, shine */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:active{scale:.97}
.btn-primary::after,.btn-gold::after,.btn-navy::after,.appc-gp::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none;z-index:1}
.appc-gp{position:relative;overflow:hidden}
@media (hover:hover){.btn-primary:hover::after,.btn-gold:hover::after,.btn-navy:hover::after,.appc-gp:hover::after{animation:moShine .8s ease}}
.cta-row .btn-primary::after,.cta-row .btn-gold::after{animation:moShine 1.1s 1.4s ease both}
/* cards lift on hover (desktop) */
@media (hover:hover){.svc,.step,.plan,.card,.tcard,.qa,.faq-item,.stat,.work{transition:translate .3s ease,box-shadow .3s ease,opacity .75s ease}.svc:hover,.step:hover,.plan:hover,.card:hover,.tcard:hover,.work:hover{translate:0 -5px}}
/* counters keep width steady */
.mo-count{font-variant-numeric:tabular-nums;display:inline-block}
/* WhatsApp button pulse */
.fab::after,.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:moRing 2.4s ease-out infinite;pointer-events:none}
.fab::before,.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:moRing 2.4s 1.2s ease-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.mo-on .mo{opacity:1!important;translate:none!important}.mo-on .hero-copy>*,.mo-on .hero-art:not(.reveal){animation:none!important}.fab::before,.fab::after,.wa-float::before,.wa-float::after,.btn::after,.appc-gp::after{display:none}}
@media print{.mo-on .mo{opacity:1!important;translate:none!important}}