/* =========================================================
   MPOS — motion layer
   Loaded after style.css. Everything here is decorative:
   with reduced motion turned on, it settles to the final state.
   ========================================================= */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Keyframes ---------- */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(24px); } }
@keyframes lineUp   { from { transform: translateY(110%); } }
@keyframes visualIn { from { opacity: 0; transform: translateY(48px) scale(.95); } }
@keyframes chipIn   { from { opacity: 0; transform: translateY(18px) scale(.85); } }
@keyframes popIn    { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(28px); } }
@keyframes artIn    { from { opacity: 0; transform: translateY(22px) scale(.96); } }
@keyframes barGrow  { from { width: 0; } }
@keyframes print    { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wipe     { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes scan     { from { left: 0; } to { left: calc(100% - 2px); } }
@keyframes ring     { 0% { box-shadow: 0 0 0 0 rgba(200,245,66,.55); } 100% { box-shadow: 0 0 0 16px rgba(200,245,66,0); } }
@keyframes glowBtn  { 50% { box-shadow: 0 0 0 6px rgba(200,245,66,.22); } }
@keyframes shine    { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }
@keyframes gridDrift{ to { background-position: 56px 56px, 56px 56px; } }
@keyframes orb      { to { transform: translate(-140px, 90px) scale(1.18); } }
@keyframes headerIn { from { opacity: 0; transform: translateY(-24px); } }
@keyframes bump     { 40% { transform: scale(1.08); } }

/* ---------- Scroll progress bar ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150;
  background: linear-gradient(90deg, var(--brand), var(--lime));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- Header: enter, compact shadow, hide on scroll down ---------- */
.header { animation: headerIn .8s var(--ease-out); }
.header__bar { transition: transform .5s var(--ease-out), box-shadow .3s, background .3s; }
.header.is-scrolled .header__bar { box-shadow: 0 18px 40px -14px rgba(0,0,0,.4); background: rgba(255,255,255,.97); }
.header.is-hidden .header__bar { transform: translateY(calc(-100% - 24px)); }
.header__nav a { position: relative; }
.header__nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--brand); transform: scaleX(0); transition: transform .35s var(--ease-out);
}
.header__nav a.is-active::after { transform: scaleX(1); }
.header__nav .header__nav-cta::after { display: none; }

/* ---------- Buttons: shine sweep + magnetic support ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s var(--ease), translate .35s var(--ease-out), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn--brand::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease-out);
}
.btn--brand:hover::after { transform: translateX(120%); }
.hero__actions .btn--brand::after { animation: shine 5s 2.6s infinite; }
.hero__actions .btn--brand:hover::after { animation: none; }
.btn:active { transform: translateY(0) scale(.97); }

/* ---------- Hero: load sequence ---------- */
.hero::before { animation: gridDrift 28s linear infinite; }
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; right: -140px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,174,239,.32), transparent 65%);
  filter: blur(24px);
  animation: orb 16s ease-in-out infinite alternate;
}
.hero__grid, .ticker { z-index: 1; }

.hero .tag { animation: fadeUp .8s var(--ease-out) .1s both; }
.hero__title .line { display: block; overflow: hidden; padding: .06em 0 .12em; margin-bottom: -.12em; }
.hero__title .line > span { display: inline-block; animation: lineUp 1.05s var(--ease-out) both; }
.hero__title .line:nth-child(1) > span { animation-delay: .18s; }
.hero__title .line:nth-child(2) > span { animation-delay: .32s; }
.hero__lead { animation: fadeUp .9s var(--ease-out) .55s both; }
.hero__actions { animation: fadeUp .9s var(--ease-out) .7s both; }
.hero__perks li { animation: fadeUp .7s var(--ease-out) both; }
.hero__perks li:nth-child(1) { animation-delay: .85s; }
.hero__perks li:nth-child(2) { animation-delay: .95s; }
.hero__perks li:nth-child(3) { animation-delay: 1.05s; }

