---
// Learn about using Astro layouts:
// https://docs.astro.build/en/core-concepts/layouts/

// Component Imports
import MainHead from '../components/MainHead.astro';
import Nav from '../components/Nav.astro';
import Footer from '../components/Footer.astro';

interface Props {
	title?: string | undefined;
	description?: string | undefined;
}

const { title, description } = Astro.props;
---

<html lang="en">
	<head>
		<MainHead title={title} description={description} />
	</head>
	<body>
		<div class="stack backgrounds">
			<Nav />
			<slot />
			<Footer />
		</div>

		<script>
			// Add “loaded” class once the document has completely loaded.
			addEventListener('load', () => document.documentElement.classList.add('loaded'));
		</script>

		<style>
			:root {
				--_placeholder-bg: linear-gradient(transparent, transparent);
				--bg-image-main: url('/assets/backgrounds/bg-main-light-800w.jpg');
				--bg-image-main-curves: url('/assets/backgrounds/bg-main-light.svg');
				--bg-image-subtle-1: var(--_placeholder-bg);
				--bg-image-subtle-2: var(--_placeholder-bg);
				--bg-image-footer: var(--_placeholder-bg);
				--bg-svg-blend-mode: overlay;
				--bg-blend-mode: darken;
				--bg-image-aspect-ratio: 2.25;
				--bg-scale: 1.68;
				--bg-aspect-ratio: calc(var(--bg-image-aspect-ratio) / var(--bg-scale));
				--bg-gradient-size: calc(var(--bg-scale) * 100%);
			}

			:root.theme-dark {
				--bg-image-main: url('/assets/backgrounds/bg-main-dark-800w.jpg');
				--bg-image-main-curves: url('/assets/backgrounds/bg-main-dark.svg');
				--bg-svg-blend-mode: darken;
				--bg-blend-mode: lighten;
			}

			/* These backgrounds are displayed below the fold, so we lazy load them
			   once the `.loaded` class has been set.  */
			:root.loaded {
				--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-light-800w.jpg');
				--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-light-800w.jpg');
				--bg-image-footer: url('/assets/backgrounds/bg-footer-light-800w.jpg');
			}
			:root.loaded.theme-dark {
				--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-dark-800w.jpg');
				--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-dark-800w.jpg');
				--bg-image-footer: url('/assets/backgrounds/bg-footer-dark-800w.jpg');
			}

			@media (min-width: 50em) {
				:root {
					--bg-scale: 1;
					--bg-image-main: url('/assets/backgrounds/bg-main-light-1440w.jpg');
				}
				:root.theme-dark {
					--bg-image-main: url('/assets/backgrounds/bg-main-dark-1440w.jpg');
				}

				:root.loaded {
					--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-light-1440w.jpg');
					--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-light-1440w.jpg');
					--bg-image-footer: url('/assets/backgrounds/bg-footer-light-1440w.jpg');
				}
				:root.loaded.theme-dark {
					--bg-image-subtle-1: url('/assets/backgrounds/bg-subtle-1-dark-1440w.jpg');
					--bg-image-subtle-2: url('/assets/backgrounds/bg-subtle-2-dark-1440w.jpg');
					--bg-image-footer: url('/assets/backgrounds/bg-footer-dark-1440w.jpg');
				}
			}

			.backgrounds {
				min-height: 100%;
				isolation: isolate;
				background:
					/*noise*/
					url('/assets/backgrounds/noise.png') top center/220px repeat,
					/*footer*/ var(--bg-image-footer) bottom center/var(--bg-gradient-size) no-repeat,
					/*header1*/ var(--bg-image-main-curves) top center/var(--bg-gradient-size) no-repeat,
					/*header2*/ var(--bg-image-main) top center/var(--bg-gradient-size) no-repeat,
					/*base*/ var(--gray-999);
				background-blend-mode: /*noise*/
					overlay,
					/*footer*/ var(--bg-blend-mode),
					/*header1*/ var(--bg-svg-blend-mode),
					/*header2*/ normal,
					/*base*/ normal;
			}
			@media (forced-colors: active) {
				/* Deactivate custom backgrounds for high contrast users. */
				.backgrounds {
					background: none;
					background-blend-mode: none;
					--bg-gradient-size: none;
				}
			}
		</style>
	</body>
</html>
