/* ZapMind motion layer — Editorial Pop, premium micro-interactions.
   Rules: transform/opacity only · micro 150–240ms · entrances ≤420ms · spring easing
   for delight moments · 45ms stagger · full prefers-reduced-motion support.
   Shared by dashboard.html, reels.html, login.html (motion.js pairs with this). */
:root{
  --mo-out:cubic-bezier(.16,1,.3,1);
  --mo-spring:cubic-bezier(.34,1.56,.64,1);
  --mo-1:150ms;--mo-2:240ms;--mo-3:420ms;
}
@keyframes moPageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
body{animation:moPageIn .45s var(--mo-out) both}

/* Reveal-on-scroll (motion.js tags matching elements with .mo and staggers --mo-d) */
.mo{opacity:0;transform:translateY(14px) scale(.985);transition:opacity var(--mo-3) var(--mo-out),transform var(--mo-3) var(--mo-out);transition-delay:var(--mo-d,0ms)}
.mo.in{opacity:1;transform:none;transition-delay:var(--mo-d,0ms)}

/* Buttons: lift on hover, spring press */
.btn{transition:transform var(--mo-1) var(--mo-out),box-shadow var(--mo-1) var(--mo-out),background var(--mo-1),color var(--mo-1),border-color var(--mo-1),opacity var(--mo-1)}
.btn:hover{transform:translateY(-1.5px)}
.btn:active{transform:scale(.96);transition-duration:60ms}

/* Cards & rows: gentle lift */
.card,.module-card,.library-item,.pack-item,.panel,.step,.qrow,.igbar,.brain{transition:transform var(--mo-2) var(--mo-out),box-shadow var(--mo-2) var(--mo-out),border-color var(--mo-2)}
.card:hover,.module-card:hover,.library-item:hover,.pack-item:hover{transform:translateY(-3px)}
.pill,.chip{transition:transform var(--mo-1) var(--mo-out),background var(--mo-1),color var(--mo-1),border-color var(--mo-1)}
.pill:hover{transform:translateY(-1px)}
.pill:active,.chip:active{transform:scale(.95)}

/* Step completion: spring pop on the number badge */
.step .n{transition:transform var(--mo-2) var(--mo-spring),background var(--mo-2),color var(--mo-2)}
.step.done .n{animation:moPop .5s var(--mo-spring)}
@keyframes moPop{0%{transform:scale(.4)}60%{transform:scale(1.28)}100%{transform:scale(1)}}

/* Toast: springier arrival (upgrades the page's own .toast transition) */
.toast{transition:opacity .26s var(--mo-out),transform .4s var(--mo-spring)!important}

/* Skeleton shimmer for loading states */
.sk{position:relative;overflow:hidden;background:#EFE9DD;border-radius:14px;min-height:40px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:moSk 1.15s infinite}
@keyframes moSk{to{transform:translateX(100%)}}

/* Celebration burst dots (zmBurst in motion.js) */
.mo-dot{position:fixed;width:9px;height:9px;border-radius:50%;pointer-events:none;z-index:99999;animation:moDot .85s var(--mo-out) forwards}
@keyframes moDot{to{transform:translate(var(--dx),var(--dy)) rotate(220deg) scale(.15);opacity:0}}

/* Keyboard focus visibility (a11y) */
:focus-visible{outline:2.5px solid #FF5A2C;outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .mo{opacity:1;transform:none}
}