@property --cloud-veil {
	syntax: '<color>';
	inherits: false;
	initial-value: #000;
}

:root:not([data-theme="dark"]) .logo {
	--tile: calc(4.8em * 1672 / 941);
	--clouds: linear-gradient(var(--cloud-veil), var(--cloud-veil)), url(../images/logo-clouds.webp);
	background-color: var(--logo);
	background-image: none, none;
	background-position: 0 0, 0 50%;
	background-size: auto, auto 4.8em;
	background-repeat: repeat, repeat-x;
	-webkit-background-clip: text;
	background-clip: text;
	animation: logo-clouds-load 1s step-start 600s forwards, logo-clouds-in 20s ease-in-out 600s both, logo-clouds 90s linear 600s infinite;
}
:root:not([data-theme="dark"]) .logo a { color: transparent; }

@keyframes logo-clouds-load {
	to { background-image: var(--clouds); }
}
@keyframes logo-clouds-in {
	from { --cloud-veil: var(--logo); }
	to { --cloud-veil: transparent; }
}
@keyframes logo-clouds {
	to { background-position-x: 0, var(--tile); }
}

@media (prefers-reduced-motion: reduce) {
	:root:not([data-theme="dark"]) .logo { animation: logo-clouds-load 1s step-start 600s forwards, logo-clouds-in 20s ease-in-out 600s both; }
}