/* worthly.si — marquee band: two rows of domain cards that drift sideways,
   built the way Dynadot's promo strip works but carrying real data:
   row A is tracked .si sales (name, price, venue), row B is names on offer.
   Pure CSS animation on transform, paused on hover/focus, off under reduced-motion. */

.marquee-band{background:linear-gradient(180deg,#081026,#0C1C44);border-top:1px solid #16255A;border-bottom:1px solid #16255A;
  padding:var(--sp-6) 0;overflow:hidden;position:relative}
.marquee-band .band-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);color:#8FA6D8;font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.marquee-band .band-head b{color:#fff;font-weight:600}
.marquee-band .band-head .dot{width:7px;height:7px;border-radius:50%;background:#22D3EE;box-shadow:0 0 0 4px rgba(34,211,238,.16)}
.marquee-band .band-head a{color:#9DB2E0;text-decoration:none;border-bottom:1px solid #26386F}
.marquee-band .band-head a:hover{color:#fff}

.marquee{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee + .marquee{margin-top:var(--sp-3)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:drift 52s linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse;animation-duration:62s}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@media(max-width:640px){.marquee-track{animation-duration:34s}.marquee.rev .marquee-track{animation-duration:40s}}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.mcard{flex:0 0 auto;display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 20px;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid #223367;
  color:#fff;text-decoration:none;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.mcard:hover,.mcard:focus-visible{transform:translateY(-3px);border-color:#3D77FF;background:linear-gradient(180deg,rgba(61,119,255,.16),rgba(61,119,255,.05));
  box-shadow:0 12px 28px -12px rgba(31,91,255,.55);outline:0}
.mcard .dom{font:600 17px var(--mono);letter-spacing:-.01em;white-space:nowrap}
.mcard .dom i{font-style:normal;color:#7FD8F5}
.mcard .price{font:700 17px var(--sans);white-space:nowrap}
.mcard .ven{font-size:var(--fs-xs);color:#8FA6D8;white-space:nowrap}
.mcard .was{font-size:var(--fs-xs);color:#6E82B4;text-decoration:line-through;white-space:nowrap}
.mcard .badge{font:600 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#08121F;background:#7FD8F5;
  padding:4px 9px;border-radius:999px;white-space:nowrap}
.mcard .offer{font:600 var(--fs-sm) var(--sans);color:#9DC2FF;white-space:nowrap}
.mcard:hover .offer{color:#fff}
.mcard.sale:hover{border-color:#3D77FF}
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;mask-image:none;-webkit-mask-image:none}
  .marquee-track{animation:none;width:max-content;padding-right:var(--sp-4)}
}