/*
 * Hemsley Manor theme styles.
 *
 * Colours, fonts, sizes and spacing live in theme.json and arrive here as
 * --wp--preset--* and --wp--custom--* properties. This file holds only what
 * theme.json cannot express: layered backgrounds, the fixed header, motion
 * and interaction states.
 */

/* Base ---------------------------------------------------------------- */

html {
	scroll-padding-top: calc(var(--wp--custom--header-height) + 16px);
}

body {
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

:focus-visible {
	outline: 1px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Atmosphere: CSS gradient, WebGL canvas, scrim and grain ---------------- */

.hm-atmosphere {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;

	/* The complete background without JavaScript; the canvas enhances it. */
	background:
		radial-gradient(60vmax 60vmax at 12% 8%, color-mix(in srgb, var(--wp--preset--color--glow-1) 50%, transparent), transparent 62%),
		radial-gradient(55vmax 55vmax at 92% 38%, color-mix(in srgb, var(--wp--preset--color--glow-2) 55%, transparent), transparent 62%),
		radial-gradient(60vmax 60vmax at 45% 108%, color-mix(in srgb, var(--wp--preset--color--glow-1) 45%, transparent), transparent 60%),
		var(--wp--preset--color--ink);
}

.hm-atmosphere__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hm-atmosphere__canvas.is-ready {
	opacity: 1;
}

/* Keeps type legible without killing the colour. */
.hm-atmosphere__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 45%, transparent 30%, color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent) 100%),
		linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--ink) 35%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent));
}

.hm-atmosphere__grain {
	position: absolute;
	inset: -50%;
	opacity: 0.1;
	mix-blend-mode: overlay;

	/* Contrast-boosted greyscale noise, like the prototype's film grain. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='3 0 0 0 -1 3 0 0 0 -1 3 0 0 0 -1 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Moving grain only where cheap and wanted: fine pointers, motion allowed. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {

	.hm-atmosphere__grain {
		animation: hm-grain 0.9s steps(6) infinite;
	}
}

@keyframes hm-grain {

	0%,
	100% {
		transform: translate(0, 0);
	}

	17% {
		transform: translate(-3%, 2%);
	}

	33% {
		transform: translate(2%, -4%);
	}

	50% {
		transform: translate(-4%, -1%);
	}

	67% {
		transform: translate(3%, 3%);
	}

	83% {
		transform: translate(-1%, 4%);
	}
}

/* Main ---------------------------------------------------------------- */

/* The header floats over the home page's opening, so no gap above it. */
.wp-site-blocks > .hm-main--home {
	margin-block-start: 0;
}

.hm-main:not(.hm-main--home) {
	padding-top: calc(var(--wp--custom--header-height) + clamp(48px, 10vh, 120px));
	padding-bottom: clamp(80px, 14vh, 160px);
}

/*
 * Headings written in a page's own text (such as the privacy policy) sit
 * below the page title in size; the section blocks size their own.
 */
.wp-block-post-content > h2.wp-block-heading {
	margin-block: 2.2em 0.5em;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.1;
}

.wp-block-post-content > h3.wp-block-heading {
	margin-block: 1.8em 0.4em;
	font-size: calc(var(--wp--preset--font-size--large) * 0.7);
	line-height: 1.15;
}

/*
 * A page that opens with a wide section (such as About) lines its title up
 * with that section's left edge and keeps the section close under it; text
 * pages keep the title on their narrow column.
 */
.hm-main:has(> .wp-block-post-content > .alignwide:first-child) > .wp-block-group > .wp-block-post-title {
	max-width: var(--wp--style--global--wide-size);
}

body .hm-main:not(.hm-main--home) > .wp-block-post-content > .hm-section:first-child {
	margin-block-start: clamp(28px, 5vh, 56px);
}

/* Project pages ----------------------------------------------------- */

.hm-project-head {
	margin-bottom: clamp(28px, 4vw, 48px);
}

.hm-project-head .wp-block-post-title {
	margin: 0 0 clamp(20px, 3vw, 32px);
}

/* Buttons: an accent fill sweeps in on hover and focus. ----------------- */

.wp-element-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	text-decoration: none;
	transition:
		color 0.35s,
		border-color 0.35s,
		box-shadow 0.5s;
}

.wp-element-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--custom--accent-light));
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.55s var(--wp--custom--ease-snap);
}

.wp-element-button:hover,
.wp-element-button:focus-visible {
	color: var(--wp--custom--on-accent);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 40px -6px color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
}

.wp-element-button:hover::before,
.wp-element-button:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left;
}

/* Site design switches ------------------------------------------------- */

/* A page without a header reserves no space for one. */
.hm-header-hidden {
	--wp--custom--header-height: 0px;
}

/* Reduced motion: keep every state change, drop the movement. ---------- */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.wp-element-button::before {
		transition-property: opacity;
	}
}