@refrakt-md/lumina 0.22.0 → 0.24.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -84,9 +84,10 @@
     "generate-tokens": "node scripts/generate-tokens.mjs"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.22.0",
-    "@refrakt-md/transform": "0.22.0",
-    "@refrakt-md/types": "0.22.0"
+    "@refrakt-md/runes": "0.24.0",
+    "@refrakt-md/skeleton": "0.24.0",
+    "@refrakt-md/transform": "0.24.0",
+    "@refrakt-md/types": "0.24.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/base/attributes.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Universal Rune Attributes — spacing & inset
  *
  * Compound attribute selectors [data-rune][data-*] give specificity (0,2,0):
@@ -19,11 +20,9 @@
 [data-rune][data-inset="loose"]   { padding-inline: var(--rf-inset-loose, 4rem); }
 [data-rune][data-inset="breathe"] { padding-inline: var(--rf-inset-breathe, 8rem); }
 
-/* ── Elevation — drop shadow (box-shadow) ──────────────────────────────
- * Universal `elevation` attribute (SPEC-086). Maps to the shared --rf-shadow-*
- * token scale; `none` explicitly flattens a rune's default shadow. */
+/* The `elevation` axis (SPEC-107) — depth-ladder chrome (fill / border / radius
+ * / resting shadow) — is mapped by value in dimensions/surfaces.css. The old
+ * SPEC-086 shadow scale (none/sm/md/lg) is superseded; the engine maps those
+ * deprecated aliases onto the ladder before they reach the DOM. */
 
-[data-rune][data-elevation="none"] { box-shadow: var(--rf-shadow-none); }
-[data-rune][data-elevation="sm"]   { box-shadow: var(--rf-shadow-sm); }
-[data-rune][data-elevation="md"]   { box-shadow: var(--rf-shadow-md); }
-[data-rune][data-elevation="lg"]   { box-shadow: var(--rf-shadow-lg); }
+}

package/styles/dimensions/checklist.css

