/*
 * nolanrumble.com: the shan-shui landscape layer (#bg, built by
 * assets/js/shanshui/background.js). Separate from site.css because blog pages use
 * it too: behind the blog window the landscape stands still (D7), and the router
 * carries the same #bg between the home page and the blog.
 */

/* 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;
		z-index: 0;
	}

	/* Layers for the added features (fx.js): z-index 1-9 sits between the sky and the
	   landscape, 11 and up in front of it. */
	.ss-fx {
		left: 0;
		overflow: hidden;
		pointer-events: none;
		position: absolute;
		width: 100%;
	}

		.ss-body {
			left: 0;
			position: absolute;
			top: 0;
			will-change: transform, opacity;
		}

		.ss-fx-canvas {
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

	/* 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;
		z-index: 10;
	}

		.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;
		}

/* Reduced motion */

	@media (prefers-reduced-motion: reduce) {
		.ss-panel {
			transition: none;
		}
	}