/*
 * Landscape scene backdrops, for any public page that wants one behind it.
 *
 * Split out of yeti-auth.css when the contact page wanted the same artwork without the sign-in
 * card that sheet exists for. What is here is only the backdrop: the two fixed layers, the six
 * scenes, and a scrim for text that has to sit directly on one.
 *
 * A page opts in through MasterTemplate.backdrops(). Nothing loads this sheet unless a page names
 * a scene, and a page that names none keeps the bg-image-* cascade in yeti-public.css.
 *
 * Two layers, not one: ::before carries the scene and ::after the vignette over it, so adding a
 * scene means one rule setting one image rather than every scene restating the vignette beside its
 * own artwork - and again for dark mode.
 *
 * Scenes are raster, not SVG. The source vectors carry between 6k and 68k path nodes and run from
 * 180KB to 10MB, which is not a background; flat-shaded art rasterises without visible loss and an
 * AVIF of one lands around 50KB. image-set() over AVIF/WebP/JPEG is already how this application
 * serves bg-image-1..4, and the plain url() ahead of it is the fallback for browsers without
 * image-set - which is why the image lives on the scene class rather than in a custom property,
 * since a custom property would swallow the fallback and resolve to nothing at all.
 */

.yeti-scene {
	color-scheme: light;
}

.yeti-scene::before,
.yeti-scene::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
}

/*
 * The scene. ::before rather than ::after, so the vignette below paints over it.
 *
 * It carries the sky colour as well as the image, rather than leaving that to the body. On a
 * portrait screen the image is sized to height and this colour fills the band above it, and in dark
 * mode the whole layer goes through one filter - so painting the sky here is what keeps that band
 * dimmed by exactly as much as the scene it sits above. On the body it would stay lit.
 */
.yeti-scene::before {
	z-index: -2;
	background-color: var(--yeti-scene-sky, #1b2740);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/*
 * The vignette darkens the frame edges rather than the centre. Every scene puts its light source
 * near the middle of the horizon and page content sits on that light, so pulling the corners down
 * is what seats the content in the scene instead of dimming what it is sitting in.
 */
.yeti-scene::after {
	z-index: -1;
	background-image:
		radial-gradient(78% 68% at 50% 42%, transparent 42%, rgba(16, 14, 30, .34) 100%);
}

/*
 * A backing for text that has to sit straight on a scene.
 *
 * Six scenes share no palette, and a page cannot know which one a visitor drew, so any bare text
 * over one is a coin toss: light type is unreadable on the pale skies, dark type on the forests.
 * This decides the backdrop rather than inheriting it, which fixes the contrast at every scene and
 * every viewport instead of at the one it was checked on.
 */
.scene-scrim {
	border-radius: 1rem;
	padding: 1.25rem 1.5rem;
	background-color: rgba(12, 16, 36, .42);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Scenes ---------------------------------------------------------------- */

.yeti-scene-alpine-morning {
	--yeti-scene-sky: #9edfd5;
}

.yeti-scene-alpine-morning::before {
	background-image: url("/assets/image/auth/alpine-morning.jpg");
	background-image: image-set(
		url("/assets/image/auth/alpine-morning.avif") type("image/avif"),
		url("/assets/image/auth/alpine-morning.webp") type("image/webp"),
		url("/assets/image/auth/alpine-morning.jpg") type("image/jpeg"));
}

.yeti-scene-summit-rose {
	--yeti-scene-sky: #f79f8c;
}

.yeti-scene-summit-rose::before {
	background-image: url("/assets/image/auth/summit-rose.jpg");
	background-image: image-set(
		url("/assets/image/auth/summit-rose.avif") type("image/avif"),
		url("/assets/image/auth/summit-rose.webp") type("image/webp"),
		url("/assets/image/auth/summit-rose.jpg") type("image/jpeg"));
}

.yeti-scene-mesa-noon {
	--yeti-scene-sky: #fdcaa8;
}

.yeti-scene-mesa-noon::before {
	background-image: url("/assets/image/auth/mesa-noon.jpg");
	background-image: image-set(
		url("/assets/image/auth/mesa-noon.avif") type("image/avif"),
		url("/assets/image/auth/mesa-noon.webp") type("image/webp"),
		url("/assets/image/auth/mesa-noon.jpg") type("image/jpeg"));
}

.yeti-scene-lake-ember {
	--yeti-scene-sky: #e09932;
}

.yeti-scene-lake-ember::before {
	background-image: url("/assets/image/auth/lake-ember.jpg");
	background-image: image-set(
		url("/assets/image/auth/lake-ember.avif") type("image/avif"),
		url("/assets/image/auth/lake-ember.webp") type("image/webp"),
		url("/assets/image/auth/lake-ember.jpg") type("image/jpeg"));
}

.yeti-scene-pine-lake {
	--yeti-scene-sky: #6894a3;
}

.yeti-scene-pine-lake::before {
	background-image: url("/assets/image/auth/pine-lake.jpg");
	background-image: image-set(
		url("/assets/image/auth/pine-lake.avif") type("image/avif"),
		url("/assets/image/auth/pine-lake.webp") type("image/webp"),
		url("/assets/image/auth/pine-lake.jpg") type("image/jpeg"));
}

.yeti-scene-ridge-dawn {
	--yeti-scene-sky: #d3e9d7;
}

.yeti-scene-ridge-dawn::before {
	background-image: url("/assets/image/auth/ridge-dawn.jpg");
	background-image: image-set(
		url("/assets/image/auth/ridge-dawn.avif") type("image/avif"),
		url("/assets/image/auth/ridge-dawn.webp") type("image/webp"),
		url("/assets/image/auth/ridge-dawn.jpg") type("image/jpeg"));
}

/* Dark ------------------------------------------------------------------ */

/*
 * Evening, from one filter over the scene so sky and land move together. brightness on its own
 * leaves everything muddy, so the saturation comes back a little and the hue cools: the same place
 * later in the day rather than a dimmed copy of the same moment. The scene's sky colour is painted
 * on this same layer, so it is dimmed by the same filter and a new scene needs no second colour
 * worked out by hand for dark mode.
 *
 * The filter is on the scene layer only. Applied to the vignette as well it would darken that by
 * exactly as much, leaving the frame edges no deeper than they started, which is the opposite of
 * what dark mode wants - so the vignette is deepened on its own.
 */
:root[data-bs-theme="dark"] .yeti-scene {
	color-scheme: dark;
}

:root[data-bs-theme="dark"] .yeti-scene::before {
	filter: brightness(.5) saturate(.72) hue-rotate(8deg);
}

:root[data-bs-theme="dark"] .yeti-scene::after {
	background-image:
		radial-gradient(78% 68% at 50% 42%, transparent 34%, rgba(2, 4, 14, .6) 100%);
}

/* Small screens --------------------------------------------------------- */

@media (max-width: 575.98px) {
	/*
	 * cover on a portrait viewport crops a 16:9 scene down to a narrow vertical slice of it.
	 * Sizing to height keeps the whole composition in frame; the sky above it is the scene's own
	 * top-row colour, which --yeti-scene-sky already puts on the same layer.
	 */
	.yeti-scene::before {
		background-size: auto 62vh;
		background-position: center bottom;
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.scene-scrim {
		background-color: rgba(12, 16, 36, .66);
	}
}