/* Build n Bloom drawing kit: motion primitives. Link after kit.css, with kit-motion.js in the head.
   The page is complete at rest. Without the script, with reduced motion, in print or in a capture,
   none of these rules apply and every picture shows its finished state. The script adds a starting
   state, then plays once to the finished state when the picture comes into view, then removes itself.
   Only transform (including the translate, scale and rotate properties) and opacity animate. */

/* Proposed tokens for motion. */
:root {
 --k-m-ease-draw: var(--p-easing-run);
 --k-m-ease-settle: var(--p-easing-out);
 --k-m-ease-pen: cubic-bezier(0.45, 0, 0.25, 1);
 --k-m-ease-land: cubic-bezier(0.3, 1.55, 0.55, 1);
 --k-m-lift: 0.9s;
 --k-m-arrive: 0.5s;
 --k-m-pip: 0.16s;
 --k-m-write: 0.32s;
 --k-m-verdict: 0.34s;
 --k-m-stamp: 0.42s;
 --k-m-stop: 0.4s;
}

@media screen and (prefers-reduced-motion: no-preference) {
 /* Nothing is hidden before a picture is armed. A picture is armed (.k-m-ready) only as it is about to enter
    view, so a capture, a stalled observer or a script error leaves every picture in its finished state. */
 /* Starting states. They hold only until the picture runs. */
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-seg--x { transform: scaleX(0); }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-seg--y { transform: scaleY(0); }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-seg--xy { transform: scale(0); }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-pop { opacity: 0; transform: scale(0.3); }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-label { opacity: 0; }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-stop { opacity: 0; translate: 0 6px; }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) [data-motion~="lift"] { translate: 0 12px; scale: 0.97; }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-carrier::before { opacity: 1; }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-carrier::after { opacity: 0; }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-arrive { translate: 0 -34px; }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-set { opacity: 0; translate: -6px 0; }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-write { opacity: 0; translate: -4px 0; }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-pip::after { opacity: 0; }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-mark { opacity: 0; scale: 1.7; }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-word { opacity: 0; translate: -6px 0; }
 html.k-motion [data-motion-picture].k-m-ready:not(.k-m-run) .k-m-stamp { opacity: 0; scale: 1.4; }

 /* While a picture is armed, a cited line's outline is drawn by four edges, and a lifted sheet's
    shadow is split into its contact (fading out) and its reach (fading in). */
 html.k-motion [data-motion-picture].k-m-ready [data-motion~="cite"] { outline-color: transparent; }
 html.k-motion [data-motion-picture].k-m-ready .k-m-carrier { box-shadow: var(--k-sh-fixed), var(--k-sh-base); }
 html.k-motion [data-motion-picture].k-m-ready .k-m-carrier::before,
 html.k-motion [data-motion-picture].k-m-ready .k-m-carrier::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
 html.k-motion [data-motion-picture].k-m-ready .k-m-carrier::before { box-shadow: var(--k-sh-contact); }
 html.k-motion [data-motion-picture].k-m-ready .k-m-carrier::after { box-shadow: var(--k-sh-reach); }
 .k-m-edge { position: absolute; z-index: 2; left: var(--k-m-x); top: var(--k-m-y); width: var(--k-m-w); height: var(--k-m-h); transform-origin: var(--k-m-o); background: var(--color-line-structure); pointer-events: none; }

 /* Transitions run only while the picture plays. Each element carries its own delay and duration. */
 html.k-motion [data-motion-picture].k-m-run .k-m-seg--x,
 html.k-motion [data-motion-picture].k-m-run .k-m-seg--y,
 html.k-motion [data-motion-picture].k-m-run .k-m-seg--xy { transition: transform var(--k-m-dur) var(--k-m-ease-draw) var(--k-m-delay); }
 html.k-motion [data-motion-picture].k-m-run .k-m-seg--pen { transition-timing-function: var(--k-m-ease-pen); }
 html.k-motion [data-motion-picture].k-m-run .k-m-pop { transition: opacity 0.12s linear var(--k-m-delay), transform 0.3s var(--k-m-ease-land) var(--k-m-delay); }
 html.k-motion [data-motion-picture].k-m-run .k-m-label { transition: opacity 0.3s linear var(--k-m-delay); }
 html.k-motion [data-motion-picture].k-m-run .k-m-stop { transition: opacity var(--k-m-stop) linear var(--k-m-delay), translate var(--k-m-stop) var(--k-m-ease-settle) var(--k-m-delay); }
 html.k-motion [data-motion-picture].k-m-run [data-motion~="lift"] { transition: translate var(--k-m-lift) var(--k-m-ease-settle) var(--k-m-delay), scale var(--k-m-lift) var(--k-m-ease-settle) var(--k-m-delay); }
 html.k-motion [data-motion-picture].k-m-run .k-m-carrier::before,
 html.k-motion [data-motion-picture].k-m-run .k-m-carrier::after { transition: opacity var(--k-m-lift) var(--k-m-ease-settle) var(--k-m-delay); }
 html.k-motion [data-motion-picture].k-m-run .k-m-carrier::before { opacity: 0; }
 html.k-motion [data-motion-picture].k-m-run .k-m-carrier::after { opacity: 1; }
 html.k-motion [data-motion-picture].k-m-run .k-m-arrive { transition: translate var(--k-m-arrive) var(--k-m-ease-settle) var(--k-m-delay); }
 html.k-motion [data-motion-picture].k-m-run .k-m-set,
 html.k-motion [data-motion-picture].k-m-run .k-m-write { transition: opacity var(--k-m-dur) linear var(--k-m-delay), translate var(--k-m-dur) var(--k-m-ease-settle) var(--k-m-delay); }
 html.k-motion [data-motion-picture].k-m-run .k-m-pip::after { transition: opacity var(--k-m-pip) var(--k-m-ease-settle) var(--k-m-delay); }
 html.k-motion [data-motion-picture].k-m-run .k-m-mark { transition: opacity 0.14s linear var(--k-m-delay), scale var(--k-m-verdict) var(--k-m-ease-land) var(--k-m-delay); }
 html.k-motion [data-motion-picture].k-m-run .k-m-word { transition: opacity var(--k-m-verdict) linear var(--k-m-delay), translate var(--k-m-verdict) var(--k-m-ease-settle) var(--k-m-delay); }
 html.k-motion [data-motion-picture].k-m-run .k-m-stamp { transition: opacity 0.1s linear var(--k-m-delay), scale var(--k-m-stamp) var(--k-m-ease-land) var(--k-m-delay); }
}

