/* STOXA welcome bonus: Stoxa lime on the Ares layout + the motion hero (same moves as the launch video).
   Animations use transform / opacity only; loops pause off screen (.offscreen) and for reduced motion. */
:root { --iris: #d7ff2f; --avatar: #16210a; --avatar-text: #d7ff2f; --lime: #d7ff2f; --lime-2: #9fd400; --ink: #050607; }
body { background: #050607; }
.hd-name { letter-spacing: .02em; }
.hd-logo { box-shadow: 0 0 18px rgba(215, 255, 47, .35); }
.code { color: var(--lime); font-family: var(--mono); letter-spacing: .06em; }
.mono { font-family: var(--mono); }
.sx-terms { margin: 4px 2px 0; font-size: 12px; line-height: 1.5; color: var(--dim); }

/* ---------------------------------------------------------------- motion hero */
.sx-hero { position: relative; max-width: 480px; margin: 12px auto 0; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(215, 255, 47, .18), 0 24px 60px -20px rgba(215, 255, 47, .25); }
@media (max-width: 520px) { .sx-hero { margin: 12px 12px 0; } }
.sx-band { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 88% 50%; z-index: -2; animation: bandIn 1.4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bandIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.sx-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 6, 7, .95) 0%, rgba(5, 6, 7, .82) 42%, rgba(5, 6, 7, .2) 62%, rgba(5, 6, 7, 0) 75%); }
.sx-in { position: absolute; left: 0; top: 0; bottom: 26px; width: 62%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 0 0 0 16px; }

/* the Stoxa X builds itself from 4 pieces, then a glint sweeps across it */
.sx-mark { position: relative; flex: none; width: 46px; height: 46px; filter: drop-shadow(0 0 8px rgba(215, 255, 47, .45)); }
.sx-mark i { position: absolute; inset: 0; background: url(/media/mark-320.webp) center / contain no-repeat; opacity: 0; }
.sx-mark .p1 { clip-path: inset(0 50% 50% 0); animation: pc1 .7s .15s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.sx-mark .p2 { clip-path: inset(0 0 50% 50%); animation: pc2 .7s .3s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.sx-mark .p3 { clip-path: inset(50% 50% 0 0); animation: pc3 .7s .45s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.sx-mark .p4 { clip-path: inset(50% 0 0 50%); animation: pc4 .7s .6s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes pc1 { from { opacity: 0; transform: translate(-22px, -16px) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes pc2 { from { opacity: 0; transform: translate(22px, -16px) rotate(12deg); } to { opacity: 1; transform: none; } }
@keyframes pc3 { from { opacity: 0; transform: translate(-22px, 16px) rotate(10deg); } to { opacity: 1; transform: none; } }
@keyframes pc4 { from { opacity: 0; transform: translate(22px, 16px) rotate(-10deg); } to { opacity: 1; transform: none; } }
.sx-glint { position: absolute; inset: -4px; overflow: hidden; pointer-events: none;
  -webkit-mask: url(/media/mark-320.webp) center / contain no-repeat; mask: url(/media/mark-320.webp) center / contain no-repeat; }
.sx-glint::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent);
  transform: translateX(-120%); animation: glint 4.2s 1.6s ease-in-out infinite; }
@keyframes glint { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(220%); } }

/* the offer types in letter by letter, the amount lands */
.sx-copy { min-width: 0; }
.sx-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 4px 9px; border-radius: 99px; font: 700 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
  color: #ffd3d3; background: rgba(255, 70, 70, .14); box-shadow: inset 0 0 0 1px rgba(255, 90, 90, .35); opacity: 0; animation: up .5s 1.9s ease forwards; }
.sx-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; animation: blink 1.1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.sx-h { margin: 0; font: 900 clamp(16px, 4.9vw, 22px)/1.04 var(--display); letter-spacing: .01em; color: #fff; display: grid; }
.sx-h > span { display: block; white-space: nowrap; }
.sx-h .ch { display: inline-block; opacity: 0; transform: translateY(6px); animation: ch .18s ease-out forwards; }
@keyframes ch { to { opacity: 1; transform: none; } }
.sx-amt { margin: 6px 0 0; display: flex; align-items: baseline; gap: 6px; }
.sx-amt b { font: 900 clamp(28px, 8.5vw, 38px)/1 var(--display); color: var(--lime); text-shadow: 0 0 26px rgba(215, 255, 47, .55); opacity: 0; transform: scale(.4);
  animation: amt .6s 1.55s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes amt { to { opacity: 1; transform: none; } }
.sx-amt span { font: 600 12px/1 var(--display); color: rgba(255, 255, 255, .7); opacity: 0; animation: up .5s 1.9s ease forwards; }
@keyframes up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sx-count { position: absolute; left: 16px; bottom: 12px; margin: 0; font: 600 11px/1 var(--display); color: rgba(255, 255, 255, .72); opacity: 0; animation: up .5s 2.2s ease forwards; }
.sx-count b { color: #fff; font-weight: 800; }
.sx-count.bump b { display: inline-block; animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.35); color: var(--lime); } }

/* the claim balance gets a soft lime shine when it changes */
.bal-n .w { text-shadow: 0 0 0 transparent; transition: text-shadow .6s; }
.bal-n.glow .w { text-shadow: 0 0 30px rgba(215, 255, 47, .55); }

/* lime buttons need dark text */
.cl-btn:not([disabled]), .btn-w:not([disabled]) { color: #071006; }
.tag { color: #071006 !important; background: var(--lime) !important; }

@media (prefers-reduced-motion: reduce) {
  .sx-band, .sx-mark i, .sx-pill, .sx-h .ch, .sx-amt b, .sx-amt span, .sx-count { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sx-glint::before, .sx-dot { animation: none !important; }
}