/* The lower page's motion layer, "Ink, Wash & Fold" (js/make/). js/make/director.mjs links this file when it loads and
   sets html.mk only after it has arrived. Pre-states (the unrevealed looks) live under html.mk ONLY: if the motion
   script never loads, throws, or is switched off (?make=off, "make": false), none of these rules match and every
   section is simply finished. Never put a pre-state outside html.mk, and never on [data-printed] (prices, buy buttons,
   the email form and its consent line, hints): those are visible at opacity 1 from the first frame. */

/* ------------------------------------------------------------------ the time-map sheet (js/make/clock.mjs) */
/* its layers exist only while the director is armed; without html.mk they are never painted */
html:not(.mk) [data-mk-layer] { display: none !important; }
/* the stack's blends stay inside the figure while it lives (clock.mjs adds and removes the class) */
.mk-clock { isolation: isolate; }

/* ------------------------------------------------------------------ calm motion (js/motion.js, html[data-motion]) */
/* nothing follows the scroll in calm: a line stage's view() timeline stops (the director lands it on its end) */
html[data-motion="calm"] .mk-map { animation: none !important; }

/* ------------------------------------------------------------------ the seams (js/make/sections/seams.mjs) */
/* each torn edge's paper shadow: a pre-blurred image under the edge's strip (js/app.js tearEdges), at rest at 0.16;
   made only once the director has armed, so with the layer off the seams are exactly the static strips */
.seam-shadow { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; opacity: .16; background: no-repeat 0 0 / 100% 100%; }
.seam-shadow-top { top: -12px; height: 42px; transform-origin: 50% 100%; }
.seam-shadow-bottom { bottom: -12px; height: 38px; transform-origin: 50% 0; }
/* the cast's own shadow reaches 12 px above its top: sideways it still clips, upwards it may show */
html.mk .cast.is-torn { overflow-y: visible; }

/* ------------------------------------------------------------------ the cast (js/make/sections/cast.mjs) */
/* the making's own layers sit in a frame over the picture's content box (clock.mjs extras); all of them transform and
   opacity only. A patch is a white silhouette (minus the other friends), hiding a friend in the picture while their
   cut-out (pixel-identical) squashes or floats over it. */
.mk-frame { overflow: visible; }
.mk-frame > * { position: absolute; pointer-events: none; }
.mk-patch { display: block; max-width: none; }
.mk-cut img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.mk-crayon { left: 0; top: 0; }
.mk-crayon-pop, .mk-crayon-bob { position: absolute; inset: 0; transform-origin: 50% 100%; }
.mk-crayon-bob { rotate: 28deg; }
.mk-crayon svg { display: block; filter: drop-shadow(1px 2px 0 rgba(42, 35, 32, .18)); }
.mk-fleck { display: block; }
/* the glow that pulses behind a name tag as that friend's colour lands (the tag itself, printed, never moves) */
.mk-tag-glow { position: absolute; border-radius: 999px; background: var(--ochre, #e3a93b); opacity: 0; pointer-events: none; }
/* a figure whose screen-blended patches outlive the clock (Pemba and Tolly lifted, a name tap's squash) */
.mk-iso { isolation: isolate; }
.mk-frame img { display: block; max-width: none; }
/* row 3: the cut line (an ink box under the line clock, multiplied over the picture), the scissors, the lifted friends */
.mk-cutline { inset: 0; mix-blend-mode: multiply; isolation: isolate; }
.mk-cutline > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-cutline > img { mix-blend-mode: screen; object-fit: fill; }
.mk-sc { left: 0; top: 0; }
.mk-sc svg { display: block; overflow: visible; filter: drop-shadow(1px 1px 0 rgba(42, 35, 32, .2)); }
.mk-lift, .mk-body { position: absolute; }
.mk-body { inset: 0; }
.mk-body img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the name card's portrait: neutral, then the happiest frame over it (js/make/sections/cast.mjs taps) */
.cast-face { float: right; position: relative; width: 76px; height: 76px; margin: -4px -4px 6px 12px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px var(--paper, #fffaf0), 0 4px 10px rgba(42, 35, 32, .18); }
.cast-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) { .cast-face { width: 60px; height: 60px; } }