/*
 * nolanrumble.com: the home page. Layout, entrance animations, the shan-shui
 * background layers, the nav and the theme toggle's placement. Colour tokens, base
 * typography and the .icon-btn style live in theme.css, loaded first.
 */

/* background.js sets the drifting palette accents on #main. */

	@supports (color: color-mix(in srgb, red 50%, blue)) {
		#main {
			--accent: color-mix(in srgb, var(--accent-d, var(--d-accent)) calc(var(--tu) * 100%), var(--accent-l, var(--l-accent)));
		}
	}

/* Base */

	html, body, h1, p, ul, li, nav, header, footer {
		margin: 0;
		padding: 0;
	}

	ul {
		list-style: none;
	}

	html, body {
		height: 100%;
	}

	/* A fixed, non-scrolling page. */
	body {
		overflow: hidden;
	}

	/* No JavaScript (theme.js removes .no-js): show everything at once and hide the
	   controls that need a script. */
	.no-js #wrapper, .no-js #overlay, .no-js #header, .no-js #header nav li {
		opacity: 1 !important;
	}

	.no-js #theme-toggle {
		display: none;
	}

	.no-js #footer .copyright {
		cursor: default;
	}

	/* Hold every entrance animation until the page has loaded. */
	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		animation: none !important;
		transition: none !important;
	}

/* Loading cover: an ensō painting itself over the bare sky while the landscape is
   built (theme.js adds .is-loading before first paint, then .is-revealing to fade it
   out). The brush is a mask circle drawn round with stroke-dashoffset. Its animations
   are !important so the is-preload rule above doesn't stop them. */

	#loader {
		align-items: center;
		background-color: var(--sky-bot);
		background-image: linear-gradient(to bottom, var(--sky-top), var(--sky-bot));
		color: var(--text-soft);
		display: none;
		inset: 0;
		justify-content: center;
		position: fixed;
		z-index: 100;
	}

		.is-loading #loader, .is-revealing #loader {
			display: flex;
		}

		.is-revealing #loader {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.9s ease-in-out !important;
		}

		.enso {
			height: 88px;
			overflow: visible;
			width: 88px;
		}

		.enso-wet {
			opacity: 0.45;
		}

		.enso-dry {
			opacity: 0.72;
		}

		#loader .enso-brush {
			animation: enso-paint 2.6s cubic-bezier(0.45, 0.05, 0.4, 1) infinite !important;
			stroke-dasharray: 100;
			stroke-dashoffset: 100;
		}

		#loader .enso-ink {
			animation: enso-fade 2.6s linear infinite !important;
		}

	/* Paint round, hold, fade like ink drying, start again. */
	@keyframes enso-paint {
		0% { stroke-dashoffset: 100; }
		55%, 100% { stroke-dashoffset: 0; }
	}

	@keyframes enso-fade {
		0%, 74% { opacity: 1; }
		94%, 100% { opacity: 0; }
	}

	/* Panels skip their own fade-in while covered, so they're whole when revealed. */
	.is-loading .ss-panel {
		transition: none;
	}

