/* Theme parts: motion and atmosphere (ThemeStyles.Motion, Atmosphere).
   [data-motion]      how a card and a menu line arrive (--card-enter, --nav-enter), a loop the current line plays
                      (--select-motion), the texture's drift (--texture-motion), and whether the atmosphere plays
                      (--ambient-play; --ambient-flow is --no-drawing where nothing may move, which takes away a drawing that
                      animates itself). Arrivals take --duration-enter, which reduced motion zeroes; the loops stop
                      under reduced motion too (globals.css).
   [data-atmosphere]  the layers between the texture and the page (ThemeTexture): --atmosphere-still, --atmosphere-deep
                      over it, and --atmosphere-moving with its tile size, place, repeat and loop; each cut to a
                      drawing by its --atmosphere-*-mask, or none. Every choice sets every one of them, so a preview
                      inside a page with another choice inherits nothing. Every colour comes from the theme. */

@keyframes theme-rise {
	from { opacity: 0; translate: 0 10px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes theme-slide {
	from { opacity: 0; translate: -14px 0; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes theme-deal {
	from { opacity: 0; translate: 0 16px; rotate: -3deg; }
	to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

@keyframes theme-wobble {
	0%, 100% { rotate: -1.5deg; translate: 0 0; }
	50% { rotate: 1.5deg; translate: 0 -3px; }
}

@keyframes theme-bob {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -3px; }
}

@keyframes theme-drift {
	from { transform: scale(1.06) translate(-1.2%, 0.6%); }
	to { transform: scale(1.06) translate(1.2%, -0.6%); }
}

@keyframes theme-pan {
	from { background-position: 0% 0%; }
	to { background-position: 100% 0%; }
}

@keyframes theme-petals {
	from { background-position: 0 0; }
	to { background-position: -360px 420px; }
}
@keyframes theme-ascend {
	from { background-position: 0 0; }
	to { background-position: 0 -340px; }
}

@keyframes theme-fall {
	from { background-position: 0 0; }
	to { background-position: 0 360px; }
}

@keyframes theme-lantern-rise {
	from { background-position: 0 0; }
	to { background-position: 0 -560px; }
}

@keyframes theme-unfurl {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}

/* Two bands of light crossing the window, one across and one down, for the circuit atmosphere. */
@keyframes theme-circuit {
	from { background-position: 100% 0, 0 100%; }
	to { background-position: 0% 0, 0 0%; }
}

@keyframes theme-float {
	from { background-position: 0 0; }
	to { background-position: 300px -300px; }
}

/* ── Motion ── */

/* Calm: things fade and slide as the portal always has; nothing loops. */
[data-motion="calm"] {
	--card-enter: none;
	--nav-enter: none;
	--select-motion: none;
	--texture-motion: none;
	--ambient-play: running;
	--ambient-flow: initial;
	--ambient-rest: var(--no-drawing);
}

/* Still: nothing moves at all, the atmosphere included. */
[data-motion="still"] {
	--card-enter: none;
	--nav-enter: none;
	--select-motion: none;
	--texture-motion: none;
	--ambient-play: paused;
	--ambient-flow: var(--no-drawing);
	--ambient-rest: initial;
	--duration-enter: 0s;
	--duration-exit: 0s;
	--duration-spring: 0s;
	--duration-sweep: 0s;
}

/* Snappy: cards rise and menu lines slide in quickly when a page opens. */
[data-motion="snappy"] {
	--card-enter: theme-rise var(--duration-enter) var(--ease-enter) both;
	--nav-enter: theme-slide var(--duration-enter) var(--ease-enter) both;
	--select-motion: none;
	--texture-motion: none;
	--ambient-play: running;
	--ambient-flow: initial;
	--ambient-rest: var(--no-drawing);
}

/* Drift: cards fade up slowly, and the background drifts as if seen from a slowly moving camera. */
[data-motion="drift"] {
	--card-enter: theme-rise calc(var(--duration-enter) * 2) var(--ease-standard) both;
	--nav-enter: none;
	--select-motion: none;
	--texture-motion: theme-drift 40s ease-in-out infinite alternate;
	--ambient-play: running;
	--ambient-flow: initial;
	--ambient-rest: var(--no-drawing);
}

/* Wobble: cards are dealt in with a turn, and the current line floats and tilts like a held card. */
[data-motion="wobble"] {
	--card-enter: theme-deal var(--duration-enter) var(--ease-enter) both;
	--nav-enter: none;
	--select-motion: theme-wobble 3.2s ease-in-out infinite;
	--texture-motion: none;
	--ambient-play: running;
	--ambient-flow: initial;
	--ambient-rest: var(--no-drawing);
}

/* Bob: cards rise, and the current line bobs gently up and down. */
[data-motion="bob"] {
	--card-enter: theme-rise var(--duration-enter) var(--ease-enter) both;
	--nav-enter: none;
	--select-motion: theme-bob 2.8s ease-in-out infinite;
	--texture-motion: none;
	--ambient-play: running;
	--ambient-flow: initial;
	--ambient-rest: var(--no-drawing);
}

/* Unfurl: cards open downward like a scroll let fall; nothing loops. */
[data-motion="unfurl"] {
	--card-enter: theme-unfurl calc(var(--duration-enter) * 2) var(--ease-enter) backwards;
	--nav-enter: none;
	--select-motion: none;
	--texture-motion: none;
	--ambient-play: running;
}

/* ── Atmosphere ── */

/* What every choice starts from, so a choice sets only what it uses and a preview inherits nothing from the page. */
[data-atmosphere] {
	--atmosphere-still-mask: none;
	--atmosphere-still-motion: none;
	--atmosphere-deep: none;
	--atmosphere-deep-mask: none;
	--atmosphere-moving-mask: none;
	--atmosphere-size: auto;
	--atmosphere-position: 0 0;
	--atmosphere-repeat: repeat;
	--atmosphere-lit: none;
	--atmosphere-lit-size: auto;
	--atmosphere-lit-repeat: no-repeat;
	--atmosphere-lit-mask: none;
	--atmosphere-lit-motion: none;
	--atmosphere-lit-follow: none;
}

/* None: nothing between the texture and the page. */
[data-atmosphere="none"] {
	--atmosphere-still: none;
	--atmosphere-moving: none;
	--atmosphere-motion: none;
	--atmosphere-still-mask: none;
	--atmosphere-deep: none;
	--atmosphere-deep-mask: none;
	--atmosphere-moving-mask: none;
	--atmosphere-size: auto;
	--atmosphere-position: 0 0;
	--atmosphere-repeat: repeat;
}

/* Vignette: the edges of the window darkened. */
[data-atmosphere="vignette"] {
	--atmosphere-still: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
	--atmosphere-moving: none;
	--atmosphere-motion: none;
	--atmosphere-still-mask: none;
	--atmosphere-deep: none;
	--atmosphere-deep-mask: none;
	--atmosphere-moving-mask: none;
	--atmosphere-size: auto;
	--atmosphere-position: 0 0;
	--atmosphere-repeat: repeat;
}

/* Fog: banks of mist low on the window, slowly crossing it. */
[data-atmosphere="fog"] {
	--atmosphere-still: linear-gradient(0deg, color-mix(in srgb, var(--text) 8%, transparent), transparent 35%);
	--atmosphere-moving: radial-gradient(22% 14% at 20% 92%, color-mix(in srgb, var(--text) 14%, transparent), transparent),
		radial-gradient(26% 16% at 55% 98%, color-mix(in srgb, var(--text) 11%, transparent), transparent),
		radial-gradient(20% 12% at 85% 90%, color-mix(in srgb, var(--text) 12%, transparent), transparent);
	--atmosphere-size: 200% 100%;
	--atmosphere-motion: theme-pan 60s ease-in-out infinite alternate;
	--atmosphere-still-mask: none;
	--atmosphere-deep: none;
	--atmosphere-deep-mask: none;
	--atmosphere-moving-mask: none;
	--atmosphere-position: 0 0;
	--atmosphere-repeat: repeat;
}

/* Embers: sparks in the warning colour rising from a warm glow at the bottom. */
[data-atmosphere="embers"] {
	--atmosphere-still: radial-gradient(60% 30% at 50% 100%, color-mix(in srgb, var(--warn) 16%, transparent), transparent);
	--atmosphere-moving: radial-gradient(circle at 20% 30%, var(--warn) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--warn) 60%, #fff) 0 1px, transparent 2px),
		radial-gradient(circle at 45% 88%, var(--warn) 0 1px, transparent 2px);
	--atmosphere-size: 260px 340px;
	--atmosphere-motion: theme-ascend 16s linear infinite;
	--atmosphere-still-mask: none;
	--atmosphere-deep: none;
	--atmosphere-deep-mask: none;
	--atmosphere-moving-mask: none;
	--atmosphere-position: 0 0;
	--atmosphere-repeat: repeat;
}

/* Motes: points of accent light drifting up and across. */
[data-atmosphere="motes"] {
	--atmosphere-still: none;
	--atmosphere-moving: radial-gradient(circle at 15% 25%, color-mix(in srgb, var(--accent) 80%, #fff) 0 1.5px, color-mix(in srgb, var(--accent) 35%, transparent) 2px, transparent 5px),
		radial-gradient(circle at 60% 65%, color-mix(in srgb, var(--accent) 80%, #fff) 0 1px, color-mix(in srgb, var(--accent) 30%, transparent) 1.5px, transparent 4px),
		radial-gradient(circle at 85% 15%, var(--accent) 0 1px, transparent 3px);
	--atmosphere-size: 300px 300px;
	--atmosphere-motion: theme-float 50s linear infinite;
	--atmosphere-still-mask: none;
	--atmosphere-deep: none;
	--atmosphere-deep-mask: none;
	--atmosphere-moving-mask: none;
	--atmosphere-position: 0 0;
	--atmosphere-repeat: repeat;
}

/* CRT: a curved screen's dark corners and its scanlines. */
[data-atmosphere="crt"] {
	--atmosphere-still: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.45) 100%),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px);
	--atmosphere-moving: none;
	--atmosphere-motion: none;
	--atmosphere-still-mask: none;
	--atmosphere-deep: none;
	--atmosphere-deep-mask: none;
	--atmosphere-moving-mask: none;
	--atmosphere-size: auto;
	--atmosphere-position: 0 0;
	--atmosphere-repeat: repeat;
}

/* Slashes: two long diagonal cuts across the window, one in the second accent, so the accent stays the cards' own. */
[data-atmosphere="slashes"] {
	--atmosphere-still: linear-gradient(115deg, transparent 0 58%, color-mix(in srgb, var(--accent-2) 22%, transparent) 58% 60%,
		transparent 60% 66%, color-mix(in srgb, var(--text) 8%, transparent) 66% 66.5%, transparent 66.5%);
	--atmosphere-moving: none;
	--atmosphere-motion: none;
	--atmosphere-still-mask: none;
	--atmosphere-deep: none;
	--atmosphere-deep-mask: none;
	--atmosphere-moving-mask: none;
	--atmosphere-size: auto;
	--atmosphere-position: 0 0;
	--atmosphere-repeat: repeat;
}

/* Circuit: a few long board traces across the top of the window, cut into the page: a faint rim in the accent round
   each dark groove, and light in the accent running along them as two slow bands cross the window. The glow drawing
   is taken away by --ambient-flow where nothing may move. */
[data-atmosphere="circuit"] {
	--atmosphere-still: color-mix(in srgb, var(--accent) 16%, transparent);
	--atmosphere-still-mask: url(/themes/drawings/atmosphere/circuit-rim.svg) center top / cover no-repeat;
	--atmosphere-deep: color-mix(in srgb, var(--bg) 45%, #000);
	--atmosphere-deep-mask: url(/themes/drawings/atmosphere/circuit-groove.svg) center top / cover no-repeat;
	--atmosphere-moving: linear-gradient(90deg, transparent 46%, color-mix(in srgb, var(--accent) 80%, #fff) 50%, transparent 54%),
		linear-gradient(0deg, transparent 45%, var(--accent) 50%, transparent 55%);
	--atmosphere-moving-mask: var(--ambient-flow, url(/themes/drawings/atmosphere/circuit-glow.svg) center top / cover no-repeat);
	--atmosphere-size: 300% 100%, 100% 300%;
	--atmosphere-position: 0 0, 0 0;
	--atmosphere-repeat: no-repeat;
	--atmosphere-motion: theme-circuit 22s linear infinite;
}

/* Heartbeat: dense bundles of thin channels, as the light-lines on armour plating, walled in the accent round a dark
   groove, round a heart in the middle a third of the way down. Pairs of lanes fan out of its top and bottom into buses
   that weave straight up or down; bundles step out of its sides and peel off a bus at each column. The heart beats
   twice, and the double pulse of neon runs out along every lane and down each branch, so light reaches each part of
   the page by the channels that lead there; then a rest. The pulses move inside the flow drawing, which
   --ambient-flow takes away where nothing may move. */
[data-atmosphere="heartbeat"] {
	--atmosphere-still: color-mix(in srgb, var(--accent) 42%, transparent);
	--atmosphere-still-mask: url(/themes/drawings/atmosphere/heartbeat-rim.svg) 50% 33.33% / 2400px 1500px no-repeat;
	--atmosphere-deep: color-mix(in srgb, var(--bg) 45%, #000);
	--atmosphere-deep-mask: url(/themes/drawings/atmosphere/heartbeat-groove.svg) 50% 33.33% / 2400px 1500px no-repeat;
	--atmosphere-moving: color-mix(in srgb, var(--accent) 80%, #fff);
	--atmosphere-moving-mask: var(--ambient-flow, url(/themes/drawings/atmosphere/heartbeat-flow.svg) 50% 33.33% / 2400px 1500px no-repeat);
	--atmosphere-size: auto;
	--atmosphere-position: 0 0;
	--atmosphere-repeat: repeat;
	--atmosphere-motion: none;
}

/* Datastream: thin trails of accent-3 and accent-2 falling far behind the page, as data streaming past a screen. */
[data-atmosphere="datastream"] {
	--atmosphere-still: none;
	--atmosphere-moving: radial-gradient(1px 46px at 12% 30%, color-mix(in srgb, var(--accent-3) 45%, transparent), transparent),
		radial-gradient(1px 30px at 47% 70%, color-mix(in srgb, var(--accent-3) 35%, transparent), transparent),
		radial-gradient(1px 60px at 81% 45%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent);
	--atmosphere-size: 220px 360px;
	--atmosphere-motion: theme-fall 9s linear infinite;
}

/* Sky lanterns: a few small paper lanterns in the warning colour, lit from inside, rising slowly over a warm glow. */
[data-atmosphere="sky-lanterns"] {
	--atmosphere-still: radial-gradient(60% 26% at 70% 100%, color-mix(in srgb, var(--warn) 12%, transparent), transparent);
	--atmosphere-moving: radial-gradient(5px 7px at 22% 30%, color-mix(in srgb, var(--warn) 85%, transparent) 0 70%, transparent 100%),
		radial-gradient(4px 5px at 64% 62%, color-mix(in srgb, var(--warn) 70%, transparent) 0 70%, transparent 100%),
		radial-gradient(3px 4px at 84% 18%, color-mix(in srgb, var(--warn) 60%, transparent) 0 70%, transparent 100%);
	--atmosphere-size: 420px 560px;
	--atmosphere-motion: theme-lantern-rise 70s linear infinite;
}

/* Smoke: banks of grey smoke low on the window, drifting slowly across it. */
[data-atmosphere="smoke"] {
	--atmosphere-still: linear-gradient(0deg, color-mix(in srgb, var(--text-faint) 10%, transparent), transparent 30%);
	--atmosphere-moving: radial-gradient(30% 12% at 25% 94%, color-mix(in srgb, var(--text-faint) 16%, transparent), transparent),
		radial-gradient(34% 14% at 62% 99%, color-mix(in srgb, var(--text-faint) 13%, transparent), transparent),
		radial-gradient(24% 10% at 90% 92%, color-mix(in srgb, var(--text-faint) 14%, transparent), transparent);
	--atmosphere-size: 200% 100%;
	--atmosphere-motion: theme-pan 80s ease-in-out infinite alternate;
}

/* Petals: a few blossom petals falling and drifting left, in a pale mix of the accent; the moving layer only. */
[data-atmosphere="petals"] {
	--atmosphere-still: none;
	--atmosphere-moving: radial-gradient(ellipse 4px 2.5px at 18% 22%, color-mix(in srgb, var(--accent) 35%, #fff) 0 80%, transparent),
		radial-gradient(ellipse 3px 2px at 64% 58%, color-mix(in srgb, var(--accent) 28%, #fff) 0 80%, transparent),
		radial-gradient(ellipse 3.5px 2px at 38% 86%, color-mix(in srgb, var(--accent) 40%, #fff) 0 80%, transparent);
	--atmosphere-size: 360px 420px;
	--atmosphere-motion: theme-petals 28s linear infinite;
}

/* ── Living atmospheres: slow light that moves behind the page and never on it. Each mask loop moves its tiles by whole
   tiles, so it never jumps. ── */

@keyframes theme-rain-fall {
	from { mask-position: 0 0, 0 0; }
	to { mask-position: -200px 940px, -360px 1695px; }
}
@keyframes theme-flicker {
	0%, 40%, 43%, 46%, 77%, 80%, 100% { opacity: 1; }
	41% { opacity: 0.55; }
	44% { opacity: 0.75; }
	78.5% { opacity: 0.7; }
}

/* Neon rain: signs far off in the city, out of focus in the accent colours and flickering now and then, and rain
   falling past them in two depths; a drop shows the colour of the light behind it. */
[data-atmosphere="neon-rain"] {
	--rain-lights:
		radial-gradient(circle 70px at 16% 28%, var(--rl-1), transparent),
		radial-gradient(circle 46px at 27% 18%, var(--rl-2), transparent),
		radial-gradient(circle 110px at 71% 20%, var(--rl-3), transparent),
		radial-gradient(circle 60px at 88% 40%, var(--rl-1), transparent),
		radial-gradient(circle 38px at 58% 46%, var(--rl-2), transparent),
		radial-gradient(circle 90px at 40% 62%, var(--rl-1), transparent),
		radial-gradient(circle 54px at 92% 74%, var(--rl-2), transparent),
		radial-gradient(70% 26% at 50% 104%, var(--rl-street), transparent);
	--rl-1: color-mix(in srgb, var(--accent) 13%, transparent);
	--rl-2: color-mix(in srgb, var(--accent-2) 13%, transparent);
	--rl-3: color-mix(in srgb, var(--accent-3) 8%, transparent);
	--rl-street: color-mix(in srgb, var(--accent) 10%, transparent);
	--atmosphere-still: var(--rain-lights);
	--atmosphere-still-motion: theme-flicker 14s linear infinite;
	--atmosphere-moving: color-mix(in srgb, var(--text) 13%, transparent);
	--atmosphere-moving-mask: url(/themes/drawings/atmosphere/rain-far.svg) 0 0 / 200px 235px, url(/themes/drawings/atmosphere/rain-near.svg) 0 0 / 360px 339px;
	--atmosphere-size: auto;
	--atmosphere-motion: theme-rain-fall 3.6s linear infinite;
	--atmosphere-lit:
		radial-gradient(circle 150px at 16% 28%, color-mix(in srgb, var(--accent) 60%, transparent), transparent),
		radial-gradient(circle 100px at 27% 18%, color-mix(in srgb, var(--accent-2) 60%, transparent), transparent),
		radial-gradient(circle 200px at 71% 20%, color-mix(in srgb, var(--accent-3) 50%, transparent), transparent),
		radial-gradient(circle 130px at 88% 40%, color-mix(in srgb, var(--accent) 60%, transparent), transparent),
		radial-gradient(circle 90px at 58% 46%, color-mix(in srgb, var(--accent-2) 60%, transparent), transparent),
		radial-gradient(circle 180px at 40% 62%, color-mix(in srgb, var(--accent) 60%, transparent), transparent),
		radial-gradient(circle 120px at 92% 74%, color-mix(in srgb, var(--accent-2) 60%, transparent), transparent),
		radial-gradient(80% 34% at 50% 108%, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
	--atmosphere-lit-mask: var(--atmosphere-moving-mask);
	--atmosphere-lit-motion: theme-rain-fall 3.6s linear infinite;
}

@property --turn { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes theme-turn { to { --turn: 360deg; } }
@keyframes theme-sweep-down {
	0% { background-position: 0 -55%; }
	100% { background-position: 0 155%; }
}
@keyframes theme-glint {
	0%, 55% { background-position: -90% 0; }
	85%, 100% { background-position: 190% 0; }
}
@keyframes theme-pulse {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 1; }
}
@keyframes theme-twinkle {
	0%, 100% { opacity: 0.15; }
	20% { opacity: 1; }
	45% { opacity: 0.35; }
	70% { opacity: 0.9; }
}
@keyframes theme-blink {
	0%, 100% { opacity: 1; }
	33% { opacity: 0.2; }
	66% { opacity: 0.7; }
}
@keyframes theme-star-drift {
	from { mask-position: 0 0, 0 0, 0 0; }
	to { mask-position: -400px 0, -640px 0, -1060px 0; }
}
@keyframes theme-rise-motes {
	from { background-position: 0 0, 0 0; }
	to { background-position: 60px -400px, -90px -500px; }
}
@keyframes theme-bob-crowd {
	0%, 100% { background-position: 0 100%, 14px 100%; rotate: 0deg; }
	50% { background-position: 4px calc(100% - 8px), 10px calc(100% + 4px); }
}
@keyframes theme-beacon {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.15; }
}

/* Sweep: a band of light runs down the window, gathering speed as it comes, every few seconds, lighting the texture's
   lines as it passes (a grid floor rushing at you; a scan down a screen). */
[data-atmosphere="sweep"] {
	--atmosphere-still: none;
	--atmosphere-moving: none;
	--atmosphere-motion: none;
	--atmosphere-lit: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent) 45%, color-mix(in srgb, var(--accent) 60%, var(--text)) 50%, transparent);
	--atmosphere-lit-size: 100% 34%;
	--atmosphere-lit-mask: var(--texture-lit-mask);
	--atmosphere-lit-follow: var(--texture-motion, none), var(--texture-layer-motion, none);
	--atmosphere-lit-motion: theme-sweep-down 12s cubic-bezier(0.55, 0, 0.9, 0.6) infinite;
}

/* Glint: now and then a sheen of light passes across, catching only the texture's glass or crystal. */
[data-atmosphere="glint"] {
	--atmosphere-still: none;
	--atmosphere-moving: none;
	--atmosphere-motion: none;
	--atmosphere-lit: linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--text) 32%, transparent) 50%, transparent 58%);
	--atmosphere-lit-size: 60% 100%;
	--atmosphere-lit-mask: var(--texture-lit-mask);
	--atmosphere-lit-follow: var(--texture-motion, none), var(--texture-layer-motion, none);
	--atmosphere-lit-motion: theme-glint 26s ease-in-out infinite;
}

/* Radar: a beam turning about the texture's centre, a trail fading behind it, and a blip on each contact the beam
   crosses (the texture's lit mask), fading with the trail. */
[data-atmosphere="radar"] {
	--atmosphere-still: none;
	--atmosphere-size: 100% 100%;
	--atmosphere-motion: theme-turn 12s linear infinite;
	--atmosphere-lit-mask: var(--texture-lit-mask);
	--atmosphere-lit-follow: var(--texture-motion, none), var(--texture-layer-motion, none);
	--atmosphere-lit-motion: theme-turn 12s linear infinite;
}
/* The turning gradients are declared on the layers themselves, where --turn is animated, and only on layers whose
   nearest atmosphere is this one, so a swatch or preview of another atmosphere inside the page keeps its own. */
[data-atmosphere="radar"] .theme-atmosphere-moving:not([data-atmosphere="radar"] [data-atmosphere]:not([data-atmosphere="radar"]) *) { --atmosphere-moving: conic-gradient(from var(--turn) at var(--texture-lit-at), transparent 0deg 280deg, color-mix(in srgb, var(--accent) 8%, transparent) 320deg, color-mix(in srgb, var(--accent) 32%, transparent) 358deg, color-mix(in srgb, var(--accent) 60%, transparent) 359.5deg, transparent 360deg); }
[data-atmosphere="radar"] .theme-atmosphere-lit:not([data-atmosphere="radar"] [data-atmosphere]:not([data-atmosphere="radar"]) *) { --atmosphere-lit: conic-gradient(from var(--turn) at var(--texture-lit-at), transparent 0deg 300deg, color-mix(in srgb, var(--accent) 45%, transparent) 350deg, color-mix(in srgb, var(--accent) 55%, var(--text)) 359.5deg, transparent 360deg); }

/* Orbit: the same turning light, slower and gentler, in the second accent, as power running round a magic circle. */
[data-atmosphere="orbit"] {
	--atmosphere-still: radial-gradient(30% 40% at var(--texture-lit-at), color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
	--atmosphere-still-motion: theme-pulse 10s ease-in-out infinite;
	--atmosphere-moving: color-mix(in srgb, var(--accent) 85%, var(--text));
	--atmosphere-moving-mask: url(/themes/drawings/atmosphere/motes-far.svg) 0 0 / 310px 430px, url(/themes/drawings/atmosphere/motes-near.svg) 0 0 / 470px 610px;
	--atmosphere-size: auto;
	--atmosphere-motion: theme-motes-rise 60s linear infinite, theme-motes-sway 9s ease-in-out infinite alternate;
	--atmosphere-lit-mask: var(--texture-lit-mask);
	--atmosphere-lit-follow: var(--texture-motion, none), var(--texture-layer-motion, none);
	--atmosphere-lit-motion: theme-turn 30s linear infinite;
}
[data-atmosphere="orbit"] .theme-atmosphere-lit:not([data-atmosphere="orbit"] [data-atmosphere]:not([data-atmosphere="orbit"]) *) { --atmosphere-lit: conic-gradient(from var(--turn) at var(--texture-lit-at), transparent 0deg 250deg, var(--accent) 340deg, var(--text) 359deg, transparent 360deg); }

/* Twinkle: the texture's stars and bursts flare and fade, and a few points of light blink between them. */
[data-atmosphere="twinkle"] {
	--atmosphere-still: none;
	--atmosphere-moving: radial-gradient(circle at 20% 30%, var(--text) 0 1px, transparent 2.5px),
		radial-gradient(circle at 75% 65%, color-mix(in srgb, var(--accent-2) 90%, var(--text)) 0 1.5px, transparent 3px);
	--atmosphere-size: 230px 190px;
	--atmosphere-motion: theme-twinkle 7s ease-in-out infinite;
	--atmosphere-lit: color-mix(in srgb, var(--text) 55%, transparent);
	--atmosphere-lit-mask: var(--texture-lit-mask);
	--atmosphere-lit-follow: var(--texture-motion, none), var(--texture-layer-motion, none);
	--atmosphere-lit-motion: theme-twinkle 10s ease-in-out infinite;
}

/* Blink: the texture's readouts light and dim in turn, as a console at work. */
[data-atmosphere="blink"] {
	--atmosphere-still: none;
	--atmosphere-moving: none;
	--atmosphere-motion: none;
	--atmosphere-lit: color-mix(in srgb, var(--text) 80%, transparent);
	--atmosphere-lit-mask: var(--texture-lit-mask);
	--atmosphere-lit-follow: var(--texture-motion, none), var(--texture-layer-motion, none);
	--atmosphere-lit-motion: theme-blink 6s steps(3, jump-none) infinite;
}

/* Starlight: the stars drift past in three depths, the nearest fastest, as from a ship under way, and the planet's
   rim brightens and dims. */
[data-atmosphere="starlight"] {
	--atmosphere-still: radial-gradient(circle at 112% 128%, transparent 34%, color-mix(in srgb, var(--accent-2) 30%, transparent) 34.6%, transparent 39%);
	--atmosphere-still-motion: theme-pulse 14s ease-in-out infinite;
	--atmosphere-moving: color-mix(in srgb, var(--text) 85%, transparent);
	--atmosphere-moving-mask: url(/themes/drawings/shared/starfield-200.svg) 0 0 / 200px 200px, url(/themes/drawings/shared/starfield-320.svg) 0 0 / 320px 320px, url(/themes/drawings/shared/starfield-530.svg) 0 0 / 530px 530px;
	--atmosphere-size: auto;
	--atmosphere-motion: theme-star-drift 180s linear infinite;
}

/* Stage lights: glitter turning in the spotlight beams and nowhere else, and a crowd's lightsticks swaying along the
   foot of the window. */
[data-atmosphere="stage-lights"] {
	--atmosphere-still: none;
	--atmosphere-moving: radial-gradient(5px 16px at 50% 70%, var(--accent), transparent) 0 100% / 28px 60px repeat-x,
		radial-gradient(5px 16px at 50% 70%, var(--accent-2), transparent) 14px 100% / 36px 72px repeat-x;
	--atmosphere-size: 28px 60px, 36px 72px;
	--atmosphere-position: 0 100%, 14px 100%;
	--atmosphere-repeat: repeat-x;
	--atmosphere-motion: theme-bob-crowd 2.6s ease-in-out infinite;
	--atmosphere-lit: radial-gradient(circle at 20% 30%, var(--text) 0 2px, transparent 4px), radial-gradient(circle at 70% 70%, var(--accent-3) 0 1.5px, transparent 3.5px);
	--atmosphere-lit-size: 60px 80px, 90px 100px;
	--atmosphere-lit-repeat: repeat;
	--atmosphere-lit-mask: var(--texture-lit-mask);
	--atmosphere-lit-follow: var(--texture-motion, none), var(--texture-layer-motion, none);
	--atmosphere-lit-motion: theme-rise-motes 24s linear infinite;
}

/* Beacon: two warning lights in the second accent at the top corners, flashing in turn. */
[data-atmosphere="beacon"] {
	--atmosphere-still: radial-gradient(28% 40% at 0% 0%, color-mix(in srgb, var(--accent-2) 42%, transparent), transparent 70%);
	--atmosphere-still-motion: theme-beacon 4s ease-in-out infinite;
	--atmosphere-moving: radial-gradient(28% 40% at 100% 0%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%);
	--atmosphere-size: 100% 100%;
	--atmosphere-motion: theme-beacon 4s ease-in-out -2s infinite;
	--atmosphere-lit: color-mix(in srgb, var(--accent-2) 80%, var(--text));
	--atmosphere-lit-mask: var(--texture-lit-mask);
	--atmosphere-lit-follow: var(--texture-motion, none), var(--texture-layer-motion, none);
	--atmosphere-lit-motion: theme-beacon 4s ease-in-out infinite;
}

/* Rays: rays of light turning slowly about a sun below the window, brightening and dimming. */
[data-atmosphere="rays"] {
	--atmosphere-still: radial-gradient(circle 40vmax at 50% 110%, color-mix(in srgb, var(--accent) 20%, transparent), transparent);
	--atmosphere-still-motion: theme-pulse 30s ease-in-out infinite;
	--atmosphere-size: 100% 100%;
	--atmosphere-motion: theme-turn 360s linear infinite;
}

[data-atmosphere="rays"] .theme-atmosphere-moving:not([data-atmosphere="rays"] [data-atmosphere]:not([data-atmosphere="rays"]) *) { --atmosphere-moving: repeating-conic-gradient(from var(--turn) at 50% 115%, color-mix(in srgb, var(--accent-3) 22%, transparent) 0deg 3deg, transparent 3deg 9deg); }
[data-scheme="light"][data-atmosphere="glint"] { --atmosphere-lit: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%); }
[data-scheme="light"][data-atmosphere="sweep"] { --atmosphere-lit: linear-gradient(180deg, transparent, var(--accent) 50%, transparent); }

@keyframes theme-motes-rise {
	from { mask-position: 0 0, 0 0; }
	to { mask-position: 0 -860px, 0 -1830px; }
}
@keyframes theme-motes-sway {
	from { translate: -8px 0; }
	to { translate: 8px 0; }
}