/* 50 · MOTION (owner: B4) — prefix .mo- */
.mo{overflow:clip;padding-block:clamp(72px,8vw,128px)}
.mo-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(46% 26% at 66% 14%,rgba(59,99,255,.10),transparent 70%),
             radial-gradient(60% 22% at 50% 52%,rgba(59,99,255,.07),transparent 70%)}
.mo>*{position:relative;z-index:1}

/* ---------- intro row: headline left, live chart right (no empty column on arrival) ---------- */
.mo-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,48px);align-items:center}
.mo-head{display:grid;gap:22px;align-content:center}
.mo-head .t-l{max-width:12ch}
.mo-head .t-lead{max-width:40ch}

.mo-chart{position:relative;margin:0;height:min(72vh,620px);min-height:440px;isolation:isolate}
.mo-chart__glow{position:absolute;inset:-12% -10% -4%;z-index:0;pointer-events:none;
  background:radial-gradient(46% 50% at 52% 56%,rgba(59,99,255,.22),rgba(59,99,255,.05) 50%,transparent 74%)}
.mo-gl,.mo-still{position:absolute;inset:0 0 44px;width:100%;height:calc(100% - 44px);z-index:1}
.mo-gl{opacity:0;transition:opacity .9s var(--e-out)}
.mo-chart.is-placed .mo-gl{opacity:1}
.mo-still{object-fit:contain;display:none}
.mo-chart.is-nogl .mo-still{display:block}
.mo-chart.is-nogl .mo-labels,.mo-chart.is-nogl .mo-cap--live{display:none}
.mo-labels{position:absolute;inset:0 0 44px;z-index:2;pointer-events:none;opacity:0;transition:opacity .6s var(--e-out)}
.mo-chart.is-placed .mo-labels{opacity:1}
.mo-lb{position:absolute;left:0;top:0;will-change:transform;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.mo-lb--v{font-size:clamp(20px,1vw + 12px,32px);font-weight:700;letter-spacing:-.03em;color:var(--fg);line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.mo-lb--v small{font-size:.55em;font-weight:600;letter-spacing:-.01em;color:var(--fg-2);margin-left:1px}
.mo-lb--k{font-size:14px;font-weight:500;color:var(--fg-2)}
.mo-lb--k.is-hero{color:var(--blue-2)}
.mo-lb--ax{font-size:12px;font-weight:500;color:var(--fg-4)}
.mo-chart__cap{position:absolute;left:0;right:0;bottom:0;height:44px;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  font-size:var(--t-micro);color:var(--fg-3)}
.mo-chart__cap b{color:var(--fg-2);font-weight:600;margin-right:6px}
.mo-cap--live{display:inline-flex;align-items:center;gap:10px}
.mo-cap--live i{width:18px;height:1px;background:var(--blue);box-shadow:0 0 8px rgba(59,99,255,.9)}
.mo-live-touch{display:none}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.mo-live-fine{display:none}.mo-live-touch{display:inline}}

/* ---------- the reel: three full-height renders on the media grid ---------- */
.mo-reel{--g:clamp(14px,1.6vw,24px);width:min(100% - 2*var(--gutter),1440px,calc(3 * 76vh * .5625 + 2 * var(--g)));margin:clamp(64px,7vw,112px) auto 0}
.mo-reel__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.mo-fx{margin:0;display:grid;gap:16px;align-content:start}
.mo-fx--phone{display:none}
.mo-fx__media{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:var(--r-media);overflow:hidden;background:#05060a;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.8),0 0 100px -30px rgba(59,99,255,.22);transition:transform .3s var(--e-press)}
.mo-fx__media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.16);transition:box-shadow .4s var(--e-out)}
.mo-fx__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* progress hairline inside the bottom edge: fills while that render plays */
.mo-fx__bar{position:absolute;left:18px;right:18px;bottom:16px;height:2px;z-index:3;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden;opacity:0;transition:opacity .3s}
.mo-fx__bar i{position:absolute;inset:0;background:var(--fg);transform-origin:0 50%;transform:scaleX(0)}
.mo-fx.is-on .mo-fx__bar{opacity:1}
.mo-fx.is-on .mo-fx__media::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.3)}
.mo-fx figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:4px;align-items:baseline;padding-right:8px}
.mo-fx figcaption em{font-style:normal;font-size:14px;font-weight:600;color:var(--fg-4);font-variant-numeric:tabular-nums;transition:color .3s}
.mo-fx.is-on figcaption em{color:var(--blue-2)}
.mo-fx figcaption b{font-size:clamp(17px,.4vw + 15px,21px);font-weight:600;letter-spacing:-.012em;color:var(--fg)}
.mo-fx figcaption span{grid-column:2;font-size:var(--t-small);line-height:1.45;color:var(--fg-3)}
@media (hover:hover) and (pointer:fine){.mo-fx__media:hover{transform:translateY(-2px)}}
.mo-swipe{display:none}

/* ---------- the whole sequence, 16:9, full grid width ---------- */
.mo-montage{margin-top:clamp(64px,7vw,112px);display:grid;gap:22px}
.mo-montage__media{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:var(--bg-1);
  box-shadow:0 50px 140px -40px rgba(0,0,0,.75),0 0 120px -20px rgba(59,99,255,.2)}
.mo-montage__media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.18)}
.mo-montage__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mo-chip{position:absolute;z-index:3;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;
  font-size:14px;font-weight:600;color:var(--fg)}
.mo-chip svg{position:relative;z-index:2}
.mo-montage__cap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,3vw,48px);align-items:start}
.mo-montage__t{font-size:var(--t-small);line-height:1.5;color:var(--fg-3);max-width:60ch}
.mo-montage__t b{display:block;font-size:clamp(17px,.4vw + 15px,21px);font-weight:600;letter-spacing:-.012em;color:var(--fg);margin-bottom:4px}
.mo-montage__pace{font-size:clamp(20px,.8vw + 14px,26px);line-height:1.25;letter-spacing:-.015em;font-weight:600;color:var(--fg);text-wrap:balance}

/* ---------- tablet: chart stacks under the headline; renders swipe ---------- */
@media (max-width:899px){
  .mo-intro{grid-template-columns:1fr}
  .mo-chart{height:min(60vh,520px);min-height:380px}
  .mo-montage__cap{grid-template-columns:1fr;gap:12px}
}
/* phones + tablets: renders become a swipe row with a hairline progress cue */
@media (max-width:899px){
  .mo-reel{width:auto;margin-top:48px}
  .mo-reel__row{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(76vw,340px);gap:14px;overflow-x:auto;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);scrollbar-width:none}
  .mo-reel__row::-webkit-scrollbar{display:none}
  .mo-fx{scroll-snap-align:start;scroll-snap-stop:always}
  .mo-swipe{display:block;position:relative;height:2px;margin:22px var(--gutter) 0;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
  .mo-swipe i{position:absolute;top:0;bottom:0;left:0;width:var(--w,30%);background:var(--blue);transform:translateX(var(--x,0));border-radius:2px}
}
/* phones: no WebGL chart (the 3D chart render is in the swipe row instead) */
@media (max-width:733px){
  .mo-chart{display:none}
  .mo-fx--phone{display:grid}
  .mo-intro{gap:0}
  .mo-montage{margin-top:56px}
}
/* phones: no backdrop-filter over playing video (cheaper scrolling) — the chip becomes a tinted solid */
@media (max-width:733px){
  .mo-chip.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(12,14,20,.78)}
}