/*
 * nolanrumble.com: the whole stylesheet. Layout, entrance animations, theming, the
 * shan-shui background layers, nav buttons and the theme toggle. Fonts are the
 * platform's own UI fonts, so nothing is fetched from a font service.
 */

/* Theme tokens
 *
 * Each colour has a light (--l-*) and dark (--d-*) value, mixed by theme.js's
 * darkness: --t (continuous) for the sky, --tu (0 or 1, faded over 2.5s when it flips)
 * for text and buttons. Without color-mix() support, data-theme picks one side;
 * without JavaScript, the OS setting does.
 */

	@property --tu {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}

	:root[data-ui-fade] {
		transition: --tu 2.5s ease-in-out;
	}

	:root {
		--t: 0;
		--tu: 0;

		--l-text: #1d2733;              --d-text: #f1f5f9;
		--l-text-soft: #3b4756;         --d-text-soft: #cfd8e3;
		--l-glow: rgba(255, 255, 255, 0.65);  --d-glow: rgba(0, 0, 0, 0.55);
		--l-sky-top: #e9eef3;           --d-sky-top: #0b1220;
		--l-sky-bot: #cfd9e3;           --d-sky-bot: #142033;
		--l-mist: rgba(238, 243, 247, 0.8);   --d-mist: rgba(8, 13, 24, 0.7);
		--l-footer-fade: rgba(255, 255, 255, 0.45);  --d-footer-fade: rgba(0, 0, 0, 0.5);
		--l-btn-bg: rgba(255, 255, 255, 0.9);        --d-btn-bg: rgba(17, 24, 39, 0.88);
		--l-btn-bg-hover: #ffffff;      --d-btn-bg-hover: rgba(30, 41, 59, 0.98);
		--l-btn-fg: #1f2d3d;            --d-btn-fg: #e2e8f0;
		--l-btn-border: rgba(31, 45, 61, 0.14);      --d-btn-border: rgba(226, 232, 240, 0.16);
		--l-shadow: rgba(31, 45, 61, 0.14);          --d-shadow: rgba(0, 0, 0, 0.4);
		--l-ring: rgba(42, 68, 102, 0.45);           --d-ring: rgba(159, 179, 200, 0.6);
		--l-accent: #2c3e50;            --d-accent: #9fb3c8;

		/* Fallback when color-mix() is unsupported: light. */
		--text: var(--l-text);
		--text-soft: var(--l-text-soft);
		--glow: var(--l-glow);
		--sky-top: var(--l-sky-top);
		--sky-bot: var(--l-sky-bot);
		--mist: var(--l-mist);
		--footer-fade: var(--l-footer-fade);
		--btn-bg: var(--l-btn-bg);
		--btn-bg-hover: var(--l-btn-bg-hover);
		--btn-fg: var(--l-btn-fg);
		--btn-border: var(--l-btn-border);
		--shadow: var(--l-shadow);
		--ring: var(--l-ring);
		--accent: var(--l-accent);
		color-scheme: light;
	}

	:root[data-theme="dark"] {
		--text: var(--d-text);
		--text-soft: var(--d-text-soft);
		--glow: var(--d-glow);
		--sky-top: var(--d-sky-top);
		--sky-bot: var(--d-sky-bot);
		--mist: var(--d-mist);
		--footer-fade: var(--d-footer-fade);
		--btn-bg: var(--d-btn-bg);
		--btn-bg-hover: var(--d-btn-bg-hover);
		--btn-fg: var(--d-btn-fg);
		--btn-border: var(--d-btn-border);
		--shadow: var(--d-shadow);
		--ring: var(--d-ring);
		--accent: var(--d-accent);
		color-scheme: dark;
	}

	/* No JavaScript: follow the OS setting. */
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme]) {
			--t: 1;
			--tu: 1;
			color-scheme: dark;
		}
	}

	@supports (color: color-mix(in srgb, red 50%, blue)) {
		html:root,
		html:root[data-theme] {
			--text: color-mix(in srgb, var(--d-text) calc(var(--tu) * 100%), var(--l-text));
			--text-soft: color-mix(in srgb, var(--d-text-soft) calc(var(--tu) * 100%), var(--l-text-soft));
			--glow: color-mix(in srgb, var(--d-glow) calc(var(--tu) * 100%), var(--l-glow));
			--sky-top: color-mix(in srgb, var(--d-sky-top) calc(var(--t) * 100%), var(--l-sky-top));
			--sky-bot: color-mix(in srgb, var(--d-sky-bot) calc(var(--t) * 100%), var(--l-sky-bot));
			--mist: color-mix(in srgb, var(--d-mist) calc(var(--tu) * 100%), var(--l-mist));
			--footer-fade: color-mix(in srgb, var(--d-footer-fade) calc(var(--tu) * 100%), var(--l-footer-fade));
			--btn-bg: color-mix(in srgb, var(--d-btn-bg) calc(var(--tu) * 100%), var(--l-btn-bg));
			--btn-bg-hover: color-mix(in srgb, var(--d-btn-bg-hover) calc(var(--tu) * 100%), var(--l-btn-bg-hover));
			--btn-fg: color-mix(in srgb, var(--d-btn-fg) calc(var(--tu) * 100%), var(--l-btn-fg));
			--btn-border: color-mix(in srgb, var(--d-btn-border) calc(var(--tu) * 100%), var(--l-btn-border));
			--shadow: color-mix(in srgb, var(--d-shadow) calc(var(--tu) * 100%), var(--l-shadow));
			--ring: color-mix(in srgb, var(--d-ring) calc(var(--tu) * 100%), var(--l-ring));
			--accent: color-mix(in srgb, var(--d-accent) calc(var(--tu) * 100%), var(--l-accent));
		}

		/* background.js sets the drifting palette accents on #main. */
		#main {
			--accent: color-mix(in srgb, var(--accent-d, var(--d-accent)) calc(var(--tu) * 100%), var(--accent-l, var(--l-accent)));
		}
	}

