@struq/skill 0.5.1 → 0.5.3

package/skills/struq/blocks/kit/accent.ts

@@ -14,7 +14,8 @@
 // on when it cuts (and cuts again on a resize), and it sits inside the line's mask (.struq-line-mask), whose room
 // above and below the line holds the accent face's tallest and deepest glyph. Its size and leading are the line's
 // own; only the face and the slant change. A block that fits its type to a width measures with the mark in place, and
-// waits for the accent face with accentFaceReady before it trusts a measure.
+// waits for the accent face with accentFaceReady before it trusts a measure. Punctuation that touches the word ("it.",
+// "(licht)") is set with the mark inside one no-wrap span, so it never wraps onto a line of its own.
 import { createElement, Fragment, type ReactNode } from "react";
 
 /** The accent's classes: the pairing's accent face (blocks.css --font-accent), italic. Nothing else changes. */
@@ -41,8 +42,33 @@ export function findAccent(text: string, accent?: string): AccentParts | null {
   };
 }
 
-function marked({ before, word, after }: AccentParts): ReactNode {
-  return createElement(Fragment, null, before, createElement("em", { className: ACCENT_CLASS, "data-accent": "" }, word), after);
+export type GluedParts = { before: string; open: string; word: string; close: string; after: string };
+
+/**
+ * The parts with the punctuation that touches the word on either side (an opening quote or bracket before it, a full
+ * stop, comma or closing quote after it) taken out of the text around it, to be set with the word as one unit.
+ */
+export function glueParts({ before, word, after }: AccentParts): GluedParts {
+  const open = /\S*$/.exec(before)?.[0] ?? "";
+  const close = /^\S*/.exec(after)?.[0] ?? "";
+  return {
+    before: before.slice(0, before.length - open.length),
+    open,
+    word,
+    close,
+    after: after.slice(close.length),
+  };
+}
+
+// The punctuation that touches the word is set inside one no-wrap span with the mark. Without it the full stop after
+// the mark is a text node of its own, and SplitText's line cut wraps each run in an inline block, so on a narrow screen
+// "it." could break into "it" and a "." alone on the next line. The span keeps them on one line in the browser's own
+// wrap and in every cut; a word without touching punctuation gets no span.
+function marked(parts: AccentParts): ReactNode {
+  const { before, open, word, close, after } = glueParts(parts);
+  const em = createElement("em", { className: ACCENT_CLASS, "data-accent": "" }, word);
+  const unit = open || close ? createElement("span", { "data-accent-glue": "", style: { whiteSpace: "nowrap" } }, open, em, close) : em;
+  return createElement(Fragment, null, before, unit, after);
 }
 
 /** The text with its accent word (the first time it occurs) in the accent face; the text itself when it is absent. */

package/skills/struq/blocks/kit/blocks.css

@@ -206,8 +206,9 @@
   initial-value: 0px;
 }
 [data-blocks] :is(.struq-line-mask, .struq-char-mask) {
+  /* The locked room (LOCKED.mask in ./feel.ts): the kit's measured 0.3em above, the site's safer 0.42em below. */
   --struq-mask-top: 0.3em;
-  --struq-mask-bottom: 0.35em;
+  --struq-mask-bottom: 0.42em;
   padding-block: var(--struq-mask-top) var(--struq-mask-bottom);
   margin-block: calc(var(--struq-mask-top) * -1) calc(var(--struq-mask-bottom) * -1);
   overflow: hidden !important;
@@ -405,6 +406,18 @@
 }
 
 /* --- hero-poster --- */
