/* Hub motion (game feel) for the game hub: city lobby chrome, career showcase, Home "Play" card, curtain wipe.
   Everything is gated by html[data-hm="on"] (flag: ?hm=0 or localStorage bp.hubmotion=0 turns it off). transform/opacity only.
   Chrome = ease-out 120-300 ms, no bounce, no loops. Play (reward / cabinet) = overshoot + subtle loops, steps() on pixel art.
   Reduced motion (media or html[data-hm-rm]) = fade only, loops off. Hover effects only under (hover:hover); touch gets press states. */
:root { --hm-out: cubic-bezier(.2, .8, .2, 1); --hm-in: cubic-bezier(.4, 0, 1, 1); --hm-pop: cubic-bezier(.34, 1.56, .64, 1); --hm-navy: #1A66D9; --hm-gold: #FDD935; }

@keyframes hm-rise { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-slide-l { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes hm-dot { 0%, 78%, 100% { transform: scale(1); } 86% { transform: scale(1.35); } 94% { transform: scale(1.12); } }
@keyframes hm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes hm-led { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
@keyframes hm-sheen { 0% { transform: translateX(-130%) skewX(-18deg); } 55%, 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes hm-skel { to { transform: translateX(100%); } }
@keyframes hm-flame { 0% { transform: scale(1); } 35% { transform: scale(1.14); filter: drop-shadow(0 0 6px #FDD935); } 100% { transform: scale(1); } }
@keyframes hm-flame-idle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------- 1. city lobby chrome ---------- */
html[data-hm="on"] .lb-icons .lb-ic { animation: hm-rise .26s var(--hm-out) backwards; }
html[data-hm="on"] .lb-icons .lb-ic:nth-child(2) { animation-delay: 50ms; } html[data-hm="on"] .lb-icons .lb-ic:nth-child(3) { animation-delay: 100ms; }
html[data-hm="on"] .lb-icons .lb-ic:nth-child(4) { animation-delay: 150ms; } html[data-hm="on"] .lb-icons .lb-ic:nth-child(5) { animation-delay: 200ms; }
html[data-hm="on"] .lb-icons .lb-ic:nth-child(6) { animation-delay: 250ms; } html[data-hm="on"] .lb-icons .lb-ic:nth-child(7) { animation-delay: 300ms; }
html[data-hm="on"] .lb-pill { animation: hm-slide-l .28s var(--hm-out) 120ms backwards; }
html[data-hm="on"] .lb-qt { animation: hm-fade .3s var(--hm-out) 280ms backwards; }
html[data-hm="on"] .lb-px .lb-ic, html[data-hm="on"] .lb-pill, html[data-hm="on"] .lb-qt { transition: transform .12s var(--hm-out), filter .12s; will-change: auto; }
@media (hover: hover) { html[data-hm="on"] .lb-px .lb-ic:hover { transform: translateY(-2px); } html[data-hm="on"] .lb-pill:hover { transform: translateY(-1px); } }
html[data-hm="on"] .lb-px .lb-ic.hm-down, html[data-hm="on"] .lb-pill.hm-down, html[data-hm="on"] .lb-qt.hm-down { transform: scale(.94); transition-duration: 60ms; }
html[data-hm="on"] .lb-pill.hm-down { transform: scale(.97); }
html[data-hm="on"] .lb-ic:focus-visible { box-shadow: 0 0 0 3px rgba(253, 217, 53, .55); }
/* notification dot: stepped (pixel) pulse every 2.6 s, one beat only */
html[data-hm="on"] .lb-px .lb-dot:not([hidden]) { animation: hm-dot 2.6s steps(6) infinite; transform-origin: 50% 50%; }
html[data-hm="on"] .lb-dot:not([hidden]) { animation-name: hm-dot; animation-duration: 2.6s; animation-iteration-count: infinite; animation-timing-function: steps(6); }
.hm-pill-pop { transform-origin: 50% 50%; }

/* ---------- 2. career showcase ---------- */
html[data-hm="on"] .sc-card { animation: hm-rise .3s var(--hm-out) backwards; transition: transform .18s var(--hm-out), box-shadow .18s var(--hm-out); }
html[data-hm="on"] .sc-card:nth-child(2) { animation-delay: 50ms; } html[data-hm="on"] .sc-card:nth-child(3) { animation-delay: 100ms; }
html[data-hm="on"] .sc-card:nth-child(4) { animation-delay: 150ms; } html[data-hm="on"] .sc-card:nth-child(5) { animation-delay: 200ms; }
html[data-hm="on"] .sc-card:nth-child(6) { animation-delay: 250ms; }
html[data-hm="on"] .sc-card.hm-down { transform: translateY(0) scale(.97); transition-duration: 70ms; }
@media (hover: none) { html[data-hm="on"] .sc-card:hover { transform: none; box-shadow: 0 3px 9px #2B5CA8; } html[data-hm="on"] .sc-card.is-focus:hover { box-shadow: 0 0 0 4px #FFD36B, 0 3px 9px #2B5CA8; } }
/* featured (focused) card: soft diagonal sheen across the clip every 3.6 s */
html[data-hm="on"] .sc-card.is-focus .sc-clip::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); animation: hm-sheen 3.6s var(--hm-out) 0.6s infinite; }
html[data-hm="on"] .sc-card.is-focus { transform: translateY(-2px); }
html[data-hm="on"] .sc-card.is-focus.hm-down { transform: scale(.97); }
html[data-hm="on"] .sc-card.hm-chosen { transform: scale(1.04); transition: transform .2s var(--hm-out); }
html[data-hm="on"] .sc-cdots i { transition: transform .18s var(--hm-pop), background-color .18s; } html[data-hm="on"] .sc-cdots i.on { transform: scale(1.25); }
html[data-hm="on"] .sc-choose.hm-down, html[data-hm="on"] .sc-choose:active { transform: scale(.97); }
html[data-hm="on"] .sc-row button { transition: transform .14s var(--hm-out), background-color .14s; } html[data-hm="on"] .sc-row button[aria-pressed=true] { transform: translateY(-2px) scale(1.06); }
html[data-hm="on"] .sc-row button.hm-down { transform: scale(.94); }

/* ---------- 3. Home "Play" card (cabinet) ---------- */
html[data-hm="on"] .arc-home { animation: hm-rise .3s var(--hm-out) backwards; transition: transform .18s var(--hm-out); }
@media (hover: hover) { html[data-hm="on"] .arc-home:hover { transform: translateY(-2px); } }
.hm-cab { position: relative; display: block; flex: none; }
.hm-led { position: absolute; top: 9%; width: 5px; height: 5px; background: #FDD935; box-shadow: 0 0 0 1px #10233F; opacity: 0; pointer-events: none; }
.hm-led.a { left: 26%; } .hm-led.b { right: 26%; background: #FB796B; }
html[data-hm="on"] .arc-home.hm-on .hm-cab { animation: hm-bob 3.2s steps(4) infinite; }
html[data-hm="on"] .arc-home.hm-on .hm-led { opacity: 1; animation: hm-led 1.2s steps(1) infinite; } html[data-hm="on"] .arc-home.hm-on .hm-led.b { animation-delay: .6s; }
html[data-hm="on"] .arc-home .btn.pri { transition: transform .12s var(--hm-out); } html[data-hm="on"] .arc-home .btn.hm-down, html[data-hm="on"] .arc-home .btn:active { transform: scale(.97); }
html[data-hm="on"] a.hm-chosen { transform: scale(1.04); transition: transform .2s var(--hm-out); }

/* skeleton shimmer instead of blank text */
.hm-skel { position: relative; display: inline-block; overflow: hidden; min-width: 180px; padding: 2px 8px; border-radius: 6px; background: rgba(120, 140, 190, .16); color: transparent; user-select: none; }
.hm-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-100%); animation: hm-skel 1.1s linear infinite; }

/* streak flame: the lit chip breathes slowly; hm-flame is the one-off beat when the streak grows */
html[data-hm="on"] .hud-streak.lit svg, html[data-hm="on"] .hud-streak.lit canvas, html[data-hm="on"] .hud-streak.lit img { animation: hm-flame-idle 3.4s ease-in-out infinite; transform-origin: 50% 80%; }
.hm-flame, html[data-hm="on"] .hm-flame svg, html[data-hm="on"] .hm-flame canvas { animation: hm-flame .7s var(--hm-pop) 1; }

/* page enter: opacity only (no ancestor transform) */
html[data-hm="on"] #app > .arc-page, html[data-hm="on"] #app > .cy-frame { animation: hm-fade .22s var(--hm-out) backwards; }

/* floaty numbers + unlock sparks (absolutely positioned inside the anchor's offsetParent) */
.hm-float { position: absolute; z-index: 30; pointer-events: none; font: 800 15px/1 var(--lg-font, system-ui); color: #FDD935; text-shadow: 0 1px 2px rgba(16, 35, 63, .35), 0 0 0 #10233F; white-space: nowrap; }
.hm-spark { position: absolute; z-index: 30; width: 7px; height: 7px; pointer-events: none; box-shadow: 0 0 0 1px #10233F; }

/* locked: wiggle target also gets a dimmed look cue (not colour only: lock text/icon already in markup) */
html[data-hm="on"] [aria-disabled="true"].hm-locked, html[data-hm="on"] .hm-locked { cursor: not-allowed; }

/* curtain wipe: navy panel with a gold leading edge, fixed, above everything, never intercepts input */
.hm-curtain { position: fixed; inset: 0; z-index: 2000; pointer-events: none; visibility: hidden; background: var(--hm-navy); transform: translateX(-101%); }
.hm-curtain i { position: absolute; top: 0; bottom: 0; right: 0; width: 10px; background: var(--hm-gold); box-shadow: -4px 0 0 #10233F; }

/* ---------- reduced motion: fade only, loops off ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-hm] .lb-icons .lb-ic, html[data-hm] .lb-pill, html[data-hm] .lb-qt, html[data-hm] .sc-card, html[data-hm] .arc-home { animation: hm-fade .2s linear backwards !important; animation-delay: 0s !important; }
  html[data-hm] .lb-dot, html[data-hm] .sc-clip::before, html[data-hm] .hm-cab, html[data-hm] .hm-led, html[data-hm] .hud-streak.lit svg, html[data-hm] .hud-streak.lit canvas, html[data-hm] .hud-streak.lit img { animation: none !important; }
  html[data-hm] .hm-led { opacity: 1; } html[data-hm] .hm-skel::after { animation: none; }
  html[data-hm] .sc-card, html[data-hm] .lb-ic, html[data-hm] .lb-pill, html[data-hm] .arc-home { transition: none !important; transform: none !important; }
  html[data-hm] .sc-card.is-focus { transform: none !important; }
}
html[data-hm-rm] .lb-icons .lb-ic, html[data-hm-rm] .lb-pill, html[data-hm-rm] .lb-qt, html[data-hm-rm] .sc-card, html[data-hm-rm] .arc-home { animation: hm-fade .2s linear backwards !important; animation-delay: 0s !important; }
html[data-hm-rm] .lb-dot, html[data-hm-rm] .sc-clip::before, html[data-hm-rm] .hm-cab, html[data-hm-rm] .hm-led, html[data-hm-rm] .hud-streak.lit svg, html[data-hm-rm] .hud-streak.lit canvas, html[data-hm-rm] .hud-streak.lit img { animation: none !important; }
html[data-hm-rm] .hm-led { opacity: 1; }
html[data-hm-rm] .sc-card, html[data-hm-rm] .lb-ic, html[data-hm-rm] .lb-pill, html[data-hm-rm] .arc-home { transition: none !important; transform: none !important; }
html[data-hm-rm] .hm-skel::after { animation: none; }