/* ==========================================================================
   MetaFlight HUD - home hero globe + native WFM panel (2026-10-26)
   Replaces the 16:9 hero film (globe and panel baked into one video, soft on
   large screens) with:
   - a square globe-only loop (1440 AV1 / 1440 H.264 / 960 H.264 mobile),
     painted over a poster image, radial-masked so it has no edge;
   - the WFM panel as real HTML, synced to the video clock by mf-hud-globe.js.
   Geometry follows the old film: stage = right --mf-film-w of the hero,
   centred 1920px stage above 1920. Active only when body has mf-hg-on
   (all five assets resolved), so the old film stays intact until then.
   ========================================================================== */

/* The globe layer is positioned against the SECTION, not the 1240px
   container, so the container stops being the containing block and the copy
   column carries the stacking instead. */
body.breakdance.mf-hg-on .mf-h-hero > .section-container{position:static}
body.breakdance.mf-hg-on .mf-h-hero .mf-h-hero-in{position:relative;z-index:5}

body.breakdance .mf-hg{position:absolute;inset:0;pointer-events:none}

body.breakdance .mf-hg .mf-hg-stage{
  position:absolute;z-index:0;
  top:4.5rem;bottom:8rem;right:0;width:var(--mf-film-w,53%);
  container-type:size;
  display:grid;place-items:center;
}
body.breakdance .mf-hg .mf-hg-orb{
  position:relative;
  width:min(100cqw,100cqh);height:min(100cqw,100cqh);
  /* the disc is 78% of the frame: opaque through the disc and its rim, the
     halo then dissolves into the void, so the square never shows */
  -webkit-mask-image:radial-gradient(closest-side,#000 80%,rgba(0,0,0,.55) 90%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 80%,rgba(0,0,0,.55) 90%,transparent 100%);
}
body.breakdance .mf-hg .mf-hg-orb > img,
body.breakdance .mf-hg .mf-hg-orb > video{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;max-width:none;margin:0;
  object-fit:cover;background:transparent;
}
body.breakdance .mf-hg .mf-hg-orb > video{opacity:0;transition:opacity .9s var(--mf-ease,ease)}
body.breakdance .mf-hg .mf-hg-orb > video.is-on{opacity:1}

/* ---- native WFM panel ---------------------------------------------------- */
body.breakdance .mf-hg .mf-hg-panel{
  position:absolute;z-index:5;pointer-events:auto;
  right:max(2rem,calc((100% - 1240px) / 2 + 2rem));
  bottom:11.5rem;
  width:310px;
}
body.breakdance .mf-hg .mf-hg-hub{
  display:flex;align-items:baseline;gap:.75rem;
  padding:1rem 1.2rem .35rem;
}
body.breakdance .mf-hg .mf-hg-code{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:1.9rem;line-height:1;letter-spacing:.04em;color:var(--mf-text);
}
body.breakdance .mf-hg .mf-hg-city{
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mf-cyan);
}
body.breakdance .mf-hg .mf-hg-rows{
  list-style:none;margin:0;padding:.55rem 1.2rem 1rem;
  display:grid;gap:.6rem;
  transition:opacity .22s ease;
}
body.breakdance .mf-hg .mf-hg-panel.is-swap .mf-hg-rows,
body.breakdance .mf-hg .mf-hg-panel.is-swap .mf-hg-hub{opacity:.15}
body.breakdance .mf-hg .mf-hg-hub{transition:opacity .22s ease}
body.breakdance .mf-hg .mf-hg-rows > li{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:.3rem .8rem;margin:0;padding:0;
}
body.breakdance .mf-hg .mf-hg-r{
  font-family:var(--mf-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.08em;color:var(--mf-text);white-space:nowrap;
}
body.breakdance .mf-hg .mf-hg-sat{
  display:none;margin-left:.5rem;
  font-size:.5rem;letter-spacing:.16em;color:var(--mf-danger);
}
body.breakdance .mf-hg .is-sat .mf-hg-sat{display:inline}
body.breakdance .mf-hg .mf-hg-pax{
  font-family:var(--mf-mono);font-size:.64rem;
  letter-spacing:.06em;color:var(--mf-muted);text-align:right;white-space:nowrap;
}
body.breakdance .mf-hg .mf-hg-bar{
  grid-column:1 / -1;display:block;height:3px;
  background:rgba(160,225,255,.10);overflow:hidden;
}
body.breakdance .mf-hg .mf-hg-bar > i{
  display:block;height:100%;width:var(--f,0%);
  background:var(--mf-cyan);
  transition:width .9s var(--mf-ease,ease),background-color .3s ease;
}
body.breakdance .mf-hg .is-sat .mf-hg-bar > i{background:var(--mf-danger)}
body.breakdance .mf-hg .mf-hg-foot{
  padding:.7rem 1.2rem .8rem;
  box-shadow:inset 0 1px 0 var(--mf-hair);
  font-family:var(--mf-mono);font-size:.55rem;line-height:1.6;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mf-muted);
}
body.breakdance .mf-hg .mf-hg-foot b{font-weight:500;color:var(--mf-danger)}

