/* motion-scene.css: scene motion (intro, ambient, reveals, nav, hover feedback).
   Intro + ambient are pure CSS (fill-mode both), so they finish visible even if JS never runs.
   Scroll reveals are gated behind html.js-scene (added by motion-scene.js only after setup succeeds).
   Owner: scene-motion. Does not touch #sky .stage, #trend .chart, #cbars, #drawer. */

:root{
  --m-in:cubic-bezier(.2,.8,.2,1);
  --m-ui:cubic-bezier(.4,0,.2,1);
}

/* ---------- 1. load intro (≤1.4s) ---------- */
@keyframes ms-bd-in{from{scale:1.04;filter:brightness(.78) saturate(.9)}to{scale:1;filter:none}}
@keyframes ms-drop{from{opacity:0;transform:translate3d(0,-12px,0)}to{opacity:1;transform:none}}
@keyframes ms-rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes ms-fade{from{opacity:0}to{opacity:1}}
@keyframes ms-island-in{
  0%{opacity:0;transform:translate3d(0,30px,0) scale(.985)}
  55%{opacity:1}
  72%{transform:translate3d(0,-3px,0) scale(1)}
  100%{opacity:1;transform:none}
}
@keyframes ms-room-in{from{opacity:0;scale:.55}to{opacity:1;scale:1}}

.bd-img{animation:ms-bd-in 1.4s var(--m-in) both;will-change:transform}
.nav{animation:ms-drop .7s var(--m-in) .06s both}
.hero-copy{animation:ms-rise .8s var(--m-in) .14s both}
.island-wrap{animation:ms-island-in 1.05s var(--m-in) .2s both}
.room-card{animation:ms-fade .6s var(--m-ui) .75s both}
.hero-side{animation:ms-rise .8s var(--m-in) .38s both}
/* rooms are injected after data loads; JS sets --d so the busiest room lights first */
.room{animation:ms-room-in .42s var(--m-in) var(--d,0ms) both}

/* ---------- 2. ambient ---------- */
@keyframes ms-bob{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes ms-breathe{
  0%,100%{opacity:calc(1 - var(--heat,0) * .38);transform:scale(var(--gs,1))}
  50%{opacity:1;transform:scale(calc(var(--gs,1) * (1 + var(--heat,0) * .09)))}
}
.island{animation:ms-bob 6.4s ease-in-out 1.3s infinite;transition:transform 1.1s var(--m-in)}
.room::before{animation:ms-breathe calc(4.6s + var(--i,0) * .17s) ease-in-out calc(var(--i,0) * -.73s) infinite;transform-origin:center}
/* pause ambient loops when the hero is offscreen or the tab is hidden */
html.ms-idle .island,html.ms-idle .room::before{animation-play-state:paused}

/* selected room: soft pop on the label + one expanding ring */
@keyframes ms-pop{0%{scale:1}40%{scale:1.13}100%{scale:1}}
@keyframes ms-ring{from{opacity:.55;transform:scale(.55)}to{opacity:0;transform:scale(1.25)}}
.room b{transition:scale .25s var(--m-ui),background-color .25s var(--m-ui),color .25s var(--m-ui),border-color .25s var(--m-ui)}
.room:hover b{scale:1.06}
.room.ms-pop b{animation:ms-pop .45s var(--m-in)}
.room::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:1.5px solid rgba(255,226,150,.9);opacity:0;pointer-events:none}
.room.ms-pop::after{animation:ms-ring .7s var(--m-in) both}

/* tabular numerals so count-ups don't wobble */
[data-to],.rc-row b,.nav-stats b{font-variant-numeric:tabular-nums}

/* ---------- 5. scroll reveals (JS-gated) ---------- */
html.js-scene .ms-rv{opacity:0;transform:translate3d(0,14px,0)}
html.js-scene .ms-rv.ms-in{opacity:1;transform:none;transition:opacity .7s var(--m-ui) var(--rd,0ms),transform .9s var(--m-in) var(--rd,0ms)}

/* ---------- 6. nav ---------- */
.nav::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(9,16,29,.5);opacity:0;transition:opacity .45s var(--m-ui);pointer-events:none;z-index:-1}
.nav{transition:box-shadow .45s var(--m-ui),border-color .45s var(--m-ui)}
.nav.ms-solid::before{opacity:1}
.nav.ms-solid{border-color:rgba(255,255,255,.09);box-shadow:0 1px 0 var(--glass-hi) inset,0 12px 34px rgba(5,10,20,.4)}
/* gliding highlight pill (injected by JS) */
html.ms-pill .links{position:relative}
html.ms-pill .links a{position:relative;z-index:1}
html.ms-pill .links a.on{background:transparent}
.ms-pill-el{position:absolute;top:0;left:0;height:0;border-radius:9px;background:rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.06) inset;pointer-events:none;z-index:0;opacity:0;
  transition:transform .45s var(--m-ui),width .45s var(--m-ui),opacity .25s var(--m-ui)}
.ms-pill-el.ms-ready{opacity:1}

/* ---------- 7. method accordion ---------- */
.method summary::after{transition:transform .35s var(--m-ui)}
.method[open] summary::after{transform:rotate(180deg)}
.method-body.ms-anim{overflow:hidden}

/* ---------- 8. buttons ---------- */
.cta,.chip,.seg button,.tabs button,.stories li{
  transition:transform .2s var(--m-ui),box-shadow .25s var(--m-ui),background-color .2s var(--m-ui),color .2s var(--m-ui),border-color .2s var(--m-ui)}
@media (hover:hover){
  .cta:hover{transform:translate3d(0,-1px,0);box-shadow:0 10px 26px rgba(245,165,36,.42)}
  .chip:hover,.seg button:hover,.tabs button:hover{transform:translate3d(0,-1px,0);color:var(--text)}
  .chip:hover{box-shadow:0 4px 14px rgba(5,10,20,.25),0 0 0 1px rgba(255,255,255,.08)}
  .stories li:hover{transform:translate3d(0,-1px,0);box-shadow:0 6px 18px rgba(5,10,20,.28),0 0 0 1px rgba(255,255,255,.08) inset}
}
.cta:active,.chip:active,.seg button:active,.tabs button:active,.stories li:active{transform:translate3d(0,0,0) scale(.98);transition-duration:.1s}
.cta:focus-visible,.chip:focus-visible,.seg button:focus-visible,.tabs button:focus-visible,.stories li:focus-visible{outline:2px solid rgba(255,226,150,.85);outline-offset:2px}

/* mobile: the island is ~360px wide, so the heat glows shrink to stay readable */
@media (max-width:760px){
  .room{--gs:.6}
  .island-wrap{animation-name:ms-rise}
  .room-card{animation-delay:.4s}
}

/* ---------- reduced motion: nothing moves, everything visible ---------- */
@media (prefers-reduced-motion:reduce){
  .bd-img,.nav,.hero-copy,.island-wrap,.room-card,.hero-side,.room,.island,.room::before,.room b,.room::after{animation:none!important}
  .bd-img{transform:none!important}
  .island{transform:none!important;transition:none}
  html.js-scene .ms-rv{opacity:1!important;transform:none!important}
  .cta,.chip,.seg button,.tabs button,.stories li{transition:background-color .2s,color .2s,box-shadow .2s}
  .cta:hover,.chip:hover,.seg button:hover,.tabs button:hover,.stories li:hover,
  .cta:active,.chip:active,.seg button:active,.tabs button:active,.stories li:active{transform:none}
  .ms-pill-el{transition:opacity .2s}
}