.hero__visual { animation: visualIn 1.3s var(--ease-out) .35s both; }
.chip { translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * -18px); transition: translate .4s var(--ease-out); }
.chip--a { animation: chipIn .8s var(--ease-back) 1.15s both, float 6s ease-in-out 2s infinite; }
.chip--b { animation: chipIn .8s var(--ease-back) 1.35s both, float 6s ease-in-out 3.5s infinite; }

/* Hero screen follows the pointer (vars set in animations.js) */
.screen { transform: perspective(1400px) rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg)); }
.screen:hover { transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.screen.is-tilting { transition: transform .2s ease-out; }
.screen--static, .screen--static:hover { transform: none; }
.screen__play svg { animation: ring 2.2s ease-out 2s infinite; }

.ticker:hover .ticker__track { animation-play-state: paused; }

/* ---------- Scroll reveal (variants) ---------- */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  filter: blur(8px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}
.js .reveal[data-reveal="left"]  { transform: translate3d(-52px, 0, 0); }
.js .reveal[data-reveal="right"] { transform: translate3d(52px, 0, 0); }
.js .reveal[data-reveal="scale"] { transform: scale(.94); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* Eyebrow line draws in */
.js .reveal .tag::before { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out) .3s; }
.js .reveal.is-in .tag::before { transform: scaleX(1); }

/* Highlighter sweeps across <mark> */
.js mark {
  background: linear-gradient(rgba(0,174,239,.3), rgba(0,174,239,.3)) no-repeat 0 88% / 0% 34%;
  transition: background-size 1.1s var(--ease-out) .5s;
}
.js .is-in mark { background-size: 100% 34%; }

/* Check lists cascade */
.js .reveal .checks li { opacity: 0; transform: translateX(-12px); }
.js .reveal.is-in .checks li { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .reveal.is-in .checks li:nth-child(1) { transition-delay: .3s; }
.js .reveal.is-in .checks li:nth-child(2) { transition-delay: .38s; }
.js .reveal.is-in .checks li:nth-child(3) { transition-delay: .46s; }
.js .reveal.is-in .checks li:nth-child(4) { transition-delay: .54s; }
.js .reveal.is-in .checks li:nth-child(5) { transition-delay: .62s; }
.js .reveal.is-in .checks li:nth-child(6) { transition-delay: .7s; }

/* ---------- Stats ---------- */
.stat::after {
  content: ""; display: block; width: 40px; height: 3px; margin-top: 18px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--lime));
}
.js .stat::after { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) .45s; }
.js .stat.is-in::after { transform: scaleX(1); }

/* ---------- Modules (tabs) ---------- */
.modules__tabs button { position: relative; overflow: hidden; }
.modules__tabs button::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--lime); transform: scaleY(0); transition: transform .45s var(--ease-out);
}
.modules__tabs button[aria-selected="true"]::after { transform: scaleY(1); }

.modules.is-in .panel:not([hidden]) .panel__copy > * { animation: fadeUp .6s var(--ease-out) both; }
.modules.is-in .panel:not([hidden]) .panel__copy > :nth-child(2) { animation-delay: .07s; }
.modules.is-in .panel:not([hidden]) .panel__copy > :nth-child(3) { animation-delay: .14s; }
.modules.is-in .panel:not([hidden]) .panel__art { animation: artIn .8s var(--ease-out) .12s both; }

.modules.is-in .panel:not([hidden]) .stock__row b::after { animation: barGrow 1.2s var(--ease-out) both; }
.modules.is-in .panel:not([hidden]) .stock__row:nth-child(1) b::after { animation-delay: .35s; }
.modules.is-in .panel:not([hidden]) .stock__row:nth-child(2) b::after { animation-delay: .45s; }
.modules.is-in .panel:not([hidden]) .stock__row:nth-child(3) b::after { animation-delay: .55s; }
.modules.is-in .panel:not([hidden]) .stock__row:nth-child(4) b::after { animation-delay: .65s; }