/* Base */

	*, *:before, *:after {
		box-sizing: border-box;
	}

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

	ul {
		list-style: none;
	}

	html, body {
		height: 100%;
	}

	body {
		background: var(--sky-bot);
		color: var(--text);
		/* The platform's UI font first: each was designed for on-screen reading. */
		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
			"Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
		font-size: 15pt;
		font-weight: 400;
		letter-spacing: -0.01em;
		line-height: 1.75em;
		overflow: hidden;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-text-size-adjust: 100%;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	/* 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;
	}

/* 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);
		}
	}

/* BG */

	#bg {
		background: linear-gradient(to bottom, var(--sky-top), var(--sky-bot));
		height: 100%;
		left: 0;
		overflow: hidden;
		position: fixed;
		top: 0;
		transform: translate3d(0, 0, 0);
		width: 100%;
	}

	#ss-sky {
		background-color: var(--sky-bot);
		background-image: linear-gradient(to bottom, var(--sky-top), var(--sky-bot));
		inset: 0;
		position: absolute;
	}

	/* Two copies of the landscape, crossfaded by background.js: one drawn dark-on-light
	   and multiplied onto the sky, one light-on-dark and screened onto it. */
	.ss-track {
		bottom: 0;
		left: 0;
		position: absolute;
		width: 100%;
		will-change: transform, opacity;
	}

		.ss-track-light {
			mix-blend-mode: multiply;
		}

		.ss-track-dark {
			mix-blend-mode: screen;
			opacity: 0;
		}

	.ss-panel {
		display: block;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		top: 0;
		transition: opacity 1.2s ease-in-out;
		user-select: none;
	}

		.ss-panel.is-ready {
			opacity: 1;
		}

