@deriv-com/dds-marketing 1.0.1 → 1.1.0

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

@@ -0,0 +1,760 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did before.
+ */
+
+/*
+ * The canvas fills the band and sits under what the band holds.
+ *
+ * Absolutely placed at all four edges rather than sized by width and height, so it follows the
+ * band through every resize without the script having to set its CSS size — the script sets only
+ * the bitmap, from the box this gives it. No pointer events: the pattern is paint, and every press
+ * on the band belongs to the content.
+ *
+ * These are positions and a pointer rule, not design decisions, and a contract has no way to state
+ * an inset of zero on a part — which is why they are here rather than bound.
+ */
+:where([data-dds-context="marketing"]) .dds-background .dds-background__canvas {
+  position: absolute;
+  inset: 0;
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  pointer-events: none;
+}
+
+/*
+ * The content stacks above the canvas by being positioned after it. The root isolates, so this
+ * order is settled inside the band and nothing outside it has to know a canvas is there.
+ */
+:where([data-dds-context="marketing"]) .dds-background .dds-background__content {
+  position: relative;
+}
+
+/*
+ * A Background with nothing to hold is a layer: it fills the band it is placed in, behind that
+ * band's own content, which is how a block draws the pattern under itself without its layout
+ * changing. The band has to be positioned, and every block that offers the pattern is. It takes no
+ * pointer events — the content is on top and gets every press — and the pointer is listened for on
+ * the band instead, in `useHalftone`.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-layer='true'] {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/*
+ * The two hairline patterns: the rule grid, for `pattern="grid"` — the grid PageHeader paints, for
+ * any band — and the rings, for `pattern="rings"`.
+ *
+ * Both are repeating gradients of hairlines painted onto the root under everything it holds, with
+ * the band's own ground laid over them as a fade: opaque at the top, clear at the foot, so the
+ * lines rise from the bottom of the band the way the halftone does. A background-image rather than
+ * an element, because it is a texture on the ground and not content, and rather than a canvas
+ * because the only thing about it that moves is where the lines start — see *The idle motion*.
+ *
+ * The line takes the pattern role for the ground it is on: the inverse on the dark ground, a
+ * brighter white on the coral, and the brand's coral on the light — each a step above the subtle
+ * border, which a hairline drawn across a whole band thinned out to almost nothing. The fade is each tone's own ground, so
+ * the lines disappear into the band rather than into a colour the band is not.
+ */
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']) {
+  --dds-background-rule: var(--color-border-pattern-inverse);
+  --dds-background-fade: var(--color-bg-brand-strong);
+  /*
+   * How thick a rule is: border.width.hairline, which is half a CSS pixel — one device pixel on a
+   * screen of twice the density, and the line this grid was drawn with. A standard-density screen
+   * has no half pixel to draw it on, and there the rules came out faint or not at all depending on
+   * where each one fell: on a tall band every horizontal rule vanished. So below twice the density
+   * the rule is border.width.default, one pixel — the thinnest line that screen can draw.
+   */
+  --dds-background-hairline: var(--border-width-hairline);
+}
+
+@media (max-resolution: 1.99dppx) {
+  :where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']) {
+    --dds-background-hairline: var(--border-width-default);
+  }
+}
+
+/*
+ * On the light ground the lines are the brand's coral rather than a grey, as the halftone's dots
+ * and the aurora's pools are there: a third of color.bg.brand, about as strong as the grey it
+ * replaces, so the grid stays quiet but reads as the brand's. It lights up to the full coral.
+ */
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='light'] {
+  --dds-background-rule: color-mix(in srgb, var(--color-bg-brand) 35%, transparent);
+  --dds-background-fade: var(--color-bg-page);
+}
+
+/*
+ * On the coral ground the inverse pattern line, white at a quarter, all but vanished into the
+ * coral, so the lines rest at the muted inverse there and light up to full white.
+ */
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='brand'] {
+  --dds-background-rule: var(--color-fg-muted-inverse);
+  --dds-background-fade: var(--color-bg-brand);
+}
+
+/*
+ * The grid: two sets of rules at size.rule-grid.pitch, one across and one down.
+ *
+ * `to right` is physical: a CSS gradient has no logical direction. A grid is symmetric, so it reads
+ * the same in either direction, and it is centred across the band — see the positions below.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='grid'] {
+  --dds-background-pitch: var(--size-rule-grid-pitch);
+  background-image:
+    linear-gradient(to bottom, var(--dds-background-fade), transparent),
+    linear-gradient(to right, var(--dds-background-rule) 0 var(--dds-background-hairline), transparent 0),
+    linear-gradient(to bottom, var(--dds-background-rule) 0 var(--dds-background-hairline), transparent 0);
+  /*
+   * Each set of rules is one rule on a tile one pitch long, repeated: a tile the size of the band
+   * left a seam wherever the band was not a whole number of pitches, and a rising grid carried
+   * that seam up through it. Across, a rule falls on the band's middle — the tile is placed half a
+   * pitch right of centre, and its rule is its left edge — so the grid is symmetric about the
+   * middle, where the rings are centred and the words sit, and never ends on a sliver at one side
+   * only. Down, it counts from the top less the idle shift, so the rules rise a pitch a cycle.
+   */
+  background-size:
+    100% 100%,
+    var(--dds-background-pitch) 100%,
+    100% var(--dds-background-pitch);
+  background-repeat: no-repeat, repeat-x, repeat-y;
+  background-position:
+    left top,
+    calc(50% + var(--dds-background-pitch) / 2) top,
+    left calc(var(--dds-background-shift, 0%) * -1);
+}
+
+/*
+ * The rings: circles at size.rings.pitch, centred on the middle of the band's foot, so they spread
+ * up and out from where the halftone's glow would rest.
+ *
+ * Each ring is a hairline at full ink — as much line as a grid rule, so the two read at the same
+ * strength — with half a hairline of fade either side. A curve drawn with hard stops steps along
+ * every pixel it crosses; the fade anti-aliases it. A ridge that only touched the ink at its peak
+ * came out a good deal fainter than the grid in the same colour.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='rings'] {
+  --dds-background-pitch: var(--size-rings-pitch);
+  background-image:
+    linear-gradient(to bottom, var(--dds-background-fade), transparent),
+    var(--dds-background-rings);
+}
+
+/*
+ * The rings themselves, declared on the root and on its lit copy alike, so each resolves them in
+ * its own ink. They start at the idle shift rather than at the centre, which spreads every ring a
+ * pitch outward each cycle: a repeating gradient repeats over its first stop to its last, and both
+ * move together, so the spacing never changes.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='rings'],
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='rings']::before {
+  --dds-background-rings: repeating-radial-gradient(
+    circle at 50% 100%,
+    transparent var(--dds-background-shift, 0%)
+      calc(var(--dds-background-shift, 0%) + var(--dds-background-pitch) - var(--dds-background-hairline) * 2),
+    var(--dds-background-rule)
+      calc(var(--dds-background-shift, 0%) + var(--dds-background-pitch) - var(--dds-background-hairline) * 1.5)
+      calc(var(--dds-background-shift, 0%) + var(--dds-background-pitch) - var(--dds-background-hairline) * 0.5),
+    transparent calc(var(--dds-background-shift, 0%) + var(--dds-background-pitch))
+  );
+}
+
+/*
+ * The pointer's light on the grid and the rings, on an interactive band.
+ *
+ * A second, brighter copy of the lines, drawn in a pseudo-element behind the band's content and
+ * shown only inside a soft circle around the pointer — size.rule-grid.spotlight on the grid,
+ * size.rings.spotlight on the rings — so the lines under the pointer brighten and fade back into
+ * the resting ones, and nothing else changes. The pointer's position arrives as two custom
+ * properties written once a frame by `useSpotlight`, and `data-spotlit` while it is over the band;
+ * the circle fades in and out on the element's opacity, which the compositor runs.
+ *
+ * `::before`, so it comes before the content in the band's painting order and the content stays on
+ * top of it. The lit line is a step up from the resting one on each ground: muted-inverse on the
+ * dark ground, full white on the coral, the full brand coral on the light one. Same hairline, same pitch, same
+ * position, so a lit line is the resting line brighter rather than a line beside it.
+ */
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])::before {
+  --dds-background-lit: var(--color-fg-muted-inverse);
+  /* The shift is registered as not inherited — see *The idle motion* — so the lit copy asks for it. */
+  --dds-background-shift: inherit;
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  mask-image: radial-gradient(
+    circle var(--dds-background-reach) at var(--dds-background-spot-x, 50%) var(--dds-background-spot-y, 50%),
+    #000,
+    transparent
+  );
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='grid']::before {
+  --dds-background-reach: var(--size-rule-grid-spotlight);
+  background-image:
+    linear-gradient(to right, var(--dds-background-lit) 0 var(--dds-background-hairline), transparent 0),
+    linear-gradient(to bottom, var(--dds-background-lit) 0 var(--dds-background-hairline), transparent 0);
+  background-size:
+    var(--dds-background-pitch) 100%,
+    100% var(--dds-background-pitch);
+  background-repeat: repeat-x, repeat-y;
+  background-position:
+    calc(50% + var(--dds-background-pitch) / 2) top,
+    left calc(var(--dds-background-shift, 0%) * -1);
+}
+
+/* The rings' lit copy: the same rings, with the rule redeclared as the lit ink. */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='rings']::before {
+  --dds-background-reach: var(--size-rings-spotlight);
+  --dds-background-rule: var(--dds-background-lit);
+  background-image: var(--dds-background-rings);
+}
+
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='light']::before {
+  --dds-background-lit: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='brand']::before {
+  --dds-background-lit: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-spotlit='true']::before {
+  opacity: 1;
+}
+
+/*
+ * The aurora, for `pattern="aurora"`: broad soft pools of the brand's colour rising from the
+ * band's foot and drifting into one another — the band lit by colour rather than by points.
+ *
+ * Three ellipses fading to nothing, in two inks, painted on a pseudo-element behind the content
+ * and larger than the band, so it can sway either way without its edge showing. The sway is a
+ * transform about the middle of the foot, there and back over motion.duration.drift: a small
+ * slide, a small turn and a slight swell, and because the turn lifts one side as it lowers the
+ * other, the pools pass across each other rather than moving as one. A transform, so the
+ * compositor runs it and the gradients are painted once rather than every frame.
+ *
+ * The inks are the tone's: coral deepening to the brand's darkest on the dark ground; coral and
+ * its hover step, washed thin, on the light ground; and on the coral ground white and the brand's
+ * darkest, as the halftone's dots turn white there — darker inks alone were lost on the coral, and
+ * near-black came out as a muddy stain rather than light. The white stays at the foot, under the
+ * words rather than behind them, and the words are checked against the coral alone. How strongly
+ * it is painted is a share of the pool's own opacity, as the halftone's is — under half on the
+ * dark ground, where coral at seven tenths burned rather than glowed, and faintest on the light,
+ * where coral at strength would be a coral band.
+ *
+ * The band's top stays plain: the pools fade out under a mask before they reach the upper third.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'] {
+  --dds-background-pool: var(--color-bg-brand);
+  --dds-background-pool-deep: var(--color-bg-brand-active);
+  --dds-background-strength: 0.4;
+  /*
+   * How strongly the pool under the pointer is painted, per ground. Its own number rather than a
+   * share of the pools': half of the light ground's faint wash was invisible, and half of the
+   * coral ground's white washed out the white words the pointer was over.
+   */
+  --dds-background-hover: 0.25;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='light'] {
+  --dds-background-pool-deep: var(--color-bg-brand-hover);
+  --dds-background-strength: 0.22;
+  --dds-background-hover: 0.3;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='brand'] {
+  --dds-background-pool: var(--color-fg-on-brand);
+  --dds-background-pool-deep: var(--color-bg-brand-active);
+  --dds-background-strength: 0.6;
+  /*
+   * The pointer's pool on the coral is blended in rather than laid over: white at a fifth on top of
+   * the coral read as a pale pink patch, a disc of another colour. Overlay lifts the coral under it
+   * to a brighter coral instead — light on the band rather than a stain on it — and takes the whole
+   * pool without washing out: soft light at full strength was barely there.
+   */
+  --dds-background-hover: 1;
+  --dds-background-glow-blend: overlay;
+}
+
+/*
+ * Behind the content without being before it: the root isolates, so a negative stacking order
+ * puts both pseudo-elements over the band's ground and under everything it holds.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora']::before,
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora']::after {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora']::before {
+  /*
+   * Half a band deeper than the band, as well as wider: the turn lowers one end of the layer, and
+   * a layer that stopped at the foot showed its own edge there as a hard diagonal. So the foot is
+   * two thirds of the way down the layer, and every position and reach below is measured to it.
+   */
+  inset-block: 0 -50%;
+  inset-inline: -25%;
+  background-image:
+    radial-gradient(ellipse 30% 53% at 32% calc(100% / 1.5), var(--dds-background-pool), transparent),
+    radial-gradient(ellipse 26% 43% at 66% calc(100% / 1.5), var(--dds-background-pool-deep), transparent),
+    radial-gradient(ellipse 18% 31% at 50% calc(100% / 1.5), var(--dds-background-pool), transparent);
+  mask-image: linear-gradient(to bottom, transparent 20%, #000 calc(100% / 1.5));
+  opacity: var(--dds-background-strength);
+  transform-origin: 50% calc(100% / 1.5);
+  animation: dds-background-aurora var(--motion-duration-drift) var(--motion-easing-shift) infinite alternate;
+}
+
+@keyframes dds-background-aurora {
+  from {
+    transform: translateX(-6%) rotate(-3deg);
+  }
+  to {
+    transform: translateX(6%) rotate(3deg) scale(1.08, 1.14);
+  }
+}
+
+/*
+ * The pool that trails the pointer: a disc of the pool's ink, size.aurora.spotlight in radius,
+ * moved under the pointer by a transform that eases after it over motion.duration.trail — the
+ * halftone's glow and this one keep the same distance behind the hand. Placed from the band's
+ * physical top left because the pointer's position is measured from there. It fades in while the
+ * pointer is over the band and out when it leaves, at the ground's own hover strength: at the
+ * pools' full strength, and twice the size, it washed over a narrow band and drowned its words.
+ *
+ * It trails the pointer only while lit. Unlit it moves at once, so the pointer arriving puts the
+ * pool where the pointer is before it fades in — `useSpotlight` writes the position first —
+ * rather than the pool sliding in from wherever it last was, or from the band's corner.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora']::after {
+  left: 0;
+  top: 0;
+  inline-size: calc(var(--size-aurora-spotlight) * 2);
+  block-size: calc(var(--size-aurora-spotlight) * 2);
+  /*
+   * Eased to nothing rather than straight to it: a straight fade stops abruptly at its rim, and the
+   * eye read the stop as the edge of a disc. The steps follow a smooth curve down from the centre.
+   */
+  background-image: radial-gradient(
+    circle closest-side,
+    var(--dds-background-pool),
+    color-mix(in srgb, var(--dds-background-pool) 62%, transparent) 30%,
+    color-mix(in srgb, var(--dds-background-pool) 26%, transparent) 58%,
+    color-mix(in srgb, var(--dds-background-pool) 7%, transparent) 82%,
+    transparent
+  );
+  transform: translate(
+    calc(var(--dds-background-spot-x, 50%) - var(--size-aurora-spotlight)),
+    calc(var(--dds-background-spot-y, 50%) - var(--size-aurora-spotlight))
+  );
+  /*
+   * And blurred by a quarter of its radius, so no step of the fade survives as a ring and the pool
+   * has no edge at all — the eased stops alone still left a disc the eye could trace on the coral.
+   * Half the radius spread it so thin it all but vanished.
+   */
+  filter: blur(calc(var(--size-aurora-spotlight) / 4));
+  mix-blend-mode: var(--dds-background-glow-blend, normal);
+  opacity: 0;
+  transition-property: opacity, transform;
+  transition-duration: var(--motion-duration-normal), var(--motion-duration-instant);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-spotlit='true']::after {
+  opacity: var(--dds-background-hover);
+  transition-duration: var(--motion-duration-normal), var(--motion-duration-trail);
+}
+
+/*
+ * The idle motion of the grid and the rings: the grid's rules rise a pitch and the rings spread a
+ * pitch outward, over motion.duration.drift at an even pace, and again — a pitch on, the pattern
+ * is where it began, so the loop has no seam. The halftone's glow and the
+ * aurora's pools drift in the same time, so every pattern is moving at a band's pace at rest.
+ *
+ * The shift is registered so it can be animated: an unregistered custom property only flips from
+ * one value to the next. It is not inherited, so the frames reach the root and the lit copy that
+ * asks for it, and never restyle the band's content. What moves is a background's start, which
+ * repaints the band whenever it changes — so it changes in two hundred even steps a cycle, about
+ * twenty a second, rather than at the display's rate: well under a pixel a step at this pace,
+ * so it still reads as smooth, and as cheap as the halftone's drift, which draws at thirty. It
+ * stops while the band is off screen (`data-offscreen`, written by Background), and when the band
+ * is asked to hold still.
+ */
+@property --dds-background-shift {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+/*
+ * Every use names a fallback of nothing, for an engine without `@property`: there the shift is an
+ * unregistered property nobody sets while the band is still, and a bare reference to it would make
+ * the whole background invalid — the grid and the rings would vanish exactly when motion is off.
+ */
+
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']) {
+  animation: dds-background-shift var(--motion-duration-drift) steps(200) infinite;
+}
+
+@keyframes dds-background-shift {
+  to {
+    --dds-background-shift: var(--dds-background-pitch);
+  }
+}
+
+/* Off screen, nobody sees it move: every pattern's idle motion waits where it is. */
+:where([data-dds-context="marketing"]) .dds-background[data-offscreen='true'],
+:where([data-dds-context="marketing"]) .dds-background[data-offscreen='true']::before {
+  animation-play-state: paused;
+}
+
+/* `animated={false}`: every pattern holds still at rest. What it does under the pointer is `interactive`. */
+:where([data-dds-context="marketing"]) .dds-background[data-animated='false'],
+:where([data-dds-context="marketing"]) .dds-background[data-animated='false'][data-pattern='aurora']::before {
+  animation: none;
+}
+
+/*
+ * For a reader who asked for less motion, nothing moves at rest, and the pointer's light on every
+ * pattern comes and goes at once rather than fading or trailing.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']),
+  :where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora']::before {
+    animation: none;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'], [data-pattern='aurora'])::before,
+  :where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora']::after {
+    transition: none;
+  }
+}
+
+/*
+ * The mesh, for `pattern="mesh"`: the whole band lit by five pools of the brand's reds that run
+ * into one another like liquid — the design system's own front page, as a pattern.
+ *
+ * The layer overhangs the band by a tenth each side and is blurred by size.mesh.blur, so no pool
+ * keeps an edge and the layer's own edge falls outside the band. It sits behind the content by a
+ * negative stacking order, which the root's isolation keeps inside the band.
+ *
+ * The inks are the tone's, set here as five custom properties because each pool takes a different
+ * one. On the coral ground, the drawing the pattern was made for: the brand's deepest red, its
+ * pressed red twice, its hover, and the coral itself — no white, which washed the reds to pink. On
+ * the dark ground the same reds glowing on near-black, the deepest swapped for the coral so the
+ * glow has somewhere to start. On the light ground a blush: the coral and its pale tint, held back.
+ */
+:where([data-dds-context="marketing"]) .dds-background .dds-background__mesh {
+  --dds-background-mesh-1: var(--color-bg-brand-deep);
+  --dds-background-mesh-2: var(--color-bg-brand-active);
+  --dds-background-mesh-3: var(--color-bg-brand-hover);
+  --dds-background-mesh-4: var(--color-bg-brand-active);
+  --dds-background-mesh-5: var(--color-bg-brand);
+  /* The deepest pool is a shade under the words, not a ground of its own: at 0.85 it turned half
+     the band brown, at 0.35 it left the words on a flat red. */
+  --dds-background-mesh-shade: 0.55;
+  --dds-background-mesh-strength: 1;
+  inset: -10%;
+  z-index: -1;
+  filter: blur(var(--size-mesh-blur)) saturate(1.15);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone='dark'] .dds-background__mesh {
+  --dds-background-mesh-1: var(--color-bg-brand);
+  --dds-background-mesh-shade: 0.7;
+  --dds-background-mesh-strength: 0.6;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone='light'] .dds-background__mesh {
+  --dds-background-mesh-1: var(--color-bg-brand-subtle);
+  --dds-background-mesh-2: var(--color-bg-brand);
+  --dds-background-mesh-3: var(--color-bg-brand-subtle);
+  --dds-background-mesh-4: var(--color-bg-brand-hover);
+  --dds-background-mesh-5: var(--color-bg-brand-subtle);
+  --dds-background-mesh-shade: 1;
+  --dds-background-mesh-strength: 0.22;
+}
+
+/*
+ * A pool: an uneven round shape that drifts and stretches on two loops of its own length, and
+ * leans towards the pointer by its own depth — a hundredth of the pool per step — trailing it by
+ * its own lag, so the colours slide through one another instead of moving as one.
+ *
+ * Every length of time is a multiple of a motion token, so the mesh keeps pace with the others:
+ * the loops of motion.duration.drift, the lag of motion.duration.trail.
+ *
+ * The drift is a transform and the stretch a `scale` and `rotate`, all the compositor's to move;
+ * a changing `border-radius` repainted the whole blurred layer every frame.
+ */
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool {
+  --depth: 6;
+  --lag: 2.8;
+  inline-size: 60%;
+  aspect-ratio: 1;
+  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
+  opacity: var(--dds-background-mesh-strength);
+  animation:
+    dds-background-mesh-drift calc(var(--motion-duration-drift) * 2.6) ease-in-out infinite alternate,
+    dds-background-mesh-morph calc(var(--motion-duration-drift) * 1.1) ease-in-out infinite alternate;
+  translate:
+    calc(var(--dds-background-lean-x, 0) * var(--depth) * 1%)
+    calc(var(--dds-background-lean-y, 0) * var(--depth) * 1%);
+  transition-property: translate;
+  transition-duration: calc(var(--motion-duration-trail) * var(--lag));
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool:nth-child(1) {
+  --depth: -8;
+  --lag: 4.4;
+  inset: 45% auto auto -5%;
+  inline-size: 45%;
+  background-color: var(--dds-background-mesh-1);
+  opacity: calc(var(--dds-background-mesh-strength) * var(--dds-background-mesh-shade));
+  animation-duration: calc(var(--motion-duration-drift) * 2.6), calc(var(--motion-duration-drift) * 1.3);
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool:nth-child(2) {
+  --depth: 10;
+  --lag: 3.2;
+  inset: -20% -15% auto auto;
+  background-color: var(--dds-background-mesh-2);
+  animation-duration: calc(var(--motion-duration-drift) * 3.1), calc(var(--motion-duration-drift) * 0.9);
+  animation-delay: calc(var(--motion-duration-drift) * -0.8), calc(var(--motion-duration-drift) * -0.3);
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool:nth-child(3) {
+  --depth: 16;
+  --lag: 2;
+  inset: 30% 20% auto auto;
+  inline-size: 45%;
+  background-color: var(--dds-background-mesh-3);
+  animation-duration: calc(var(--motion-duration-drift) * 2.2), calc(var(--motion-duration-drift) * 0.7);
+  animation-delay: calc(var(--motion-duration-drift) * -1.4), calc(var(--motion-duration-drift) * -0.5);
+}
+
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool:nth-child(4) {
+  --depth: -12;
+  --lag: 5.2;
+  inset: auto auto -30% 25%;
+  inline-size: 50%;
+  background-color: var(--dds-background-mesh-4);
+  animation-duration: calc(var(--motion-duration-drift) * 3.5), calc(var(--motion-duration-drift) * 1.2);
+  animation-delay: calc(var(--motion-duration-drift) * -0.4), calc(var(--motion-duration-drift) * -0.9);
+}
+
+/* The coral itself, high in the far corner: the brightest the pools go. */
+:where([data-dds-context="marketing"]) .dds-background .dds-background__pool:nth-child(5) {
+  --depth: 20;
+  --lag: 1.6;
+  inset: -5% 10% auto auto;
+  inline-size: 30%;
+  background-color: var(--dds-background-mesh-5);
+  animation-duration: calc(var(--motion-duration-drift) * 2.8), calc(var(--motion-duration-drift) * 0.8);
+  animation-delay: calc(var(--motion-duration-drift) * -1.8), calc(var(--motion-duration-drift) * -0.2);
+}
+
+@keyframes dds-background-mesh-drift {
+  0% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(12%, -8%) scale(1.15); }
+  66% { transform: translate(-10%, 10%) scale(0.9); }
+  100% { transform: translate(8%, 6%) scale(1.08); }
+}
+
+@keyframes dds-background-mesh-morph {
+  0% { scale: 1 1; rotate: 0deg; }
+  33% { scale: 1.25 0.8; rotate: 50deg; }
+  66% { scale: 0.85 1.2; rotate: 110deg; }
+  100% { scale: 1.15 0.9; rotate: 160deg; }
+}
+
+/*
+ * Off screen the pools wait where they are. With `animated` off they rest, and flow only while the
+ * pointer is over the band — the front page's own setting — stopping where they are when it leaves
+ * rather than jumping home.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-offscreen='true'] .dds-background__pool,
+:where([data-dds-context="marketing"]) .dds-background[data-animated='false'] .dds-background__pool {
+  animation-play-state: paused;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-animated='false'][data-spotlit='true'] .dds-background__pool {
+  animation-play-state: running;
+}
+
+/* For a reader who asked for less motion the pools hold still and do not follow the pointer. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-background .dds-background__pool {
+    animation: none;
+    translate: none;
+    transition: none;
+  }
+}
+
+/*
+ * The shaded patterns — see `shader.ts` and `patterns.ts`.
+ *
+ * Each names its inks here, per tone, as six custom properties the shader reads back as the
+ * browser resolves them: the ground first, then the pattern's own. They are opaque — a shader
+ * cannot see through to the band — so a translucent role is mixed onto its ground here, where the
+ * stylesheet can do it, rather than in the shader. The strength is how loudly the pattern is
+ * painted on that ground, and the grain how much tooth it is given: least on the light ground,
+ * where grain reads as dirt, most on the dark, where it reads as film.
+ */
+:where([data-dds-context="marketing"]) .dds-background {
+  --dds-background-gl-strength: 1;
+  --dds-background-gl-grain: 0.035;
+  --dds-background-gl-hairline: var(--border-width-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone='dark'] {
+  --dds-background-gl-grain: 0.05;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone='light'] {
+  --dds-background-gl-grain: 0.025;
+}
+
+/*
+ * The aurora and the mesh take none. They are drawn at half the density and scaled up, so the grain
+ * was scaled up with them: at the hairline patterns' amount it read as noise laid over the light,
+ * and at less it showed the lattice of the pixels it was drawn on. The browser's own smoothing as it
+ * scales them up is what keeps their long fades from banding.
+ */
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='aurora'], [data-pattern='mesh']) {
+  --dds-background-gl-grain: 0;
+}
+
+/* The aurora: curtains lighter than the ground they rise from, with a deeper red folded through. */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='brand'] {
+  /* On the coral the curtains are the brand's own deeper reds — its hover and its pressed red —
+     with only a touch of light at their brightest, so the band stays coral. White curtains washed
+     the coral to pink. */
+  --dds-background-gl-ink0: var(--color-bg-brand);
+  --dds-background-gl-ink1: var(--color-bg-brand-active);
+  --dds-background-gl-ink2: var(--color-bg-brand-hover);
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 72%, var(--color-fg-on-brand));
+  --dds-background-gl-strength: 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='dark'] {
+  --dds-background-gl-ink0: var(--color-bg-brand-strong);
+  --dds-background-gl-ink1: var(--color-bg-brand);
+  --dds-background-gl-ink2: var(--color-bg-brand-active);
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 60%, var(--color-fg-on-brand-strong));
+  --dds-background-gl-strength: 0.85;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='light'] {
+  --dds-background-gl-ink0: var(--color-bg-page);
+  --dds-background-gl-ink1: var(--color-bg-brand);
+  --dds-background-gl-ink2: var(--color-bg-brand-hover);
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 50%, var(--color-bg-page));
+  --dds-background-gl-strength: 0.35;
+}
+
+/*
+ * The mesh: the front page's five pools, in the same inks as the stylesheet's version of them —
+ * the deepest red, the pressed red, the hover, the pressed red again, and the coral — on each
+ * ground. The strength is that version's too: full on the coral, a glow on the dark, a blush on
+ * the light. How far the deepest is held back is its `--dds-background-mesh-shade`.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='mesh'][data-tone='brand'] {
+  --dds-background-gl-ink0: var(--color-bg-brand);
+  --dds-background-gl-ink1: var(--color-bg-brand-deep);
+  --dds-background-gl-ink2: var(--color-bg-brand-active);
+  --dds-background-gl-ink3: var(--color-bg-brand-hover);
+  --dds-background-gl-ink4: var(--color-bg-brand-active);
+  --dds-background-gl-ink5: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='mesh'][data-tone='dark'] {
+  --dds-background-gl-ink0: var(--color-bg-brand-strong);
+  --dds-background-gl-ink1: var(--color-bg-brand);
+  --dds-background-gl-ink2: var(--color-bg-brand-active);
+  --dds-background-gl-ink3: var(--color-bg-brand-hover);
+  --dds-background-gl-ink4: var(--color-bg-brand-active);
+  --dds-background-gl-ink5: var(--color-bg-brand);
+  /* Less than the stylesheet's 0.6: its pools are smaller than the band, and these reach every
+     corner of it, so at that strength the near-black ground was gone. */
+  --dds-background-gl-strength: 0.35;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='mesh'][data-tone='light'] {
+  --dds-background-gl-ink0: var(--color-bg-page);
+  --dds-background-gl-ink1: var(--color-bg-brand-subtle);
+  --dds-background-gl-ink2: var(--color-bg-brand);
+  --dds-background-gl-ink3: var(--color-bg-brand-subtle);
+  --dds-background-gl-ink4: var(--color-bg-brand-hover);
+  --dds-background-gl-ink5: var(--color-bg-brand-subtle);
+  --dds-background-gl-strength: 0.22;
+}
+
+/* The grid and the rings: the ground, the resting rule, the lit rule, and the bloom at the foot. */
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='grid'] {
+  --dds-background-gl-pitch: var(--size-rule-grid-pitch);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='rings'] {
+  --dds-background-gl-pitch: var(--size-rings-pitch);
+}
+
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']) {
+  --dds-background-gl-hairline: var(--dds-background-hairline);
+}
+
+/* On the coral, the brand's own reds: the bloom the lines rise out of is its pressed red, a deeper
+   coral rather than a whitened one, and the rules a faint lighter coral — white blooms and white
+   rules washed the band to pink. The lit lines and the travelling light keep most of the white,
+   since they are the one thing on the band meant to catch the eye. */
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='brand'] {
+  --dds-background-gl-ink0: var(--color-bg-brand);
+  --dds-background-gl-ink1: color-mix(in srgb, var(--color-fg-on-brand) 22%, var(--color-bg-brand));
+  --dds-background-gl-ink2: color-mix(in srgb, var(--color-fg-on-brand) 70%, var(--color-bg-brand));
+  --dds-background-gl-ink3: var(--color-bg-brand-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='dark'] {
+  --dds-background-gl-ink0: var(--color-bg-brand-strong);
+  --dds-background-gl-ink1: color-mix(in srgb, var(--color-fg-on-brand-strong) 16%, var(--color-bg-brand-strong));
+  --dds-background-gl-ink2: var(--color-bg-brand);
+  --dds-background-gl-ink3: var(--color-bg-brand-deep);
+}
+
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='light'] {
+  --dds-background-gl-ink0: var(--color-bg-page);
+  --dds-background-gl-ink1: color-mix(in srgb, var(--color-bg-brand) 28%, var(--color-bg-page));
+  --dds-background-gl-ink2: var(--color-bg-brand);
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 12%, var(--color-bg-page));
+}
+
+/*
+ * The shader's canvas is opaque, so until it has a frame it stays out of sight and the stylesheet's
+ * version shows. Once it has — `data-shaded` — the stylesheet's paint steps aside: the grid's and
+ * the rings' background images, every pattern's pseudo-elements, and the mesh's pools.
+ */
+:where([data-dds-context="marketing"]) .dds-background:not([data-pattern='halftone']):not([data-shaded='true']) .dds-background__canvas {
+  visibility: hidden;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-shaded='true'] {
+  background-image: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-shaded='true']::before,
+:where([data-dds-context="marketing"]) .dds-background[data-shaded='true']::after {
+  display: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-shaded='true'] .dds-background__mesh {
+  display: none;
+}