.modules.is-in .panel:not([hidden]) .paytypes span { animation: slideIn .6s var(--ease-out) both; }
.modules.is-in .panel:not([hidden]) .paytypes span:nth-child(1) { animation-delay: .3s; }
.modules.is-in .panel:not([hidden]) .paytypes span:nth-child(2) { animation-delay: .4s; }
.modules.is-in .panel:not([hidden]) .paytypes span:nth-child(3) { animation-delay: .5s; }

.modules.is-in .panel:not([hidden]) .order strong { animation: fadeUp .6s var(--ease-out) .3s both; }
.modules.is-in .panel:not([hidden]) .order i { animation: popIn .6s var(--ease-back) .75s both; }

/* ---------- Feature cards ---------- */
.feat::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(0,174,239,.13), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.feat--hero::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 60%); }
.feat--dark::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(200,245,66,.12), transparent 60%); }
.feat:hover::before { opacity: 1; }
.feat > * { position: relative; }
.feat__icon { transition: transform .55s var(--ease-back), background .3s; }
.feat:hover .feat__icon { transform: rotate(-8deg) scale(1.12); background: var(--brand); color: var(--white); }

/* Receipt "prints" top-down, then the barcode gets scanned */
.js .feat--hero .receipt { clip-path: inset(0 0 100% 0); }
.feat--hero.is-in .receipt { animation: print 1.5s var(--ease-out) .45s both; }
.feat--hero.is-in .receipt__btn { animation: glowBtn 2.2s ease-in-out 2.2s infinite; }
.receipt__barcode { position: relative; }
.feat--hero.is-in .receipt__barcode::after {
  content: ""; position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: #ff3b30; box-shadow: 0 0 10px 1px rgba(255,59,48,.8);
  animation: scan 1.8s ease-in-out 2s infinite alternate both;
}

.js .feat--dark .branches span { opacity: 0; }
.feat--dark.is-in .branches span { animation: popIn .55s var(--ease-back) both; }
.feat--dark.is-in .branches span:nth-child(1) { animation-delay: .35s; }
.feat--dark.is-in .branches span:nth-child(2) { animation-delay: .45s; }
.feat--dark.is-in .branches span:nth-child(3) { animation-delay: .55s; }
.feat--dark.is-in .branches span:nth-child(4) { animation-delay: .65s; }

/* ---------- Analytics ---------- */
.js .analytics__shot .screen img { clip-path: inset(0 100% 0 0); }
.analytics__shot.is-in .screen img { animation: wipe 1.3s var(--ease-out) .35s both; }
.js .metric { opacity: 0; }
.analytics__shot.is-in .metric { animation: popIn .8s var(--ease-back) 1.1s both; }
.big-num { display: inline-block; }

/* ---------- Focus steps ---------- */
.steps li { transition: border-color .3s, background .3s, translate .4s var(--ease-out); }
.steps li:hover { translate: 6px 0; }
.js .steps li::before { transform: scale(0) rotate(-120deg); }
.steps li.is-in::before { transform: none; transition: transform .8s var(--ease-back) .3s; }

/* ---------- Pricing ---------- */
.billing { position: relative; isolation: isolate; }
.billing::before {
  content: ""; position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 0;
  width: var(--iw, 0); transform: translateX(var(--ix, 0));
  border-radius: 999px; background: var(--ink);
  transition: transform .5s var(--ease-out), width .5s var(--ease-out);
}
.billing.has-indicator button[aria-checked="true"] { background: transparent; }
.plan.is-switching .plan__price strong { opacity: 1; }
.plan__price strong { display: inline-block; transform-origin: left bottom; }
.plan__price strong.is-bump { animation: bump .5s var(--ease-out); }
.plan__features .checks li { transition: translate .3s var(--ease-out); }
.plan__features .checks li:hover { translate: 4px 0; }

