/* Shared motion. fx.js adds the classes; reduced motion skips them. */
.top{transition:background .25s,box-shadow .25s,height .25s}
.top.scrolled{background:rgba(11,15,28,.94);box-shadow:0 10px 40px rgba(0,0,0,.45)}

/* Scroll reveals only run once fx.js has marked <html class="fx">: without JS, or if it fails, everything just shows. */
.fx .fx-rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.fx .fx-rv.in{opacity:1;transform:none}
.fx .ladder2 > div.fx-rv{transform:translateY(calc(var(--i) * -12px + 30px)) scale(.9)}
.fx .ladder2 > div.fx-rv.in{transform:translateY(calc(var(--i) * -12px))}
@media(prefers-reduced-motion:reduce){.fx .fx-rv,.fx .ladder2 > div.fx-rv{opacity:1;transition:none}}
@media print{.fx .fx-rv{opacity:1;transform:none}}

/* Buttons press in a little. */
.btn{transition:transform .12s,filter .15s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn.sun:hover{box-shadow:0 10px 30px rgba(255,201,40,.35)}


/* Home "fast and easy": the steps play in turn with a filling progress line, and the card shows each step
   (GameBoost animated checkout mockup). Scenes share one grid cell so the card keeps one height. */
.steps2 li{position:relative;transition:border-color .3s}
.steps2 li b,.steps2 li h4{transition:color .3s}
.steps2 li:not(.on) h4{color:#c9d3ec}
.steps2 li.on{border-left-color:rgba(255,201,40,.22)}
.steps2 li.on::before{content:"";position:absolute;left:-3px;top:0;width:3px;height:100%;background:var(--sun);transform-origin:top;animation:howGrow var(--dur,4200ms) linear forwards}
.steps2.paused li.on::before{animation:none;transform:none}
@keyframes howGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.scenes{display:grid;grid-template-columns:minmax(0,1fr)}
.scene{min-width:0}
.scene{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s,transform .45s,visibility .45s}
.scene.on{opacity:1;visibility:visible;transform:none}
.scene .btn{position:relative;overflow:hidden;width:100%;margin-top:14px;padding:14px}
/* 1: pick the goal */
.scenes .pk{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.scenes .pk img{width:40px;height:40px;object-fit:contain}
.scenes .pk b{font-size:15px}.scenes .pk small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.scenes .pk .pr{margin-left:auto;font-size:20px;font-weight:900;color:var(--sun)}
.scenes .pk.goal{margin-top:10px;border-color:var(--blue2);background:rgba(47,107,255,.12)}
.scenes .tiers-m{display:flex;justify-content:space-between;gap:6px;padding:6px 4px}
.scenes .tiers-m img{width:44px;height:44px;object-fit:contain;opacity:.4;filter:grayscale(.6);transition:all .3s}
.scenes .scene.play .tiers-m img{animation:howTier .5s ease both}
.scenes .scene.play .tiers-m img:nth-child(2){animation-delay:.1s}.scenes .scene.play .tiers-m img:nth-child(3){animation-delay:.2s}.scenes .scene.play .tiers-m img:nth-child(4){animation-delay:.3s}.scenes .scene.play .tiers-m img:nth-child(5){animation-delay:.4s}.scenes .scene.play .tiers-m img:nth-child(6){animation-delay:.5s}
.scenes .scene.play .tiers-m .pick{animation:howPick .6s .9s ease both}
.scenes .scene.play .pk.goal{animation:howUp .5s 1.4s ease both}
.scenes .scene.play.s1 .btn{animation:howPress .5s 2.6s ease both}
@keyframes howTier{from{opacity:0;transform:translateY(8px)}to{opacity:.4;transform:none}}
@keyframes howPick{from{opacity:.4;transform:none}50%{transform:scale(1.35)}to{opacity:1;filter:none;transform:scale(1.2);filter:drop-shadow(0 0 12px rgba(255,201,40,.55))}}
@keyframes howUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes howPress{0%,100%{transform:none}50%{transform:scale(.96);filter:brightness(1.15)}}
/* 2: pay */
.scenes .scene.play.s2 .pay:nth-child(4) .r{animation:howRadio .3s .7s ease both}
.scenes .scene.play.s2 .pay:nth-child(4){animation:howRow .6s .5s ease both}
.scenes .scene.play.s2 .btn{animation:howPress .5s 1.7s ease both}
.scenes .s2 .paid{position:absolute;inset:0;display:grid;place-items:center;background:#22a06b;color:#fff;font-weight:800;opacity:0}
.scenes .scene.play.s2 .paid{animation:howFade .4s 2.2s ease both}
@keyframes howRadio{to{border:5px solid var(--blue2)}}
@keyframes howRow{0%{background:transparent}40%{background:rgba(47,107,255,.14)}100%{background:rgba(47,107,255,.06)}}
@keyframes howFade{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
/* 3: a pro starts */
.scenes .ost{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:99px;background:rgba(43,182,115,.14);color:#5ee6a0;font-weight:800;font-size:13px}
.scenes .ost i{width:8px;height:8px;border-radius:50%;background:#5ee6a0;animation:howPulse 1.4s infinite}
.scenes .pro{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.scenes .pro img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.scenes .pro b{font-size:15px}.scenes .pro small{display:block;color:var(--mute);font-size:12px}
.scenes .pro .on{margin-left:auto;font-size:12px;font-weight:800;color:#5ee6a0}
.scenes .bub{max-width:82%;margin-top:12px;padding:10px 13px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.06);font-size:14px;line-height:1.4}
.scenes .bub.me{margin-left:auto;border-radius:14px 14px 4px 14px;background:var(--blue2)}
.scenes .typing{display:flex;gap:4px;margin-top:10px;padding:10px 13px;width:max-content;border-radius:14px;background:rgba(255,255,255,.06)}
.scenes .typing i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:howDot 1s infinite}
.scenes .typing i:nth-child(2){animation-delay:.15s}.scenes .typing i:nth-child(3){animation-delay:.3s}
.scenes .scene.play .ost{animation:howFade .4s .1s ease both}
.scenes .scene.play .pro{animation:howUp .5s .5s ease both}
.scenes .scene.play .bub{animation:howUp .4s 1.2s ease both}
.scenes .scene.play .bub.me{animation-delay:2.1s}
.scenes .scene.play .typing{animation:howUp .3s 2.9s ease both}
@keyframes howPulse{50%{box-shadow:0 0 0 6px rgba(94,230,160,0)}0%{box-shadow:0 0 0 0 rgba(94,230,160,.6)}}
@keyframes howDot{50%{transform:translateY(-3px);opacity:.5}}
/* 4: watch the climb */
.scenes .gm{display:grid;grid-template-columns:36px 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.03);border-left:3px solid #5ee6a0}
.scenes .gm+.gm{margin-top:8px}
.scenes .gm img{grid-row:1/3;width:36px;height:36px;border-radius:9px;object-fit:cover}
.scenes .gm b{font-size:14px;color:#5ee6a0}.scenes .gm small{grid-column:2;color:var(--mute);font-size:12px}
.scenes .gm em{grid-row:1/3;grid-column:3;font-style:normal;font-weight:900;color:#5ee6a0}
.scenes .lp{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12px;font-weight:700;color:var(--mute)}
.scenes .lp .bar{flex:1;height:8px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.scenes .lp .bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--blue2),var(--sun))}
.scenes .promo{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px;border-radius:12px;border:1px solid rgba(255,201,40,.4);background:rgba(255,201,40,.08)}
.scenes .promo img{width:42px;height:42px;object-fit:contain}
.scenes .promo b{font-size:15px;color:var(--sun)}.scenes .promo small{display:block;color:var(--mute);font-size:12px}
.scenes .scene.play .gm{animation:howSlide .45s ease both}
.scenes .scene.play .gm:nth-child(3){animation-delay:.55s}.scenes .scene.play .gm:nth-child(4){animation-delay:1.1s}
.scenes .scene.play .lp .bar i{animation:howBar 1.6s .5s ease forwards}
.scenes .scene.play .promo{animation:howPop .5s 2.3s cubic-bezier(.3,1.6,.5,1) both}
@keyframes howSlide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes howBar{to{width:100%}}
@keyframes howPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.scene,.scene *{animation:none!important;transition:none!important}.lp .bar i{width:100%}.s2 .paid{display:none}.steps2 li.on::before{animation:none}}
@media(max-width:600px){.how .mock{padding:24px 0}.how .mock .chip{display:none}}
/* Payment logo chips behind the home checkout card drift slowly, each on its own timing. */
@media(prefers-reduced-motion:no-preference){.how .mock .chip{animation:howDrift 7s ease-in-out var(--d,0s) infinite alternate}}
@keyframes howDrift{from{transform:rotate(var(--r)) translateY(0)}to{transform:rotate(var(--r)) translateY(-12px)}}
.how .mock .chip img[src$="paypal.svg"],.how .mock .chip img[src$="bitcoin.svg"]{height:24px}

/* Page loader on internal links (fx.js). pattern: Mobile Legends site loader (mobilelegends.com):
   full-screen dark cover, small logo in a spinning gradient ring. Ours: the header logo, yellow to blue ring.
   It shows at once (no fade in), because the next page is often there within a tenth of a second. */
.pload{position:fixed;inset:0;z-index:9999;display:none;place-items:center;background:var(--bg)}
.pload.on{display:grid}
.pload>*{grid-area:1/1}
.pload .eyelogo{height:58px;filter:drop-shadow(0 4px 14px rgba(255,201,40,.35));animation:ppop .25s cubic-bezier(.2,1.4,.4,1) both}
.pload .eyelogo img{display:block;width:100%;height:100%}
.pring{width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--sun),var(--sun2),var(--blue),var(--sky),var(--sun));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:pspin .9s linear infinite}
@keyframes pspin{to{transform:rotate(1turn)}}
@keyframes ppop{from{transform:scale(.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.pring{animation-duration:3s}.pload .eyelogo{animation:none}}