/* 08-motion.css — motion layer (js/src/72-motion.js). Short (under 0.4s), never blocks typing, off for "reduce motion". */

@keyframes mvFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mvPop{ from{ opacity:0; transform:translateY(10px) scale(.965); } to{ opacity:1; transform:none; } }
@keyframes mvSheet{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }
@keyframes mvBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.09); } 100%{ transform:scale(1); } }
@keyframes mvRowIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@keyframes mvRowFlash{ 0%{ background:rgba(18,200,135,.22); } 100%{ background:transparent; } }
@keyframes mvOkIn{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); } 18%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); } 30%{ transform:translate(-50%,-50%) scale(1); } 78%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-50%) scale(.96); } }
@keyframes mvDraw{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion:no-preference){
  /* pages: soft fade on switch (opacity only, so fixed children never move) */
  .page.on{ animation:mvFade .2s ease-out; }

  /* windows: backdrop fades, card rises; bottom sheet on phones */
  .ov.on{ animation:mvFade .18s ease-out; }
  .ov.on .modal:not(.wn-modal){ animation:mvPop .24s cubic-bezier(.2,.9,.3,1) both; }

  /* buttons: small press */
  .btn:active,.cbtn:active,.ubtn:active{ transform:scale(.96); }

  /* numbers that just went up */
  .mv-bump{ display:inline-block; animation:mvBump .32s ease-out; }

  /* invoice rows */
  .inv-row.mv-row-in{ animation:mvRowIn .22s ease-out; }
  .inv-row.mv-row-flash{ animation:mvRowFlash .6s ease-out; }
  .inv-row.mv-row-out{ overflow:hidden; opacity:0; transform:translateX(24px); height:0 !important; padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0; border-width:0;
    transition:opacity .16s ease, transform .16s ease, height .18s ease, padding .18s ease, margin .18s ease; }
  html[dir="ltr"] .inv-row.mv-row-out{ transform:translateX(-24px); }
}
@media (prefers-reduced-motion:no-preference) and (max-width:768px){
  .ov.on .modal:not(.wn-modal){ animation-name:mvSheet; animation-duration:.26s; }
}

/* fly-to-cart picture */
.mv-fly{ position:fixed; z-index:100001; pointer-events:none; object-fit:cover; border-radius:12px; border:2px solid var(--gold2);
  box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .5s cubic-bezier(.5,0,.3,1), opacity .5s ease; will-change:transform; }

/* saved! check */
.mv-ok{ position:fixed; left:50%; top:50%; z-index:100001; width:110px; height:110px; pointer-events:none; border-radius:50%;
  background:rgba(8,22,18,.72); box-shadow:0 0 0 1px rgba(18,200,135,.35), 0 18px 50px rgba(0,0,0,.45), 0 0 40px rgba(18,200,135,.25);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:mvOkIn 1.05s cubic-bezier(.2,.9,.3,1) both; }
.mv-ok svg{ width:100%; height:100%; padding:18px; box-sizing:border-box; fill:none; stroke:var(--gold2); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.mv-ok-c{ stroke-dasharray:145; stroke-dashoffset:145; animation:mvDraw .38s ease-out .05s forwards; opacity:.55; }
.mv-ok-p{ stroke-dasharray:40; stroke-dashoffset:40; animation:mvDraw .26s ease-out .3s forwards; }
html.light .mv-ok{ background:rgba(240,245,242,.85); box-shadow:0 0 0 1px rgba(10,138,94,.35), 0 18px 50px rgba(0,0,0,.18); }

/* sale done window (#ov-done): the check pops and draws itself */
@keyframes mvCheckPop{ 0%{ transform:scale(.5); opacity:0; } 60%{ transform:scale(1.12); opacity:1; } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion:no-preference){
  #ov-done.on .modal > div:first-child svg{ animation:mvCheckPop .42s cubic-bezier(.2,.9,.3,1.2) .08s both; }
  #ov-done.on .modal > div:first-child polyline{ stroke-dasharray:24; stroke-dashoffset:24; animation:mvDraw .32s ease-out .22s forwards; }
}