/* Strips on the specimen: three still frames per primitive, drawn, not played. */
.k-motion-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.k-motion-table th { text-align: left; font-weight: 400; color: var(--color-text-secondary); font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); padding: 0 var(--p-space-3) var(--p-space-2) 0; border-bottom: var(--line-structure) solid var(--color-line-structure); }
.k-motion-table td { vertical-align: top; padding: var(--p-space-4) var(--p-space-3) var(--p-space-4) 0; border-bottom: var(--line-construction) solid var(--color-line-construction); }
.k-motion-table td:first-child { font-family: var(--p-font-family-display); font-size: var(--type-step-1); line-height: var(--type-leading-1); }
.k-motion-table td:first-child code { display: block; margin-top: var(--p-space-2); }
.k-motion-table code { font-family: var(--p-font-family-working); font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); color: var(--color-text-secondary); font-feature-settings: var(--type-figures-tabular); }
.k-motion-table td:nth-child(2) { color: var(--color-text-secondary); }
.k-motion-table .k-figure { font-weight: 500; }
.k-motion-col-name { width: 22%; }.k-motion-col-cause { width: 26%; }.k-motion-col-time { width: 8%; }.k-motion-col-frames { width: 44%; }
.k-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--p-space-3); }
.k-strip figure { margin: 0; }
.k-strip svg * { vector-effect: non-scaling-stroke; }
.k-strip svg { display: block; width: 100%; height: auto; background: var(--color-surface-well) var(--k-grain-ground); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--color-line-construction); }
.k-strip figcaption { margin-top: var(--p-space-1); font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); color: var(--color-text-tertiary); }
.k-strip .s-paper { fill: var(--color-paper); }
.k-strip .s-under { fill: var(--k-leaf); stroke: var(--k-leaf-edge); stroke-width: var(--line-construction); }
.k-strip .s-shadow { fill: var(--k-mat-shade-100); }
.k-strip .s-shadow-far { fill: var(--k-mat-shade-070); }
.k-strip .s-rule { stroke: var(--color-line-construction); stroke-width: var(--line-construction); fill: none; }
.k-strip .s-ink { stroke: var(--color-line-structure); stroke-width: var(--line-structure); fill: none; }
.k-strip .s-pen { stroke: var(--k-ink-pen); stroke-width: var(--line-structure); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k-strip .s-route { stroke: var(--color-route); stroke-width: var(--line-route); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k-strip .s-station { fill: var(--color-surface-page); stroke: var(--color-route); stroke-width: var(--line-construction); }
.k-strip .s-person { fill: var(--color-text-primary); }
.k-strip .s-dark { fill: var(--k-mat-grey-030); }
.k-strip .s-off { fill: var(--k-mat-grey-059); }
.k-strip .s-on { fill: var(--k-mat-grey-235); }
.k-strip .s-row { stroke: var(--k-mat-deep-600); stroke-width: var(--line-construction); }
.k-strip .s-text { fill: var(--color-text-tertiary); }
.k-strip .s-text-dark { fill: var(--k-mat-grey-139); }
.k-strip .s-build { fill: var(--color-route); }
.k-strip .s-stamp { fill: none; stroke: var(--k-ink-stamp); stroke-width: var(--line-structure); }
.k-strip .s-stamp-text { fill: var(--k-ink-stamp); }
@media (max-width: 1439px) {
 .k-motion-table thead { display: none; }
 .k-motion-table, .k-motion-table tbody, .k-motion-table tr, .k-motion-table td { display: block; width: auto; }
 .k-motion-table tr { padding-block: var(--p-space-4); border-bottom: var(--line-construction) solid var(--color-line-construction); }
 .k-motion-table td { border: 0; padding: 0; }
 .k-motion-table td + td { margin-top: var(--p-space-2); }
 .k-motion-table td:last-child { margin-top: var(--p-space-3); }
}