@@ -1,21 +1,11 @@
-/* === Checklist: universal checkbox item styling === */
+@layer skin {
+/* === Checklist — skin ===
+ * The indicator chrome (fill, border, radius, box-shadow) and the item text
+ * treatment per state. The indicator gutter + box placement/size live in
+ * @refrakt-md/skeleton (dimensions/checklist.css). */
 
-/* All checklist items get left padding for the indicator */
-[data-checked] {
-	position: relative;
-	padding-left: 1.75rem;
-	list-style: none;
-	margin-left: -1.5rem;
-}
-
-/* Indicator base — positioned left of text */
+/* Indicator base chrome. */
 [data-checked]::before {
-	content: '';
-	position: absolute;
-	left: 0.125rem;
-	top: 0.5em;
-	width: 1rem;
-	height: 1rem;
 	border-radius: var(--rf-radius-sm, 0.25rem);
 	border: 2px solid var(--rf-color-border);
 	background: transparent;
@@ -59,23 +49,4 @@
 	background: transparent;
 }
 
-/* === Density interaction === */
-
-/* Compact: tighter spacing */
-[data-density="compact"] [data-checked] {
-	padding-left: 1.5rem;
-}
-
-[data-density="compact"] [data-checked]::before {
-	width: 0.75rem;
-	height: 0.75rem;
-}
-
-/* Minimal: indicators only, no text */
-[data-density="minimal"] [data-checked] {
-	font-size: 0;
-	padding-left: 0;
-	display: inline-block;
-	width: 1rem;
-	height: 1rem;
 }

package/styles/dimensions/cover.css

@@ -1,116 +1,32 @@
-/* Cover layout (SPEC-089) — `media-position="cover"`.
+@layer skin {
+/* Cover layout (SPEC-089) — skin.
  *
- * The media well fills the rune interior and the content overlays it (the poster
- * / cover card). The media stays a media guest — the thin-edge frame and
- * `--rf-radius-media` are preserved — with content floated on top via grid
- * stacking (media + content share one grid cell). No overlay primitive in the
- * layout config; the variant supplies the structure (SPEC-091), CSS positions.
- *
- * Height authority: an external grid track (bento) wins; else the media aspect
- * (`frame-aspect`, default portrait); a card height/aspect knob overrides via the
- * cascade. Cover supersedes the media-vs-content split knobs (content-height /
- * media-ratio), which have no meaning when there is no split. */
+ * The grid-overlay *structure* (media well + content share one grid cell, the
+ * well fills/crops its guest, the overlay positions via content-place) lives in
+ * @refrakt-md/skeleton (dimensions/cover.css). What remains here is skin: the
+ * media radii, the overlay's surface padding, and the legibility scrim
+ * (gradient / frost) painted over the media. */
 
-/* ── full scope — the whole content overlays the media well ──────────── */
-[data-media-position="cover"]:not([data-cover-scope="header"]) {
-	display: grid;
-	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
-	aspect-ratio: var(--frame-aspect, var(--cover-aspect, 3 / 4));
-	container-type: size;
-	overflow: hidden;
-	isolation: isolate;
-}
-[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-section="media"],
-[data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"] {
-	grid-area: 1 / 1;
-	margin: 0;
-	min-width: 0;
-}
-
-/* ── header scope — only the cover-band overlays; body flows below ────── */
 [data-cover-scope="header"] > [data-name="cover-band"] {
-	display: grid;
-	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
-	aspect-ratio: var(--frame-aspect, 16 / 9);
 	border-radius: var(--rf-radius-media);
-	overflow: hidden;
-	isolation: isolate;
-	container-type: size;
-}
-/* On narrow screens a 16/9 band is too short to seat the preamble over the
- * scrim, so default it to a taller (≥1:1) poster shape. An explicit
- * `frame-aspect` still wins. */
-@media (max-width: 40rem) {
-	[data-cover-scope="header"] > [data-name="cover-band"] {
-		aspect-ratio: var(--frame-aspect, 4 / 5);
-	}
-}
-[data-cover-scope="header"] > [data-name="cover-band"] > [data-section="media"],
-[data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
-	grid-area: 1 / 1;
-	margin: 0;
 }
 
-/* ── shared: the media well fills, the overlaid box positions ─────────── */
 [data-media-position="cover"] [data-section="media"] {
-	position: relative;
-	height: 100%;
 	border-radius: var(--rf-radius-media);
-	overflow: hidden;
-}
-[data-media-position="cover"] [data-section="media"] > :is(img, video) {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-/* SPEC-101 — non-img/video guests (a sandbox, an embed) fill the well too.
- * They can't be object-fit-cropped, so they get the well's box outright;
- * display:block covers undefined custom elements (inline by default). */
-[data-media-position="cover"] [data-section="media"] > :not(img, video) {
-	display: block;
-	width: 100%;
-	height: 100%;
 }
+
 /* A backdrop sandbox sits flush in the well — the well's own radius/overflow
- * does the clipping. The iframe height is pinned inline by the element in
- * `fill` mode; this carries the fixed-height case visually until then. */
+ * does the clipping. */
 [data-media-position="cover"] [data-section="media"] .rf-sandbox {
-	margin: 0;
 	border-radius: 0;
 }
-[data-media-position="cover"] [data-section="media"] .rf-sandbox iframe {
-	height: 100%;
-}
-/* The overlaid box (full: content; header: preamble) anchors via content-place. */
+
+/* The overlaid box carries the surface padding (density-aware via --rune-padding). */
 [data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"],
 [data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {
-	position: relative;
-	z-index: 1;
-	align-self: var(--cover-place-block, end);
-	justify-self: var(--cover-place-inline, stretch);
 	padding: var(--rune-padding, var(--rf-spacing-md));
 }
 
-/* ── auto / unset placement ───────────────────────────────────────────
- * `auto` is the cover default, so an unset content-place behaves the same as an
- * explicit `auto`. A header band is always a caption strip — the preamble sits at
- * the block-end over the scrim regardless of the band's orientation. A full-scope
- * overlay adapts to the cover region's orientation (portrait → block-end caption;
- * landscape → inline-start side panel). An explicit value (e.g. "center center")
- * sets the `--cover-place-*` vars on the base rule above and does NOT match here,
- * so it pins regardless of orientation. */
-[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"],
-[data-cover-scope="header"]:is([data-content-place="auto"], :not([data-content-place])) > [data-name="cover-band"] > [data-name="preamble"] {
-	align-self: end;
-	justify-self: stretch;
-}
-@container (min-aspect-ratio: 1 / 1) {
-	[data-media-position="cover"]:not([data-cover-scope="header"]):is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"] {
-		align-self: center;
-		justify-self: start;
-	}
-}
-
 /* ── default cover scrim (SPEC-088 scrim, on the media surface) ────────
  * Overlaying text on an arbitrary image without a scrim is a legibility footgun,
  * so cover applies a default gradient scrim weighted toward the content edge.
@@ -169,3 +85,5 @@
 	 * reads at full foreground strength — the same colour as the headline. */
 	--rf-color-muted: var(--rf-color-text);
 }
+
+}

package/styles/dimensions/density.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* ─── Density Dimension ─────────────────────────────────────────────────
  * Controls spacing, visibility, and detail level across all runes.
  * Three levels: full (dedicated page), compact (grid/card), minimal (list).
@@ -74,3 +75,5 @@
 [data-density="minimal"] [data-density="full"] [data-meta-rank="secondary"] {
 	display: revert;
 }
+
+}

package/styles/dimensions/frame.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Frame chrome (SPEC-086) — media-surface presentation.
  *
  * The engine lands the frame contract on the frame-target element: a rune's
@@ -102,3 +103,5 @@
  * clipped by the zone's `overflow: hidden` regardless of width, so the peek
  * reads consistently from desktop to mobile. For self-target (showcase) the
  * negative-margin spill stays on too — that's the intended breakout. */
+
+}