+/* The poster's top line keeps clear of the site's bar on every width: the sheet's top room is the bar's height (the
+   header bar's --hb-top or the menu curtain's --menu-bar-h, shared on the nearest [data-blocks]) plus a breath, and
+   never less than the poster's own margin when there is no bar. The fit reads the room as laid out. */
+[data-blocks] [data-hero-poster] {
+  --hp-bar: var(--hb-top, var(--menu-bar-h, 0px));
+  --hp-pt: max(2rem, calc(var(--hp-bar) + 1.5rem));
+}
+@media (min-width: 768px) {
+  [data-blocks] [data-hero-poster] {
+    --hp-pt: max(4svh, calc(var(--hp-bar) + 3svh));
+  }
+}
 /* With scripts and motion the poster's first paint is the moment before its entrance: the lines wait below their
    masks and the window is a hairline. The block's script takes over (data-live) and plays the entrance; if it never
    arrives everything opens after 3s. Without scripts or under reduced motion the composed poster shows at once. */
@@ -938,18 +951,53 @@
 /* --- menu-curtain --- */
 /* The menu's ground is the gate's deep one (a step darker than the page in every palette, so the menu reads as the
    room the page is shown in); the slices take their own, as in page-transition-slices. Browsers without relative
-   colour take the inverse. The bar's height is shared with the page, which keeps its hero type below it. */
+   colour take the inverse. The bar's height is shared with the page through the nearest [data-blocks], which keeps its
+   hero type below it (hero-poster reads it). */
+[data-blocks]:has([data-menu-curtain]),
 [data-blocks] [data-menu-curtain] {
   --menu-bar-h: 4rem;
+}
+[data-blocks] [data-menu-curtain] {
   --menu: var(--inverse);
   --on-menu: var(--on-inverse);
   --on-menu-muted: color-mix(in oklch, var(--on-menu) 70%, var(--menu));
 }
 @media (min-width: 768px) {
+  [data-blocks]:has([data-menu-curtain]),
   [data-blocks] [data-menu-curtain] {
     --menu-bar-h: 4.5rem;
   }
 }
