@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/dist/components/core/illustration-choice/illustration-choice-impl.css

@@ -0,0 +1,103 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/* Grid structure the contract's static CSS cannot hold: one column of options, and each option's circle beside its words. */
+:where([data-dds-context="marketing"]) .dds-illustrationchoice {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__option {
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-column: 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__label {
+  grid-column: 2;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__description {
+  grid-column: 2;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__outline {
+  grid-column: 1;
+}
+
+/*
+ * The dot fills its circle with a margin of a quarter of it, and only on the picked option.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__dot {
+  background-color: currentColor;
+  block-size: 50%;
+  inline-size: 50%;
+  scale: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__option[data-picked] .dds-illustrationchoice__dot {
+  scale: 1;
+}
+
+/* The outline covers its row exactly, over the option it marks. */
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__outline {
+  align-self: stretch;
+  justify-self: stretch;
+}
+
+/*
+ * `motion="pick"`: the outline starts a row away — `--dds-illustrationchoice-from` rows, a sign —
+ * holds for motion.duration.hold with that row's circle still filled, then slides to the picked
+ * option over motion.duration.shift as the circle it left empties; the picked circle pops full over
+ * motion.duration.slow once it has arrived. `data-arrival` is the choice's own answer from
+ * useArrival (arrival.ts): `waiting` holds the first frame, `playing` runs it, and no attribute —
+ * a server, a reader who asked for less movement — is the choice as made. A row's height plus the
+ * gap is how far one row away is.
+ */
+@keyframes dds-illustrationchoice-slide {
+  from {
+    translate: 0 calc(var(--dds-illustrationchoice-from) * (100% + var(--space-gap-sm)));
+  }
+}
+
+@keyframes dds-illustrationchoice-leave {
+  from {
+    scale: 1;
+  }
+
+  to {
+    scale: 0;
+  }
+}
+
+@keyframes dds-illustrationchoice-fill {
+  0% {
+    scale: 0;
+  }
+
+  70% {
+    scale: 1.2;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice[data-motion='pick'][data-arrival] .dds-illustrationchoice__outline {
+  animation: dds-illustrationchoice-slide var(--motion-duration-shift) var(--motion-easing-shift) var(--motion-duration-hold) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice[data-motion='pick'][data-arrival] .dds-illustrationchoice__option[data-start] .dds-illustrationchoice__dot {
+  animation: dds-illustrationchoice-leave var(--motion-duration-hold) steps(1, end) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice[data-motion='pick'][data-arrival] .dds-illustrationchoice__option[data-picked] .dds-illustrationchoice__dot {
+  animation: dds-illustrationchoice-fill var(--motion-duration-slow) var(--motion-easing-reveal)
+    calc(var(--motion-duration-hold) + var(--motion-duration-shift)) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice[data-motion='pick'][data-arrival='waiting'] :is(.dds-illustrationchoice__outline, .dds-illustrationchoice__dot) {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-illustrationchoice[data-motion='pick'][data-arrival] :is(.dds-illustrationchoice__outline, .dds-illustrationchoice__dot) {
+    animation: none;
+  }
+}

package/dist/components/core/illustration-code/IllustrationCode.css

@@ -0,0 +1,25 @@
+/* GENERATED from illustrationcode.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationcode {
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  column-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcode .dds-illustrationcode__box {
+  border-style: solid;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  border-color: var(--color-border-strong);
+  border-radius: var(--radius-control-sm);
+  border-width: var(--border-width-emphasis);
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+  padding-block: var(--space-inset-xs);
+}
+

package/dist/components/core/illustration-code/IllustrationCode.d.ts

@@ -0,0 +1,12 @@
+import './IllustrationCode.css';
+import './illustration-code-impl.css';
+import { type IllustrationCodeProps } from './IllustrationCode.types.js';
+export type { IllustrationCodeProps };
+/**
+ * A drawn row of code boxes — a picture of the product asking for a code, never a field.
+ *
+ * A filled box holds a dot rather than a digit: a picture should never show a code. Each box carries
+ * its place in the row for the stylesheet, so the boxes can fill one after another on arrival. No
+ * script of its own: a row that fills on arrival is wrapped to take one (arrives.tsx).
+ */
+export declare function IllustrationCode({ length, filled, motion, label, ...rest }: IllustrationCodeProps): import("react").JSX.Element;

package/dist/components/core/illustration-code/IllustrationCode.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './IllustrationCode.css';
+import './illustration-code-impl.css';
+import { Arrives } from '../../arrives.js';
+import { given } from '../../given.js';
+import { illustrationCodeDefaults, illustrationCodeParts, } from './IllustrationCode.types.js';
+/**
+ * A drawn row of code boxes — a picture of the product asking for a code, never a field.
+ *
+ * A filled box holds a dot rather than a digit: a picture should never show a code. Each box carries
+ * its place in the row for the stylesheet, so the boxes can fill one after another on arrival. No
+ * script of its own: a row that fills on arrival is wrapped to take one (arrives.tsx).
+ */
+export function IllustrationCode({ length = illustrationCodeDefaults.length, filled, motion, label, ...rest }) {
+    const count = Math.max(1, Math.min(8, Math.round(length)));
+    const full = Math.max(0, Math.min(count, filled === undefined ? count : Math.round(filled)));
+    const named = given(label);
+    const row = (_jsx("div", { ...rest, className: illustrationCodeParts.root, "data-motion": motion, role: named ? 'img' : undefined, "aria-label": named ? label : undefined, "aria-hidden": named ? undefined : true, style: { gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }, children: Array.from({ length: count }, (_, at) => (_jsx("span", { className: illustrationCodeParts.box, "data-filled": at < full ? '' : undefined, style: { '--dds-illustrationcode-step': at + 1 }, children: at < full ? '•' : null }, at))) }));
+    return motion === undefined ? row : _jsx(Arrives, { children: row });
+}

package/dist/components/core/illustration-code/IllustrationCode.types.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+export interface IllustrationCodeOwnProps {
+    /** How many boxes: six, the default, for the usual verification code; four for a short one */
+    length?: number;
+    /** How many boxes are filled, from the start. Left out, all of them — a code entered */
+    filled?: number;
+    /**
+     * `fill` — The boxes fill one after another, a step of motion.duration.stagger apart
+     */
+    motion?: 'fill';
+    /** Where the picture stands on its own — "A verification code, entered". It names the row as one image */
+    label?: string;
+}
+export type IllustrationCodeProps = IllustrationCodeOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'length' | 'filled' | 'motion' | 'label'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationCodeParts: {
+    readonly root: "dds-illustrationcode";
+    readonly box: "dds-illustrationcode__box";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const illustrationCodeDefaults: {
+    readonly length: 6;
+};

package/dist/components/core/illustration-code/IllustrationCode.types.js

@@ -0,0 +1,8 @@
+// GENERATED from illustration-code.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationCodeParts = {
+    root: 'dds-illustrationcode',
+    box: 'dds-illustrationcode__box',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const illustrationCodeDefaults = { length: 6 };

package/dist/components/core/illustration-code/illustration-code-impl.css

@@ -0,0 +1,42 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * A box is a little taller than it is wide, as the product's are; a filled one is outlined in the
+ * text's own ink rather than the empty box's quieter edge.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcode .dds-illustrationcode__box {
+  aspect-ratio: var(--aspect-upright);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcode .dds-illustrationcode__box[data-filled] {
+  border-color: currentColor;
+}
+
+/*
+ * `motion="fill"`: each filled box takes its ink and its dot a step of motion.duration.stagger after
+ * the one before, settling from a little small over motion.duration.normal. `data-arrival` is the
+ * row's own answer from useArrival (arrival.ts): `waiting` holds every box empty, `playing` fills
+ * them, and no attribute — a server, a reader who asked for less movement — is the row as filled.
+ */
+@keyframes dds-illustrationcode-fill {
+  from {
+    border-color: var(--color-border-strong);
+    color: transparent;
+    scale: 0.85;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcode[data-motion='fill'][data-arrival] .dds-illustrationcode__box[data-filled] {
+  animation: dds-illustrationcode-fill var(--motion-duration-normal) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--dds-illustrationcode-step, 1) * var(--motion-duration-stagger));
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcode[data-motion='fill'][data-arrival='waiting'] .dds-illustrationcode__box {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-illustrationcode[data-motion='fill'][data-arrival] .dds-illustrationcode__box {
+    animation: none;
+  }
+}

package/dist/components/core/illustration-list/IllustrationList.css

@@ -0,0 +1,19 @@
+/* GENERATED from illustrationlist.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationlist {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationlist .dds-illustrationlist__row {
+  align-items: center;
+  border-style: none;
+  display: flex;
+  border-block-start-width: var(--border-width-hairline);
+  border-color: var(--color-border-subtle);
+  column-gap: var(--space-gap-sm);
+  padding-block: var(--space-inset-xs);
+}
+

package/dist/components/core/illustration-list/IllustrationList.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import './IllustrationList.css';
+import './illustration-list-impl.css';
+import { type IllustrationListProps } from './IllustrationList.types.js';
+export type { IllustrationListProps };
+/**
+ * A drawn list — each child one row, ruled from the row above — for a picture of the product
+ * listing things.
+ *
+ * Each row carries its place in the list for the stylesheet, so the rows can arrive one after
+ * another and a glyph in each can pop as its row lands. No script of its own: a list that arrives
+ * is wrapped to take one (arrives.tsx).
+ */
+export declare function IllustrationList({ motion, children, ...rest }: IllustrationListProps & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/core/illustration-list/IllustrationList.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+import './IllustrationList.css';
+import './illustration-list-impl.css';
+import { Arrives } from '../../arrives.js';
+import { illustrationListParts } from './IllustrationList.types.js';
+/**
+ * A drawn list — each child one row, ruled from the row above — for a picture of the product
+ * listing things.
+ *
+ * Each row carries its place in the list for the stylesheet, so the rows can arrive one after
+ * another and a glyph in each can pop as its row lands. No script of its own: a list that arrives
+ * is wrapped to take one (arrives.tsx).
+ */
+export function IllustrationList({ motion, children, ...rest }) {
+    const list = (_jsx("div", { ...rest, className: illustrationListParts.root, "data-motion": motion, children: Children.toArray(children).map((child, at) => (_jsx("div", { className: illustrationListParts.row, style: { '--dds-illustrationlist-step': at }, children: child }, at))) }));
+    return motion === undefined ? list : _jsx(Arrives, { children: list });
+}

package/dist/components/core/illustration-list/IllustrationList.types.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface IllustrationListOwnProps {
+    /**
+     * `arrive` — The rows come in one after another, and each glyph pops in as its row lands
+     */
+    motion?: 'arrive';
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type IllustrationListProps = IllustrationListOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'motion'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationListParts: {
+    readonly root: "dds-illustrationlist";
+    readonly row: "dds-illustrationlist__row";
+};

package/dist/components/core/illustration-list/IllustrationList.types.js

@@ -0,0 +1,6 @@
+// GENERATED from illustration-list.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationListParts = {
+    root: 'dds-illustrationlist',
+    row: 'dds-illustrationlist__row',
+};

package/dist/components/core/illustration-list/illustration-list-impl.css

@@ -0,0 +1,52 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * Rows ruled from the row above; the first has nothing above it.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationlist .dds-illustrationlist__row + .dds-illustrationlist__row {
+  border-block-start-style: solid;
+}
+
+/*
+ * `motion="arrive"`: each row comes up into place over motion.duration.reveal, a step of
+ * motion.duration.stagger behind the row before it, and any glyph in it — an Icon — pops in over
+ * motion.duration.shift a step of motion.duration.fast after its row starts. `data-arrival` is the
+ * list's own answer from useArrival (arrival.ts): `waiting` holds the first frame, `playing` runs
+ * it, and no attribute — a server, a reader who asked for less movement — is the list at rest.
+ */
+@keyframes dds-illustrationlist-arrive {
+  from {
+    opacity: var(--opacity-hidden);
+    translate: 0 var(--space-gap-sm);
+  }
+}
+
+@keyframes dds-illustrationlist-pop {
+  0% {
+    scale: 0.4;
+  }
+
+  70% {
+    scale: 1.12;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationlist[data-motion='arrive'][data-arrival] .dds-illustrationlist__row {
+  animation: dds-illustrationlist-arrive var(--motion-duration-reveal) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--dds-illustrationlist-step, 0) * var(--motion-duration-stagger));
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationlist[data-motion='arrive'][data-arrival] .dds-illustrationlist__row .dds-icon {
+  animation: dds-illustrationlist-pop var(--motion-duration-shift) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--dds-illustrationlist-step, 0) * var(--motion-duration-stagger) + var(--motion-duration-fast));
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationlist[data-motion='arrive'][data-arrival='waiting'] :is(.dds-illustrationlist__row, .dds-icon) {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-illustrationlist[data-motion='arrive'][data-arrival] :is(.dds-illustrationlist__row, .dds-icon) {
+    animation: none;
+  }
+}

package/dist/components/core/illustration-scene/IllustrationScene.css

@@ -18,6 +18,12 @@
   background-color: var(--color-bg-surface);
 }
 
+:where([data-dds-context="marketing"]) .dds-illustrationscene .dds-illustrationscene__shade {
+  align-self: stretch;
+  justify-self: stretch;
+  pointer-events: none;
+}
+
 :where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement="bottom"] {
   align-items: end;
   justify-items: center;

package/dist/components/core/illustration-scene/IllustrationScene.d.ts

@@ -9,6 +9,7 @@ export type { IllustrationSceneProps };
  * every picture of the product in use is composed the same way across a site. The photograph is
  * decoration unless `alt` says otherwise; the card's own label describes the whole picture.
  *
- * No state and no script, so it renders on a server as it is.
+ * No state and no script, so it renders on a server as it is. The card's two-beat arrival inside a
+ * block's reveal is the stylesheet's, read from the step the block gave whatever holds the scene.
  */
-export declare function IllustrationScene({ ratio, placement, src, alt, children, ...rest }: IllustrationSceneProps): import("react").JSX.Element;
+export declare function IllustrationScene({ ratio, placement, src, alt, shade, children, ...rest }: IllustrationSceneProps): import("react").JSX.Element;

package/dist/components/core/illustration-scene/IllustrationScene.js

@@ -9,8 +9,9 @@ import { illustrationSceneDefaults, illustrationSceneParts, } from './Illustrati
  * every picture of the product in use is composed the same way across a site. The photograph is
  * decoration unless `alt` says otherwise; the card's own label describes the whole picture.
  *
- * No state and no script, so it renders on a server as it is.
+ * No state and no script, so it renders on a server as it is. The card's two-beat arrival inside a
+ * block's reveal is the stylesheet's, read from the step the block gave whatever holds the scene.
  */
-export function IllustrationScene({ ratio = illustrationSceneDefaults.ratio, placement = illustrationSceneDefaults.placement, src, alt = illustrationSceneDefaults.alt, children, ...rest }) {
-    return (_jsxs("div", { ...rest, className: illustrationSceneParts.root, "data-ratio": ratio, "data-placement": placement, children: [_jsx("img", { className: illustrationSceneParts.image, src: src, alt: alt }), children] }));
+export function IllustrationScene({ ratio = illustrationSceneDefaults.ratio, placement = illustrationSceneDefaults.placement, src, alt = illustrationSceneDefaults.alt, shade = illustrationSceneDefaults.shade, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: illustrationSceneParts.root, "data-ratio": ratio, "data-placement": placement, children: [_jsx("img", { className: illustrationSceneParts.image, src: src, alt: alt }), shade ? _jsx("div", { className: illustrationSceneParts.shade }) : null, children] }));
 }

package/dist/components/core/illustration-scene/IllustrationScene.types.d.ts

@@ -15,18 +15,22 @@ export interface IllustrationSceneOwnProps {
     src: string;
     /** Empty by default, because the card's `label` describes the whole picture and the photograph is decoration. Write one only where the photograph says something the label does not */
     alt?: string;
+    /** The photograph is bright where the card sits — a sunny sky, a white wall — so the glass would come out mid-grey and the card's small lines would fall below AA. A shade under the card only, following the card's placement, so the rest of the photograph keeps its light. */
+    shade?: boolean;
     /** Allowed: IllustrationCard */
     children: ReactNode;
 }
-export type IllustrationSceneProps = IllustrationSceneOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'placement' | 'src' | 'alt'>;
+export type IllustrationSceneProps = IllustrationSceneOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'placement' | 'src' | 'alt' | 'shade'>;
 /** The class each part carries. Apply these — do not retype them. */
 export declare const illustrationSceneParts: {
     readonly root: "dds-illustrationscene";
     readonly image: "dds-illustrationscene__image";
+    readonly shade: "dds-illustrationscene__shade";
 };
 /** Generated so defaults cannot drift from the contract. */
 export declare const illustrationSceneDefaults: {
     readonly ratio: "square";
     readonly placement: "center";
     readonly alt: "";
+    readonly shade: false;
 };

package/dist/components/core/illustration-scene/IllustrationScene.types.js

@@ -3,6 +3,7 @@
 export const illustrationSceneParts = {
     root: 'dds-illustrationscene',
     image: 'dds-illustrationscene__image',
+    shade: 'dds-illustrationscene__shade',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const illustrationSceneDefaults = { ratio: 'square', placement: 'center', alt: '' };
+export const illustrationSceneDefaults = { ratio: 'square', placement: 'center', alt: '', shade: false };

package/dist/components/core/illustration-scene/illustration-scene-impl.css

@@ -59,3 +59,68 @@
   justify-self: stretch;
   margin-block-end: var(--space-inset-card);
 }
+
+/*
+ * At the foot, the strip is held to two fifths of the frame and its UI scaled into it.
+ *
+ * A strip is as tall as what it holds, and what it holds keeps its full type sizes however small the
+ * scene is drawn — so on a narrow column the strip outgrew its share and, at a tablet's width, its
+ * photograph. Capped, the pane has a height smaller than its UI, and IllustrationCard's fit scales
+ * the UI down into it as it does for a centred card. Two fifths is about the share the strip takes
+ * on a desktop, where nothing needs scaling, so the composition holds at every width rather than
+ * changing with it. A proportion of the frame, like every share here.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement='bottom'] > .dds-illustrationcard {
+  max-block-size: 40%;
+}
+
+/*
+ * The shade, between the photograph and the card.
+ *
+ * It fills the frame's one cell like the photograph and draws only where the card is: up from the
+ * foot at full strength to just above a strip at the foot, then clear by two thirds of the way up,
+ * so the subject above keeps its light; or an oval behind a centred card, full strength under the
+ * card's words and fading from there, so it never stands round the card as a dark ring, and clear at
+ * the frame's edges. color.bg.overlay, which takes a white photograph to a grey that the card's glass and its
+ * small type clear at AA.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement='bottom'] .dds-illustrationscene__shade {
+  background-image: linear-gradient(to top, var(--color-bg-overlay), var(--color-bg-overlay) 45%, transparent 70%);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement='center'] .dds-illustrationscene__shade {
+  background-image: radial-gradient(closest-side, var(--color-bg-overlay), var(--color-bg-overlay) 45%, transparent);
+}
+
+/*
+ * The card arrives after its photograph.
+ *
+ * Inside a block's arrival — block-reveal.css — whatever holds the scene comes up at its step, and
+ * the scene with it. The card then waits three steps of motion.duration.stagger more and rises onto
+ * the photograph, so the place lands and then the product does. The holder's step is read from
+ * `--dds-reveal-at`, which the block sets on the part and which the card inherits, so this follows
+ * whatever number the block gives its media rather than guessing past it; with none it counts from
+ * the block's first step. The same distance, duration and curve as every other part's arrival.
+ *
+ * Only inside a reveal — a scene with no `data-revealed` above it is simply drawn — and never for a
+ * reader who asked for less movement, as every arrival. Written a class deeper than block-reveal's
+ * own rule, so a page that marked the card with a step of its own is overruled by this one.
+ */
+:where([data-dds-context="marketing"]) [data-revealed='false'] .dds-illustrationscene > .dds-illustrationcard {
+  opacity: var(--opacity-hidden);
+  transition: none;
+  translate: var(--motion-translate-reveal);
+}
+
+:where([data-dds-context="marketing"]) [data-revealed='true'] .dds-illustrationscene > .dds-illustrationcard {
+  transition-delay: calc((var(--dds-reveal-at, 0) + 3) * var(--motion-duration-stagger));
+  transition-duration: var(--motion-duration-reveal);
+  transition-property: opacity, translate;
+  transition-timing-function: var(--motion-easing-reveal);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) [data-revealed] .dds-illustrationscene > .dds-illustrationcard {
+    transition: none;
+  }
+}

package/dist/components/core/link/link-impl.css

@@ -56,27 +56,13 @@
 }
 
 /*
- * A link whose ink belongs to the ground gets its underline back under the pointer.
+ * A link that inherits its ink, with no mark, gets an underline under the pointer.
  *
- * A standalone link at `tone: inherit` — one on a brand card, a dark band, a scrim. It takes
- * the colour around it, so the colour cannot change under the pointer, and
- * `text-decoration-thickness` thickens a line that is not there. Without this it had no hover
- * affordance at all.
- *
- * The list variant had the same hole and answers it differently, below: it has a mark to
- * bring in, and a column of rows that underline one at a time reads as a table of contents
- * being corrected.
- *
- * Product reaches the same conclusion from the other end: its standalone drops the underline
- * except at `tone: inherit`, "because the link is the same colour as the text around it and
- * the rule is the only thing left saying it is a link". It keeps the line at all times. These
- * designs have no line at rest — a footer of fifty underlined rows is a wall — so it arrives
- * with the pointer instead, which is the same argument applied to a denser page.
- *
- * Here rather than in the contract because `structure` carries no state: it says what a
- * variant looks like, not what it looks like while a pointer is over it.
+ * At `tone: inherit` the colour is the ground's and cannot change, so what answers the pointer is
+ * the mark moving, below — the brand link's behaviour, with no line. A link given `showIcon={false}`
+ * has no mark to move, and without this nothing about it would answer the pointer at all.
  */
-:where([data-dds-context="marketing"]) .dds-link[data-variant='standalone'][data-tone='inherit']:hover {
+:where([data-dds-context="marketing"]) .dds-link[data-variant='standalone'][data-tone='inherit']:not(:has(.dds-link__icon-trailing)):hover {
   text-decoration-line: underline;
 }