/* Moving pictures: a house drawing that shows a danger happening. One pass is
   --t long; motion.js plays three and lets it rest. Nothing rotates. The marks
   of danger are red (--alarm), by the user's decision of 10 October 2026: the
   one place in the app where a tone outside the brand's palette is used. */
.mv { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; inline-size: 100%; block-size: 100%; min-block-size: 0; --t: 4800ms; }
.mv > svg { display: block; inline-size: 100%; block-size: 100%; min-block-size: 0; overflow: hidden; transition: opacity 380ms linear; }
.mv[data-fade] > svg { opacity: 0; }
.mv .a-dk { fill: none; stroke: var(--alarm); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mv .a-alarm { fill: var(--alarm); stroke: none; }
.mv .a-red { fill: var(--alarm); stroke: var(--alarm); stroke-width: 1; stroke-linejoin: round; }
.mv * { vector-effect: non-scaling-stroke; }

/* the message: the book's own sentence, arriving with the danger */
.mv-cap { margin: 0; padding: .5rem .75rem .55rem; border-block-start: 1px solid var(--hair); background: var(--paper); font-family: var(--serif); font-size: 1.08rem; line-height: 1.3; color: var(--ink); text-align: center; opacity: 0; }
.mv-again { position: absolute; z-index: 5; inset-block-start: .5rem; inset-inline-start: .5rem; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--scrim); color: var(--ink); border: 1px solid var(--hair); transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.mv-again:hover { border-color: var(--brass); }
.mv-again:active { transform: scale(.92); }
.mv-again .ico { inline-size: 1.15rem; block-size: 1.15rem; }
/* on a screen, Play again and full screen keep the foot of the picture, clear of the warning mark and a step's number */
.sc-art .mv-again { inset-block-start: auto; inset-block-end: .5rem; }
.sc-art:has(.mv) > .zoom-btn { inset-block-start: auto; inset-block-end: .5rem; }

/* at the start of a pass */
.mv .k-show, .mv .k-warn, .mv .k-flash, .mv .k-late { opacity: 0; }
.mv .a-streak { fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linecap: round; }
.mv .k-warn { transform-box: fill-box; transform-origin: center; }
.mv .k-draw { vector-effect: none; stroke-width: 1.9; stroke-dasharray: 1; stroke-dashoffset: 1; }   /* drawn in the picture's own units, so its length of 1 holds */

/* one pass: the thing is done (10 to 40%), the danger shows (46 to 56%), it is held (60% on) */
.mv[data-run] > svg { animation: k-clock var(--t) linear both; }
.mv[data-run] .k-go { animation: k-go var(--t) var(--ease) both; }
.mv[data-run] .k-fall { animation: k-fall var(--t) var(--ease) both; }
.mv[data-run] .k-jolt { animation: k-jolt var(--t) linear both; }
.mv[data-run] .k-show, .mv[data-run] .mv-cap { animation: k-show var(--t) linear both; }
.mv[data-run] .k-hide { animation: k-hide var(--t) linear both; }
.mv[data-run] .k-thin { animation: k-thin var(--t) linear both; }
.mv[data-run] .k-flash { animation: k-flash var(--t) linear both; }
.mv[data-run] .k-warn { animation: k-warn var(--t) var(--ease) both; }
.mv[data-run] .k-draw { animation: k-draw var(--t) linear both; }
.mv[data-run] .k-late { animation: k-late var(--t) linear both; }
.mv[data-run] .k-gone { animation: k-gone var(--t) linear both; }
@keyframes k-clock { from { outline-offset: 0px; } to { outline-offset: .01px; } }
@keyframes k-go { 0%, 10% { transform: translate(0, 0); } 38%, 46% { transform: translate(var(--dx, 0px), var(--dy, 0px)); } 58%, 100% { transform: translate(var(--bx, 0px), var(--by, 0px)); } }
@keyframes k-fall { 0%, 46% { transform: translate(0, 0); } 60%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
@keyframes k-jolt { 0%, 30%, 46%, 100% { transform: translate(0, 0); } 33% { transform: translate(-2px, 0); } 36% { transform: translate(2px, 0); } 39% { transform: translate(-2px, 0); } 42% { transform: translate(1.5px, 0); } }
@keyframes k-show { 0%, 46% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes k-hide { 0%, 46% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes k-thin { 0%, 44% { opacity: 1; } 54%, 100% { opacity: .38; } }
@keyframes k-flash { 0%, 44% { opacity: 0; } 50%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes k-warn { 0%, 50% { opacity: 0; transform: scale(.82); } 60%, 100% { opacity: 1; transform: none; } }
@keyframes k-draw { 0%, 12% { stroke-dashoffset: 1; } 38%, 100% { stroke-dashoffset: 0; } }
/* late: what shows, or goes, when a fall has landed */
@keyframes k-late { 0%, 58% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes k-gone { 0%, 58% { opacity: 1; } 62%, 100% { opacity: 0; } }

/* at rest with no motion: for anyone who asked for less motion, and for a picture shown still */
:is(.mv[data-rest], .mv-still) :is(.k-show, .k-warn, .k-late, .mv-cap) { opacity: 1; }
:is(.mv[data-rest], .mv-still) :is(.k-hide, .k-gone) { opacity: 0; }
:is(.mv[data-rest], .mv-still) .k-thin { opacity: .38; }
:is(.mv[data-rest], .mv-still) .k-go { transform: translate(var(--bx, 0px), var(--by, 0px)); }
:is(.mv[data-rest], .mv-still) .k-fall { transform: translate(var(--dx, 0px), var(--dy, 0px)); }
:is(.mv[data-rest], .mv-still) .k-draw { stroke-dashoffset: 0; }

/* where they sit: beside a step, on a Take care screen, in an answer, and full screen */
.sc-art > .mv { inline-size: 100%; block-size: 100%; }
.opt-art > .mv { inline-size: 100%; block-size: 100%; }
.opt-art .mv-again { inline-size: 2.2rem; block-size: 2.2rem; inset-block-start: .3rem; inset-inline-start: .3rem; }
.vw-art .mv { pointer-events: auto; }
.vw-art .mv-cap { background: none; border: 0; font-size: 1.25rem; }

/* a screen with a moving picture gives it room, and the book's sentence beside it lights when the danger shows */
@container stage (orientation: portrait) { .sc[data-kind="art"]:has(.mv) { --p: 36%; } }   /* it still gives way when the words need the room */
.callout, .stepnow-t { transition: background-color 300ms linear, border-color 300ms linear; }
.callout[data-lit] { border-color: var(--alarm); background: var(--l1); }
.stepnow-t[data-lit], .callout [data-sent][data-lit] { background: var(--l2); }
.callout [data-sent] { transition: background-color 300ms linear; border-radius: 3px; }

/* several pictures on one screen (a Take care box with more than one warning): one at a time, dots to choose */
.mv-set { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; inline-size: 100%; block-size: 100%; min-block-size: 0; }
.mv-set > [data-mv-slot] { min-block-size: 0; }
.mv-dots { display: flex; justify-content: center; gap: .15rem; padding-block: 0 .2rem; }
.mv-dots button { inline-size: 2.75rem; block-size: 2rem; display: grid; place-items: center; }
.mv-dots button::before { content: ""; inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--hair); border: 1px solid var(--edge); transition: background var(--fast) var(--ease), inline-size var(--fast) var(--ease); }
.mv-dots button[aria-pressed="true"]::before { inline-size: 1.4rem; border-radius: 999px; background: var(--brass); border-color: var(--brass); }

/* ——— living drawings: every drawing in a chapter builds itself, then the part that does the work moves ———
   Three or four plays and it rests where it began. Nothing travels more than a dozen units, nothing rotates. */
.live :is(path, rect, circle, ellipse, line, polyline, polygon, text) { animation: a-build 460ms var(--ease) calc(var(--i, 0) * 42ms) backwards; }
@keyframes a-build { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
.live :is(.p-cloth, .p-mop) { animation: p-wipe 2200ms ease-in-out 1100ms 3; }
@keyframes p-wipe { 0%, 100% { translate: 0 0; } 25% { translate: -9px 0; } 75% { translate: 9px 0; } }
.live .p-arrow { animation: p-nudge 1500ms ease-in-out 1100ms 4; }
@keyframes p-nudge { 0%, 100% { translate: 0 0; } 50% { translate: var(--ax, 0px) var(--ay, 0px); } }
.live .p-shine { animation: p-twinkle 1500ms ease-in-out 1300ms 4; }
@keyframes p-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.live .p-drop { animation: p-drip 1900ms ease-in 1200ms 3; }
@keyframes p-drip { 0%, 100% { translate: 0 0; opacity: 1; } 68% { translate: 0 8px; opacity: 0; } 72% { translate: 0 -4px; opacity: 0; } }
.live .p-wiggle { animation: p-shimmer 2000ms ease-in-out 1100ms 3; }
@keyframes p-shimmer { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }
.live :is(.p-ok, .p-no) { transform-box: fill-box; transform-origin: center; animation: p-land 520ms var(--ease) 1000ms backwards; }
@keyframes p-land { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .live, .live * { animation: none !important; } }
/* a question's pictures say nothing about right and wrong until it is answered */
.opt:not([data-state]) :is(.p-ok, .p-no), .tf-front :is(.p-ok, .p-no) { display: none; }