package/styles/dimensions/media.css

@@ -1,62 +1,15 @@
-/* ─── Media Slots Dimension ─────────────────────────────────────────────
- * Generic treatment for 5 media slot types: portrait, cover, thumbnail,
- * hero, icon. Applied via data-media attribute on image/media elements.
- *
- * Includes density × media interactions (compact shrinks, minimal hides).
- * ────────────────────────────────────────────────────────────────────── */
-
-/* ─── Portrait: circular crop ─────────────────────────────────────── */
-
-[data-media="portrait"] {
-	border-radius: var(--rf-radius-full);
-	aspect-ratio: 1 / 1;
-	object-fit: cover;
-	width: var(--media-portrait-size, 5rem);
-	height: var(--media-portrait-size, 5rem);
-}
-
-/* ─── Cover: full-width banner image ──────────────────────────────── */
-
-[data-media="cover"] {
-	width: 100%;
-	object-fit: cover;
-	border-radius: var(--rf-radius-md);
-}
-
-/* ─── Thumbnail: small fixed preview ──────────────────────────────── */
-
-[data-media="thumbnail"] {
-	width: var(--media-thumbnail-size, 3rem);
-	height: var(--media-thumbnail-size, 3rem);
-	border-radius: var(--rf-radius-sm);
-	object-fit: cover;
-	flex-shrink: 0;
-}
-
-/* ─── Hero: large responsive image ────────────────────────────────── */
-
-[data-media="hero"] {
-	width: 100%;
-	object-fit: cover;
-}
-
-/* ─── Icon: small square, no crop ─────────────────────────────────── */
-
-[data-media="icon"] {
-	width: var(--media-icon-size, 2rem);
-	height: var(--media-icon-size, 2rem);
-	object-fit: contain;
-	flex-shrink: 0;
-}
-
-/* ─── Density × Media ─────────────────────────────────────────────── */
-
-/* Compact: smaller portraits */
-[data-density="compact"] [data-media="portrait"] {
-	--media-portrait-size: 3rem;
-}
-
-/* Minimal: hide all media */
-[data-density="minimal"] [data-media] {
-	display: none;
+/* ─── Media Slots Dimension — skin ──────────────────────────────────────
+ * The rounded corners of each slot type. Slot sizing/fit (the geometry) is
+ * structure and lives in `@refrakt-md/skeleton` (styles/dimensions/media.css). */
+
+@layer skin {
+	[data-media="portrait"] {
+		border-radius: var(--rf-radius-full);
+	}
+	[data-media="cover"] {
+		border-radius: var(--rf-radius-md);
+	}
+	[data-media="thumbnail"] {
+		border-radius: var(--rf-radius-sm);
+	}
 }

package/styles/dimensions/metadata.css

@@ -1,13 +1,12 @@
-/* ─── Metadata Dimensions ──────────────────────────────────────────────
- * SPEC-080 typography / geometry split:
- *  - `[data-meta-type=…]` selectors carry ONLY typography hints
- *    (monospace, tabular-nums). No padding, no border, no chip geometry.
- *  - Geometry comes from `[data-zone-layout=…]` selectors (`bar`,
- *    `definition-list`) and from the universal `.rf-badge` class, which
- *    is emitted by chip-type fields AND by the standalone `{% badge %}`
- *    rune.
- *  - Sentiment rules drive `--meta-color`, which the chip and any
- *    sentiment-tinted text inherits.
+@layer skin {
+/* ─── Metadata Dimensions — skin ───────────────────────────────────────
+ * SPEC-080 typography / geometry split. The zone-layout *structure* (bar +
+ * definition-list display/grid, the rating flex row, the sr-only label
+ * mechanism) lives in @refrakt-md/skeleton (dimensions/metadata.css). What
+ * remains here is skin: sentiment colours, meta-type typography, the rating
+ * glyph + colours, the chip/def-list spacing + borders + radius, and labels.
+ *  - `[data-meta-type=…]` selectors carry ONLY typography hints.
+ *  - Sentiment rules drive `--meta-color`, inherited by chips + tinted text.
  * ────────────────────────────────────────────────────────────────────── */
 
 /* ─── Sentiment ────────────────────────────────────────────────────── */
@@ -44,9 +43,10 @@
 }
 
 /* Rating — `value` filled marks out of `total`; each mark carries
- * `data-filled`. Stars via colour (filled = primary, empty = border). */
+ * `data-filled`. Stars via colour (filled = primary, empty = border). The
+ * inline-flex row is structure (skeleton); the glyph + spacing + colours are
+ * skin. */
 [data-meta-type="rating"] {
-	display: inline-flex;
 	gap: 0.0625rem;
 	line-height: 1;
 }