/* ---- ultra-wide: same centred 1920 stage as the film ---------------------- */
@media (min-width:1921px){
  body.breakdance .mf-hg .mf-hg-stage{
    right:calc((100% - 1920px) / 2);
    width:calc(1920px * .53);
  }
}
/* below 1440 the globe frame has no free corner for the panel; the film
   carries the story alone (docked, compact panel since 2026-10-27) */
@media (max-width:1439px), (max-height:819px){
  body.breakdance .mf-hg .mf-hg-panel{display:none}
}
/* ---- tablet + phone: the globe becomes the backdrop behind the copy ------ */
@media (max-width:1023px){
  body.breakdance .mf-hg .mf-hg-stage{top:0;bottom:0;left:0;right:0;width:auto}
  body.breakdance .mf-hg .mf-hg-orb{width:min(112cqw,100cqh);height:min(112cqw,100cqh)}
}
@media (prefers-reduced-motion:reduce){
  body.breakdance .mf-hg .mf-hg-orb > video{display:none}
  body.breakdance .mf-hg .mf-hg-bar > i,
  body.breakdance .mf-hg .mf-hg-rows,
  body.breakdance .mf-hg .mf-hg-hub{transition:none}
}

body.breakdance .mf-hg .mf-hg-foot i{font-style:normal;color:var(--mf-amber)}

/* centre the orb even when it is wider than the stage (phones): grid centring
   falls back to start on overflow */
body.breakdance .mf-hg .mf-hg-orb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
/* behind running copy the globe is texture, not content: the hub labels
   must never compete with the lead paragraph */
@media (max-width:1023px){body.breakdance .mf-hg .mf-hg-orb{opacity:.38}}

/* ===== COMPACT PANEL, DOCKED TO THE GLOBE (2026-10-27) =====
   mf-hud-globe.js pins the panel to a lower corner of the globe frame, the
   corner chosen per hub from measured route coverage (is-bl = lower left).
   The rules above stay as the no-JS fallback. */
body.breakdance .mf-hg .mf-hg-panel{width:296px;transition:opacity .25s ease}
body.breakdance .mf-hg .mf-hg-panel.is-hide{opacity:0}
body.breakdance .mf-hg .mf-h-panel-head{padding:.6rem 1rem}
body.breakdance .mf-hg .mf-hg-hub{padding:.7rem 1rem .2rem}
body.breakdance .mf-hg .mf-hg-code{font-size:1.5rem}
body.breakdance .mf-hg .mf-hg-rows{padding:.45rem 1rem .75rem;gap:.45rem}
body.breakdance .mf-hg .mf-hg-foot{padding:.55rem 1rem .6rem;font-size:.5rem;line-height:1.55}