/* TapCoin Pay motion tiles. One small animated illustration per major section.
   Pure SVG + CSS keyframes, started when the tile scrolls into view (motion.js adds .play).
   Honors prefers-reduced-motion: the tile renders its final frame and never moves. */
.sec-row{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:center;margin-bottom:48px}
.sec-row .sec-head{margin-bottom:0}
@media (max-width:860px){.sec-row{grid-template-columns:1fr;gap:20px}.sec-row .mg{max-width:360px}}
.mg{position:relative;aspect-ratio:9/5;border-radius:var(--r-lg,18px);background:linear-gradient(160deg,var(--surface-2,#182238),var(--surface,#121A2F));border:1px solid var(--line,rgba(244,246,251,.08));overflow:hidden;box-shadow:0 20px 60px -30px rgba(11,95,255,.45)}
.mg::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 80% 10%,rgba(11,95,255,.22),transparent 60%),radial-gradient(40% 60% at 10% 90%,rgba(34,230,165,.12),transparent 60%);pointer-events:none}
.mg svg{position:absolute;inset:0;width:100%;height:100%;font-family:var(--sans,Inter,system-ui,sans-serif)}
.mg .lbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;fill:var(--muted,#8A93A8)}
.mg .txt{font-size:12.5px;font-weight:600;fill:#F4F6FB}
.mg .mono{font-family:var(--mono,ui-monospace,monospace);font-size:11px;fill:#8A93A8}
.mg .box{fill:#0F1730;stroke:rgba(244,246,251,.14)}
.mg .box.hi{stroke:#3D80FF}
.mg .box.mint{stroke:#22E6A5}
.mg .wire{fill:none;stroke:rgba(244,246,251,.16);stroke-width:1.5}
.mg .wire.on{stroke:#3D80FF}
.mg .dot{fill:#22E6A5}
.mg .dot.blue{fill:#3D80FF}
.mg .chk{fill:none;stroke:#22E6A5;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.mg .pulse{transform-origin:center;transform-box:fill-box}

/* Everything animates only when .play is present. */
.mg.play .m-travel{offset-rotate:0deg;animation:mg-travel var(--d,3.2s) linear infinite}
.mg.play .m-fade{animation:mg-fade var(--d,3.2s) ease-in-out infinite}
.mg.play .m-pop{animation:mg-pop var(--d,3.2s) ease-out infinite}
.mg.play .m-float{animation:mg-float 4s ease-in-out infinite}
.mg.play .m-draw{animation:mg-draw var(--d,3.2s) ease-out infinite}
.mg.play .m-ring{animation:mg-ring 2.4s ease-out infinite}
.mg.play .m-blink{animation:mg-blink 1.2s steps(2,end) infinite}
.mg.play .m-slide{animation:mg-slide var(--d,3.2s) ease-in-out infinite}
.mg.play .m-grow{animation:mg-grow var(--d,3.2s) ease-out infinite;transform-origin:left center;transform-box:fill-box}
.mg.play .m-spin{animation:mg-spin 8s linear infinite;transform-origin:center;transform-box:fill-box}

@keyframes mg-travel{0%{offset-distance:0%;opacity:0}6%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes mg-fade{0%,20%{opacity:0}35%,80%{opacity:1}100%{opacity:0}}
@keyframes mg-pop{0%,55%{transform:scale(.6);opacity:0}68%{transform:scale(1.12);opacity:1}78%,90%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes mg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes mg-draw{0%,60%{stroke-dashoffset:30}80%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes mg-ring{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.8);opacity:0}}
@keyframes mg-blink{to{opacity:0}}
@keyframes mg-slide{0%,15%{transform:translateX(0)}55%,100%{transform:translateX(46px)}}
@keyframes mg-grow{0%,10%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
@keyframes mg-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .mg .m-travel,.mg .m-fade,.mg .m-pop,.mg .m-float,.mg .m-draw,.mg .m-ring,.mg .m-blink,.mg .m-slide,.mg .m-grow,.mg .m-spin{animation:none!important}
  .mg .m-travel{display:none}.mg .m-ring{display:none}
  .mg .m-fade,.mg .m-pop{opacity:1}
  .mg .chk{stroke-dashoffset:0}
  .mg .m-grow{transform:none}
}