/* v2 motion layer — loaded after responsive.css. All disabled under prefers-reduced-motion. */
:root{--mv-dist:20px;--mv-dur:700ms;--mv-ease:cubic-bezier(.2,.7,.2,1);--mv-stagger:70ms}
@media (max-width:768px){:root{--mv-dist:12px;--mv-dur:550ms;--mv-stagger:50ms}}
html{scroll-behavior:smooth}
body{animation:mvPageIn 380ms var(--mv-ease) both}
html.mv-leaving body{opacity:0;transition:opacity 180ms ease}
@keyframes mvPageIn{from{opacity:0}to{opacity:1}}
.mv-rv{opacity:0;transform:translateY(var(--mv-dist));transition:opacity var(--mv-dur) var(--mv-ease),transform var(--mv-dur) var(--mv-ease);transition-delay:calc(var(--mv-i,0) * var(--mv-stagger))}
.mv-rv.mv-in{opacity:1;transform:none}
.mv-hero{opacity:0;transform:translateY(var(--mv-dist));animation:mvHero var(--mv-dur) var(--mv-ease) forwards;animation-delay:calc(120ms + var(--mv-i,0) * 110ms)}
@keyframes mvHero{to{opacity:1;transform:none}}
@media (hover:hover) and (min-width:769px){
.mv-lift{transition:transform 260ms var(--mv-ease),box-shadow 260ms var(--mv-ease),border-color 260ms ease}
.mv-lift.mv-in:hover,.mv-lift:not(.mv-rv):hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(40,20,80,.28)}
.store-badges a{transition:transform 200ms var(--mv-ease),opacity 200ms ease}
.store-badges a:hover{transform:translateY(-2px)}
.phone-carousel{animation:mvFloat 6s ease-in-out infinite}
}
@keyframes mvFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
body,.phone-carousel{animation:none!important}
.mv-rv,.mv-hero{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
html.mv-leaving body{opacity:1}
.mv-lift:hover{transform:none!important}
}