/* PageKedai motion, aligned to Design Lab Motion Kit v1 (21 Oct 2026). Tokens in one place. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--mo-ui:.2s;--mo-reveal:.6s;--mo-sheet:.3s;--mo-bump:.35s;--mo-rise:16px;--mo-lift:-4px;--mo-press:.98;--mo-stagger:100ms;--mo-teal:#2DD4BF;--mo-wa:#25D366;--mo-cta-h:76px}
/* 1 reveal (only after JS adds .js) */
.js .rv{opacity:0;transform:translateY(var(--mo-rise));transition:opacity var(--mo-reveal) var(--ease) calc(var(--i,0) * var(--mo-stagger)),transform var(--mo-reveal) var(--ease) calc(var(--i,0) * var(--mo-stagger))}
.js .rv.in{opacity:1;transform:none}
/* 2 card lift + button feedback */
.btn,.try,.dep,main button{transition:transform var(--mo-ui) var(--ease),opacity var(--mo-ui) var(--ease)}
.try{display:inline-block}
.card,.step,.dc,.bc,.box{transition:transform var(--mo-ui) var(--ease),border-color var(--mo-ui)}
.js .card.rv{transition:opacity var(--mo-reveal) var(--ease) calc(var(--i,0) * var(--mo-stagger)),transform var(--mo-reveal) var(--ease) calc(var(--i,0) * var(--mo-stagger)),border-color var(--mo-ui)}
.js .card.rv.in{transition:opacity var(--mo-reveal) var(--ease),transform var(--mo-ui) var(--ease),border-color var(--mo-ui)}
@media (hover:hover){.card:hover,.dc:hover,.bc:hover,.box:hover{transform:translateY(var(--mo-lift));border-color:var(--mo-teal)}.btn:hover,.try:hover{transform:translateY(-2px)}}
.card:active,.dc:active,.bc:active,.btn:active,.try:active,main button:not(:disabled):active{transform:scale(var(--mo-press))}
/* pricing highlight: glow layer fades in (opacity only, no animated box-shadow) */
.card{position:relative}
.card.hi::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 1px rgba(45,212,191,.55),0 14px 40px rgba(45,212,191,.2);opacity:0;transition:opacity var(--mo-reveal) var(--ease) .3s;pointer-events:none}
.card.hi.in::after,.card.hi:hover::after,html:not(.js) .card.hi::after{opacity:1}
/* slash price: subtle opacity pulse, twice */
.in .was{animation:mo-pulse 1.8s ease-in-out .6s 2}
@keyframes mo-pulse{50%{opacity:.5}}
/* demo micro-feedback (kit bump, scaled down for buttons) */
.mo-ok{animation:mo-bump var(--mo-bump) var(--ease)}
@keyframes mo-bump{50%{transform:scale(1.05)}}
.mo-live{animation:mo-fade var(--mo-ui) var(--ease)}
@keyframes mo-fade{from{opacity:.3}to{opacity:1}}
/* 4 sticky mobile CTA */
.mo-cta{display:none}
@media (max-width:899px){
 .js .mo-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(10,11,15,.92);border-top:1px solid #333;transform:translateY(110%);transition:transform var(--mo-sheet) var(--ease);visibility:hidden}
 .js .mo-cta.show{transform:none;visibility:visible}
 .mo-cta a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;background:var(--mo-wa);color:#0A0B0F;font-weight:700;font-size:17px;text-decoration:none;transition:transform var(--mo-ui) var(--ease)}
 .mo-cta a:active{transform:scale(var(--mo-press))}
 .js body.has-cta{padding-bottom:var(--mo-cta-h)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none}.card:hover,.dc:hover,.bc:hover,.box:hover,.btn:hover,.try:hover,.card:active,.btn:active,.try:active,main button:active{transform:none}}