/* Zen garden (homepage). Behaviour and drawing: /js/zen-garden.js
   The base look (.interactive-gradient, .gradient-canvas, .gradient-text) is in styles.css. */

/* Fill the whole screen beneath the sticky marquee bar once the page is
   scrolled to the end. --zen-bar is the bar's measured height (set by the
   script); "dvh" follows a phone's address bar as it shows and hides, and the
   "vh" line above it is the fallback for browsers that do not know dvh. */
.interactive-gradient.zen {
	height: calc(100vh - var(--zen-bar, 41px));
	height: calc(100dvh - var(--zen-bar, 41px));
	min-height: 300px;
	background: #06121a;
	/* A finger here plays with the garden instead of scrolling the page */
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

.zen .gradient-text {
	pointer-events: none;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
	transition: opacity 0.8s ease;
}

/* The words step back while a finger is down, and return afterwards */
.zen.is-engaged .gradient-text {
	opacity: 0.15;
	transition-duration: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	.zen .gradient-text {
		transition: none;
	}
}