/* ══ Motion for every platform page ════════════════════════════════════════
   The website, the account app, the shop panel and the owner console move the
   way the shop websites do (web/static/shop.css):
     · a page arrives with a fade and a slight slide;
     · blocks further down fade up as they scroll in, grids one card after
       another;
     · light ↔ dark glides instead of snapping;
     · pictures fade in as they arrive; a slow page shows a thin progress bar.
   Served from /static (every host has it). Nothing is hidden at first paint —
   only what is still below the fold waits for its turn — and all of it is off
   under prefers-reduced-motion (motion.js never adds html.mo then). */

@keyframes mo-page{from{opacity:0;transform:translateX(14px)}}
@keyframes mo-up{from{opacity:0;transform:translateY(16px)}}

/* A page arriving: the website's <main>, the app's page, a panel or console
   page (#page — swapped in the background, so it animates on every change).
   Plain CSS from the very first frame, like the shop websites: waiting for the
   script meant the page painted still and only then slid — or not at all.
   `backwards` only: nothing is left on the element once it ends, so no
   transform lingers to pin fixed-position children to it. */
@media (prefers-reduced-motion:no-preference){
  body > main,
  .ax-page:not(:has(#page)),
  #page{animation:mo-page .36s cubic-bezier(0,0,.2,1) backwards}
}

/* Scrolling in: a block below the fold waits, then fades up. */
html.mo .mo-pre{opacity:0;transform:translateY(16px)}
html.mo .mo-pre.mo-in{opacity:1;transform:none;transition:opacity .45s ease-out,transform .45s ease-out;transition-delay:var(--mo-d,0s)}
/* A grid below the fold: its cards arrive one after another. */
html.mo .mo-stagger > *{animation:mo-up .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--mo-i,0) * 45ms)}
html.mo .mo-wait > *{opacity:0}

/* Light ↔ dark: every colour moves together, over the same moment. */
.mo-theme,.mo-theme *,.mo-theme *::before,.mo-theme *::after{
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,fill .35s ease,stroke .35s ease,
             box-shadow .35s ease !important;transition-delay:0s !important}

/* Pictures fade in as they arrive; one already loaded is never hidden. */
html.mo img.mo-img{opacity:0;transition:opacity .45s ease}
html.mo img.mo-img.mo-loaded{opacity:1}

/* A slow page (the website's full page loads): a thin bar at the very top. */
#mo-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:3000;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,#1a73ff,#7c4dff);transition:width .3s ease,opacity .25s ease}
#mo-progress.go{opacity:1;width:72%;transition:width 8s cubic-bezier(.1,.6,.1,1),opacity .1s}

/* Cards that are links lift a little under the pointer. */
html.mo a.botcard,html.mo a.cc,html.mo .ax-shop,html.mo .dx-quick .qa{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
html.mo a.botcard:hover,html.mo a.cc:hover,html.mo .ax-shop:hover,html.mo .dx-quick .qa:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  body > main,.ax-page,#page,html.mo .mo-stagger > *{animation:none !important}
  html.mo .mo-pre,html.mo .mo-wait > *,html.mo img.mo-img{opacity:1 !important;transform:none !important}
}