@nxgt/material 3.3.0 → 3.4.0

package/lib/backgrounds/css-react/circuit.css

@@ -0,0 +1,111 @@
+/* The `circuit` preset: a printed circuit board. Layers: `wash` (a tint) and
+ * the SVG scene (`cb-trace` and `cb-l1..3` the traces, `cb-pin`, `cb-chip`,
+ * `cb-pad`, and `cb-sig`, the dash that runs along a trace when `animated`).
+ * React only: nothing in the shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="circuit"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			160deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a2), transparent),
+			transparent 65%
+		);
+	}
+	[data-background="circuit"] > [data-scene] {
+		-webkit-mask-image: radial-gradient(
+			ellipse 75% 75% at 50% 50%,
+			rgb(0 0 0 / 0.4) 0%,
+			black 100%
+		);
+		mask-image: radial-gradient(
+			ellipse 75% 75% at 50% 50%,
+			rgb(0 0 0 / 0.4) 0%,
+			black 100%
+		);
+	}
+	[data-background="circuit"] > [data-scene] :is(.cb-trace, .cb-pin, .cb-sig) {
+		fill: none;
+		stroke: var(--nxgt-bg-c1);
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+	[data-background="circuit"] > [data-scene] .cb-trace {
+		stroke-width: 2.2;
+		stroke-opacity: calc(var(--nxgt-bg-op) * 0.85);
+	}
+	[data-background="circuit"] > [data-scene] .cb-l1 {
+		stroke: var(--nxgt-bg-c1);
+	}
+	[data-background="circuit"] > [data-scene] .cb-l2 {
+		stroke: var(--nxgt-bg-c2);
+	}
+	[data-background="circuit"] > [data-scene] .cb-l3 {
+		stroke: var(--nxgt-bg-c3);
+	}
+	[data-background="circuit"] > [data-scene] .cb-pin {
+		stroke-width: 2.2;
+		stroke-opacity: calc(var(--nxgt-bg-op) * 0.85);
+	}
+	[data-background="circuit"] > [data-scene] .cb-chip {
+		fill: var(--nxgt-bg-c1);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.16);
+		stroke: var(--nxgt-bg-c1);
+		stroke-width: 2.2;
+		stroke-opacity: calc(var(--nxgt-bg-op) * 0.7);
+	}
+	[data-background="circuit"] > [data-scene] .cb-pad {
+		fill: var(--nxgt-bg-c1);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.2);
+		stroke: var(--nxgt-bg-c1);
+		stroke-width: 2.2;
+		stroke-opacity: calc(var(--nxgt-bg-op) * 0.8);
+	}
+	/* The signals are only drawn while they move (below). */
+	[data-background="circuit"] > [data-scene] .cb-signals {
+		display: none;
+	}
+	[data-background="circuit"] > [data-scene] .cb-sig {
+		stroke: color-mix(in oklab, var(--nxgt-bg-c2) 55%, white);
+		stroke-width: 3.4;
+		stroke-opacity: 0.9;
+		stroke-dashoffset: 14;
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	/* The dash starts 14 units before the trace and runs 540 units, past the
+	 * end of the longest one. */
+	@keyframes nxgt-bg-circuit-signal {
+		from {
+			stroke-dashoffset: 14;
+		}
+		to {
+			stroke-dashoffset: -540;
+		}
+	}
+
+	@layer components {
+		[data-background="circuit"][data-animated] > [data-scene] .cb-signals {
+			display: inline;
+		}
+		[data-background="circuit"][data-animated] > [data-scene] .cb-sig {
+			animation: nxgt-bg-circuit-signal 7s linear infinite
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="circuit"][data-animated]
+			> [data-scene]
+			.cb-sig:nth-child(3n + 1) {
+			animation-duration: 9s;
+			animation-delay: -2s;
+		}
+		[data-background="circuit"][data-animated]
+			> [data-scene]
+			.cb-sig:nth-child(3n + 2) {
+			animation-duration: 11s;
+			animation-delay: -6s;
+		}
+	}
+}

