/* Hero night world: scene layers, parallax vars, stars/clouds/coins, one-shot bag run. Animates transform and opacity only.
   World props move in steps(n) on a 2px grid (pixel-motion-spec 4.1); Zy (svg.vm) stays smooth in vault.css. */
.hero{position:relative;background:var(--night);color:var(--ink-inv);overflow:hidden}
.hero-copy{position:relative;z-index:2;text-align:center;max-width:860px;margin:0 auto;padding:40px var(--gutter) 0}
.hero h1{font-weight:800;font-size:clamp(1.875rem,1.1rem + 3.9vw,4.25rem);line-height:1.04;letter-spacing:-.035em}
.hero .lead{margin:22px auto 0;max-width:43.92em;font-size:clamp(1rem,.95rem + .3vw,1.1875rem);color:var(--ink-inv-2)}
.hero .lead strong{color:var(--ink-inv);font-weight:700}
.hero-actions{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.hero-note{display:inline-block;position:relative;z-index:3;margin-top:18px;padding:6px 14px;background:var(--night);border-radius:8px;font-size:.9375rem;color:var(--ink-inv-2);max-width:100%}
.scene{width:100%;height:auto}
.scene-desk{margin-top:-120px;min-height:320px}
.scene-mob{display:none}
@media (min-width:701px) and (max-width:1199px){.scene-desk{margin-top:0;min-height:0}}
@media (max-width:700px){.scene-desk{display:none}.scene-mob{display:block;margin-top:12px}.hero-copy{padding-top:24px}.hero-actions .btn{flex:1 1 140px}}
.money-path{opacity:.7}
@keyframes run{0%{transform:translate(300px,170px);opacity:1}10%{transform:translate(384px,130px)}20%{transform:translate(474px,100px)}30%{transform:translate(564px,80px)}40%{transform:translate(656px,68px)}50%{transform:translate(750px,64px)}60%{transform:translate(844px,66px)}70%{transform:translate(936px,74px)}80%{transform:translate(1028px,88px)}90%{transform:translate(1120px,108px);opacity:1}100%{transform:translate(1210px,136px);opacity:0}}
@keyframes glow{0%{opacity:.22}50%{opacity:.6}100%{opacity:.3}}

.px{transition:none;will-change:transform}
.px-sky{transform:translate(calc(var(--mx,0) * -4px),calc(var(--sy,0) * .35px))}
.px-far{transform:translate(calc(var(--mx,0) * -9px),calc(var(--sy,0) * .2px + var(--my,0) * -3px))}
.px-mid{transform:translate(calc(var(--mx,0) * -16px),calc(var(--sy,0) * .08px + var(--my,0) * -5px))}
/* .tw / tw and drift-s live in shell.css (shared with the .sky-live strips on the account and legal pages). */
.drift{animation:drift 110s steps(860,jump-end) infinite}
.drift.d1{animation-delay:-20s}.drift.d2{animation-duration:150s;animation-delay:-90s}.drift.d3{animation-duration:130s;animation-delay:-60s}
@keyframes drift{from{transform:translateX(-220px)}to{transform:translateX(1500px)}}
.scene-mob .drift{animation-name:drift-m;animation-duration:70s;animation-timing-function:steps(265,jump-end)}
@keyframes drift-m{from{transform:translateX(-110px)}to{transform:translateX(420px)}}
.float-a{animation:bob 4.2s steps(5,jump-end) infinite}
.float-b{animation:bob 5.4s steps(5,jump-end) -1.8s infinite}
.float-c{animation:bob2 6s steps(4,jump-end) -3s infinite}
/* Gems (loop 27) are exempt from steps(): 4-5 jumps held ~0.5 s each read as lag. Gem-only selector, because .float-b is also on coins; same keyframes (transform only). */
use[href="#gem"]{animation-timing-function:ease-in-out}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.vm-hero{--vm-t:1.2s}
.bag-start{animation:bagstart 300ms .3s steps(2,jump-end) both}
@keyframes bagstart{to{opacity:0}}
.bag-run{opacity:0;animation:run 1.2s .3s steps(3,jump-end) forwards}
.scene-mob .bag-start{display:none}
/* Mobile scene: the left island group sits 24 units further in (markup) and parallax is vertical only and small,
   so no island reaches the scene edge or the floor band at y 262 (patch 14). */
.scene-mob .px-mid{transform:translate(0,calc(var(--sy,0) * .02px))}
.vault-glow{animation:glow 900ms 1.7s steps(3,jump-none) both}
/* Pausing off screen and in a hidden tab lives in shell.css ([data-pause].is-off, html.zy-hidden). */
@media (prefers-reduced-motion:reduce){
  .px{transform:none !important}
}