.clouds {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.skybox {
	position: absolute;
	left: 50%;
	translate: -50% 0;
	height: auto;
}
.sky-mobile { display: none; }
@media (max-aspect-ratio: 4/5) {
	.sky-mobile { display: block; }
	.sky-desktop { display: none; }
}

/* depth values (classes, because the CSP forbids inline styles) */
.d3 { --d: 3; } .d6 { --d: 6; } .d10 { --d: 10; } .d14 { --d: 14; } .d18 { --d: 18; } .d24 { --d: 24; }

/* a depth plane: shifted by the camera (depth.js) in proportion to its depth; far planes a touch paler */
.plane {
	position: absolute;
	inset: 0;
	animation: enter 1.4s cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: calc(var(--d) * 22ms);
}
/* atmospheric perspective: each cloud fades with distance on its own layer (a plane-wide opacity would need an
   offscreen surface the size of the sky box); the far clouds' softness is baked into their pictures (cut-clouds.py) */
.d6 .cloud { opacity: 0.866; } .d10 .cloud { opacity: 0.897; } .d14 .cloud { opacity: 0.928; }
.settled .plane, .settled .glow { animation: none; }
@keyframes enter {
	from { opacity: 0; translate: 0 calc(var(--d) * 1.6px); scale: 0.985; }
}

.cloud, .bank {
	position: absolute;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.cloud {
	/* two clocks: sideways drift on `translate`, a slower bob on `transform`; they compose */
	animation:
		drift var(--dur, 14s) ease-in-out var(--delay, 0s) infinite alternate,
		cloudbob var(--bdur, 8s) ease-in-out var(--bdelay, 0s) infinite alternate;
}
@keyframes drift {
	from { translate: var(--dx0, -40px) 0; }
	to { translate: var(--dx1, 40px) 0; }
}
@keyframes cloudbob {
	from { transform: translateY(var(--dy0, -8px)); }
	to { transform: translateY(var(--dy1, 8px)); }
}

/* a soft light behind the logo, on the far plane */
.glow {
	position: absolute;
	left: 50%;
	top: 10vh;
	width: min(90vw, 900px);
	aspect-ratio: 2 / 1;
	translate: -50% 0;
	background: radial-gradient(closest-side, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.18) 55%, transparent);
	animation: enter 1.8s ease both;
}

@media (prefers-reduced-motion: reduce) {
	.cloud, .plane, .glow { animation: none; }
	.plane, .glow, .skypic { transform: none; }
}
/* Generated by tools/sky-css.py: the cloudless sky, the drifting clouds and the bank, as depth planes. */

.sky-mobile { aspect-ratio: 900 / 1616; width: max(calc(100vw + 96px), calc((100vh + 88px) * 0.55693)); bottom: -32px; }
.mobile-c1 { left: 71.889%; top: 2.042%; width: 28.111%; height: 17.141%; background-image: url('/assets/sky/mobile/cloud-01.webp'); --dx0: 0px; --dx1: 80px; --dur: 14s; --delay: -8.7s; --dy0: -8px; --dy1: 8px; --bdur: 8s; --bdelay: -4.9s; }
.mobile-c2 { left: 0.0%; top: 3.465%; width: 30.0%; height: 15.718%; background-image: url('/assets/sky/mobile/cloud-02.webp'); --dx0: -80px; --dx1: 0px; --dur: 14s; --delay: -3.4s; --dy0: -8px; --dy1: 8px; --bdur: 8s; --bdelay: -1.8s; }
.mobile-c3 { left: 52.444%; top: 14.851%; width: 24.0%; height: 8.787%; background-image: url('/assets/sky/mobile/cloud-03.webp'); --dx0: -48px; --dx1: 48px; --dur: 12s; --delay: -8.1s; --dy0: -10px; --dy1: 10px; --bdur: 7s; --bdelay: -4.7s; }
.mobile-c4 { left: 69.556%; top: 19.307%; width: 30.444%; height: 18.379%; background-image: url('/assets/sky/mobile/cloud-04.webp'); --dx0: 0px; --dx1: 80px; --dur: 14s; --delay: -6.8s; --dy0: -8px; --dy1: 8px; --bdur: 8s; --bdelay: -3.6s; }
.mobile-c5 { left: 0.0%; top: 23.02%; width: 30.0%; height: 14.913%; background-image: url('/assets/sky/mobile/cloud-05.webp'); --dx0: -80px; --dx1: 0px; --dur: 14s; --delay: -1.5s; --dy0: -8px; --dy1: 8px; --bdur: 8s; --bdelay: -0.5s; }
.mobile-c6 { left: 53.667%; top: 34.777%; width: 23.444%; height: 7.735%; background-image: url('/assets/sky/mobile/cloud-06.webp'); --dx0: -48px; --dx1: 48px; --dur: 12s; --delay: -4.2s; --dy0: -10px; --dy1: 10px; --bdur: 7s; --bdelay: -2.4s; }
.mobile-c7 { left: 0.0%; top: 39.356%; width: 29.444%; height: 15.037%; background-image: url('/assets/sky/mobile/cloud-07.webp'); --dx0: -96px; --dx1: 0px; --dur: 12s; --delay: -10.9s; --dy0: -10px; --dy1: 10px; --bdur: 7s; --bdelay: -6.3s; }
.mobile-c8 { left: 76.667%; top: 54.208%; width: 23.333%; height: 13.552%; background-image: url('/assets/sky/mobile/cloud-08.webp'); --dx0: 0px; --dx1: 96px; --dur: 12s; --delay: -5.6s; --dy0: -10px; --dy1: 10px; --bdur: 7s; --bdelay: -3.2s; }
.mobile-bank { left: 0; top: 56.002%; width: 100%; height: 43.998%; background-image: url('/assets/sky/mobile/bank.webp'); }

.sky-desktop { aspect-ratio: 1600 / 891; width: max(calc(100vw + 96px), calc((100vh + 88px) * 1.79574)); bottom: -32px; }
.desktop-c1 { left: 7.75%; top: 0.0%; width: 37.312%; height: 27.609%; background-image: url('/assets/sky/desktop/cloud-01.webp'); --dx0: -32px; --dx1: 32px; --dur: 16s; --delay: -10.7s; --dy0: -12px; --dy1: 0px; --bdur: 9s; --bdelay: -5.9s; }
.desktop-c2 { left: 60.562%; top: 0.0%; width: 38.562%; height: 28.844%; background-image: url('/assets/sky/desktop/cloud-02.webp'); --dx0: -32px; --dx1: 32px; --dur: 16s; --delay: -5.4s; --dy0: -12px; --dy1: 0px; --bdur: 9s; --bdelay: -2.8s; }
.desktop-c3 { left: 48.375%; top: 18.743%; width: 17.25%; height: 15.6%; background-image: url('/assets/sky/desktop/cloud-03.webp'); --dx0: -48px; --dx1: 48px; --dur: 12s; --delay: -8.1s; --dy0: -10px; --dy1: 10px; --bdur: 7s; --bdelay: -4.7s; }
.desktop-c4 { left: 65.0%; top: 43.996%; width: 29.125%; height: 26.936%; background-image: url('/assets/sky/desktop/cloud-04.webp'); --dx0: -32px; --dx1: 32px; --dur: 16s; --delay: -10.8s; --dy0: -6px; --dy1: 6px; --bdur: 9s; --bdelay: -5.6s; }
.desktop-bank { left: 0; top: 32.997%; width: 100%; height: 67.003%; background-image: url('/assets/sky/desktop/bank.webp'); }