@@ -73,50 +73,22 @@
 	text-underline-offset: 0.15em;
 }
 
-/* ─── Layout: bar (SPEC-080) ───────────────────────────────────────── */
-
-/* Horizontal flex row of fields, each in its own intrinsic shape (chip or
- * bare). Wraps by default; `data-wrap="false"` keeps it on one line. A field
- * tagged `data-align="end"` (and everything after it) is pushed to the right
- * edge. */
+/* ─── Layout: bar — spacing ────────────────────────────────────────── */
+/* The flex row + end-push are structure (skeleton); the gap is skin. */
 [data-zone-layout="bar"] {
-	display: flex;
-	flex-wrap: wrap;
 	gap: 0.5rem;
-	align-items: center;
-}
-[data-zone-layout="bar"][data-wrap="false"] {
-	flex-wrap: nowrap;
-}
-[data-zone-layout="bar"] [data-align="end"] {
-	margin-left: auto;
 }
 
-/* ─── Layout: definition-list ──────────────────────────────────────── */
-
-/* Single source of truth for the `definition-list` primitive, shared by
- * both the projected metadata zone (`<dl data-zone="…">`) and the authored
- * `{% deflist %}` rune (`<dl data-rune="deflist">`) — they emit the same
- * `data-zone-layout` so they render identically (geometry, borders, margin).
- *
- * Each row stacks `dt` above `dd`. Rows flow into multiple columns
- * via `auto-fit` — CSS grid naturally collapses to a single column
- * when the container is narrower than the minimum, so the same rule
- * reads fine on mobile and packs dense on wider screens without a
- * media-query step. The 8rem minimum keeps short label / value pairs
- * like "Prep" + "15m" tight while leaving room for the per-item border. */
+/* ─── Layout: definition-list — spacing + chrome ───────────────────── */
+/* The grid + row stacking are structure (skeleton); the gaps, the per-row
+ * border/padding/radius card chrome, and the dt/dd type are skin. */
 [data-zone-layout="definition-list"] {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
 	gap: 0.75rem;
 	margin: 1.25rem 0;
 }
 
 [data-zone-layout="definition-list"] > [data-name="row"] {
-	display: flex;
-	flex-direction: column;
 	gap: 0.125rem;
-	min-width: 0;
 	padding: 0.625rem 0.75rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-sm);