package/lib/backgrounds/css-react/concrete.css

@@ -0,0 +1,41 @@
+/* The `concrete` preset: poured concrete. A seeded mottle and small pores (an
+ * SVG of `feTurbulence` specks on a seamless 640 px tile: black in light,
+ * white in dark) over a cool grey tint that takes a little of the tone
+ * (`wash`). Intensity never goes above the default (`vivid` draws as the default). Static: `animated` does nothing. React only: nothing in the
+ * shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	/* `vivid` is capped at the default strength: a texture under body text
+	 * never gets stronger (the tint and the specks read these two). */
+	[data-background="concrete"][data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-op: 0.72;
+	}
+	[data-background="concrete"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			160deg,
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c1) var(--nxgt-bg-a1),
+				color-mix(in oklab, var(--foreground) 5%, transparent)
+			),
+			color-mix(in oklab, var(--foreground) 3%, transparent)
+		);
+	}
+	[data-background="concrete"] > [data-scene] > svg {
+		filter: invert(var(--nxgt-bg-grain-invert));
+		opacity: calc(1 - var(--nxgt-bg-grain-invert) * 0.3);
+	}
+	[data-background="concrete"] > [data-scene] .tx1 {
+		opacity: calc(var(--nxgt-bg-op) * 0.12);
+	}
+	[data-background="concrete"] > [data-scene] .tx2 {
+		opacity: calc(var(--nxgt-bg-op) * 0.26);
+	}
+	[data-background="concrete"] > [data-scene] .tx3 {
+		opacity: calc(var(--nxgt-bg-op) * 0.12);
+	}
+}

package/lib/backgrounds/css-react/diagonal-checker.css

