/* ───────────── Motion (v1.16) ─────────────
   Light, quick animations across the site. Everything here switches off for
   people who ask their device for less motion. Reveal effects only start once
   motion.js has run (html.mo-js), so nothing is hidden if scripts fail. */
:root { --mo-ease: cubic-bezier(.22, 1, .36, 1); }

/* Reveal on scroll (cards, stats, tables, shop cards) */
.mo-js .mo-r { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .55s var(--mo-ease), transform .55s var(--mo-ease); transition-delay: var(--mo-d, 0ms); }
.mo-js .mo-r.mo-in { opacity: 1; transform: none; }

/* Buttons: lift on hover, press on tap, soft sheen on primary */
.btn, .sf-btn, .sf-pill, .pay-tab, .sf-ptab, .sf-bar a, .tc-ml, .pay-method, .ms-way, .po-chip, .dup-opt { transition: transform .18s var(--mo-ease), box-shadow .18s var(--mo-ease), background-color .2s, border-color .2s, color .2s; }
.btn:hover:not(:disabled), .sf-btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled), .sf-btn:active:not(:disabled), .sf-pc:active, .pay-tab:active, .sf-ptab:active { transform: scale(.97); }
.btn-primary, .btn-gradient, .sf-btn:not(.ghost), .sf-pc-buy { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-gradient::after, .sf-btn:not(.ghost)::after, .sf-pc-buy::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); }
.btn-primary:hover::after, .btn-gradient:hover::after, .sf-btn:not(.ghost):hover::after, .sf-pc:hover .sf-pc-buy::after { animation: moSheen .9s var(--mo-ease); }
@keyframes moSheen { to { transform: translateX(120%); } }

/* Tap ripple (added by motion.js) */
.mo-ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .35; background: currentColor; animation: moRipple .55s ease-out forwards; }
@keyframes moRipple { to { transform: scale(2.6); opacity: 0; } }

/* Inputs: gentle glow on focus */
.form-control, .sf-input { transition: border-color .2s, box-shadow .25s var(--mo-ease), background-color .2s; }

/* Cards: lift on hover where clickable */
.stat-card, .card, .ms-check a, .sf-row, .po-contact-main { transition: transform .25s var(--mo-ease), box-shadow .25s var(--mo-ease), border-color .2s; }
a.stat-card:hover, .ms-check a:hover, .sf-row:hover { transform: translateY(-2px); }

/* Alerts slide in */
.alert, .sf-alert { animation: moSlide .45s var(--mo-ease) both; }
@keyframes moSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Badges for live statuses breathe */
.badge-info, .badge-warning { animation: moBreathe 2.4s ease-in-out infinite; }
@keyframes moBreathe { 50% { filter: brightness(1.15); } }

/* ── Sign-in / register / contact pages ── */
.ax-shell { position: relative; overflow: hidden; }
.ax-shell::before, .ax-shell::after { content: ""; position: absolute; z-index: 0; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .22; pointer-events: none;
  background: radial-gradient(circle, var(--primary), transparent 65%); animation: moFloat 16s ease-in-out infinite alternate; }
.ax-shell::before { top: -18vmax; left: -14vmax; }
.ax-shell::after { bottom: -20vmax; right: -16vmax; animation-duration: 20s; animation-direction: alternate-reverse; background: radial-gradient(circle, var(--accent, var(--primary)), transparent 65%); }
.ax-shell > * { position: relative; z-index: 1; }
@keyframes moFloat { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vmax, 4vmax) scale(1.12); } }
.auth-card, .auth-side { animation: moRise .7s var(--mo-ease) both; }
.auth-side { animation-delay: .08s; }
.auth-card .form-group, .auth-card .btn, .auth-card .auth-title, .auth-card .auth-sub, .auth-card .auth-eyebrow { animation: moRise .6s var(--mo-ease) both; }
.auth-card .auth-eyebrow { animation-delay: .05s; } .auth-card .auth-title { animation-delay: .1s; } .auth-card .auth-sub { animation-delay: .15s; }
.auth-card .form-group:nth-of-type(1) { animation-delay: .2s; } .auth-card .form-group:nth-of-type(2) { animation-delay: .26s; }
.auth-card .form-group:nth-of-type(3) { animation-delay: .32s; } .auth-card .btn { animation-delay: .38s; }
@keyframes moRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.auth-card .btn-primary { background-size: 200% 100%; }

/* Count-up numbers don't jitter */
[data-mo-count] { font-variant-numeric: tabular-nums; }

/* ── Shops ── */
.sf-avatar { animation: moPop .7s var(--mo-ease) both, moGlow 4s ease-in-out 1s infinite; }
@keyframes moPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes moGlow { 50% { box-shadow: 0 12px 34px rgba(0,0,0,.25), 0 0 0 8px rgba(255,255,255,.08); } }
.sf-top h1, .sf-top .sf-tag, .sf-top .sf-about-line { animation: moRise .6s var(--mo-ease) both; }
.sf-top h1 { animation-delay: .1s; } .sf-top .sf-tag { animation-delay: .18s; } .sf-top .sf-about-line { animation-delay: .24s; }
.sf-top::before { animation: moFloat 14s ease-in-out infinite alternate; }
.sf-bar a { position: relative; }
.sf-bar a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -3px; height: 3px; border-radius: 3px; background: var(--sf-primary); transform: scaleX(0); transition: transform .3s var(--mo-ease); }
.sf-bar a:hover::after { transform: scaleX(.5); }
.sf-pc { transition: transform .25s var(--mo-ease), box-shadow .25s var(--mo-ease); }
.sf-pc:hover { transform: translateY(-5px) rotate(-.3deg); }
.sf-pc-img img, .sf-pc-img b { transition: transform .35s var(--mo-ease); }
.sf-pc:hover .sf-pc-img img, .sf-pc:hover .sf-pc-img b { transform: scale(1.07); }
.sf-pc.mo-swap { animation: moCardIn .45s var(--mo-ease) both; animation-delay: var(--mo-d, 0ms); }
@keyframes moCardIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.sf-fab-btn { animation: moPop .6s var(--mo-ease) .6s both; }
.sf-fab-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.55); animation: moRing 2.6s ease-out 1.5s infinite; }
.sf-fab-btn { position: relative; }
@keyframes moRing { 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.sf-fab-menu a { transition: transform .2s var(--mo-ease), background-color .2s; }
.sf-fab-menu a:hover { transform: translateX(3px); }
.sf-sheet:not([hidden]) { animation: moFade .25s ease-out; }
@keyframes moFade { from { opacity: 0; } to { opacity: 1; } }
.sf-status .ico { animation: moPop .6s var(--mo-ease) both; }
.sf-status.delivered .ico { animation: moPop .6s var(--mo-ease) both, moBounce 1.2s var(--mo-ease) .6s 1; }
@keyframes moBounce { 30% { transform: scale(1.12); } 60% { transform: scale(.96); } }
.sf-tagprice { animation: moPop .5s var(--mo-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .mo-js .mo-r { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ax-shell::before, .ax-shell::after { display: none; }
}