/* ============================================================
   CONCEPTO P — THE MAKING (rooms/making.js)
   One stage, held still while the page scrolls under it; one object on
   it. The bench and everything that lies on it is painted by
   rooms/making-gl.js in the room's own light: the white bench, the
   sheets, the water, the mat, and the black things (the rims, the four
   mouldings of the frame, the step's numeral), which are lacquer in the
   ink of the type. The tools a hand brings (the loupe, the printer's
   carriage, the dish, the rod or the brush, the contact frame's clips)
   are plain elements laid over it under the same camera. A pale tool is
   painted with background-image, never background-color, so the house's
   safelight does not take it for a wall and blacken it. The stage itself
   is a wall, and keeps background-color: under the lamp it goes dark.

   white grounds; no line, no button, no underline, no
   veil under the letterhead; figures are the catalogue's, never a code.
   ============================================================ */
.page-making{ position:relative; min-height:100vh; background:#FFFFFF; }
/* the ground under the room is the bench's own: white while the room is lit, the bench's dark at its edges while
   it is dim (data-tone, which the room sets as its light changes). While a step is played the page is moved
   under the pinned stage frame by frame, and a frame can show the ground at the top or the foot of the screen
   for an instant: it is then the room's own ground, never a strip of the house's black. The safelight keeps its own */
html:has(body:not([data-safelight="on"]) .page-making[data-tone="light"]),
body:not([data-safelight="on"]):has(.page-making[data-tone="light"]){ background:#FFFFFF; }
html:has(body:not([data-safelight="on"]) .page-making[data-tone="dark"]),
body:not([data-safelight="on"]):has(.page-making[data-tone="dark"]){ background:#17140F; }
.page-making .mk-track{ position:relative; width:100%; }
.page-making .mk-stage{
  position:sticky; top:0; left:0; width:100%; height:100vh; overflow:hidden;
  background:#FFFFFF; color:var(--fg);
  touch-action:pan-x pinch-zoom;
  --mk-gut:var(--margin);
  /* the slot each step's numeral stands in (the bench draws the figures there: making-gl.js) */
  --mk-num:clamp(64px, 10.5vh, 118px);
}
.page-making .mk-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* the house's vignette for a dark room (push.css, #push-dark) is a veil over the page and under the letterhead: here the
   room's dark is the bench's own, drawn in its light, so nothing is laid over it (P, round 2: no veil under the nav) */
body[data-page="making"] #push-dark{ opacity:0 !important; visibility:hidden; transition:none; }
.page-making .mk-set{ position:absolute; inset:0; pointer-events:none; }
.page-making .mk-tool{ position:absolute; left:0; top:0; will-change:transform, opacity; }

/* ---- the loupe: a black barrel seen from above, its lens the shader's own ---- */
.page-making .mk-loupe{
  border-radius:50%;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 calc(50% - 13px), rgba(0,0,0,.55) calc(50% - 12.5px), #1a1814 calc(50% - 11px), #3a3732 calc(50% - 8px), #1a1814 calc(50% - 4px), #2a2723 calc(50% - 1.5px), transparent 50%),
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.30), transparent 22%);
  box-shadow:0 calc(10px + 26px*var(--lift, 0)) calc(18px + 30px*var(--lift, 0)) rgba(10,8,6,.30);
}

/* ---- the printer's carriage: a rail of brushed steel across the sheet and the black head that runs on it ---- */
.page-making .mk-carriage{ height:18px; }
.page-making .mk-rail{
  position:absolute; left:0; right:0; top:6px; height:6px; border-radius:3px;
  background-image:linear-gradient(180deg, #f4f4f2 0%, #b9b8b4 46%, #8a8985 54%, #d6d5d1 100%);
  box-shadow:0 6px 10px rgba(12,10,8,.22);
}
.page-making .mk-head{
  position:absolute; top:0; height:18px; width:46px; left:var(--hx, 0%);
  transform:translateX(-50%); border-radius:2px;
  background-image:linear-gradient(180deg, #4a4741 0%, #1a1814 42%, #121110 100%);
  box-shadow:0 8px 14px rgba(12,10,8,.32), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---- the dish of sensitiser: a shallow saucer of white porcelain seen from above. Its rim catches the room's light
   on the side the lamp is (upper left) and falls into shade opposite; inside, its wall is shaded where the rim stands
   between it and the lamp; the sensitiser lies in it flat, a pool, never a ball: one colour, a meniscus where it meets
   the porcelain, a soft reflection of the lamp ---- */
.page-making .mk-dish{ border-radius:50%; }
.page-making .mk-dish-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible;
  filter:drop-shadow(2px 3px 2px rgba(20,16,12,.12)) drop-shadow(7px 12px 14px rgba(20,16,12,.13)); }

/* ---- the coating brush: the Instruments' hake, drawn from above (rooms/making.js brushSVG). Its shadow on the bench
   is longer while it is held up (in its dish, in the hand) and closes in as the hair lays the coat ---- */
.page-making .mk-dish{ z-index:1; }
.page-making .mk-brush{ --lift:.55; z-index:2; }   /* the brush lies over the dish it rests in */
.page-making .mk-brush-svg{
  position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible;
  filter:
    drop-shadow(calc(1px + 7px*var(--lift)) calc(2px + 12px*var(--lift)) calc(1.5px + 9px*var(--lift)) rgba(18,14,10,calc(.30 - .12*var(--lift))));
}

/* ---- the contact frame: its glass and its black rim are the bench's; here, its four spring clips of steel ---- */
.page-making .mk-clip{
  position:absolute; width:7%; height:calc(var(--rim, 12px)*1.9);
  border-radius:1px 1px 5px 5px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(90deg, #8e8d89 0%, #efeeea 28%, #c4c3bf 52%, #9a9995 78%, #7c7b77 100%);
  box-shadow:0 4px 6px rgba(12,10,8,.30), inset 0 0 0 .5px rgba(20,18,16,.25);
  transform-origin:50% 0;
  transform:rotateX(calc(70deg*(1 - var(--close, 0)))) translateY(calc(-30%*(1 - var(--close, 0))));
  opacity:calc(.35 + .65*var(--close, 0));
}
.page-making .mk-clip.c1{ left:18%; top:calc(var(--rim, 12px)*-.45); }
.page-making .mk-clip.c2{ right:18%; top:calc(var(--rim, 12px)*-.45); }
.page-making .mk-clip.c3{ left:18%; bottom:calc(var(--rim, 12px)*-.45); transform-origin:50% 100%; }
.page-making .mk-clip.c4{ right:18%; bottom:calc(var(--rim, 12px)*-.45); transform-origin:50% 100%; }

/* ---- the house's blind stamp, pressed into the mat (the mat itself is the bench's) ---- */
.page-making .mk-stamp{
  position:absolute; left:calc(var(--wx) + var(--ww)); top:calc(var(--wy) + var(--wh) + 1.1em);
  transform:translateX(-100%); white-space:nowrap;
  font-family:var(--num, var(--serif)); font-variant-caps:all-small-caps; font-variant-numeric:lining-nums;
  font-size:var(--stamp, 11px); letter-spacing:.14em;
  color:rgba(240,239,236,0);
  text-shadow:0 1px 0 rgba(255,255,255,calc(.95*var(--press, 0))), 0 -1px 0 rgba(90,84,74,calc(.34*var(--press, 0)));
}
.page-making .mk-stamp .rec{ font-variant-caps:all-small-caps; }

/* ---- the counter: the exposure's light and its time, an anthotype's years; a line of the catalogue, under the frame ---- */
.page-making .mk-counter{
  position:absolute; top:0; left:50%; margin:0; pointer-events:none; white-space:nowrap;
  color:var(--fg2);
  transition:color var(--slower) var(--settle);
}
.page-making .mk-counter-v{ color:var(--fg); }
.page-making .mk-counter.has-v .mk-counter-k::after{ content:", "; }

/* ---- the head: which work, and the way to another ---- */
.page-making .mk-head-line{
  position:absolute; left:var(--mk-gut); top:calc(var(--nav-h) + 14px); z-index:3;
  /* the list of works wraps before it reaches the object, the light table being the widest of it */
  max-width:min(34rem, 40vw, calc(var(--mk-obj-l, 40vw) - var(--mk-gut) - 32px));
  color:var(--fg); transition:color var(--slower) var(--settle);
}
/* while the list is open the step's words step back, so one thing is read at a time */
.page-making .mk-words, .page-making .mk-rail-nav{ transition:opacity var(--slow) var(--settle); }
.page-making .mk-stage.is-choosing .mk-words{ opacity:0; }
.page-making .mk-stage.is-choosing .mk-block.is-in{ pointer-events:none; }
.page-making .mk-of{ line-height:1.35; color:var(--fg2); margin:0; }
.page-making .mk-of .mk-id{ color:var(--fg); }
.page-making .mk-choose{ color:var(--fg2); margin-top:-4px; }
.page-making .mk-choose:focus-visible, .page-making .mk-head-line.is-open .mk-choose{ color:var(--fg); }
.page-making .mk-list[hidden]{ display:none; }
/* the list of works: a page of a catalogue's index, record numbers in columns at a size one reads, as wide as the
   words' column it takes the place of; it comes in as the words go, on the house's settle */
.page-making .mk-list{
  margin-top:10px; width:clamp(260px, calc(var(--mk-obj-l, 40vw) - var(--mk-gut) - 48px), 23rem);
  animation:mk-list-in var(--slower) var(--settle) both;
}
@keyframes mk-list-in{ from{ opacity:0; transform:translate3d(0, .5em, 0); } to{ opacity:1; transform:none; } }
.page-making .mk-list-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(5.4em, 1fr)); gap:0 14px; margin:0; }
.page-making .mk-list-k{ line-height:1.4; color:var(--fg2); margin:18px 0 0; }
.page-making .mk-list a{ color:var(--fg2); min-height:38px; }
.page-making .mk-list a.is-here{ color:var(--fg); }

/* ---- the rail: the six steps as their numbers; the name of a step comes out beside it on hover and focus ---- */
.page-making .mk-rail-nav{
  position:absolute; right:var(--mk-gut); top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:flex-end; gap:0;
}
.page-making .mk-mark{
  color:var(--fg3); min-height:44px;
  display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:4px 0;
  transition:color var(--slow) var(--settle);
}
.page-making .mk-mark-name{
  opacity:0; transform:translate3d(6px, 0, 0);
  transition:opacity var(--slow) var(--settle), transform var(--slow) var(--settle);
}
.page-making .mk-mark-no{ line-height:1; min-width:1.6em; text-align:right; }
.page-making .mk-mark:focus-visible{ color:var(--fg2); }
.page-making .mk-mark:focus-visible .mk-mark-name{ opacity:1; transform:none; }
.page-making .mk-mark.is-here{ color:var(--fg); }

/* ---- the words: one block per step, at the left of the object ---- */
.page-making .mk-words{
  position:absolute; left:var(--mk-gut); top:calc(var(--nav-h) + 13vh); z-index:2;
  width:clamp(260px, calc(var(--mk-obj-l, 40vw) - var(--mk-gut) - 48px), 23rem);
  pointer-events:none; color:var(--fg); transition:color var(--slower) var(--settle);
}
.page-making .mk-block{ position:absolute; left:0; top:0; width:100%; visibility:hidden; transition:visibility 0s linear var(--slower); }
.page-making .mk-block.is-in{ visibility:visible; pointer-events:auto; transition-delay:0s; }
.page-making .mk-top{ display:flex; flex-direction:column; align-items:flex-start; }
/* the numeral's slot: the bench draws the figures here; without a bench that can draw them, the figures are type */
.page-making .mk-num-slot{ height:var(--mk-num); width:calc(var(--mk-num)*1.25); margin-bottom:22px; flex:none; }
.page-making .mk-num-dom{ display:block; font-family:var(--num, var(--serif)); font-size:calc(var(--mk-num)*1.42); line-height:.72; color:var(--fg); visibility:hidden; }
.page-making.mk-nogl .mk-num-dom, .page-making:not(.mk-numbered) .mk-num-dom{ visibility:inherit; }
.page-making .mk-title{ color:var(--fg); margin:0 0 22px; }
.page-making .mk-line{ color:var(--fg); margin-bottom:.7em; max-width:26em; }
.page-making .mk-line:first-of-type{ margin-top:0; }
/* the particulars, as a museum label sets them: a quiet name and its value, a record number as a record number */
.page-making .mk-notes{ margin-top:18px; }
.page-making .mk-note{ display:grid; grid-template-columns:minmax(5.6em, auto) 1fr; column-gap:14px; margin:0 0 3px; line-height:1.4; }
.page-making .mk-note-k{ color:var(--fg2); }
.page-making .mk-note-v{ color:var(--fg); }
.page-making .mk-note-v .mk-dash{ color:var(--fg2); }
.page-making .mk-ways{ margin-top:14px; display:flex; flex-wrap:wrap; gap:0 26px; }
.page-making .mk-way{ color:var(--fg); }
/* a hand that hovers: the same answers as a focus, and none left stuck under a finger (hand.js answers the word itself) */
@media (hover:hover){
  .page-making .mk-choose:hover{ color:var(--fg); }
  .page-making .mk-list a:hover{ color:var(--fg); }
  .page-making .mk-mark:hover{ color:var(--fg2); }
  .page-making .mk-mark:hover .mk-mark-name{ opacity:1; transform:none; }
}
/* ---- how the words come and go ----
   The object lands first, then the leaf turns the numeral (the bench's). Then, in reading order: the name is pressed in
   letter by letter (CP.type.reveal); the sentences rise line by line out of their own windows, as a reading line rises
   everywhere in the house, a hush after the last letter (--mk-d1, each window --k on from the last); the particulars
   settle a hush after the last line (--mk-d3). Leaving, the words let go by position: the name first, then each line
   in turn, each going up under its own fold, on the house lift. Nothing feathers: a line is cut by its own window, never
   faded by a veil. At rest (is-reset) nothing is in motion: the words wait under the fold for the next step. */
.page-making .mk-notes, .page-making .mk-ways{ opacity:0; transform:translate3d(0, .6em, 0); }
.page-making .mk-line .rl-i{ transform:translate3d(0, 108%, 0); opacity:0; }
.page-making .mk-block.is-reset *{ transition:none !important; }
.page-making .mk-block.is-in :is(.mk-notes, .mk-ways){
  opacity:1; transform:none;
  transition:opacity var(--slow) var(--settle) var(--mk-d3, 1.6s), transform var(--slower) var(--settle) var(--mk-d3, 1.6s);
}
.page-making .mk-block.is-in .mk-line .rl-i{
  transform:none; opacity:1;
  transition:transform var(--slower) var(--settle) calc(var(--mk-d1, .6s) + var(--k, 0) * 110ms),
             opacity var(--slow) var(--settle) calc(var(--mk-d1, .6s) + var(--k, 0) * 110ms);
}
.page-making .mk-block.is-out :is(.mk-notes, .mk-ways){
  opacity:0; transform:translate3d(0, -.5em, 0);
  transition:opacity var(--slow) var(--lift), transform var(--slow) var(--lift);
}
.page-making .mk-block.is-out .mk-line .rl-i{
  transform:translate3d(0, -108%, 0); opacity:0;
  transition:transform var(--slow) var(--lift) calc(var(--beat) * 3 + var(--k, 0) * 50ms),
             opacity var(--slow) var(--lift) calc(var(--beat) * 3 + var(--k, 0) * 50ms);
}
/* the name lets go upward too, not back down into the sheet */
.page-making .mk-block.is-out .cp-reveal .cp-l{ transform:translate3d(0, -.1em, 0); }

/* ---- a phone: the object above, the words below it; the numeral stands beside the name ---- */
@media (max-width:759px){
  .page-making .mk-stage{ --mk-gut:16px; --mk-num:44px; }
  .page-making .mk-head-line{ top:calc(var(--nav-h) + 2px); max-width:calc(100vw - 32px - 44px); }
  .page-making .mk-list{ width:auto; }
  .page-making .mk-rail-nav{ left:16px; right:auto; top:calc(var(--nav-h) + 66px); transform:none; flex-direction:row; gap:0; }
  .page-making .mk-mark{ padding:0 18px 0 0; gap:0; min-width:44px; justify-content:flex-start; }
  .page-making .mk-mark-name{ display:none; }
  .page-making .mk-mark-no{ text-align:left; min-width:0; }
  /* the list of works opens where the row of steps is, and over the head of the object: the row steps back
     with the words, and the bench sinks into its own ground until a work is chosen or the list is closed */
  .page-making .mk-stage.is-choosing .mk-rail-nav{ opacity:0; pointer-events:none; }
  .page-making .mk-gl, .page-making .mk-set{ transition:opacity var(--slow) var(--settle); }
  .page-making .mk-stage.is-choosing :is(.mk-gl, .mk-set){ opacity:.10; }
  /* the words sit above the house's lamp word, which keeps the lower right corner */
  .page-making .mk-words{ left:16px; right:16px; width:auto; top:auto; bottom:calc(58px + env(safe-area-inset-bottom, 0px)); height:auto; }
  .page-making .mk-block{ top:auto; bottom:0; }
  .page-making .mk-top{ flex-direction:row; align-items:flex-end; gap:16px; margin-bottom:10px; }
  .page-making .mk-num-slot{ margin:0 0 4px; }
  .page-making .mk-title{ margin:0; line-height:.95; }
  .page-making .mk-line{ line-height:1.45; margin-bottom:.4em; }
  .page-making .mk-notes{ margin-top:8px; }
  .page-making .mk-note{ margin-bottom:1px; }
  .page-making .mk-ways{ margin-top:4px; gap:0 20px; }
}

/* ---- stillness: the steps cut, each in its finished state; the words stand at once, and fade whole ---- */
@media (prefers-reduced-motion:reduce){
  .page-making .mk-list{ animation:none; }
  .page-making .mk-notes, .page-making .mk-ways, .page-making .mk-line .rl-i{ transform:none !important; transition-delay:0s !important; }
  .page-making .mk-block.is-in :is(.mk-notes, .mk-ways, .mk-line .rl-i){ transition:opacity var(--slow) var(--settle); }
  .page-making .mk-block.is-out :is(.mk-notes, .mk-ways, .mk-line .rl-i){ transition:opacity var(--slow) var(--settle); }
}
.page-making.mk-still .mk-title{ opacity:0; transition:opacity var(--slow) var(--settle); }
.page-making.mk-still .mk-block.is-in .mk-title{ opacity:1; transition:opacity var(--slower) var(--settle); }

/* ---- under the lamp: the room is red, the words the lamp's ink, the tools stay seen ---- */
body.is-safelit[data-safelight="on"] .page-making .mk-stage{ background:#070302; }
/* the lamp hangs over the bench here: its red falls brightest on the object, so the sheet is always read
   by it (a darkroom is dim, never black), and the room round it keeps the house's deep red */
body.is-safelit[data-safelight="on"]:not(.dr-on, .launch-on):has(.page-making)::after{
  background:radial-gradient(72% 80% at 56% 52%, #E8492A 0%, #D23E22 48%, #A8301A 100%);
}
@media (max-width:759px){
  body.is-safelit[data-safelight="on"]:not(.dr-on, .launch-on):has(.page-making)::after{
    background:radial-gradient(100% 62% at 50% 40%, #E8492A 0%, #D23E22 48%, #A8301A 100%);
  }
}
body.is-safelit[data-safelight="on"] .page-making .mk-stamp{ color:transparent !important; }

/* ---------- the hand: what the visitor can do at the coat and in the wash ----------
   One quiet line at the foot of the stage, only while the hand can do something; nothing drawn round it */
.mk-hand{ position:absolute; z-index:6; left:50%; bottom:clamp(18px, 5.5vh, 54px); margin:0; transform:translate3d(-50%, 8px, 0);
  white-space:nowrap; pointer-events:none; opacity:0; color:var(--ink);
  transition:opacity var(--slow) var(--settle), transform var(--slow) var(--settle); }
.mk-hand > span{ display:none; }
.mk-hand[data-mode="coat"], .mk-hand[data-mode="wash"]{ opacity:.78; transform:translate3d(-50%, 0, 0); }
.mk-hand[data-mode="coat"] .mk-hand-coat, .mk-hand[data-mode="wash"] .mk-hand-wash{ display:inline; }
@media (pointer:coarse){
  .mk-hand-coat{ font-size:0; } .mk-hand-coat::after{ content:"Draw over the sheet to coat it"; font-size:var(--t-label-s, 12px); }
  .mk-hand-wash{ font-size:0; } .mk-hand-wash::after{ content:"Move your finger in the water"; font-size:var(--t-label-s, 12px); }
}
@media (prefers-reduced-motion:reduce){ .mk-hand{ transition:none; } }
@media (max-width:759px){ .mk-hand{ bottom:calc(clamp(18px, 5.5vh, 54px) + 30px); } }

/* ============================================================
   THE ROOM'S ATMOSPHERE (process/atmos.js): the UV lamp's violet dusk, the sun's flood, the water's light.
   P, 28 October: the water and the UV were "barely noticeable". Over the bench and its tools, under the words.
   ============================================================ */
.page-making .mk-atmos{ position:absolute; inset:0; pointer-events:none; overflow:hidden; --fx:50%; --fy:50%; --lx:50%; --ly:30%; }
.page-making .mk-atmos > *{ position:absolute; inset:0; display:block; opacity:0; will-change:opacity; }
/* the room down to violet dusk round the lit frame */
.page-making .mk-uv-room{
  background:radial-gradient(ellipse 40% 54% at var(--fx) var(--fy), #F3EEFF 0%, #DCCFFF 26%, #8F72E8 52%, #3B2486 78%, #1C1048 100%);
  mix-blend-mode:multiply;
}
/* what the lamp throws: a violet bloom under the tubes, over everything */
.page-making .mk-uv-glow{
  background:
    radial-gradient(ellipse 26% 13% at var(--lx) var(--ly), rgba(206,186,255,.85) 0%, rgba(150,112,255,.4) 40%, rgba(112,70,255,0) 75%),
    radial-gradient(ellipse 30% 46% at var(--fx) var(--fy), rgba(170,140,255,.16) 0%, rgba(140,100,255,0) 70%);
  mix-blend-mode:screen;
  animation:mk-hum 2.6s ease-in-out infinite;
}
/* the tubes themselves, white hot with their violet bloom */
.page-making .mk-uv-tube{
  inset:auto; left:0; top:0; border-radius:999px;
  background:linear-gradient(180deg, #FFFFFF 0%, #F1EBFF 40%, #C9B4FF 100%);
  box-shadow:0 0 8px 2px rgba(255,255,255,.9), 0 0 30px 10px rgba(170,135,255,.8), 0 0 90px 26px rgba(130,90,255,.45);
  mix-blend-mode:screen;
}
.page-making .mk-atmos.is-striking .mk-uv-room,
.page-making .mk-atmos.is-striking .mk-uv-glow,
.page-making .mk-atmos.is-striking .mk-uv-tube{ animation:mk-strike .9s steps(1, end) 1; }
@keyframes mk-strike{ 0%{ filter:brightness(.2); } 12%{ filter:brightness(1.4); } 22%{ filter:brightness(.15); } 34%{ filter:brightness(1.2); } 44%{ filter:brightness(.5); } 56%,100%{ filter:none; } }
@keyframes mk-hum{ 0%, 100%{ filter:brightness(1); } 50%{ filter:brightness(1.12); } }
/* the words read light on the dusk */
.page-making .mk-stage.is-fx-dark{ --fg:#F4F0FF; color:#F4F0FF; }
.page-making .mk-stage.is-fx-dark > :not(.mk-gl):not(.mk-set):not(.mk-atmos),
.page-making .mk-stage.is-fx-dark > :not(.mk-gl):not(.mk-set):not(.mk-atmos) *{ color:#F4F0FF !important; -webkit-text-fill-color:#F4F0FF !important; }
.page-making .mk-stage.is-fx-dark > :not(.mk-gl):not(.mk-set):not(.mk-atmos) :is(.t-title, .t-sub, .t-display, .t-label, .t-label-s){ filter:url(#cp-vinyl-w-s); }

/* the sun: a warm flood from the upper left, breathing as cloud passes */
.page-making .mk-sun-room{
  background:
    radial-gradient(ellipse 70% 70% at 18% 8%, rgba(255,214,140,.95) 0%, rgba(255,190,110,.5) 30%, rgba(255,170,90,0) 70%),
    radial-gradient(ellipse 50% 60% at var(--fx) var(--fy), rgba(255,236,190,.6) 0%, rgba(255,220,160,0) 70%);
  mix-blend-mode:screen;
  animation:mk-cloud 7s ease-in-out infinite;
}
@keyframes mk-cloud{ 0%, 100%{ filter:brightness(1); } 40%{ filter:brightness(.82); } 60%{ filter:brightness(1.05); } }

/* the water: the room takes its cool colour, deepest at the edges */
.page-making .mk-water-room{
  background:radial-gradient(ellipse 50% 62% at var(--fx) var(--fy), #FFFFFF 0%, #E6F3F6 30%, #A4CBD8 64%, #5F93A8 100%);
  mix-blend-mode:multiply;
}
/* light from the surface, moving over everything */
.page-making .mk-caustic{ width:100%; height:100%; filter:blur(4px) contrast(1.2); mix-blend-mode:screen; transform:scale(1.06); }
/* one ring out from the print as it goes under */
.page-making .mk-ring{
  inset:auto; left:var(--fx); top:var(--fy); width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 9px rgba(120,170,190,.35), inset 0 0 0 6px rgba(60,110,130,.25), 0 0 40px 10px rgba(255,255,255,.35);
}
.page-making .mk-ring.is-on{ animation:mk-ring 2.4s cubic-bezier(.16,.7,.3,1) 1; }
@keyframes mk-ring{ 0%{ opacity:.95; transform:scale(.5); } 100%{ opacity:0; transform:scale(60); } }
@media (prefers-reduced-motion:reduce){
  .page-making .mk-uv-glow, .page-making .mk-sun-room{ animation:none; }
  .page-making .mk-caustic, .page-making .mk-ring{ display:none; }
}