/* The layers theme parts draw on: the page texture and a card's marks. Each colour layer is filled with one of
   the theme's colours and shows only where its drawing (a mask) is. A Custom theme's stylesheet can set the same
   variables, or style these classes, to draw something of its own. */

/* The page texture (ThemeTexture): pinned to the window, under anything positioned above z-index 0. The first
   layer is the texture's gradients; each other is filled with one of the theme's colours through the texture's
   drawing for it, used as a mask. */
.theme-texture {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: var(--texture-opacity);
}

/* A texture inside a positioned element (a theme's swatch) rather than the window. */
.theme-texture--contained {
	position: absolute;
	z-index: auto;
	border-radius: inherit;
	overflow: hidden;
}

/* The texture drifts when the theme's motion says so (data-motion="drift"); nothing else moves it. */
.theme-texture {
	animation: var(--texture-motion);
}

.theme-texture > i {
	position: absolute;
	inset: 0;
}

.theme-texture-base {
	background-image: var(--texture);
	background-size: var(--texture-size);
}

.theme-texture-text { background: var(--texture-ink-text); mask: var(--texture-mask-text); }
.theme-texture-accent { background: var(--texture-ink-accent); mask: var(--texture-mask-accent); }
.theme-texture-accent-2 { background: var(--texture-ink-accent-2); mask: var(--texture-mask-accent-2); }
.theme-texture-accent-3 { background: var(--texture-ink-accent-3); mask: var(--texture-mask-accent-3); }
.theme-texture-border { background: var(--texture-ink-border); mask: var(--texture-mask-border); }

/* A texture may loop its drawn layers (--texture-layer-motion), as a readout column rolling upward; the loop pauses
   with the atmosphere's. */
.theme-texture > i {
	animation: var(--texture-layer-motion);
	animation-play-state: var(--ambient-play);
}

/* A card's drawn marks (ThemeMarks): one layer per colour, as for the texture, over the card's surface and under
   its content. The card is position: relative and isolation: isolate. */
.theme-marks {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	overflow: hidden;
}

.theme-marks > i {
	position: absolute;
	inset: 0;
}

.theme-marks-grain { background: var(--card-ink-grain); mask: var(--card-mask-grain); }
.theme-marks-text { background: var(--card-ink-text); mask: var(--card-mask-text); }
.theme-marks-accent { background: var(--card-ink-accent); mask: var(--card-mask-accent); }
.theme-marks-accent-2 { background: var(--card-ink-accent-2); mask: var(--card-mask-accent-2); }
.theme-marks-accent-3 { background: var(--card-ink-accent-3); mask: var(--card-mask-accent-3); }
.theme-marks-border { background: var(--card-ink-border); mask: var(--card-mask-border); }

/* The atmosphere (ThemeTexture, after the texture): a still layer, a deep one over it, a moving one and a lit one on top, pinned
   like the texture, over it and under the page. Each may be cut to a drawing (--atmosphere-*-mask), so a circuit's
   rim, its dark groove and the light running in it are three layers of one drawing. The moving layer's loop pauses
   under reduced motion or a still theme (--ambient-play). */
.theme-atmosphere {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.theme-atmosphere--contained {
	position: absolute;
	z-index: auto;
	border-radius: inherit;
}

.theme-atmosphere > i {
	position: absolute;
	inset: 0;
}

.theme-atmosphere-still {
	background: var(--atmosphere-still);
	mask: var(--atmosphere-still-mask);
	animation: var(--atmosphere-still-motion);
	animation-play-state: var(--ambient-play);
}

.theme-atmosphere-deep {
	background: var(--atmosphere-deep);
	mask: var(--atmosphere-deep-mask);
}

.theme-atmosphere-moving {
	background: var(--atmosphere-moving);
	background-size: var(--atmosphere-size);
	background-position: var(--atmosphere-position);
	background-repeat: var(--atmosphere-repeat);
	mask: var(--atmosphere-moving-mask);
	animation: var(--atmosphere-motion);
	animation-play-state: var(--ambient-play);
}

/* The lit layer, on top: light that shows only through its mask, often the texture's own drawings
   (--texture-lit-mask), so rain takes the colour of the sign behind it and a radar beam lights only its contacts.
   Cut to the texture's drawings, it also moves as they do (--atmosphere-lit-follow: the texture's drift and its
   layers' loop), so the light stays on them. */
.theme-atmosphere-lit {
	background: var(--atmosphere-lit);
	background-size: var(--atmosphere-lit-size);
	background-repeat: var(--atmosphere-lit-repeat);
	mask: var(--atmosphere-lit-mask);
	animation: var(--atmosphere-lit-motion), var(--atmosphere-lit-follow);
	animation-play-state: var(--ambient-play);
}