/* The exploded-view stage. Shared by final-boss-exploded.html (its own page) and by the hero at
   the top of build.html, so the two cannot drift apart. One button takes the machine apart in
   place; the page scrolls past the stage normally. */
.ex-shell{position:relative}
/* Two shapes, one box. While the hero is the clip it IS the clip's shape (16:9) — a tall box would
   letterbox it into a strip. The press swaps in the 3D, which needs height to turn a machine in. */
.ex-stage{position:relative;height:auto;aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(ellipse at 50% 80%,#141a2e,#0a0a12)}
.ex-stage.live{height:86svh;min-height:520px;aspect-ratio:auto}
.ex-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease}
.ex-stage.live canvas{opacity:1}

/* The poster IS the hero until someone presses the button: on build.html the 3D module is not
   even fetched until then. It stays put underneath, so the canvas fades in over a picture of the
   same machine instead of over a black hole. */
/* contain, never cover: cover crops the machine — on a phone it filled the stage with a slab of
   artwork and no cabinet. Dennis has already reported this once on the homepage clip (sheet row
   59, "want to see the whole arcade top and bottom"). Same choice the machine cards make. */
/* pointer-events:none is NOT optional: these cover the whole stage, and at opacity 0 they are
   still hit-testable — the poster was swallowing every drag, so the machine barely turned. */
.ex-poster,.ex-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  pointer-events:none;transition:opacity .6s ease}
.ex-video{opacity:0}
.ex-video.on{opacity:1}
.ex-stage.live .ex-poster,.ex-stage.live .ex-video{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}

.ex-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--muted);
  font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.14em;transition:opacity .4s ease}
.ex-stage.live .ex-loading{opacity:0;pointer-events:none}
.ex-loading[hidden]{display:none}   /* [hidden] loses to display:grid without this */

.ex-btn{display:block;margin:14px auto 0;max-width:calc(100% - 32px);cursor:pointer;
  font-family:var(--display);text-transform:uppercase;font-size:.78rem;letter-spacing:.14em;
  color:#eaf2ff;background:rgba(8,10,20,.86);border:1px solid var(--blue-lit);border-radius:999px;
  padding:13px 26px;min-height:44px;transition:background .2s ease,color .2s ease}   /* 44px: thumb-sized, WCAG 2.5.8 */
.ex-btn:hover{background:var(--blue-lit);color:#04060f}
/* Safari does not apply :focus-visible to a button reached with Tab — a keyboard user would get
   no focus ring at all. Both selectors, deliberately. */
.ex-btn:focus,.ex-btn:focus-visible{outline:2px solid #eaf2ff;outline-offset:3px}
.ex-btn[disabled]{opacity:.6;cursor:default}

.ex-hint{text-align:center;margin:10px 0 0;opacity:0;
  transition:opacity .4s ease;font-family:var(--display);text-transform:uppercase;
  font-size:.7rem;letter-spacing:.16em;color:var(--muted)}
.ex-hint.on{opacity:1}
@media(prefers-reduced-motion:reduce){.ex-hint{display:none}}

/* Phone: a shorter live stage, and no hint — a phone has no mouse to tell about. */
@media(max-width:700px){
  .ex-stage.live{height:68svh;min-height:420px}
  .ex-btn{padding:12px 22px;font-size:.74rem}   /* min-height:44px inherited from the base rule */
  .ex-hint{display:none}
}