@@ -0,0 +1,48 @@
+/* The `diagonal-checker` preset: the fine checkerboard turned 45 degrees
+ * (diamonds of c1 touching at their corners, c2 between them), in two tints
+ * that sit close together, fading out toward the edges, with a seeded sixth of
+ * the cells near the edges carrying a small tonal motif. One layer, the SVG
+ * scene (`dc-a` the diamonds, `dc-b` the corners, `dc-m` the motifs), with
+ * nothing over it. The scene covers the background, so the cells follow the
+ * viewport. React only: nothing in the shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="diagonal-checker"] > [data-scene] .fade-1 {
+		stop-color: white;
+	}
+	[data-background="diagonal-checker"] > [data-scene] .fade-0 {
+		stop-color: black;
+	}
+	[data-background="diagonal-checker"] > [data-scene] .dc-a {
+		fill: var(--nxgt-bg-c1);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.11 * var(--nxgt-bg-iso-k));
+	}
+	[data-background="diagonal-checker"] > [data-scene] .dc-b {
+		fill: var(--nxgt-bg-c2);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.055 * var(--nxgt-bg-iso-k));
+	}
+	[data-background="diagonal-checker"] > [data-scene] .dc-m,
+	[data-background="diagonal-checker"] > [data-scene] .dc-p {
+		color: var(--nxgt-bg-c1);
+		stroke-opacity: 0.85;
+		fill-opacity: calc(0.4 * var(--nxgt-bg-iso-k));
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-diagonal-checker-drift {
+		to {
+			transform: translate(17px, 17px);
+		}
+	}
+
+	@layer components {
+		[data-background="diagonal-checker"][data-animated]
+			> [data-scene]
+			.dc-drift {
+			animation: nxgt-bg-diagonal-checker-drift 22s ease-in-out infinite
+				alternate var(--nxgt-bg-play, running);
+		}
+	}
+}

package/lib/backgrounds/css-react/glass.css

@@ -0,0 +1,99 @@
+/* The `glass` preset: frosted panes over soft colour. A background layer has
+ * no backdrop to blur, so the frost is faked: soft blobs (radial
+ * gradients in the tone's three colours, `gl-b`) under a grid of pale panes with a bright edge
+ * (`gl-p`, `gl-p1..3` for how frosted), over a tint (`wash`). Motion
+ * (opt-in, `animated`): the blobs drift behind the panes. React only: nothing
+ * in the shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="glass"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			135deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			color-mix(in oklab, var(--nxgt-bg-c2) var(--nxgt-bg-a1), transparent)
+		);
+	}
+	[data-background="glass"] > [data-scene] .gl-b {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.8);
+	}
+	[data-background="glass"] > [data-scene] .gl-p {
+		stroke: color-mix(in oklab, white 55%, transparent);
+		stroke-width: 1.5;
+	}
+	[data-background="glass"] > [data-scene] .gl-p1 {
+		fill: color-mix(in oklab, white 10%, transparent);
+	}
+	[data-background="glass"] > [data-scene] .gl-p2 {
+		fill: color-mix(in oklab, white 18%, transparent);
+	}
+	[data-background="glass"] > [data-scene] .gl-p3 {
+		fill: color-mix(in oklab, white 26%, transparent);
+	}
+	:is(.dark, [data-theme="dark"])
+		[data-background="glass"]
+		> [data-scene]
+		.gl-p,
+	[data-background="glass"]:is(.dark, [data-theme="dark"])
+		> [data-scene]
+		.gl-p {
+		stroke: color-mix(in oklab, white 22%, transparent);
+	}
+	:is(.dark, [data-theme="dark"])
+		[data-background="glass"]
+		> [data-scene]
+		.gl-p1,
+	[data-background="glass"]:is(.dark, [data-theme="dark"])
+		> [data-scene]
+		.gl-p1 {
+		fill: color-mix(in oklab, white 4%, transparent);
+	}
+	:is(.dark, [data-theme="dark"])
+		[data-background="glass"]
+		> [data-scene]
+		.gl-p2,
+	[data-background="glass"]:is(.dark, [data-theme="dark"])
+		> [data-scene]
+		.gl-p2 {
+		fill: color-mix(in oklab, white 8%, transparent);
+	}
+	:is(.dark, [data-theme="dark"])
+		[data-background="glass"]
+		> [data-scene]
+		.gl-p3,
+	[data-background="glass"]:is(.dark, [data-theme="dark"])
+		> [data-scene]
+		.gl-p3 {
+		fill: color-mix(in oklab, white 12%, transparent);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-glass-drift {
+		from {
+			transform: translate(-90px, -40px);
+		}
+		to {
+			transform: translate(90px, 50px);
+		}
+	}
+
+	@layer components {
+		[data-background="glass"][data-animated] > [data-scene] .gl-d {
+			animation: nxgt-bg-glass-drift 26s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="glass"][data-animated] > [data-scene] .gl-d1 {
+			animation-direction: alternate;
+		}
+		[data-background="glass"][data-animated] > [data-scene] .gl-d2 {
+			animation-duration: 33s;
+			animation-direction: alternate-reverse;
+		}
+		[data-background="glass"][data-animated] > [data-scene] .gl-d3 {
+			animation-duration: 41s;
+		}
+	}
+}

package/lib/backgrounds/css-react/graph-paper.css

@@ -0,0 +1,74 @@
+/* The `graph-paper` preset: a soft squared grid, 20 px cells with a line every
+ * fifth (100 px) barely stronger, drawn from the top left corner so every line
+ * lands on a whole pixel. Thin, pale lines in the tone's colour, fading out
+ * toward the edges, with fine line doodles (`gp-d`) in an SVG scene, sparse
+ * and none around the content. Layers: `wash` (a tint), `grid` and the scene.
+ * React only: nothing in the shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="graph-paper"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			180deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			transparent 70%
+		);
+	}
+	[data-background="graph-paper"] > [data-layer="grid"] {
+		--nxgt-bg-l1: color-mix(
+			in oklab,
+			var(--nxgt-bg-c1) calc(var(--nxgt-bg-a2) * 0.5),
+			transparent
+		);
+		--nxgt-bg-l2: color-mix(
+			in oklab,
+			var(--nxgt-bg-c1) calc(var(--nxgt-bg-a2) * 0.8),
+			transparent
+		);
+		position: absolute;
+		inset: 0;
+		background-image:
+			linear-gradient(to right, var(--nxgt-bg-l2) 1px, transparent 1px),
+			linear-gradient(to bottom, var(--nxgt-bg-l2) 1px, transparent 1px),
+			linear-gradient(to right, var(--nxgt-bg-l1) 1px, transparent 1px),
+			linear-gradient(to bottom, var(--nxgt-bg-l1) 1px, transparent 1px);
+		background-size:
+			100px 100px,
+			100px 100px,
+			20px 20px,
+			20px 20px;
+		background-position: 0 0;
+		-webkit-mask-image: radial-gradient(
+			ellipse 75% 70% at 50% 45%,
+			black 15%,
+			transparent 100%
+		);
+		mask-image: radial-gradient(
+			ellipse 75% 70% at 50% 45%,
+			black 15%,
+			transparent 100%
+		);
+	}
+	[data-background="graph-paper"] > [data-scene] .gp-d {
+		color: var(--nxgt-bg-c1);
+		opacity: calc(var(--nxgt-bg-op) * 0.7);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	/* One major cell (100 px, five minor ones), so the loop has no jump. */
+	@keyframes nxgt-bg-graph-paper-pan {
+		to {
+			background-position: 100px 100px;
+		}
+	}
+
+	@layer components {
+		[data-background="graph-paper"][data-animated] > [data-layer="grid"] {
+			animation: nxgt-bg-graph-paper-pan 24s linear infinite
+				var(--nxgt-bg-play, running);
+		}
+	}
+}

