@nxgt/material 3.2.0 → 3.4.0

package/dist/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/dist/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/dist/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/dist/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/dist/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;
+	}
+}

package/dist/backgrounds/css-react/leaves.css

@@ -0,0 +1,41 @@
+/* The `leaves` preset: line drawings of one theme (see illustrated.css).
+ * Motion (opt-in, `animated`): a leaf sways, 14 to 24 s a leg. The builder sets
+ * the pace (`p1..p3`) and the delay (`l1..l4`) as classes, so the markup holds
+ * no inline style. */
+@import "./illustrated.css";
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-leaves-sw {
+		to {
+			translate: 16px 8px;
+		}
+	}
+
+	@layer components {
+		[data-background="leaves"][data-animated] > [data-scene] .sw {
+			animation: nxgt-bg-leaves-sw 14s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .p1 {
+			animation-duration: 14s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .p2 {
+			animation-duration: 19s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .p3 {
+			animation-duration: 24s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l1 {
+			animation-delay: 0s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l2 {
+			animation-delay: -3s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l3 {
+			animation-delay: -7s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l4 {
+			animation-delay: -11s;
+		}
+	}
+}

package/dist/backgrounds/css-react/linen.css

@@ -0,0 +1,44 @@
+/* The `linen` preset: a plain weave. A cross-hatch of 1 px threads every 4 px
+ * (whole pixels, so crisp at 1x) with faint seeded slubs (a 960 px tile), on a tint of the
+ * tone (`wash`). The threads are black in light and white in dark, like the
+ * grain overlay. 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="linen"][data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-op: 0.72;
+	}
+	[data-background="linen"] > [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),
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c2) calc(var(--nxgt-bg-a1) * 0.6),
+				transparent
+			)
+		);
+	}
+	[data-background="linen"] > [data-scene] > svg {
+		filter: invert(var(--nxgt-bg-grain-invert));
+	}
+	[data-background="linen"] > [data-scene] .lw-v,
+	[data-background="linen"] > [data-scene] .lw-h {
+		fill: black;
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.1);
+		shape-rendering: crispEdges;
+	}
+	[data-background="linen"] > [data-scene] .lw-b {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.05);
+	}
+	[data-background="linen"] > [data-scene] .tx1,
+	[data-background="linen"] > [data-scene] .tx2 {
+		opacity: calc(var(--nxgt-bg-op) * 0.07);
+	}
+}

package/dist/backgrounds/css-react/marble.css

@@ -0,0 +1,55 @@
+/* The `marble` preset: polished marble. A seeded cloudy body and soft veins
+ * (an SVG: a cloud of `feTurbulence` on a seamless 960 px tile, and curves
+ * blurred soft; black in light, white in dark), very low in contrast, over a pale tint 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="marble"][data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-op: 0.72;
+	}
+	[data-background="marble"] > [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) calc(var(--nxgt-bg-a1) * 0.5),
+				transparent
+			)
+		);
+	}
+	[data-background="marble"] > [data-scene] > svg {
+		filter: invert(var(--nxgt-bg-grain-invert));
+	}
+	[data-background="marble"] > [data-scene] .tx1 {
+		opacity: calc(var(--nxgt-bg-op) * 0.08);
+	}
+	[data-background="marble"] > [data-scene] .mv-p,
+	[data-background="marble"] > [data-scene] .mh-p {
+		fill: none;
+		stroke: black;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+	[data-background="marble"] > [data-scene] .mv {
+		opacity: calc(
+			var(--nxgt-bg-op) *
+			0.2 *
+			(1 - var(--nxgt-bg-grain-invert) * 0.5)
+		);
+	}
+	[data-background="marble"] > [data-scene] .mh {
+		opacity: calc(
+			var(--nxgt-bg-op) *
+			0.07 *
+			(1 - var(--nxgt-bg-grain-invert) * 0.5)
+		);
+	}
+}

package/dist/backgrounds/css-react/music.css

@@ -0,0 +1,2 @@
+/* The `music` preset: line drawings of one theme (see illustrated.css). Still. */
+@import "./illustrated.css";

package/dist/backgrounds/css-react/night-sky.css

@@ -0,0 +1,41 @@
+/* The `night-sky` preset: line drawings of one theme (see illustrated.css).
+ * Motion (opt-in, `animated`): a star twinkles, 14 to 24 s a leg. The builder sets
+ * the pace (`p1..p3`) and the delay (`l1..l4`) as classes, so the markup holds
+ * no inline style. */
+@import "./illustrated.css";
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-night-sky-tw {
+		to {
+			opacity: 0.2;
+		}
+	}
+
+	@layer components {
+		[data-background="night-sky"][data-animated] > [data-scene] .tw {
+			animation: nxgt-bg-night-sky-tw 14s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .p1 {
+			animation-duration: 14s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .p2 {
+			animation-duration: 19s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .p3 {
+			animation-duration: 24s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l1 {
+			animation-delay: 0s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l2 {
+			animation-delay: -3s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l3 {
+			animation-delay: -7s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l4 {
+			animation-delay: -11s;
+		}
+	}
+}