/* 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: 4.35em;
			font-weight: 800;
			letter-spacing: -0.035em;
			line-height: 1em;
			text-shadow: 0 1px 14px var(--glow);
		}

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

		#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: 5.35em;
				justify-content: center;
				opacity: 0;
				vertical-align: top;
				width: 5.35em;
			}

				#header nav li:nth-child(1) { animation-delay: 2.5s; }
				#header nav li:nth-child(2) { animation-delay: 2.75s; }
				#header nav li:nth-child(3) { animation-delay: 3s; }
				#header nav li:nth-child(5) { animation-delay: 3.25s; }
				#header nav li:nth-child(6) { animation-delay: 3.5s; }
				#header nav li:nth-child(7) { animation-delay: 3.75s; }

/* Nav buttons: solid, with a lift on hover. Icons are from assets/icons/icons.svg. */

	#header nav a {
		align-items: center;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		background-color: var(--btn-bg);
		border: solid 1px var(--btn-border);
		border-radius: 100%;
		box-shadow: 0 2px 8px var(--shadow);
		color: var(--btn-fg);
		display: inline-flex;
		height: 4.375em;
		justify-content: center;
		transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out, font-size 0.2s ease-in-out;
		width: 4.375em;
		-webkit-tap-highlight-color: transparent;
	}

		#header nav a svg {
			fill: currentColor;
			height: 1.75em;
			width: 1.75em;
		}

	#header nav a:hover,
	#header nav a:focus-visible {
		background-color: var(--btn-bg-hover);
		box-shadow: 0 8px 22px var(--shadow);
		color: var(--accent);
		font-size: 1.1em;
		transform: translateY(-2px);
	}

	#header nav a:active {
		background-color: var(--btn-bg-hover);
		box-shadow: 0 2px 8px var(--shadow);
		color: var(--accent);
		font-size: 0.95em;
		transform: translateY(0);
	}

	#header nav a:focus {
		outline: none;
	}

	#header nav a:focus-visible {
		box-shadow: 0 8px 22px var(--shadow), 0 0 0 3px var(--ring);
	}

/* 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%;
	}

		#footer .copyright {
			color: var(--text-soft);
			font-size: 0.8em;
		}

/* Theme toggle: cycles time of day -> light -> dark, showing the current mode */

	#theme-toggle {
		align-items: center;
		animation: fade-in 1s 3s forwards;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		background: var(--btn-bg);
		border: solid 1px var(--btn-border);
		border-radius: 100%;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 2px 8px var(--shadow);
		color: var(--btn-fg);
		cursor: pointer;
		display: flex;
		height: 40px;
		justify-content: center;
		opacity: 0;
		padding: 0;
		position: fixed;
		right: calc(16px + env(safe-area-inset-right, 0px));
		transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out;
		width: 40px;
		z-index: 10;
		-webkit-tap-highlight-color: transparent;
	}

		#theme-toggle:hover,
		#theme-toggle:focus-visible {
			background: var(--btn-bg-hover);
			box-shadow: 0 8px 22px var(--shadow);
			color: var(--accent);
			transform: translateY(-2px);
		}

		#theme-toggle:focus {
			outline: none;
		}

		#theme-toggle:focus-visible {
			box-shadow: 0 8px 22px var(--shadow), 0 0 0 3px var(--ring);
		}

		#theme-toggle svg {
			display: none;
			height: 20px;
			width: 20px;
		}

		:root[data-mode="time"] #theme-toggle .icon-time,
		:root[data-mode="light"] #theme-toggle .icon-sun,
		:root[data-mode="dark"] #theme-toggle .icon-moon {
			display: block;
		}

/* Wide */

	@media screen and (max-width: 1680px) {
		body {
			font-size: 13pt;
		}
	}

/* Normal */

	@media screen and (max-width: 1280px) {
		body {
			font-size: 12pt;
		}
	}

/* Mobile */

	@media screen and (max-width: 736px) {
		body {
			font-size: 11pt;
			min-width: 320px;
		}

		#header h1 {
			font-size: 2.5em;
		}

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

		#header nav a:hover,
		#header nav a:focus-visible,
		#header nav a:active {
			font-size: 1em;
		}
	}

/* Mobile (portrait) */

	@media screen and (max-width: 480px) {
		#header nav {
			padding: 0 1em;
		}
	}

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

	@media (prefers-reduced-motion: reduce) {
		.ss-panel, #theme-toggle, #header nav a {
			transition: none;
		}
	}