package/lib/backgrounds/css-react/halo.css

@@ -0,0 +1,66 @@
+/* The `halo` preset: a ring of light. A conic gradient through the tone's
+ * three colours, cut to a soft ring and blurred (`halo`, a square centred a
+ * little above the middle), over a tint (`wash`). CSS only. Blended with the
+ * page: it adds light in dark. Motion (opt-in, `animated`): the colours turn
+ * round the ring. React only: nothing in the shared `css/` folder. */
+@layer components {
+	[data-background="halo"] {
+		overflow: clip;
+		isolation: isolate;
+	}
+	[data-background="halo"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: radial-gradient(
+			circle at 50% 44%,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a2), transparent),
+			transparent 60%
+		);
+	}
+	[data-background="halo"] > [data-layer="halo"] {
+		position: absolute;
+		top: 44%;
+		left: 50%;
+		width: max(70vmin, 22rem);
+		aspect-ratio: 1 / 1;
+		margin: calc(max(70vmin, 22rem) / -2) 0 0 calc(max(70vmin, 22rem) / -2);
+		border-radius: 9999px;
+		opacity: var(--nxgt-bg-op);
+		mix-blend-mode: var(--nxgt-bg-glow-blend);
+		filter: blur(18px);
+		background-image: conic-gradient(
+			from 0deg,
+			var(--nxgt-bg-c1),
+			var(--nxgt-bg-c2),
+			var(--nxgt-bg-c3),
+			var(--nxgt-bg-c1)
+		);
+		-webkit-mask-image: radial-gradient(
+			closest-side,
+			transparent 56%,
+			black 72%,
+			transparent 90%
+		);
+		mask-image: radial-gradient(
+			closest-side,
+			transparent 56%,
+			black 72%,
+			transparent 90%
+		);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-halo-turn {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@layer components {
+		[data-background="halo"][data-animated] > [data-layer="halo"] {
+			animation: nxgt-bg-halo-turn 40s linear infinite
+				var(--nxgt-bg-play, running);
+		}
+	}
+}

package/lib/backgrounds/css-react/hexagons.css

@@ -0,0 +1,79 @@
+/* The `hexagons` preset: a honeycomb, fading out toward the edges, with a
+ * seeded tenth of its cells tinted. Layers: `wash` (a tint) and the SVG scene
+ * (`hx-line` the edges, `hx-lit` and `hx-lit1..3` the tinted cells in c1, c2
+ * and c3). React only: nothing in the shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="hexagons"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			180deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			transparent 70%
+		);
+	}
+	[data-background="hexagons"] > [data-scene] {
+		-webkit-mask-image: radial-gradient(
+			ellipse 80% 80% at 50% 50%,
+			rgb(0 0 0 / 0.45) 0%,
+			black 100%
+		);
+		mask-image: radial-gradient(
+			ellipse 80% 80% at 50% 50%,
+			rgb(0 0 0 / 0.45) 0%,
+			black 100%
+		);
+	}
+	[data-background="hexagons"] > [data-scene] .hx-line {
+		fill: none;
+		stroke: var(--nxgt-bg-c1);
+		stroke-width: 1.4;
+		stroke-linejoin: round;
+		stroke-opacity: calc(var(--nxgt-bg-op) * 0.65);
+	}
+	[data-background="hexagons"] > [data-scene] .hx-lit1 {
+		fill: var(--nxgt-bg-c1);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.2);
+		stroke: none;
+	}
+	[data-background="hexagons"] > [data-scene] .hx-lit2 {
+		fill: var(--nxgt-bg-c2);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.26);
+	}
+	[data-background="hexagons"] > [data-scene] .hx-lit3 {
+		fill: var(--nxgt-bg-c3);
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.34);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-hexagons-pulse {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0.15;
+		}
+	}
+
+	@layer components {
+		[data-background="hexagons"][data-animated] > [data-scene] .hx-lit {
+			animation: nxgt-bg-hexagons-pulse 7s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="hexagons"][data-animated]
+			> [data-scene]
+			.hx-lit:nth-child(3n + 1) {
+			animation-duration: 9s;
+			animation-delay: -3s;
+		}
+		[data-background="hexagons"][data-animated]
+			> [data-scene]
+			.hx-lit:nth-child(3n + 2) {
+			animation-duration: 11s;
+			animation-delay: -7s;
+		}
+	}
+}

package/lib/backgrounds/css-react/illustrated.css

@@ -0,0 +1,164 @@
+/* The illustrated scenes' shared parts (`school`, `night-sky`, `bubbles`,
+ * `leaves`, `science`, `music`, `travel`, `sport`): a faint colour wash under
+ * the scene, and the scene itself, fine line drawings (`il` is the root; every
+ * path is stroked in `currentColor`, which a `k1..k3` class sets) kept calm in
+ * the middle of the frame by a mask, where the content sits. The scene is the
+ * one drawn by core's `buildBackgroundScene`. React only: nothing in the shared
+ * `css/` folder. Intensity never goes above the default (`vivid` draws as the default). Each preset's file imports this one. */
+@import "../css/scene.css";
+
+@layer components {
+	/* `vivid` is capped at the default strength: drawings under body text
+	 * never get stronger (the wash and the strokes read these variables).
+	 * Three attributes (0,3,0) beat tones.css's (0,2,0) in any import order. */
+	:is(
+		[data-background="school"],
+		[data-background="night-sky"],
+		[data-background="bubbles"],
+		[data-background="leaves"],
+		[data-background="science"],
+		[data-background="music"],
+		[data-background="travel"],
+		[data-background="sport"]
+	)[data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-a2: 16%;
+		--nxgt-bg-a3: 28%;
+		--nxgt-bg-op: 0.72;
+	}
+
+	/* The wash: two soft colour pools under the scene. */
+	:is(
+		[data-background="school"],
+		[data-background="night-sky"],
+		[data-background="bubbles"],
+		[data-background="leaves"],
+		[data-background="science"],
+		[data-background="music"],
+		[data-background="travel"],
+		[data-background="sport"]
+	) > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background:
+			radial-gradient(
+				ellipse 70% 60% at 22% 18%,
+				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+				transparent 72%
+			),
+			radial-gradient(
+				ellipse 60% 55% at 85% 92%,
+				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
+				transparent 70%
+			);
+	}
+
+	:is(
+			[data-background="school"],
+			[data-background="night-sky"],
+			[data-background="bubbles"],
+			[data-background="leaves"],
+			[data-background="science"],
+			[data-background="music"],
+			[data-background="travel"],
+			[data-background="sport"]
+		)
+		> [data-scene] {
+		overflow: hidden;
+	}
+
+	/* The middle stays calm: the mask is in pixels, not in percent of the
+	 * frame, so the quiet zone always covers a card of content (a percentage
+	 * would shrink it on a phone). It passes 7 to 9% of the drawings, which
+	 * keeps 14 px muted text at 4.5:1 or better over the worst stroke pixel. */
+	:is(
+			[data-background="school"],
+			[data-background="night-sky"],
+			[data-background="bubbles"],
+			[data-background="leaves"],
+			[data-background="science"],
+			[data-background="music"],
+			[data-background="travel"],
+			[data-background="sport"]
+		)
+		> [data-scene]
+		.mo {
+		opacity: calc(var(--nxgt-bg-op) + 0.2);
+	}
+	:is(
+			[data-background="school"],
+			[data-background="night-sky"],
+			[data-background="bubbles"],
+			[data-background="leaves"],
+			[data-background="science"],
+			[data-background="music"],
+			[data-background="travel"],
+			[data-background="sport"]
+		)
+		> [data-scene]
+		> .il {
+		-webkit-mask-image: radial-gradient(
+			ellipse 380px 290px at 50% 50%,
+			rgb(0 0 0 / 0.07) 0%,
+			rgb(0 0 0 / 0.09) 55%,
+			rgb(0 0 0 / 0.5) 80%,
+			black 100%
+		);
+		mask-image: radial-gradient(
+			ellipse 380px 290px at 50% 50%,
+			rgb(0 0 0 / 0.07) 0%,
+			rgb(0 0 0 / 0.09) 55%,
+			rgb(0 0 0 / 0.5) 80%,
+			black 100%
+		);
+	}
+	/* A phone: the card fills the width, so the zone is a band across it. */
+	@media (max-width: 640px) {
+		:is(
+				[data-background="school"],
+				[data-background="night-sky"],
+				[data-background="bubbles"],
+				[data-background="leaves"],
+				[data-background="science"],
+				[data-background="music"],
+				[data-background="travel"],
+				[data-background="sport"]
+			)
+			> [data-scene]
+			> .il {
+			-webkit-mask-image: radial-gradient(
+				ellipse 420px 170px at 50% 50%,
+				rgb(0 0 0 / 0.07) 0%,
+				rgb(0 0 0 / 0.09) 55%,
+				rgb(0 0 0 / 0.5) 80%,
+				black 100%
+			);
+			mask-image: radial-gradient(
+				ellipse 420px 170px at 50% 50%,
+				rgb(0 0 0 / 0.07) 0%,
+				rgb(0 0 0 / 0.09) 55%,
+				rgb(0 0 0 / 0.5) 80%,
+				black 100%
+			);
+		}
+	}
+
+	:is(
+			[data-background="school"],
+			[data-background="night-sky"],
+			[data-background="bubbles"],
+			[data-background="leaves"],
+			[data-background="science"],
+			[data-background="music"],
+			[data-background="travel"],
+			[data-background="sport"]
+		)
+		> [data-scene]
+		> .il
+		path {
+		fill: none;
+		stroke: currentColor;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+}