/* Data motion: price sky, drawer, trend chart, category bars. Paired with js/motion-data.js.
   Every hidden starting state is scoped to html.js-data plus a state class that JS adds only after
   it has wired the matching observer, so the page renders complete if this layer never runs. */

/* ---------- price sky: items ---------- */
.js-data .stage{--md-dur:.62s;--md-ez:var(--ease)}
.js-data .stage[data-mode="play"]{--md-dur:.6s;--md-ez:linear}      /* steps every 520ms: overlapping linear legs = one continuous glide */
.js-data .stage[data-mode="drag"]{--md-dur:.22s;--md-ez:var(--ease-ui)}
.js-data .stage[data-mode="instant"]{--md-dur:0s}
.js-data .it{transition:transform var(--md-dur) var(--md-ez),opacity .3s var(--ease-ui),background-size .22s var(--ease-ui),background-color .22s var(--ease-ui),box-shadow .2s var(--ease-ui)}

/* entrance (first time the sky is seen) */
.js-data .stage.md-pre .it{opacity:0;pointer-events:none}
.js-data .stage.md-pre .axis div,
.js-data .stage.md-pre .lane span,
.js-data .stage.md-pre .ground-line span{opacity:0}
.js-data .stage.md-pre .ground-line{transform:scaleX(0)}
.js-data .ground-line{transform-origin:right center}
.js-data .stage.md-enter .ground-line{animation:md-draw-x .9s var(--ease) backwards}
.js-data .stage.md-enter .ground-line span{animation:md-fade .4s var(--ease-ui) .55s backwards}
.js-data .stage.md-enter .axis div{animation:md-fade .5s var(--ease-ui) backwards}
.js-data .stage.md-enter .axis div:nth-child(2){animation-delay:.04s}
.js-data .stage.md-enter .axis div:nth-child(3){animation-delay:.08s}
.js-data .stage.md-enter .axis div:nth-child(4){animation-delay:.12s}
.js-data .stage.md-enter .axis div:nth-child(5){animation-delay:.16s}
.js-data .stage.md-enter .lane span{animation:md-fade-up .5s var(--ease) backwards;animation-delay:calc(var(--li,0) * 40ms)}
.js-data .stage.md-enter .it{animation:md-rise .7s var(--ease) var(--d,0s) backwards}
@keyframes md-rise{from{translate:0 var(--dy,0px);background-size:30%;opacity:0}}

/* rebuild after a filter / "180 vs all": quick fade + scale in place */
.js-data .stage.md-pop .it{animation:md-pop .42s var(--ease) var(--d,0s) backwards}
@keyframes md-pop{from{background-size:30%;opacity:0}}

/* hover lift (pointer devices only, so a tap doesn't leave a stuck zoom) */
@media (hover:hover){
  .js-data .it:hover{background-size:92%;background-color:rgba(255,255,255,.2);z-index:6;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 10px 22px rgba(4,10,22,.45)}
  .js-data .it.up:hover{box-shadow:0 0 0 1.5px rgba(255,138,91,.75),0 10px 22px rgba(4,10,22,.45)}
  .js-data .it.down:hover{box-shadow:0 0 0 1.5px rgba(108,196,255,.7),0 10px 22px rgba(4,10,22,.45)}
  .js-data .it.hit:hover{box-shadow:0 0 0 2px var(--gold),0 10px 22px rgba(4,10,22,.45)}
}
.js-data .hover-tag{transition:left .16s var(--ease-ui),top .16s var(--ease-ui)}
.js-data .hover-tag:not([hidden]){animation:md-tag .2s var(--ease) backwards}
@keyframes md-tag{from{opacity:0;translate:0 4px}}

