/*
 * Diorama motion layer.
 * Rules: animate transform, opacity and box-shadow only; one orchestrated moment per page;
 * nothing hides content unless motion.js is running.
 * All of it runs for everyone, including visitors whose device asks for reduced motion
 * (the owner's call, 2026-10-21).
 */

/* Page-to-page "lights down, lights up" (cross-document View Transitions). */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: 220ms var(--wp--custom--motion--ease) both fade-to-black;
}

::view-transition-new(root) {
	animation: 380ms var(--wp--custom--motion--ease) both lights-up;
}

@keyframes fade-to-black {
	to { opacity: 0; }
}

@keyframes lights-up {
	from { opacity: 0; filter: brightness(.4); }
}

/* Light on: buttons glow and press in. */
.wp-element-button {
	transition:
		color var(--wp--custom--motion--fast) ease,
		background-color var(--wp--custom--motion--fast) ease,
		border-color var(--wp--custom--motion--fast) ease,
		box-shadow var(--wp--custom--motion--fast) ease,
		transform var(--wp--custom--motion--fast) ease;
}

.wp-element-button:hover {
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--wp--preset--color--bone) 25%, transparent),
		0 0 28px color-mix(in srgb, var(--wp--preset--color--bone) 45%, transparent);
}

/* Header logo: colour copies behind the wordmark, used by the hover glitch. */
.site-wordmark {
	position: relative;
	isolation: isolate;
}

.site-wordmark::before,
.site-wordmark::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-mask: url("../svg/wordmark.svg") 0 0 / 100% 100% no-repeat;
	mask: url("../svg/wordmark.svg") 0 0 / 100% 100% no-repeat;
	opacity: 0;
	pointer-events: none;
}

.site-wordmark::before {
	background: var(--wp--preset--color--stage);
}

.site-wordmark::after {
	background: var(--wp--preset--color--corridor);
}

/* Lights up on scroll: only when motion.js has marked the page. */
.js-motion .is-reveal {
	opacity: .001;
	transform: translateY(16px);
	transition:
		opacity var(--wp--custom--motion--slow) var(--wp--custom--motion--ease),
		transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}

.js-motion .is-reveal.is-lit {
	opacity: 1;
	transform: none;
}

.wp-element-button {
	transform: translate(var(--tx, 0), var(--ty, 0));
}

.wp-element-button:active {
	transform: translate(var(--tx, 0), var(--ty, 0)) scale(.97);
}

/* Wordmark flickers on once, like a tube light. Ends fully visible. */
.home-hero .wordmark {
	animation: tube-on 1.1s steps(1, end) both;
}

@keyframes tube-on {
	0% { opacity: .15; }
	8% { opacity: 1; }
	11% { opacity: .3; }
	16% { opacity: 1; }
	30% { opacity: .7; }
	33%, 100% { opacity: 1; }
}

/* Header logo glitches once per hover or keyboard focus. */
.site-wordmark:hover::before,
.site-wordmark:focus-visible::before {
	animation: glitch-red 450ms steps(1, end);
}

.site-wordmark:hover::after,
.site-wordmark:focus-visible::after {
	animation: glitch-blue 450ms steps(1, end);
}

.site-wordmark:hover img,
.site-wordmark:focus-visible img {
	animation: glitch-slice 450ms steps(1, end);
}

@keyframes glitch-red {
	0% { opacity: 1; transform: translate(-4px, 0); clip-path: inset(0 0 55% 0); }
	15% { opacity: 1; transform: translate(-6px, 1px); clip-path: inset(40% 0 20% 0); }
	30% { opacity: 1; transform: translate(-2px, -1px); clip-path: inset(70% 0 0 0); }
	45% { opacity: 1; transform: translate(-8px, 0); clip-path: inset(0); }
	60% { opacity: 1; transform: translate(-3px, 0); clip-path: inset(15% 0 50% 0); }
	75% { opacity: 1; transform: translate(-1px, 0); clip-path: inset(0); }
	100% { opacity: 0; transform: none; clip-path: inset(0); }
}

@keyframes glitch-blue {
	0% { opacity: 1; transform: translate(4px, 0); clip-path: inset(45% 0 0 0); }
	15% { opacity: 1; transform: translate(2px, -1px); clip-path: inset(0 0 60% 0); }
	30% { opacity: 1; transform: translate(7px, 1px); clip-path: inset(20% 0 30% 0); }
	45% { opacity: 1; transform: translate(8px, 0); clip-path: inset(0); }
	60% { opacity: 1; transform: translate(2px, 0); clip-path: inset(60% 0 5% 0); }
	75% { opacity: 1; transform: translate(1px, 0); clip-path: inset(0); }
	100% { opacity: 0; transform: none; clip-path: inset(0); }
}

@keyframes glitch-slice {
	0% { transform: none; clip-path: inset(0); }
	15% { transform: translateX(3px); clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%, 0 52%, 100% 52%, 100% 100%, 0 100%); }
	30% { transform: translateX(-2px) skewX(-8deg); clip-path: inset(0); }
	45% { transform: translateX(4px); clip-path: polygon(0 0, 100% 0, 100% 62%, 0 62%, 0 70%, 100% 70%, 100% 100%, 0 100%); }
	60% { transform: translateX(-1px); clip-path: inset(0); }
	75%, 100% { transform: none; clip-path: inset(0); }
}

/* 3D tilt (release covers and song cards): motion.js sets the angles, the sheen spot and the shadow offset.
   Eases back to flat when the pointer leaves. */
.has-tilt {
	position: relative;
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 700ms var(--wp--custom--motion--ease);
}

.has-tilt.is-tilting {
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.02);
	transition: transform 120ms ease-out;
}

/* The big release cover's shadow shifts with the tilt; cards keep their own hover glow. */
.release-split__cover.has-tilt img {
	box-shadow: calc(var(--sx, 0) * 1px) calc(24px + var(--sy, 0) * 1px) 60px rgba(0, 0, 0, .55);
	transition: box-shadow 700ms var(--wp--custom--motion--ease);
}

.release-split__cover.has-tilt.is-tilting img {
	transition: box-shadow 120ms ease-out;
}

.has-tilt::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 4px;
	pointer-events: none;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%);
	mix-blend-mode: screen;
	opacity: 0;
	transition: opacity var(--wp--custom--motion--base) ease;
}

.has-tilt.is-tilting::after {
	opacity: 1;
}

/* Custom cursor: mouse and trackpad only, and only once motion.js has drawn it. */
@media (hover: hover) and (pointer: fine) {
	.has-cursor,
	.has-cursor * {
		cursor: none !important;
	}

	.has-cursor :is(input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"]), textarea, [contenteditable="true"]) {
		cursor: text !important;
	}
}

.cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2147483000;
	pointer-events: none;
	mix-blend-mode: difference;
	opacity: 0;
	transition: opacity var(--wp--custom--motion--fast) ease;
}

.cursor.is-on {
	opacity: 1;
}

.cursor__dot,
.cursor__ring {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	will-change: transform;
}

.cursor__dot {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	background: var(--wp--preset--color--bone);
	transition: opacity var(--wp--custom--motion--fast) ease;
}

.cursor__ring {
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--bone) 60%, transparent);
	transition:
		width var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		height var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		margin var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--base) ease,
		border-color var(--wp--custom--motion--base) ease;
}

.cursor.is-link .cursor__ring {
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	background: color-mix(in srgb, var(--wp--preset--color--bone) 12%, transparent);
	border-color: var(--wp--preset--color--bone);
}

.cursor.is-link .cursor__dot {
	opacity: 0;
}

.cursor.is-down .cursor__ring {
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
}