:root { --gold: #f5c542; }
.hx-stage { width: 100%; margin: 0 auto; perspective: 900px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.hx-tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; transform-style: preserve-3d; }
.hx { width: 100%; height: auto; display: block; overflow: visible; }
.hx * { transform-box: fill-box; }
.wm { height: 54px; width: auto; filter: drop-shadow(0 4px 18px rgba(245,197,66,.25)); }

.hx .rays { transform-origin: 0 0; transform-box: view-box; opacity: .55; }
.hx .lay-back, .hx .lay-dust { transition: transform .25s ease-out; }
.hx .dust { opacity: 0; }
.hx .floorglow { opacity: .12; transform-origin: center; }
.hx .body { transform-origin: 50% 100%; }
.hx .capg, .hx .capin { transform-origin: 50% 100%; }
.hx .capg { filter: drop-shadow(0 0 10px rgba(255,216,96,.55)); }
.hx .shadow { opacity: .3; transform-origin: center; }
.hx .lid { transform-origin: center; transition: transform .07s; }
.hx .lid.shut { transform: scaleY(.06); }
.hx .pupil { transition: transform .12s ease-out; }
.hx .fly { opacity: 0; }
.hx .spin { transform-origin: center; }
.hx .shine, .hx .scanbar { opacity: 0; }
.hx .refl { opacity: .35; pointer-events: none; }
.hx .bcoin { transform-origin: center; animation: burst .95s cubic-bezier(.2,.7,.3,1) forwards; }
.hx .ring { fill: none; stroke: #ffd860; stroke-width: 3; transform-origin: center; animation: ring .8s ease-out forwards; }
.hx .plus { font: 700 18px "Space Grotesk", sans-serif; fill: #fff3c4; paint-order: stroke; stroke: #3a2f0d; stroke-width: 3px; animation: plus 1.2s ease-out forwards; }
.hx.pump .capin { animation: jump .75s cubic-bezier(.2,.9,.3,1.4) !important; }
.hx.pump .rays { animation: spin 40s linear infinite, flare .9s ease-out !important; }
.hx.pump .floorglow { animation: floorflash .9s ease-out !important; }

@media (prefers-reduced-motion: no-preference) {
  .hx .rays { animation: spin 40s linear infinite, raypulse 4.8s ease-in-out infinite; }
  .hx .dust { animation: dust var(--d) linear infinite var(--dl); }
  .hx .floorglow { animation: floor 2.4s ease-in-out infinite; }
  .hx .body { animation: breathe 2.4s ease-in-out infinite; }
  .hx .capg { animation: hover 2.4s ease-in-out infinite, capglow 2.4s ease-in-out infinite; }
  .hx .capin { animation: sway 4.8s ease-in-out infinite; }
  .hx .shadow { animation: shadow 2.4s ease-in-out infinite; }
  .hx .scanbar { animation: scan 2.4s ease-in-out infinite; }
  .hx .shine { animation: shine 2.4s ease-in-out infinite; }
  .hx .fly { animation: fly 3.2s cubic-bezier(.45,0,.7,1) infinite var(--dl); }
  .hx .spin { animation: coinspin .6s linear infinite; }
  .wmshine { animation: wmshine 4.8s ease-in-out infinite 1s; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes raypulse { 0%, 100% { opacity: .4; } 50% { opacity: .7; } }
@keyframes flare { 0% { opacity: 1; transform: scale(1.25); } 100% { opacity: .55; transform: scale(1); } }
@keyframes dust { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .8; } 80% { opacity: .5; } 100% { opacity: 0; transform: translate(var(--dx), -150px); } }
@keyframes floor { 0%, 100% { opacity: .1; transform: scaleX(.9); } 50% { opacity: .2; transform: scaleX(1.05); } }
@keyframes floorflash { 0% { opacity: .55; transform: scaleX(1.3); } 100% { opacity: .12; transform: scaleX(1); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .97); } }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes capglow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255,216,96,.35)); } 50% { filter: drop-shadow(0 0 18px rgba(255,216,96,.85)); } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes shadow { 0%, 100% { opacity: .45; transform: scaleX(1); } 50% { opacity: .12; transform: scaleX(.55); } }
@keyframes scan { 0% { opacity: 0; transform: translateY(200px); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px); } }
@keyframes shine { 0%, 60% { opacity: 0; transform: translateX(-30px) skewX(-20deg); } 66% { opacity: .95; } 88%, 100% { opacity: 0; transform: translateX(120px) skewX(-20deg); } }
@keyframes fly { 0% { opacity: 0; transform: translate(var(--x0), 214px) scale(.5); }
  10% { opacity: 1; transform: translate(calc(var(--x0) + var(--sx) * 8px), 186px) scale(1); }
  55% { opacity: 1; transform: translate(calc(var(--x0) + var(--sx) * 44px), 104px) scale(1); }
  82% { opacity: 1; transform: translate(128px, 72px) scale(.7); } 90%, 100% { opacity: 0; transform: translate(128px, 68px) scale(.15); } }
@keyframes coinspin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.12); } }
@keyframes jump { 0% { transform: translateY(0) scale(1); } 18% { transform: translateY(4px) scale(1.15, .8); } 45% { transform: translateY(-42px) scale(.9, 1.15); }
  75% { transform: translateY(2px) scale(1.12, .88); } 100% { transform: translateY(0) scale(1); } }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5) rotate(540deg); } }
@keyframes ring { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(6); } }
@keyframes plus { 0% { opacity: 0; transform: translateY(0) scale(.8); } 15% { opacity: 1; transform: translateY(-6px) scale(1.1); } 100% { opacity: 0; transform: translateY(-48px) scale(1); } }
@keyframes wmshine { 0%, 70% { transform: translateX(0); } 100% { transform: translateX(560px); } }

.hd-mark { width: 26px; height: 26px; overflow: visible; flex: none; }
.hd-mark * { transform-box: fill-box; }
.hd-cap { transform-origin: 50% 100%; filter: drop-shadow(0 0 3px rgba(255,216,96,.6)); }
@media (prefers-reduced-motion: no-preference) {
  .hd-cap { animation: hdfloat 2.4s ease-in-out infinite; }
  .hd-tier { animation: hdwave 1.5s linear infinite; }
  .hd-t2 { animation-delay: 0s; } .hd-t1 { animation-delay: .2s; } .hd-t0 { animation-delay: .4s; }
  .logo:hover .hd-cap { animation-duration: .8s; }
}
@keyframes hdfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes hdwave { 0%, 100% { opacity: .7; } 15% { opacity: 1; } }
.hero-logo { max-width: 420px; margin: -6px auto 0; padding-top: 64px; overflow: hidden; }