/* motion-econ.css: motion for #upgrades, #dollar, #flows and the #world monster grid. Paired with js/motion-econ.js.
   Every hidden starting state is scoped to html.js-econ (added by JS only after setup succeeds) plus a class
   JS puts on the element, so the page renders complete if this layer never runs. In-panel choreography is
   WAAPI with fill:"backwards" (nothing is hidden before it starts). */

/* ---------- panel reveals (same feel as motion-scene .ms-rv) ---------- */
html.js-econ .ec-rv{opacity:0;transform:translate3d(0,14px,0)}
html.js-econ .ec-rv.ec-in{opacity:1;transform:none;transition:opacity .7s var(--ease-ui) var(--rd,0ms),transform .9s var(--ease) var(--rd,0ms)}

/* ---------- #upgrades ---------- */
html.js-econ .stairs{position:relative}
/* outgoing staircase while a different-length item grows in underneath */
.ec-old{position:absolute!important;inset:0;margin:0!important;pointer-events:none;z-index:1}
html.js-econ .upg-list li{transition:background-color .25s var(--ease-ui),color .25s var(--ease-ui),box-shadow .3s var(--ease-ui)}
html.js-econ .upg-list li.on{box-shadow:inset 0 0 0 1px rgba(255,200,87,.24)}
html.js-econ .upg-list li i,html.js-econ .upg-icon{transition:background-image 0s}

/* ---------- #world monster tiles ---------- */
html.js-econ .mob{transition:transform .28s var(--ease-ui),background-color .2s var(--ease-ui),border-color .2s var(--ease-ui)}
html.js-econ .mob.ec-tw{opacity:0;transform:translate3d(0,10px,0)}
html.js-econ .mob.ec-tw.ec-in{opacity:1;transform:none;transition:opacity .5s var(--ease-ui) var(--td,0ms),transform .7s var(--ease) var(--td,0ms)}
@media (hover:hover){
  html.js-econ .mob:not(.ec-tw):hover{transform:translate3d(0,-2px,0)}
}

/* tabular numerals so labels don't wobble while they fade */
.st-price,.st-x,.st-n,.sinks b,#usd-then{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  html.js-econ .ec-rv,html.js-econ .mob.ec-tw{opacity:1!important;transform:none!important}
  html.js-econ .mob:hover{transform:none}
}