/* ---------- FAQ ---------- */
.faq__list details p { overflow: hidden; }
.faq__list summary { transition: color .25s; }
.faq__list summary:hover { color: var(--brand-deep); }

/* ---------- Contact ---------- */
.contact { position: relative; overflow: hidden; isolation: isolate; }
.contact::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 480px; height: 480px; left: -160px; bottom: -220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,245,66,.14), transparent 65%);
  animation: orb 18s ease-in-out infinite alternate-reverse;
}
.form input, .form select, .form textarea { transition: border-color .25s, background .25s, box-shadow .3s; }
.form input:focus, .form select:focus, .form textarea:focus { box-shadow: 0 0 0 4px rgba(0,174,239,.16); }
.form__note { transition: opacity .3s; }

/* ---------- Footer & misc ---------- */
.footer nav a { transition: color .2s, translate .3s var(--ease-out); }
.footer nav a:hover { translate: 4px 0; }
.to-top:hover { translate: 0 -4px; }
.to-top { transition: opacity .3s, transform .3s var(--ease), translate .3s var(--ease-out); }

/* ---------- Mobile: keep it calm ---------- */
@media (max-width: 920px) {
  .screen, .screen:hover { transform: none; }
  .hero::after { width: 380px; height: 380px; }
}
@media (hover: none) {
  .feat::before { display: none; }
}

/* ---------- Reduced motion: show everything, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { filter: none; transform: none; opacity: 1; }
  .js .reveal .checks li, .js .feat--dark .branches span, .js .metric { opacity: 1; transform: none; }
  .js .feat--hero .receipt, .js .analytics__shot .screen img { clip-path: none; }
  .js mark { background-size: 100% 34%; }
  .js .stat::after, .js .reveal .tag::before, .js .steps li::before { transform: none; }
  .hero::after, .contact::before, .receipt__barcode::after { animation: none !important; }
}


/* =========================================================
   Round 2 — live data, scroll-linked motion, text effects
   ========================================================= */

@keyframes draw     { to { stroke-dashoffset: 0; } }
@keyframes amountIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes sheen    { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } }
@keyframes ripple   { to { transform: scale(1); opacity: 0; } }
@keyframes zoomFrom { from { opacity: 0; transform: scale(.25); } }
@keyframes shimmer  { to { background-position: -200% 0; } }
@keyframes tickIn   { from { opacity: 0; transform: translateY(-12px); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Section headings rise word by word ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
.js .w__i {
  display: inline-block; transform: translateY(110%);
  transition: transform .95s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms + 120ms);
}
.js .is-in .w__i { transform: none; }

/* ---------- Hero ---------- */
/* Shimmer passes across the coloured headline line */
.hero__title .line:nth-child(2) > span {
  background: linear-gradient(100deg, var(--brand) 0 40%, #a6ecff 50%, var(--brand) 60% 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lineUp 1.05s var(--ease-out) .32s both, sheen 5.5s ease-in-out 1.8s infinite;
}

/* Soft light that follows the cursor */
.hero__spot {
  position: absolute; left: -320px; top: -320px; z-index: 0; pointer-events: none;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,174,239,.17), transparent 60%);
  opacity: 0; transition: opacity .6s, transform .3s ease-out;
}
.hero__spot.is-on { opacity: 1; }

/* Sparkline draws itself inside the "Real-time" chip */
.chip .spark { width: 64px; height: 26px; margin-left: 4px; fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chip .spark path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.6s var(--ease-out) 1.8s forwards; }