+/* The bar's ink before the script cuts it, and without scripts: the first section's data-bar-tone (the element right
+   after the curtain, or that element's first child) picks the copy that shows; the script then cuts every copy to the
+   sections under it. */
+[data-blocks] [data-menu-curtain]:not([data-ready]) [data-tone-face]:not([data-tone-face="ground"]),
+[data-blocks]
+  [data-menu-curtain]:not([data-ready]):has(
+    + [data-bar-tone="photo"],
+    + [data-bar-tone="inverse"],
+    + :not([data-bar-tone]) > [data-bar-tone="photo"]:first-child,
+    + :not([data-bar-tone]) > [data-bar-tone="inverse"]:first-child
+  )
+  [data-tone-face="ground"] {
+  clip-path: inset(0 0 100% 0);
+}
+[data-blocks]
+  [data-menu-curtain]:not([data-ready]):has(+ [data-bar-tone="photo"], + :not([data-bar-tone]) > [data-bar-tone="photo"]:first-child)
+  [data-tone-face="photo"],
+[data-blocks]
+  [data-menu-curtain]:not([data-ready]):has(+ [data-bar-tone="inverse"], + :not([data-bar-tone]) > [data-bar-tone="inverse"]:first-child)
+  [data-tone-face="inverse"] {
+  clip-path: none;
+}
+/* Once the page scrolls each copy stands on its solid ground, with a faint hairline, scrubbed by --mc-k over the bar's
+   own height of scroll. */
+[data-blocks] [data-menu-curtain] [data-mc-ground] {
+  opacity: var(--mc-k, 0);
+}
+[data-blocks] [data-menu-curtain] [data-mc-line] {
+  opacity: calc(var(--mc-k, 0) * 0.16);
+}
 @supports (color: oklch(from red l c h)) {
   [data-blocks] [data-menu-curtain] {
     --menu: oklch(from var(--surface-0) min(calc(l * 0.55), 0.2) c h);
@@ -1440,6 +1488,23 @@ html:not(.sq-js) [data-blocks] [data-header-bar] [data-hb-move] {
 [data-blocks] [data-header-bar]:not([data-ready]) [data-hb-copy] {
   visibility: hidden;
 }
+/* The plain bar's ink before the copies show, and without scripts: the start tone, read from the page. The script
+   writes it (data-start, the section under the bar); before it runs, the first section's data-bar-tone decides: the
+   element right after the bar, or that element's first child (a <main> around the sections). */
+[data-blocks] [data-header-bar]:not([data-ready]):is(
+    [data-start="photo"],
+    :not([data-start]):has(+ [data-bar-tone="photo"], + :not([data-bar-tone]) > [data-bar-tone="photo"]:first-child)
+  )
+  [data-hb-real] {
+  color: var(--on-photo);
+}
+[data-blocks] [data-header-bar]:not([data-ready]):is(
+    [data-start="inverse"],
+    :not([data-start]):has(+ [data-bar-tone="inverse"], + :not([data-bar-tone]) > [data-bar-tone="inverse"]:first-child)
+  )
+  [data-hb-real] {
+  color: var(--on-inverse);
+}
 [data-blocks] [data-header-bar][data-ready] [data-hb-real] {
   color: transparent;
 }
@@ -1490,9 +1555,9 @@ html:not(.sq-js) [data-blocks] [data-header-bar] [data-hb-move] {
   outline-offset: 6px;
   border-radius: 1px;
 }
-/* Once the page has scrolled the bar takes the ground under it (over a photo the palette's dark over a blur) and quiet
-   its hairline, all scrubbed by --hb-k over the bar's own height of scroll. */
-[data-blocks] [data-header-bar] :is([data-hb-ground], [data-hb-blur]) {
+/* Once the page has scrolled the bar takes the solid ground under it (over a photo the palette's dark) and quiet its
+   hairline, all scrubbed by --hb-k over the bar's own height of scroll. */
+[data-blocks] [data-header-bar] [data-hb-ground] {
   opacity: var(--hb-k, 0);
 }
 [data-blocks] [data-header-bar] [data-hb-line] {
@@ -1613,7 +1678,7 @@ html:not(.sq-js) [data-blocks] [data-header-bar] [data-hb-time] {
     text-decoration-thickness: 1px;
     text-underline-offset: 0.2em;
   }
-  [data-blocks] [data-header-bar] :is([data-hb-ground], [data-hb-blur], [data-hb-line]) {
+  [data-blocks] [data-header-bar] :is([data-hb-ground], [data-hb-line]) {
     transition: opacity 0.2s linear;
   }
 }
@@ -2143,3 +2208,462 @@ html:not(.sq-js) [data-blocks] [data-header-bar] [data-hb-time] {
     animation: struq-fade 0s 3s forwards;
   }
 }
+
+/* --- subject --- */
+/* The subject pieces (kit/subject: Document, AppScreen, Ticket, PatternPaper, Section): what the client makes, drawn
+   from the page's tokens. Figures are tabular and never break. Printed matter ("print" paper) stands in the palette's
+   own light colour with its own dark ink in every scene, a step brighter than a light ground; the tokens turn inside
+   it, so text-ink, border-line and bg-accent mean the sheet's ink there. */
+[data-blocks] [data-subject] {
+  --subject-accent: var(--accent);
+}
+[data-blocks] [data-subject] .subject-figures {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums lining-nums;
+}
+[data-blocks] [data-subject] .subject-paper {
+  --paper: var(--surface-1);
+  background-color: var(--paper);
+  color: var(--ink);
+}
+[data-blocks] [data-subject] .subject-paper[data-paper="print"] {
+  --paper: var(--on-photo);
+  --ink: var(--photo-ground, var(--inverse));
+  --ink-muted: color-mix(in oklab, var(--ink) 68%, var(--paper));
+  --line: color-mix(in oklab, var(--ink) 16%, transparent);
+  --surface-0: var(--paper);
+  --surface-1: color-mix(in oklab, var(--paper), var(--ink) 5%);
+  --surface-2: color-mix(in oklab, var(--paper), var(--ink) 10%);
+  --surface-3: color-mix(in oklab, var(--paper), var(--ink) 20%);
+  --accent-ink: var(--paper);
+  /* bg-accent reads --color-accent, which [data-blocks] resolved once; point it at the sheet's own accent. */
+  --color-accent: var(--accent);
+}
+@supports (color: oklch(from red l c h)) {
+  [data-blocks] [data-subject] .subject-paper[data-paper="print"] {
+    --paper: oklch(from var(--on-photo) min(calc(l + 0.025), 0.985) calc(c * 0.55) h);
+    --ink: var(--photo-ground, oklch(from var(--on-photo) 0.22 calc(c * 0.6) h));
+    --accent: oklch(from var(--subject-accent) min(l, 0.52) c h);
+  }
+}
+[data-blocks] [data-subject] .subject-dashed {
+  border-top: 1px dashed color-mix(in oklab, var(--ink) 34%, transparent);
+}
+[data-blocks] [data-subject] .subject-slip {
+  margin-inline: calc(var(--pad, 1.5rem) * -1);
+  padding-inline: var(--pad, 1.5rem);
+  border-top: 2px dotted color-mix(in oklab, var(--ink) 40%, transparent);
+}
+[data-blocks] [data-subject] .subject-fold {
+  position: absolute;
+  inset-inline: 0;
+  top: 33.333%;
+  height: 2px;
+  border-top: 1px solid color-mix(in oklab, var(--ink) 6%, transparent);
+  border-bottom: 1px solid color-mix(in oklab, var(--paper) 30%, white);
+  pointer-events: none;
+}
+[data-blocks] [data-subject] .subject-paper[data-edge="torn"] {
+  border-bottom-width: 0;
+  margin-bottom: 0.5rem;
+}
+[data-blocks] [data-subject] .subject-torn polygon {
+  fill: var(--paper);
+}
+/* AppScreen: the changed row warms for a moment (the build tweens --app-glow), over its own ground. */
+[data-blocks] [data-subject] .subject-app-row {
+  box-shadow: inset 0 0 0 100vmax color-mix(in oklab, var(--accent) var(--app-glow, 0%), transparent);
+}
+@media (prefers-reduced-motion: no-preference) {
+  [data-blocks] [data-subject] .subject-caret {
+    animation: subject-caret 1.1s steps(1) infinite;
+  }
+}
+@keyframes subject-caret { 50% { opacity: 0; } }
+/* Ticket: two notches cut where the stub tears off (across on a phone, down the side on a wide ticket), and the
+   perforation between them. The badge's lanyard slot shows the ground it hangs over. */
+[data-blocks] [data-subject] .subject-ticket {
+  --notch: 0.75rem;
+  --tear: calc(100% - 7rem);
+  -webkit-mask:
+    radial-gradient(circle at 0 var(--tear), #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
+    radial-gradient(circle at 100% var(--tear), #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
+  mask:
+    radial-gradient(circle at 0 var(--tear), #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
+    radial-gradient(circle at 100% var(--tear), #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
+}
+[data-blocks] [data-subject] .subject-perforation {
+  border-top: 2px dotted color-mix(in oklab, var(--ink) 45%, transparent);
+}
+@container (min-width: 36rem) {
+  [data-blocks] [data-subject] .subject-ticket {
+    -webkit-mask:
+      radial-gradient(circle at 72% 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
+      radial-gradient(circle at 72% 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
+    mask:
+      radial-gradient(circle at 72% 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
+      radial-gradient(circle at 72% 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
+  }
+  [data-blocks] [data-subject] .subject-perforation {
+    border-top: 0;
+    border-left: 2px dotted color-mix(in oklab, var(--ink) 45%, transparent);
+  }
+}
+[data-blocks] [data-subject] {
+  --subject-ground: var(--surface-0);
+}
+[data-blocks] [data-subject] .subject-slot {
+  background-color: var(--subject-ground);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 30%, transparent);
+}
+
+/* --- motion --- */
+/* The feel tokens (kit/feel.ts) as custom properties, and the CSS of the motion primitives (kit/motion: RevealText,
+   Rise, MaskWipe, ImageCurtain, HoverLink, Pressable, ScrubLine). A site sets data-temperament="crisp|weighted|slow" on
+   <body>; weighted holds without it. These values are feelVars() in kit/feel.ts, and a unit test keeps them equal.
+   The locked values live elsewhere and once: the mask room on .struq-line-mask, the focus ring on :focus-visible. */
+:root,
+[data-temperament="weighted"] {
+  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-exit: cubic-bezier(0.32, 0, 0.67, 0);
+  --ease-swap: cubic-bezier(0.76, 0, 0.24, 1);
+  --ease-curtain: cubic-bezier(0.83, 0, 0.17, 1);
+  --dur-enter: 0.9s;
+  --dur-line: 1.25s;
+  --dur-exit: 0.35s;
+  --dur-swap: 1s;
+  --dur-curtain: 1.4s;
+  --dur-hover-line: 360ms;
+  --dur-hover-color: 280ms;
+  --dur-hover-fill: 500ms;
+  --dur-press-in: 120ms;
+  --dur-press-out: 600ms;
+  --press-sink: 1px;
+  --press-lift: 2px;
+  --travel-block: 48px;
+  --stagger-word: 0.045s;
+}
+[data-temperament="crisp"] {
+  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-exit: cubic-bezier(0.5, 0, 0.75, 0);
+  --ease-swap: cubic-bezier(0.83, 0, 0.17, 1);
+  --ease-curtain: cubic-bezier(0.83, 0, 0.17, 1);
+  --dur-enter: 0.6s;
+  --dur-line: 0.85s;
+  --dur-exit: 0.25s;
+  --dur-swap: 0.7s;
+  --dur-curtain: 0.9s;
+  --dur-hover-line: 240ms;
+  --dur-hover-color: 180ms;
+  --dur-hover-fill: 320ms;
+  --dur-press-in: 90ms;
+  --dur-press-out: 360ms;
+  --press-sink: 1px;
+  --press-lift: 1px;
+  --travel-block: 24px;
+  --stagger-word: 0.03s;
+}
+[data-temperament="slow"] {
+  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-exit: cubic-bezier(0.12, 0, 0.39, 0);
+  --ease-swap: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-curtain: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-enter: 1.3s;
+  --dur-line: 1.7s;
+  --dur-exit: 0.5s;
+  --dur-swap: 1.4s;
+  --dur-curtain: 1.9s;
+  --dur-hover-line: 520ms;
+  --dur-hover-color: 400ms;
+  --dur-hover-fill: 750ms;
+  --dur-press-in: 160ms;
+  --dur-press-out: 900ms;
+  --press-sink: 1px;
+  --press-lift: 3px;
+  --travel-block: 72px;
+  --stagger-word: 0.07s;
+}
+
+/* RevealText by words: each word is a shared mask, set top-aligned, because a clipping inline-block sits on its bottom
+   edge instead of its text's baseline; the rising word carries the mask's room, as every mask child does. */
+[data-blocks] [data-reveal-text] [data-word] {
+  display: inline-block;
+  vertical-align: top;
+}
+[data-blocks] [data-reveal-text] [data-word-rise] {
+  display: inline-block;
+}
+
+/* MaskWipe and ImageCurtain: the panel rests off the photo, so without scripts the photo stands uncovered. */
+[data-blocks] [data-curtain="up"] [data-curtain-panel] {
+  transform: translateY(-100%);
+}
+[data-blocks] [data-curtain="down"] [data-curtain-panel] {
+  transform: translateY(100%);
+}
+[data-blocks] [data-curtain="left"] [data-curtain-panel] {
+  transform: translateX(-100%);
+}
+[data-blocks] [data-curtain="right"] [data-curtain-panel] {
+  transform: translateX(100%);
+}
+
+/* HoverLink: one rule under the text (draw, slide) or a colour turn (color). Focus shows what hover shows. */
+[data-blocks] [data-hover-link] {
+  position: relative;
+  color: inherit;
+  text-decoration: none;
+  transition: color var(--dur-hover-color) var(--ease-enter);
+}
+[data-blocks] :is([data-hover-link="draw"], [data-hover-link="slide"])::after,
+[data-blocks] [data-hover-link="slide"]::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -0.08em;
+  height: 1px;
+  background: currentColor;
+  pointer-events: none;
+}
+[data-blocks] [data-hover-link="draw"]::after {
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform var(--dur-hover-line) var(--ease-enter);
+}
+[data-blocks] [data-hover-link="draw"]:is(:hover, :focus-visible)::after {
+  transform: scaleX(1);
+}
+[data-blocks] [data-hover-link="slide"]::before {
+  clip-path: inset(0 0 0 0);
+  transition: clip-path var(--dur-hover-line) var(--ease-enter) calc(var(--dur-hover-line) * 0.35);
+}
+[data-blocks] [data-hover-link="slide"]::after {
+  clip-path: inset(0 100% 0 0);
+  transition: clip-path var(--dur-hover-line) var(--ease-enter);
+}
+[data-blocks] [data-hover-link="slide"]:is(:hover, :focus-visible)::before {
+  clip-path: inset(0 0 0 100%);
+  transition-delay: 0s;
+}
+[data-blocks] [data-hover-link="slide"]:is(:hover, :focus-visible)::after {
+  clip-path: inset(0 0 0 0);
+  transition-delay: calc(var(--dur-hover-line) * 0.35);
+}
+[data-blocks] [data-hover-link="color"]:is(:hover, :focus-visible) {
+  color: var(--accent);
+}
+
+/* Pressable: lift on hover and focus, give way on press. `translate`, so a magnet's GSAP transform never meets it. */
+[data-blocks] [data-pressable] {
+  -webkit-tap-highlight-color: transparent;
+  transition: translate var(--dur-press-out) var(--ease-enter);
+}
+@media (hover: hover) {
+  [data-blocks] [data-pressable][data-lift]:not(:disabled):hover {
+    translate: 0 calc(var(--press-lift) * -1);
+  }
+}
+[data-blocks] [data-pressable][data-lift]:focus-visible {
+  translate: 0 calc(var(--press-lift) * -1);
+}
+[data-blocks] [data-pressable="sink"]:not(:disabled):active {
+  translate: 0 var(--press-sink);
+  transition-duration: var(--dur-press-in);
+}
+[data-blocks] [data-pressable="fill"] {
+  overflow: hidden;
+  isolation: isolate;
+}
+[data-blocks] [data-pressable] [data-press-fill] {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: var(--press-fill, var(--ink));
+  transform: scaleY(0);
+  transform-origin: bottom center;
+  transition: transform var(--dur-press-out) var(--ease-enter);
+}
+[data-blocks] [data-pressable] [data-press-label] {
+  position: relative;
+  transition: color var(--dur-press-out) var(--ease-enter);
+}
+[data-blocks] [data-pressable="fill"]:not(:disabled):active [data-press-fill] {
+  transform: scaleY(1);
+  transition-duration: var(--dur-press-in);
+}
+[data-blocks] [data-pressable="fill"]:not(:disabled):active [data-press-label] {
+  color: var(--surface-0);
+  transition-duration: var(--dur-press-in);
+}
+
+/* ScrubLine: a rule grows from its start edge. */
+[data-blocks] [data-scrub-line="x"] {
+  transform-origin: left center;
+}
+[data-blocks] [data-scrub-line="y"] {
+  transform-origin: center top;
+}
+
+/* The motion gate: with scripts on and motion allowed, each primitive waits in its start state until it is wired
+   (data-ready), and shows its final state after 3s if that never comes. */
+@media (prefers-reduced-motion: no-preference) {
+  :is(.js, .sq-js) [data-blocks] [data-reveal-text]:not([data-ready]) {
+    visibility: hidden;
+    animation: struq-show 0s 3s forwards;
+  }
+  :is(.js, .sq-js) [data-blocks] [data-wipe]:not([data-ready]) {
+    animation: struq-open 0s 3s forwards;
+  }
+  :is(.js, .sq-js) [data-blocks] [data-wipe="bottom"]:not([data-ready]) {
+    clip-path: inset(100% 0 0 0);
+  }
+  :is(.js, .sq-js) [data-blocks] [data-wipe="top"]:not([data-ready]) {
+    clip-path: inset(0 0 100% 0);
+  }
+  :is(.js, .sq-js) [data-blocks] [data-wipe="left"]:not([data-ready]) {
+    clip-path: inset(0 100% 0 0);
+  }
+  :is(.js, .sq-js) [data-blocks] [data-wipe="right"]:not([data-ready]) {
+    clip-path: inset(0 0 0 100%);
+  }
+  :is(.js, .sq-js) [data-blocks] [data-curtain]:not([data-ready]) [data-curtain-panel] {
+    transform: none;
+    animation: struq-unveil 0s 3s forwards;
+  }
+  :is(.js, .sq-js) [data-blocks] [data-scrub-line="x"]:not([data-ready]) {
+    transform: scaleX(0);
+  }
+  :is(.js, .sq-js) [data-blocks] [data-scrub-line="y"]:not([data-ready]) {
+    transform: scaleY(0);
+  }
+  :is(.js, .sq-js) [data-blocks] [data-scrub-line="path"]:not([data-ready]) {
+    visibility: hidden;
+    animation: struq-show 0s 3s forwards;
+  }
+  :is(.js, .sq-js) [data-blocks] [data-rise]:not([data-ready]) {
+    opacity: 0;
+    animation: struq-fade 0s 3s forwards;
+  }
+}
+
+/* Reduced motion: the same states, cut in, nothing travels. */
+@media (prefers-reduced-motion: reduce) {
+  [data-blocks] [data-hover-link],
+  [data-blocks] [data-hover-link]::before,
+  [data-blocks] [data-hover-link]::after,
+  [data-blocks] [data-pressable],
+  [data-blocks] [data-pressable] :is([data-press-fill], [data-press-label]) {
+    transition: none;
+  }
+  [data-blocks] [data-pressable] {
+    translate: none !important;
+  }
+}
+
+/* --- middle --- */
+/* The middle scenes (kit/middle: ServicesList, ProcessStrip, PlaceHours). Their hover and state changes move on the
+   feel's custom properties above, so a temperament changes their character and nothing else. With scripts on and
+   motion allowed, each scene's parts wait in their start state until its one timeline is built (data-ready on the
+   data-middle root), and stand composed after 3s if that never comes. */
+
+/* ServicesList rows: the accent floods up from the row's foot on hover and on focus; the name turns to the accent's
+   ink and nudges in; the sentence, always shown, turns a quarter of the fill later. */
+[data-blocks] [data-flood] {
+  transform: scaleY(0);
+  transition: transform var(--dur-hover-fill) var(--ease-enter);
+}
+[data-blocks] [data-flood-name] {
+  transition:
+    color var(--dur-hover-fill) var(--ease-enter),
+    translate var(--dur-hover-fill) var(--ease-enter);
+}
+[data-blocks] [data-flood-text] {
+  transition:
+    color var(--dur-hover-fill) var(--ease-enter) calc(var(--dur-hover-fill) / 4),
+    opacity var(--dur-hover-fill) var(--ease-enter) calc(var(--dur-hover-fill) / 4),
+    translate var(--dur-hover-fill) var(--ease-enter) calc(var(--dur-hover-fill) / 4);
+}
+[data-blocks] [data-flood-row]:is(:hover, :focus-visible) [data-flood] {
+  transform: scaleY(1);
+}
+[data-blocks] [data-flood-row]:is(:hover, :focus-visible) :is([data-flood-name], [data-flood-text]) {
+  color: var(--accent-ink);
+}
+[data-blocks] [data-flood-row]:is(:hover, :focus-visible) [data-flood-name] {
+  translate: 1.5vw 0;
+}
+/* The sentence always shows: a services list that hides what each service is until hover reads as names alone
+   (lab check, 2026-11-15). On wide screens hover only lifts it a little as the flood arrives. */
+@media (min-width: 768px) {
+  [data-blocks] [data-flood-row]:is(:hover, :focus-visible) [data-flood-text] {
+    translate: 0 -0.25rem;
+  }
+}
+
+/* ProcessStrip chapters: the stages not in front step back. */
+[data-blocks] [data-chapter] [data-chapter-text] {
+  transition:
+    opacity var(--dur-enter) var(--ease-enter),
+    translate var(--dur-enter) var(--ease-enter);
+}
+[data-blocks] [data-chapter][data-back] [data-chapter-text] {
+  opacity: 0.24;
+  translate: -0.8vw 0;
+}
+
+/* PlaceHours: the open marker, a small ring filled while open. */
+[data-blocks] [data-open-dot] {
+  display: inline-block;
+  flex: none;
+  width: 0.5em;
+  height: 0.5em;
+  border: 1px solid currentColor;
+  border-radius: 50%;
+}
+[data-blocks] [data-open-dot][data-open] {
+  background: currentColor;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :is(.js, .sq-js) [data-blocks] [data-middle]:not([data-ready]) [data-part="heading"] {
+    visibility: hidden;
+    animation: struq-show 0s 3s forwards;
+  }
+  :is(.js, .sq-js) [data-blocks] [data-middle]:not([data-ready]) [data-part="detail"] {
+    opacity: 0;
+    animation: struq-fade 0s 3s forwards;
+  }
+  :is(.js, .sq-js) [data-blocks] [data-middle]:not([data-ready]) [data-part="media"] {
+    clip-path: inset(100% 0 0 0);
+    animation: struq-open 0s 3s forwards;
+  }
+  :is(.js, .sq-js) [data-blocks] [data-middle]:not([data-ready]) [data-part="media"][data-open="margins"] {
+    clip-path: inset(0 6% 0 6%);
+  }
+  :is(.js, .sq-js) [data-blocks] [data-scene="services"][data-variant="panels"]:not([data-motion]) [data-panel] {
+    clip-path: inset(100% 0 0 0);
+    animation: struq-open 0s 3s forwards;
+  }
+  :is(.js, .sq-js) [data-blocks] [data-scene="process"] [data-stage]:not([data-ready]) [data-tick] {
+    clip-path: inset(0 100% 0 0);
+    animation: struq-open 0s 3s forwards;
+  }
+  :is(.js, .sq-js) [data-blocks] [data-scene="process"] [data-stage]:not([data-ready]) [data-term] {
+    visibility: hidden;
+    animation: struq-show 0s 3s forwards;
+  }
+  :is(.js, .sq-js) [data-blocks] [data-scene="process"] [data-stage]:not([data-ready]) [data-text] {
+    opacity: 0;
+    animation: struq-fade 0s 3s forwards;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-blocks] :is([data-flood], [data-flood-name], [data-flood-text], [data-chapter-text]) {
+    transition: none;
+  }
+  [data-blocks] [data-flood-row]:is(:hover, :focus-visible) [data-flood-name] {
+    translate: none;
+  }
+}