@@ -129,15 +101,10 @@
 }
 
 [data-zone-layout="definition-list"] dd {
-	margin: 0;
 	font-size: var(--rf-text-sm);
 }
 
-/* Multi-value dd (fields with `splitOn`) renders a row of chips
- * inside the cell, flowing naturally. */
 [data-zone-layout="definition-list"] dd[data-multi-value] {
-	display: flex;
-	flex-wrap: wrap;
 	gap: 0.25rem;
 }
 
@@ -149,19 +116,6 @@
 	opacity: 0.65;
 }
 
-/* Visually hidden labels — accessible to screen readers only */
-[data-meta-label-hidden] {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
-}
-
 /* ─── Mobile: compact ──────────────────────────────────────────────── */
 
 @media (max-width: 48rem) {
@@ -169,26 +123,22 @@
 		gap: 0.375rem;
 	}
 
-	/* On narrow screens, fall back to the original label-left / value-right
-	 * list: each row's dt/dd flow directly into a two-column grid via
-	 * `display: contents`, which drops the per-item border (no box to paint).
-	 * The border + padding move to the list itself so the whole group reads
-	 * as one bordered card. */
+	/* The border + padding move to the list itself so the whole group reads as
+	 * one bordered card (the per-row box is dropped by the skeleton's
+	 * `display: contents`). */
 	[data-zone-layout="definition-list"] {
-		grid-template-columns: max-content 1fr;
 		gap: 0.25rem 1rem;
-		align-items: baseline;
 		padding: 0.75rem 1rem;
 		border: 1px solid var(--rf-color-border);
 		border-radius: var(--rf-radius-sm);
 	}
 
-	[data-zone-layout="definition-list"] > [data-name="row"] {
-		display: contents;
-	}
-
+	/* Header rhythm stays skin with sections.css (deferred until the split layout
+	 * + sections promote together). */
 	[data-section="header"] {
 		gap: 0.375rem;
 		margin-bottom: 1.5rem;
 	}
 }
+
+}

package/styles/dimensions/motion.css