/* Live "new sale" chip */
.chip--c { right: -30px; bottom: 24%; animation: chipIn .8s var(--ease-back) 1.55s both, float 6s ease-in-out 4.6s infinite; }
.chip__icon--ink { background: var(--ink); color: var(--lime); }
.chip__amount { display: inline-block; font-family: var(--font-mono); font-weight: 700; color: #2f8a3b; }
.chip__amount.is-swap { animation: amountIn .5s var(--ease-out); }
.chip--c.is-ping .chip__icon { animation: ring .9s ease-out; }

/* Screenshots: shimmer placeholder, then fade in once loaded */
.js .screen:not(.is-ready) {
  background: linear-gradient(100deg, var(--ink-2) 30%, var(--ink-3) 50%, var(--ink-2) 70%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
.js .analytics__shot .screen:not(.is-ready) {
  background: linear-gradient(100deg, var(--paper) 30%, var(--white) 50%, var(--paper) 70%);
  background-size: 200% 100%;
}
.js .screen img { opacity: 0; transition: opacity .8s var(--ease-out); }
.js .screen img.is-loaded { opacity: 1; }

/* Ticker leans and speeds up with scroll velocity */
.ticker span { transform: skewX(var(--skew, 0deg)); }

/* ---------- Buttons: click ripple ---------- */
.btn .ripple {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .28; transform: scale(0);
  animation: ripple .7s var(--ease-out) forwards;
}

/* Link underline retracts and redraws */
.link-arrow {
  border-bottom: 0; padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 2px;
  transition: background-size .45s var(--ease-out);
}
.link-arrow:hover { background-size: 0% 2px; background-position: 100% 100%; }

/* ---------- Modules: live numbers ---------- */
.modules.is-in .panel:not([hidden]) .stock__row b::after { animation-fill-mode: backwards; }
.stock__row b::after { transition: width .9s var(--ease-out), background .4s; }
.stock__row em { transition: color .3s; font-variant-numeric: tabular-nums; }
.modules.is-in .panel:not([hidden]) .order strong.is-new { animation: tickIn .5s var(--ease-out) both; }

/* ---------- 3D tilt on cards (vars set in JS) ---------- */
.feat {
  transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0px));
  transition: transform .55s var(--ease-out), box-shadow .35s;
}
.feat:hover { --lift: -6px; transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift)); }
.feat.is-tilting { transition: transform .15s ease-out, box-shadow .35s; }
.plan { transform: perspective(1400px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .6s var(--ease-out); }
.plan.is-tilting { transition: transform .15s ease-out; }

/* ---------- Focus steps: progress line fills as you scroll ---------- */
.steps { position: relative; }
.steps::before, .steps::after { content: ""; position: absolute; left: -38px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; }
.steps::before { background: var(--line-light); }
.steps::after { background: linear-gradient(var(--brand), var(--lime)); transform-origin: top; transform: scaleY(var(--sp, 0)); }
.steps li.is-active { border-color: rgba(200,245,66,.4); }

/* ---------- Video opens from where you clicked ---------- */
.modal__box { transform-origin: var(--ox, 50%) var(--oy, 50%); animation: zoomFrom .6s var(--ease-out); }

/* ---------- Back-to-top shows scroll progress as a ring ---------- */
.to-top::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--sp, 0) * 360deg), rgba(10,22,40,.12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}

/* ---------- Footer: giant wordmark fills in on scroll ---------- */
.footer__mark {
  position: relative; margin-top: 8px; margin-bottom: 28px; text-align: center; user-select: none;
  font-family: var(--font-display); font-weight: 800; line-height: .82; letter-spacing: -.05em;
  font-size: clamp(5rem, 21vw, 19rem);
  color: transparent; -webkit-text-stroke: 1.5px rgba(10,22,40,.16);
}
.footer__mark::after {
  content: attr(data-text); position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ink), var(--brand) 70%, var(--lime));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0;
  clip-path: inset(0 calc((1 - var(--fp, 0)) * 100%) 0 0);
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .steps::before, .steps::after { display: none; }
}
@media (max-width: 620px) {
  .chip--c { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .w__i { transform: none; }
  .chip .spark path { stroke-dashoffset: 0; }
  .hero__spot { display: none; }
  .footer__mark { --fp: 1; }
  .steps { --sp: 1; }
  .feat, .feat:hover, .plan { transform: none; }
}