/* ============ Corllet motion ============
   Calm, quick, purposeful: things arrive from slightly below, overlays scale in,
   cards lift on hover, buttons give under the finger. Off for reduced-motion users. */
:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms; --dur-4: 640ms;
}
@keyframes mo-up{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
@keyframes mo-scale{from{opacity:0;transform:translate3d(0,8px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes mo-drawer{from{transform:translate3d(32px,0,0);opacity:0}to{transform:none;opacity:1}}
@keyframes mo-sheet{from{transform:translate3d(0,40px,0);opacity:0}to{transform:none;opacity:1}}
@keyframes mo-toast{0%{opacity:0;transform:translate3d(0,16px,0) scale(.96)}100%{opacity:1;transform:none}}
@keyframes mo-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes mo-line{from{opacity:0;transform:translate3d(0,.35em,0);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes mo-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes mo-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}

@media (prefers-reduced-motion: no-preference){
  /* page arrival (motion.js adds .mo-page only when the path changes) */
  #app.mo-page main, #app.mo-page .auth .form, #app.mo-page .amain{animation:mo-fade var(--dur-3) var(--ease-out) both}
  .mo-item{animation:mo-up var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
  .mo-reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
  .mo-reveal.in{opacity:1;transform:none}
  .mo-pop{animation:mo-pop 520ms var(--ease-spring) both}

  /* landing hero: headline lines rise in, phones drift */
  #app.mo-page .hero .ann{animation:mo-up var(--dur-3) var(--ease-out) both}
  #app.mo-page .hero-h > span, #app.mo-page .hero-h .l2 > span{animation:mo-line 700ms var(--ease-out) both}
  #app.mo-page .hero-h > span:nth-child(1){animation-delay:60ms}
  #app.mo-page .hero-h .l2 > span:nth-child(1){animation-delay:160ms}
  #app.mo-page .hero-h .l2 > span:nth-child(2){animation-delay:240ms}
  #app.mo-page .hero-h .l2 > span:nth-child(3){animation-delay:320ms}
  #app.mo-page .hero p, #app.mo-page .hero-ctas{animation:mo-up var(--dur-4) var(--ease-out) 380ms both}
  .hero-av img{transition:transform var(--dur-2) var(--ease-spring)}
  .hero-av:hover img:first-child{transform:translateX(-4px) rotate(-4deg)}
  .hero-av:hover img:nth-child(2){transform:translateX(4px) rotate(4deg)}
  .marquee > div:nth-child(odd){animation:mo-float 6s ease-in-out infinite}
  .marquee > div:nth-child(even){animation:mo-float 7s ease-in-out -2s infinite}

  /* logo: the mark tips over slightly on hover */
  .logo .wm path:first-child{transform-box:fill-box;transform-origin:50% 60%;transition:transform 380ms var(--ease-spring)}
  .logo:hover .wm path:first-child{transform:rotate(-12deg) scale(1.04)}

  /* cards and tiles */
  .scard .stile, .ccard, .feat, .plan, .colltile, .card, .lrow, .mcrow{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background-color var(--dur-1) ease}
  .scard .stile:hover, .colltile:hover{transform:translate3d(0,-4px,0);box-shadow:0 14px 32px -16px rgba(17,17,16,.28)}
  .ccard:hover, .feat:hover, .plan:hover, a.card:hover{transform:translate3d(0,-3px,0);box-shadow:0 12px 28px -18px rgba(17,17,16,.3)}
  .lrow:hover .app-ic{transform:scale(1.06)}
  .app-ic{transition:transform var(--dur-2) var(--ease-spring)}
  .scard .hover-acts{transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}

  /* controls */
  .btn, .icon-btn, .chip, .cchip, .tab, .seg button{transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1) ease,color var(--dur-1) ease,box-shadow var(--dur-2) ease}
  .btn:active:not(:disabled), .icon-btn:active, .chip:active, .cchip:active, .seg button:active{transform:scale(.96)}
  .btn-primary:hover:not(:disabled), .btn-accent:hover{box-shadow:0 6px 18px -10px rgba(17,17,16,.55)}
  .btn .ico:last-child{transition:transform var(--dur-2) var(--ease-out)}
  .btn:hover .ico:last-child:not(:first-child){transform:translateX(2px)}
  .tab.on, .seg button.on{animation:mo-fade var(--dur-2) var(--ease-out)}
  .progress i, .mbar i{transition:width 900ms var(--ease-out)}
  .tgl{transition:background-color var(--dur-2) ease}

  /* overlays */
  .scrim{animation:mo-fade var(--dur-2) ease both}
  .modal, .cmdk{animation:mo-scale var(--dur-2) var(--ease-out) both}
  .drawer{animation:mo-drawer var(--dur-3) var(--ease-out) both}
  .viewer .stage > svg, .viewer .stage > div{animation:mo-scale var(--dur-3) var(--ease-out) both}
  .viewer .info > *{animation:mo-up var(--dur-3) var(--ease-out) both}
  .viewer .info > *:nth-child(2){animation-delay:40ms}.viewer .info > *:nth-child(3){animation-delay:80ms}.viewer .info > *:nth-child(4){animation-delay:120ms}.viewer .info > *:nth-child(n+5){animation-delay:160ms}
  .mviewer .mv-sheet, .mtag-sheet, .mpaybar{animation:mo-sheet var(--dur-3) var(--ease-out) both}
  .menu.float{animation:mo-scale var(--dur-1) var(--ease-out) both;transform-origin:top right}
  .toast{animation:mo-toast var(--dur-3) var(--ease-spring) both}
  .cmdk .it{transition:background-color var(--dur-1) ease}

  /* auth: phone columns drift slowly */
  .auth .colm{animation:mo-float 9s ease-in-out infinite}
  .auth .colm:nth-child(2){animation-duration:11s;animation-delay:-3s}
  .auth .colm:nth-child(3){animation-duration:10s;animation-delay:-6s}
  .otpin input{transition:border-color var(--dur-1) ease,box-shadow var(--dur-2) ease,transform var(--dur-1) var(--ease-out)}
  .otpin input:focus{transform:translateY(-1px)}

  /* loading skeleton for "checking access" */
  .mo-skel{background:linear-gradient(90deg,var(--n100) 25%,var(--n50) 50%,var(--n100) 75%);background-size:200% 100%;animation:mo-shimmer 1.4s linear infinite;border-radius:8px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .mo-reveal{opacity:1;transform:none}
}