/* search: matches get one soft gold ring, non-matches already fade via .dim */
.js-data .it.hit::before,
.js-data .it.md-x::before{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;opacity:0}
.js-data .it.hit::before{box-shadow:0 0 0 1.5px rgba(255,200,87,.9),0 0 16px rgba(255,200,87,.55);animation:md-ring 1.3s var(--ease) .1s}
.js-data .stage.md-many .it.hit::before{animation:none}
/* crossing the launch line during playback: a faint gold breath */
.js-data .it.md-x::before{box-shadow:0 0 14px 2px rgba(255,200,87,.55);animation:md-breath .8s var(--ease-ui)}
@keyframes md-ring{0%{opacity:0;transform:scale(.9)}30%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
@keyframes md-breath{0%,100%{opacity:0}40%{opacity:1}}

/* ---------- timeline ---------- */
.js-data .tl-day b{display:block}
.js-data #day-idx,.js-data .dr-chg{font-variant-numeric:tabular-nums}

/* ---------- drawer: glass sheet ---------- */
.js-data .drawer{transform-origin:left center;transform:translateX(-28px) scale(.97);opacity:0;visibility:hidden;
  transition:transform .42s var(--ease-ui),opacity .26s var(--ease-ui),visibility 0s linear .42s}
.js-data .drawer.open{transform:none;opacity:1;visibility:visible;
  transition:transform .6s var(--ease),opacity .32s var(--ease-ui),visibility 0s}
.js-data .drawer.md-in>*{animation:md-fade-up .5s var(--ease) backwards}
.js-data .drawer.md-in>.dr-head{animation-delay:.08s}
.js-data .drawer.md-in>.dr-chg{animation-delay:.13s}
.js-data .drawer.md-in>.dr-chart{animation-delay:.18s}
.js-data .drawer.md-in>.dr-grid{animation:none}
.js-data .drawer.md-in>.dr-grid>div{animation:md-fade-up .5s var(--ease) backwards}
.js-data .drawer.md-in>.dr-grid>div:nth-child(1){animation-delay:.24s}
.js-data .drawer.md-in>.dr-grid>div:nth-child(2){animation-delay:.28s}
.js-data .drawer.md-in>.dr-grid>div:nth-child(3){animation-delay:.32s}
.js-data .drawer.md-in>.dr-grid>div:nth-child(4){animation-delay:.36s}
.js-data .drawer.md-in>.dr-million{animation-delay:.42s}
.js-data .drawer.md-in>.dr-kills{animation-delay:.48s}
.js-data .dr-chart svg.quiet{animation:none}
.js-data .sp-dot{transform-box:fill-box;transform-origin:center}
@media (max-width:760px){
  .js-data .drawer{transform-origin:center bottom;transform:translateY(calc(100% + 24px));opacity:1;
    transition:transform .4s var(--ease-ui),visibility 0s linear .4s}
  .js-data .drawer.open{transform:none;transition:transform .55s var(--ease),visibility 0s}
}

/* ---------- trend chart ---------- */
.js-data .chart.md-wait svg .plot>*{opacity:0}
.js-data .chart .cross,.js-data .chart .hdot{transition:opacity .18s var(--ease-ui)}
.js-data .chart.md-hov .cross,.js-data .chart.md-hov .hdot{transition:transform .14s var(--ease-ui),opacity .18s var(--ease-ui)}
.js-data .chart .bar-r{transition:opacity .2s var(--ease-ui)}
.js-data .chart .md-old{position:absolute;inset:0;pointer-events:none}
.js-data .tip{transition:left .14s var(--ease-ui),top .14s var(--ease-ui)}
.js-data .tip:not([hidden]){animation:md-fade .18s var(--ease-ui) backwards}

/* ---------- category bars ---------- */
.js-data .cbars.md-wait .f{transform:scaleX(0)}
.js-data .cbars .f.pos{transform-origin:left center}
.js-data .cbars .f.neg{transform-origin:right center}
.js-data .cbars.md-go .f{transition:transform .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms + 80ms)}
.js-data .cbars.md-wait .cbar b{opacity:0}
.js-data .cbars.md-go .cbar b{transition:opacity .5s var(--ease-ui);transition-delay:calc(var(--i,0) * 70ms + 380ms)}

/* ---------- wealth pyramid (#pyr): bars grow out of the level labels, bottom → top, blue then gold ---------- */
.js-data .pyr.md-wait .bar{transform:scaleX(0)}
.js-data .pyr.md-wait .num{opacity:0}
.js-data .pyr .bar.md-o-r{transform-origin:right center}
.js-data .pyr .bar.md-o-l{transform-origin:left center}
.js-data .pyr.md-go .bar{transition:transform .8s var(--ease);transition-delay:calc(var(--i,0) * 55ms + 60ms)}
.js-data .pyr.md-go .bar.ms{transition-delay:calc(var(--i,0) * 55ms + 200ms)}
.js-data .pyr.md-go .num{transition:opacity .45s var(--ease-ui);transition-delay:calc(var(--i,0) * 55ms + 620ms)}
.js-data .pyr-row.rich{position:relative}
.js-data .pyr.md-go .pyr-row.rich::before{content:"";position:absolute;inset:-3px -6px;border-radius:9px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(255,200,87,0),rgba(255,200,87,.16),rgba(255,200,87,0));
  animation:md-breath 1.4s var(--ease-ui) backwards;animation-delay:calc(var(--i,0) * 55ms + 900ms)}

/* ---------- shared ---------- */
@keyframes md-fade{from{opacity:0}}
@keyframes md-fade-up{from{opacity:0;translate:0 8px}}
@keyframes md-draw-x{from{transform:scaleX(0)}}

@media (prefers-reduced-motion:reduce){
  .it{transition:opacity .2s var(--ease-ui),box-shadow .2s var(--ease-ui)}
  .drawer{transition:opacity .2s var(--ease-ui)}
}