/* Wrapper */

	#wrapper {
		animation: fade-in 3s forwards;
		height: 100%;
		left: 0;
		opacity: 0;
		position: fixed;
		top: 0;
		width: 100%;
	}

	@keyframes fade-in {
		to {
			opacity: 1;
		}
	}

	@keyframes rise-in {
		from {
			opacity: 0;
			transform: translate3d(0, 1em, 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

/* Overlay: a soft mist behind the header so the text reads over the landscape */

	#overlay {
		animation: fade-in 1.5s 1.5s forwards;
		background-image: radial-gradient(ellipse 60% 50% at 50% 46%, var(--mist), transparent 72%);
		height: 100%;
		left: 0;
		opacity: 0;
		position: fixed;
		top: 0;
		width: 100%;
	}

/* Main */

	#main {
		align-items: center;
		display: flex;
		height: 100%;
		justify-content: center;
		left: 0;
		position: fixed;
		text-align: center;
		top: 0;
		width: 100%;
	}

/* Header */

	#header {
		animation: rise-in 1s 2.25s forwards;
		cursor: default;
		opacity: 0;
		position: relative;
		top: -1em;
		width: 90%;
	}

		#header h1 {
			font-size: var(--fs-h1);
			font-weight: 800;
			letter-spacing: var(--tracking-tight);
			line-height: 1em;
			text-shadow: 0 1px 14px var(--glow);
		}

		#header p {
			color: var(--text-soft);
			font-size: var(--fs-lead);
			margin: 0.75em 0 0.25em 0;
			text-shadow: 0 1px 14px var(--glow);
		}

			/* Lines may wrap between phrases, never inside one. */
			#header p .phrase {
				white-space: nowrap;
			}

		#header nav {
			margin: 1.5em 0 0 0;
		}

			#header nav li {
				align-items: center;
				animation: rise-in 0.5s ease-in-out forwards;
				display: inline-flex;
				height: var(--btn-cell);
				justify-content: center;
				opacity: 0;
				vertical-align: top;
				width: var(--btn-cell);
			}

				/* Two rows of four, split by a <br> (child 5). */
				#header nav li:nth-child(1) { animation-delay: 2.5s; }
				#header nav li:nth-child(2) { animation-delay: 2.65s; }
				#header nav li:nth-child(3) { animation-delay: 2.8s; }
				#header nav li:nth-child(4) { animation-delay: 2.95s; }
				#header nav li:nth-child(6) { animation-delay: 3.1s; }
				#header nav li:nth-child(7) { animation-delay: 3.25s; }
				#header nav li:nth-child(8) { animation-delay: 3.4s; }
				#header nav li:nth-child(9) { animation-delay: 3.55s; }

/* Footer */

	#footer {
		background-image: linear-gradient(to bottom, transparent, var(--footer-fade) 75%);
		bottom: 0;
		cursor: default;
		height: 6em;
		left: 0;
		line-height: 8em;
		position: absolute;
		text-align: center;
		width: 100%;
	}

		/* Also a toggle (gather.js): sends the header into it to leave just the
		   landscape, and back out. Padded so the tap target is comfortable. */
		#footer .copyright {
			background: none;
			border: none;
			border-radius: 0.5em;
			color: var(--text-soft);
			cursor: pointer;
			font: inherit;
			font-size: 0.8em;
			letter-spacing: inherit;
			line-height: 1.2;
			padding: 1em 1.25em;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: transparent;
		}

			#footer .copyright:hover,
			#footer .copyright:focus-visible {
				color: var(--text);
			}

			#footer .copyright:focus {
				outline: none;
			}

			#footer .copyright:focus-visible {
				box-shadow: 0 0 0 2px var(--ring);
			}

	/* While gathered the header is inert; this covers browsers without inert. */
	#header[inert] {
		pointer-events: none;
	}

/* Theme toggle placement: fades in after the header. Its icons are in theme.css. */

	#theme-toggle {
		animation: fade-in 1s 3s forwards;
		bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
		opacity: 0;
		position: fixed;
		right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
		z-index: 10;
	}

/* Back from the blog (router.js sets data-return): a short fade instead of the
   first visit's staged entrance. */

	[data-return] #wrapper, [data-return] #overlay, [data-return] #header,
	[data-return] #header nav li, [data-return] #theme-toggle {
		animation: fade-in 0.6s forwards;
	}

/* Mobile */

	@media screen and (max-width: 736px) {
		#header h1 {
			font-size: var(--fs-h1-sm);
		}

		#header p {
			font-size: 1em;
		}
	}

/* Mobile (portrait) */

	@media screen and (max-width: 480px) {
		/* Slightly smaller buttons (still over 44px) so each row of four fits. */
		#header nav {
			font-size: 0.82em;
		}
	}

/* Reduced motion: no fades beyond the essentials */

	@media (prefers-reduced-motion: reduce) {
		/* The ensō stays painted, still. */
		#loader .enso-brush, #loader .enso-ink {
			animation: none !important;
			stroke-dashoffset: 0;
		}
	}