/* truemanity studio — the paper reveal (builds/bio/REVEAL-PRINCIPLE.md, test 1; proposed, registered by the main
   session). A photograph that becomes the interface: the page's own scroll moves the camera into the sheet on the wall,
   and the photographed sheet hands over to the live one lying exactly under it.

     .pr[data-paper-reveal]   the entry. --fw, --fh: the photograph's frame, in its own pixels.
     .pr__stage               the vertical stage, --pr-w wide: a phone's whole width, a centred column on a wide screen.
     .pr__layer               one layer of the photograph, placed in the frame by its box (--bx, --by, --bw, --bh, in
                              frame pixels): the room, the sheet, the person, in that order.
     .pr__wide                before them all, on a wide screen: the room carried on past the frame's sides.
     .pr__live                the live sheet.
     .pr__veil                the photographed paper, multiplied over the live sheet (render/sheet-veil.jpg; --va its
                              width over its height). With it the live sheet has the photograph's paper at the
                              hand-over, so only the ink changes there; it then clears as the visitor reads on.

   As written here, with no script and with reduced motion, it is the photograph and then the interface below it: the
   layers stand in their boxes and form the picture. system/paper-reveal.js adds .pr--live, pins the stage and moves
   the layers; everything it needs beyond that is two lengths, --pr-zoom and --pr-fade, and two opacities, --pr-live and --pr-veil. */

.pr { --pr-w: min(100vw, max(360px, 50svh)); position: relative; }
.pr__stage { position: relative; width: var(--pr-w); margin: 0 auto; aspect-ratio: var(--fw) / var(--fh); overflow: hidden; }
.pr__layer { position: absolute; display: block; max-width: none;
  left: calc(var(--bx) / var(--fw) * 100%); top: calc(var(--by) / var(--fh) * 100%);
  width: calc(var(--bw) / var(--fw) * 100%); height: calc(var(--bh) / var(--fh) * 100%); }
.pr__live { width: var(--pr-w); margin: 0 auto; }
.pr__veil { display: none; }

/* ——— live: the stage is pinned for the zoom, then leaves with the page, the live sheet riding on it ——— */
.pr--live .pr__track { height: calc(var(--pr-zoom) + 100svh + var(--pr-fade)); }
.pr--live .pr__pin { position: sticky; top: 0; height: calc(100svh + var(--pr-fade)); overflow: hidden; }
/* the stage is the column the camera is reckoned in; it does not clip (the pin does, at the screen's edges), so on a
   wide screen whatever of the photograph lies beyond the column is seen: the room carried on (.pr__wide), the room
   and the person as the camera closes in */
.pr--live .pr__stage { aspect-ratio: auto; height: 100%; overflow: visible; }
/* a layer is laid out at its box's own size and carried by one transform: the camera's, at that layer's depth.
   --bd, where a layer's picture is smaller than its box (its pixels per frame pixel): the layer is laid out at the
   picture's size and the script scales it back, so a wall five frames wide is never held at full size */
.pr--live .pr__layer { left: 0; top: 0; width: calc(var(--bw) * var(--bd, 1) * 1px); height: calc(var(--bh) * var(--bd, 1) * 1px); transform-origin: 0 0; will-change: transform; backface-visibility: hidden; }
/* the room carried on to both sides (render/layer-room-wide.jpg, the skill's widen_room.py; --wide its address): the
   first layer, under the room, at the room's depth. Only where the screen is wider than the column, so a phone
   never fetches it; without the script the photograph is the column it always was. */
.pr__wide { display: none; }
@media (min-aspect-ratio: 3/5) {
  .pr--live .pr__wide { display: block; background: var(--wide) 0 0 / 100% 100% no-repeat; }
}
/* the live sheet starts where the zoom ends: over the last screen of the track, so that at the hand-over it lies on
   the photographed sheet, and from there both move with the page, by the browser's own scroll */
.pr--live .pr__live { position: relative; z-index: 1; margin-top: calc(-100svh - var(--pr-fade)); opacity: var(--pr-live, 0); }
.pr--live .pr__live[data-pr-held] { pointer-events: none; }
.pr--live .pr__veil { display: block; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: var(--va); background: var(--veil) 0 0 / 100% 100% no-repeat; mix-blend-mode: multiply; opacity: var(--pr-veil, 1); pointer-events: none; }
.pr__probe { position: absolute; top: 0; left: 0; width: 0; height: 100svh; visibility: hidden; pointer-events: none; }