/*
 * Motion & polish (0.2.16 — performance pass).
 * Rules: only transform/opacity animate. No transitions on padding, height,
 * box-shadow or filter; no backdrop-filter. Reveal-hiding only applies when
 * <html> has .msd-js (set inline in <head>), so no-JS shows everything.
 * Everything that moves sits behind prefers-reduced-motion: no-preference.
 */

:root {
	--msd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Smooth in-page anchors ---------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

[id] {
	scroll-margin-top: 6rem;
}

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
	html.msd-js:not(.msd-reveal-all) .msd-reveal {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
		transition:
			opacity 0.7s var(--msd-ease),
			transform 0.7s var(--msd-ease);
		transition-delay: var(--msd-reveal-delay, 0ms);
	}

	html.msd-js:not(.msd-reveal-all) .msd-reveal.is-revealed {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* ---------- Header ---------- */
/*
 * Scrolled state never changes layout: a navy layer (::before) and a soft
 * gradient shadow (::after) fade in via opacity only. Never put transform,
 * filter or backdrop-filter on .msd-header itself — it would trap the fixed
 * mobile menu overlay.
 */
.msd-header {
	isolation: isolate;
}

.msd-header::before,
.msd-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	pointer-events: none;
}

.msd-header::before {
	top: 0;
	bottom: 0;
	z-index: -1;
	background: var(--wp--preset--color--contrast, #021228);
}

.msd-header::after {
	top: 100%;
	height: 18px;
	background: linear-gradient(to bottom, rgba(2, 18, 40, 0.22), rgba(2, 18, 40, 0));
}

@media (prefers-reduced-motion: no-preference) {
	.msd-header::before,
	.msd-header::after {
		transition: opacity 0.35s var(--msd-ease);
	}
}

.msd-header.is-scrolled::before,
.msd-header.is-scrolled::after {
	opacity: 1;
}

/* Base header already carries a static box-shadow; the gradient replaces it. */
.msd-header,
.msd-header.msd-header--overlay {
	box-shadow: none;
}

/*
 * Hero pages: the header sits over the photo. Make it fixed from the start
 * (identical position at scroll 0, so no jump later) and just fade the navy
 * layer in after ~40px.
 */
body.home .msd-header--overlay,
body:has(.msd-page-hero.wp-block-cover) .msd-header--overlay {
	position: fixed !important;
	top: 0;
	z-index: 100;
}

body.admin-bar.home .msd-header--overlay,
body.admin-bar:has(.msd-page-hero.wp-block-cover) .msd-header--overlay {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	body.admin-bar.home .msd-header--overlay,
	body.admin-bar:has(.msd-page-hero.wp-block-cover) .msd-header--overlay {
		top: 0;
	}
}

body.home .msd-header--overlay.is-scrolled .wp-block-site-title a,
body.home .msd-header--overlay.is-scrolled .wp-block-navigation-item__content,
body:has(.msd-page-hero.wp-block-cover) .msd-header--overlay.is-scrolled .wp-block-site-title a,
body:has(.msd-page-hero.wp-block-cover) .msd-header--overlay.is-scrolled .wp-block-navigation-item__content {
	text-shadow: none;
}

/* ---------- Cards: lift, image zoom, gold line (transform only) ---------- */
.msd-card,
.msd-pricecard {
	position: relative;
}

.msd-card > .wp-block-image,
.msd-card > .wp-block-post-featured-image {
	overflow: hidden;
}

.msd-card::after,
.msd-pricecard::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--wp--preset--color--accent, #C9A227);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

.msd-card:not(.msd-portrait):not(.msd-stat):focus-within::after,
.msd-pricecard:focus-within::after {
	transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.msd-card,
	.msd-pricecard,
	.msd-card::after,
	.msd-pricecard::after {
		transition: transform 0.3s var(--msd-ease);
	}

	.msd-card > .wp-block-image img,
	.msd-card > .wp-block-post-featured-image img {
		transition: transform 0.6s var(--msd-ease);
	}

	.msd-card:not(.msd-portrait):not(.msd-stat):hover,
	.msd-pricecard:hover {
		transform: translate3d(0, -4px, 0);
	}

	.msd-card:hover > .wp-block-image img,
	.msd-card:hover > .wp-block-post-featured-image img {
		transform: scale(1.04);
		will-change: transform;
	}

	.msd-card:not(.msd-portrait):not(.msd-stat):hover::after,
	.msd-pricecard:hover::after {
		transform: scaleX(1);
	}
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Replace base transitions (incl. box-shadow) with cheap ones. */
.wp-element-button,
.wp-block-button__link {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
	transform: translate3d(-120%, 0, 0);
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.wp-element-button,
	.wp-block-button__link {
		transition:
			background-color 0.2s ease,
			color 0.2s ease,
			border-color 0.2s ease,
			transform 0.3s var(--msd-ease);
	}

	.wp-block-button__link::after {
		transition: transform 0.7s var(--msd-ease);
	}

	.wp-block-button__link:hover {
		transform: translate3d(0, -2px, 0);
	}

	.wp-block-button__link:hover::after {
		transform: translate3d(120%, 0, 0);
	}
}

.wp-block-button__link:focus-visible,
.wpcf7 input[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #C9A227);
	outline-offset: 3px;
}

/* ---------- Hero: Ken Burns (desktop only) + copy fade-in ---------- */
.msd-hero.wp-block-cover,
.msd-page-hero.wp-block-cover {
	overflow: hidden;
}

@keyframes msd-kenburns {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(0, 0, 0) scale(1.05);
	}
}

@keyframes msd-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 16px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 782px) {
	.msd-hero.wp-block-cover > img.wp-block-cover__image-background,
	.msd-page-hero.wp-block-cover > img.wp-block-cover__image-background {
		transform-origin: 60% 40%;
		backface-visibility: hidden;
		animation: msd-kenburns 18s linear 1 both;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.msd-hero .msd-hero-copy > *,
	.msd-page-hero .wp-block-cover__inner-container > * {
		animation: msd-fade-up 0.8s var(--msd-ease) both;
	}

	.msd-hero .msd-hero-copy > :nth-child(2),
	.msd-page-hero .wp-block-cover__inner-container > :nth-child(2) {
		animation-delay: 0.1s;
	}

	.msd-hero .msd-hero-copy > :nth-child(n + 3),
	.msd-page-hero .wp-block-cover__inner-container > :nth-child(n + 3) {
		animation-delay: 0.2s;
	}
}

/* ---------- Reduced motion: hard off ---------- */
@media (prefers-reduced-motion: reduce) {
	.msd-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.msd-card,
	.msd-pricecard,
	.msd-card::after,
	.msd-pricecard::after,
	.msd-card img,
	.wp-block-button__link,
	.msd-header::before,
	.msd-header::after {
		transition: none !important;
	}

	.wp-block-button__link::after {
		display: none;
	}
}