@@ -0,0 +1,102 @@
+/* ─── Motion Dimension — skin (SPEC-105) ───────────────────────────────────
+ * Scroll-reveal entrance choreography. The split that keeps motion from leaking
+ * author concerns into theme concerns:
+ *   • Author declares *intent* — `data-reveal` / `data-stagger` (the engine, WORK-431).
+ *   • The behaviour owns *when* — `data-in-view` + the root `data-animate` gate (WORK-433).
+ *   • This file owns *how* — the physics, keyed on `data-reveal` × `data-in-view`.
+ *
+ * It covers every section rune from ONE stylesheet: it keys on the generic
+ * attributes + the `--rf-reveal-index` marker, never on a rune's structure, so no
+ * rune's own CSS gains a motion block. Motion is theme choreography (skin); the
+ * framework structure (@refrakt-md/skeleton) has none — a different theme ships its
+ * own motion.css. Retune calm↔punchy purely via the tokens below.
+ *
+ * Reduced motion is handled by the global reset (WORK-352, global.css), which
+ * neutralises transition/animation durations; the behaviour also marks everything
+ * in-view immediately. */
+
+@layer skin {
+	/* Physics tokens (`--rf-reveal-duration` / `-easing` / `-distance` /
+	 * `-scale-start` / `-blur` / `-stagger`) are part of the theme TokenContract
+	 * (SPEC-105), defined in `src/tokens.ts` and emitted into `tokens/base.css`.
+	 * A site retunes the feel via `refrakt.config.json` `theme.tokens.reveal.*`;
+	 * this file only *consumes* them. The fallbacks below keep motion sensible if a
+	 * theme ships this stylesheet without the reveal token group. */
+
+	/* Per-character offsets — set on the `[data-reveal]` container and inherited by
+	 * staggered children, so the single hidden-state block below covers every
+	 * character. `none` carries no offsets (it never animates). */
+	[data-reveal="fade"]  { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: 1;                       --reveal-blur: 0; }
+	[data-reveal="slide"] { --reveal-x: 0; --reveal-y: var(--rf-reveal-distance, 1.5rem); --reveal-scale: 1;             --reveal-blur: 0; }
+	[data-reveal="scale"] { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: var(--rf-reveal-scale-start, 0.95); --reveal-blur: 0; }
+	/* `blur` is focus-led; it animates `filter` (not compositor-cheap), so a theme
+	 * or low-power path may downgrade it to `fade` by zeroing the blur token. */
+	[data-reveal="blur"]  { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: 1;                       --reveal-blur: var(--rf-reveal-blur, 8px); }
+
+	/* The animated unit:
+	 *   • non-staggered → the `[data-reveal]` element itself,
+	 *   • staggered     → its indexed children (`[style*="--rf-reveal-index"]`).
+	 * Everything is gated under the root `[data-animate]` flag the behaviour sets on
+	 * boot — no JS → no flag → fully visible, nothing hidden (SSR-complete).
+	 *
+	 * CRITICAL: reveal animates the INDIVIDUAL `translate`/`scale` properties, never
+	 * the `transform` shorthand, so it composes with the rune transforms Lumina
+	 * already uses (hover-lifts on card/cta/feature, frame displacement, drawer/nav
+	 * slides) instead of clobbering them. */
+	[data-animate] :where(
+		[data-reveal]:not([data-reveal="none"]):not([data-stagger]),
+		[data-stagger]:not([data-reveal="none"]) [style*="--rf-reveal-index"]
+	) {
+		transition:
+			opacity   var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
+			translate var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
+			scale     var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
+			filter    var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out);
+	}
+
+	/* Pre-entrance (hidden) — until the unit's trigger fires. */
+	[data-animate] :where(
+		[data-reveal]:not([data-reveal="none"]):not([data-stagger]):not([data-in-view]),
+		[data-stagger]:not([data-reveal="none"]):not([data-in-view]) [style*="--rf-reveal-index"]
+	) {
+		opacity: 0;
+		translate: var(--reveal-x) var(--reveal-y);
+		scale: var(--reveal-scale);
+		filter: blur(var(--reveal-blur));
+	}
+
+	/* Revealed (resting) — explicit IDENTITY values, never the `none` default.
+	 * This is what makes the entrance interpolate in WebKit: Safari does not
+	 * transition `translate`/`scale`/`filter` to-or-from `none`, so reverting to
+	 * the default would snap (no motion on iOS) — only opacity would animate.
+	 * Transitioning between two explicit values animates everywhere. */
+	[data-animate] :where(
+		[data-reveal]:not([data-reveal="none"]):not([data-stagger])[data-in-view],
+		[data-stagger][data-in-view] [style*="--rf-reveal-index"]
+	) {
+		opacity: 1;
+		translate: 0 0;
+		scale: 1;
+		filter: blur(0);
+	}
+
+	/* Stagger — each child's entrance offset from the container's single in-view
+	 * trigger by its engine-stamped index against the interval token. */
+	[data-animate] [data-stagger][data-in-view] [style*="--rf-reveal-index"] {
+		transition-delay: calc(var(--rf-reveal-index) * var(--rf-reveal-stagger, 140ms));
+	}
+
+	/* Per-part choreography (opt-in polish, not required): on a non-staggered
+	 * sliding section, let the media arrive a beat behind the content for a subtle
+	 * two-part entrance. Demonstrated on the named anatomy the theme already styles;
+	 * a theme adds or drops this freely. */
+	[data-animate] [data-reveal="slide"]:not([data-stagger]):not([data-in-view]) > * > [data-section="media"] {
+		translate: 0 calc(var(--rf-reveal-distance, 1.5rem) * 1.5);
+	}
+	[data-animate] [data-reveal="slide"]:not([data-stagger])[data-in-view] > * > [data-section="media"] {
+		translate: 0 0;  /* explicit identity end-state — see the WebKit note above */
+	}
+	[data-animate] [data-reveal="slide"]:not([data-stagger]) > * > [data-section="media"] {
+		transition: translate var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out);
+	}
+}