/* Ultra-premium overlay: white cursor language, softer edges, motion.
   Colour stays black/white. Reduced-motion undoes it. */

[data-earn], .redeem, #pnPoints, #dtPoints, #suBonus, #suRefBox, .invite-code, #pnHome .tiles { display: none !important; }

.gold-emph { color: #fff; font-weight: 600; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.hx-eyebrow { color: #fff !important; }
.hx-rule { background: #fff !important; }

.grain {
  pointer-events: none; position: fixed; inset: 0; z-index: 8; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
}

.lux-marquee {
  overflow: hidden; border-block: 1px solid var(--border);
  background: var(--bg); padding: 0.85rem 0;
}
.lux-marquee-track {
  display: flex; gap: 3rem; width: max-content;
  animation: lux-marquee 42s linear infinite;
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  font-size: 0.72rem; color: var(--muted); white-space: nowrap;
}
.lux-marquee-track span { color: var(--text); letter-spacing: 0; }
@keyframes lux-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.btn, .chip, input, select, textarea, .mode-switch, .dep-calc, .cat-card,
.plate, .card, .tool-card, .drawer, dialog {
  border-radius: var(--radius) !important;
}
.btn, .chip { border-radius: 999px !important; }
input, select, textarea { border-radius: 16px !important; }

.btn-primary {
  position: relative; overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.55);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -20px rgba(255,255,255,.35); }
.btn-primary:hover::after { animation: lux-sheen .85s ease; }
@keyframes lux-sheen { to { transform: translateX(120%) skewX(-18deg); } }

.hx-h1 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; }
.hx-m { overflow: hidden; padding: 0.18em 0.04em 0.28em; margin: 0; vertical-align: bottom; }
.hx-frame.on img { animation: hx-kb 18s cubic-bezier(.22,1,.36,1) both; }
@keyframes hx-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.rail-card, .cat-card {
  transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease;
}
.rail-card:hover, .cat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.45);
}
.rail-frame { border-radius: 28px !important; overflow: hidden; }
.rail-card:hover .rail-frame { border-color: color-mix(in srgb, #fff 55%, var(--border)) !important; }

.lux-reveal {
  opacity: 0; transform: translateY(28px) scale(.985);
  animation: lux-in .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes lux-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .grain { display: none !important; }
  .lux-marquee-track, .btn-primary::after, .hx-frame.on img { animation: none !important; }
  .lux-reveal { opacity: 1; transform: none; animation: none; }
}