/* v1.0.1 */
/* ------------------------------------------------------------
   Motion. Everything is off for visitors who ask for reduced motion,
   and scroll reveals only run once motion.js has added .dp-anim.
   ------------------------------------------------------------ */

/* Hero photo on its own layer so it can drift */
.dp-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--global-palette9) !important;
}
.dp-hero::before,
.dp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.dp-hero::before {
	z-index: -2;
	background: url("/wp-content/uploads/2026/06/hero-background.jpg") center 30% / cover no-repeat;
}
.dp-hero::after {
	z-index: -1;
	background: linear-gradient(180deg, rgba(27,23,20,.15) 0%, rgba(27,23,20,.35) 50%, var(--global-palette9) 100%);
}

/* Keeps the record (and reveal offsets) from causing sideways scroll */
.entry-content .dp-page .dp-section {
	overflow-x: clip;
}

/* EP cover with a record behind it */
.dp-cover {
	position: relative;
	isolation: isolate;
	max-width: 84%;
}
.dp-cover img {
	position: relative;
	z-index: 1;
}
.dp-cover::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 3%;
	left: 3%;
	width: 94%;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle, #1b1714 0 2.2%, #b57a45 2.4% 15%, #4c2a17 15.3% 16%, transparent 16.3%),
		conic-gradient(from 20deg, rgba(255,255,255,.07), transparent 18%, rgba(255,255,255,.05) 50%, transparent 68%, rgba(255,255,255,.07)),
		repeating-radial-gradient(circle, #0b0a09 0 1.5px, #2a2521 1.5px 3.5px);
	box-shadow: 0 0 0 1px rgba(239,230,207,.08), 0 20px 40px -18px rgba(0,0,0,.8);
}

@media (prefers-reduced-motion: no-preference) {

	/* Hero: slow push-in on the photo, content rises in on load */
	.dp-hero::before {
		animation: dp-drift 22s cubic-bezier(.2,.6,.2,1) both;
	}
	.dp-hero .dp-hero-logo,
	.dp-hero .dp-tagline,
	.dp-hero .wp-block-buttons {
		animation: dp-rise 1s cubic-bezier(.2,.7,.2,1) both;
	}
	.dp-hero .dp-hero-logo { animation-delay: .15s; }
	.dp-hero .dp-tagline { animation-delay: .45s; }
	.dp-hero .wp-block-buttons { animation-delay: .6s; }

	/* Scroll reveals */
	.dp-anim [data-dp-reveal] {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
		transition-delay: var(--dp-delay, 0s);
	}
	.dp-anim [data-dp-reveal].is-in {
		opacity: 1;
		transform: none;
	}

	/* Record slides out from behind the cover, then keeps spinning */
	.dp-anim .dp-cover::before {
		translate: 0 0;
		transition: translate 1.6s cubic-bezier(.2,.7,.2,1) .5s;
		animation: dp-spin 9s linear infinite;
	}
	.dp-anim .dp-cover.is-in::before {
		translate: 30% 0;
	}

	/* Buttons lift a touch */
	.dp-page .wp-block-button__link,
	.dp-links .wp-block-button__link,
	.dp-book .gform_button {
		transition: background .2s, color .2s, border-color .2s, transform .2s !important;
	}
	.dp-page .wp-block-button__link:hover,
	.dp-links .wp-block-button__link:hover,
	.dp-book .gform_button:hover {
		transform: translateY(-2px);
	}
}

@keyframes dp-drift {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}
@keyframes dp-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}
@keyframes dp-spin {
	to { rotate: 360deg; }
}

/* Stacked sections (desktop): each full-height section slides up over the
   one before it. motion.js sets each section's sticky top so taller sections
   scroll all the way through before they pin. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
	.dp-anim .entry-content .dp-page :is(.dp-hero, .dp-section) {
		position: sticky;
		top: var(--dp-stick, 0px);
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: var(--global-palette9);
		box-shadow: 0 -30px 60px -20px rgba(0,0,0,.65);
	}
	.dp-anim .entry-content .dp-page .dp-hero {
		justify-content: flex-end;
		box-shadow: none;
	}
	.dp-anim .entry-content .dp-page .dp-tip {
		background-color: var(--dp-brown);
	}
}

/* Phones: keep Dalton in frame, smaller cover so the record fits on screen */
@media (max-width: 781px) {
	/* Photo set 20% in from its right edge; the slow zoom anchors there too
	   so Dalton isn't clipped while it plays */
	.dp-hero::before {
		background-position: right 20% top 30%;
		transform-origin: 80% 30%;
	}
	.dp-cover {
		max-width: 78%;
	}
	.dp-anim .dp-cover.is-in::before {
		translate: 22% 0;
	}
}