/* ==========================================================================
   The 3D mark's still picture (round 7, stage track). Linked on the home
   page only, from stage/partials/head.

   The still is in the page from the first paint and sits exactly where the
   live scene will draw the mark: hp-stage.js reads this box and puts the 3D
   mark over it, so the layout is decided here and nowhere else. The picture
   is 1.2 times the height of the mark in it (STILL_ROOM in hp-stage.js):
   a box of 43.2% by 60% holds a mark of at most 36% of the stage's width
   and 50% of its height, which is the size the scene always had.
   ========================================================================== */
body.hp-ui .hp-stage-still {
    position: absolute; top: 17%; inset-inline-end: 1.4%; width: 43.2%; height: 60%;
    object-fit: contain; pointer-events: none; -webkit-user-select: none; user-select: none;
}
/* Phones and tablets: the stage is its own band under the copy and the mark stands in its middle. */
@media (max-width: 980px) {
    body.hp-ui .hp-stage-still { top: 20%; inset-inline-end: 14%; width: 72%; }
}
/* The same picture, very small, inside this render-blocking sheet: the mark is in the first paint even
   on a line where the sharp picture takes another second or two, and the sharp one then covers it. */
/* build-hp-stills:first-paint (the next line is written by resources/js/build-hp-stills.mjs) */
body.hp-ui .hp-stage-still { background: url("data:image/webp;base64,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") center / contain no-repeat; }
/* build-hp-stills:end */
/* Once the sharp picture is in (or the live scene is), the small one is no longer needed behind it. */
body.hp-ui .hp-stage.has-still > .hp-stage-still { background-image: none; }
/* The live canvas lies over the still and fades in once its first frame is drawn; the still then
   steps aside but keeps its box, which the scene follows when the stage changes size. */
body.hp-ui .hp-stage > .hp-stage-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .28s ease; }
body.hp-ui .hp-stage.is-live > .hp-stage-canvas { opacity: 1; }
body.hp-ui .hp-stage.is-swapped > .hp-stage-still { visibility: hidden; }
/* The still could not be loaded: the flat mark stands in. */
body.hp-ui .hp-stage.is-fallback > .hp-stage-still { display: none; }