/* ───────────────────────────────────────────────────────────────────────────
   Christine 2026 — motion layer
   Apple-style motion (after emilkowalski/skills: apple-design + animate).
   Principles: respond instantly on press, ease-out for entrances, enter once,
   anchor menus to their trigger, translucent chrome, hover gated to real
   pointers, gentler equivalents for reduced motion / transparency.
   Timings are +250ms over the original pass (press feedback stays instant).
   ─────────────────────────────────────────────────────────────────────────── */

:root {
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--dur-press: 160ms;   /* unchanged: press feedback must feel instant */
	--dur-exit: 410ms;
	--dur-ui: 470ms;
	--dur-hover: 600ms;
	--dur-reveal: 1150ms;
	--dur-shape: 1450ms;
	--dur-sheen: 2050ms;
}

/* ── Translucent header material + scroll-edge effect ─────────────────────── */
header {
	/* Opaque enough that bright lime shapes passing beneath can't flash through,
	   and promoted to its own compositor layer so the glass doesn't re-raster
	   (the flicker) as animated layers scroll under it. */
	background: rgba(251, 251, 248, 0.88);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	backdrop-filter: blur(20px) saturate(140%);
	border-bottom-color: transparent !important;
	box-shadow: 0 1px 0 rgba(17, 19, 21, 0);
	transform: translateZ(0);
	will-change: transform;
	transition: box-shadow 550ms var(--ease-out), background-color 550ms var(--ease-out);
	view-transition-name: site-header;
}
/* Keep the hero's moving layers on their own layers too */
.hero__shape, .hero__glow, .hero__inner { will-change: transform, opacity; }
.hero { contain: paint; }
html.is-scrolled header {
	box-shadow: 0 1px 0 rgba(17, 19, 21, 0.08), 0 8px 24px -12px rgba(17, 19, 21, 0.12);
}

header nav a {
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
	transition: text-decoration-color var(--dur-ui) var(--ease-out), text-underline-offset var(--dur-ui) var(--ease-out);
}
header nav a:hover,
header nav a:focus-visible {
	text-decoration-color: #9fbd20;
	text-underline-offset: 4px;
}

/* Sub-menu scales out of its trigger (top-left origin), exits the same path */
header nav .sub-menu {
	display: block;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px) scale(0.97);
	transform-origin: 18px 0;
	pointer-events: none;
	background: rgba(251, 251, 248, 0.86);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	box-shadow: 0 18px 40px -12px rgba(17, 19, 21, 0.18);
	transition:
		opacity var(--dur-exit) var(--ease-out),
		transform var(--dur-exit) var(--ease-out),
		visibility 0s linear var(--dur-exit);
}
header nav li:hover > .sub-menu,
header nav li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition:
		opacity var(--dur-ui) var(--ease-out),
		transform var(--dur-ui) var(--ease-out),
		visibility 0s;
}

/* ── Press feedback: instant, on pointer-down ─────────────────────────────── */
.button,
.wp-block-button__link,
.legacy-content button,
.legacy-content input[type="submit"],
.hero .search-submit,
.post-nav a {
	transition:
		transform var(--dur-press) var(--ease-out),
		background-color var(--dur-ui) var(--ease-out),
		border-color var(--dur-ui) var(--ease-out),
		color var(--dur-ui) var(--ease-out),
		box-shadow var(--dur-hover) var(--ease-out);
}
.button:active,
.wp-block-button__link:active,
.legacy-content button:active,
.legacy-content input[type="submit"]:active,
.hero .search-submit:active,
.post-nav a:active {
	transform: scale(0.97);
	transition-duration: 100ms;
}

.text-link {
	text-underline-offset: 3px;
	transition: text-underline-offset var(--dur-ui) var(--ease-out), text-decoration-color var(--dur-ui) var(--ease-out);
}
.hero__eyebrow--link { transition: color var(--dur-ui) var(--ease-out); }

/* ── Hover — only for real pointers ───────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
	.button-primary:hover { background: #e4ff7a; border-color: #e4ff7a; }
	.button-ghost:hover { background: rgba(255, 255, 255, 0.1); }
	.wp-block-button__link:hover { background: #2a2d30; }
	.text-link:hover { text-underline-offset: 6px; text-decoration-color: #9fbd20; }

	.post-image img { transition: transform 950ms var(--ease-out); }
	.post-card:hover .post-image img { transform: scale(1.04); }

	.pod,
	.post-nav a {
		transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
	}
	.pod:hover,
	.post-nav a:hover {
		transform: translateY(-4px);
		box-shadow: 0 24px 48px -20px rgba(17, 19, 21, 0.22);
	}

	.page-content .wp-block-column {
		transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out) !important;
	}
}
@media (hover: none) {
	.post-card:hover .post-image img,
	.page-content .wp-block-column:hover { transform: none !important; }
}

/* ── Keyframes (from-only: they animate to each element's own resting value) ── */
@keyframes motion-rise { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } }
@keyframes motion-materialize { from { opacity: 0; scale: 0.82; } }
@keyframes motion-fade { from { opacity: 0; } }
@keyframes motion-sheen { from { background-position: 100% 0; } }
@keyframes motion-lift { from { opacity: 0; transform: translateY(40px) scale(0.98); } }

/* ── Page-load choreography: every hero ───────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
	.hero__inner > * {
		animation: motion-rise var(--dur-reveal) var(--ease-out) both;
	}
	.hero__inner > :nth-child(2) { animation-delay: 80ms; }
	.hero__inner > :nth-child(3) { animation-delay: 170ms; }
	.hero__inner > :nth-child(4) { animation-delay: 250ms; }
	.hero__inner > :nth-child(5) { animation-delay: 330ms; }
	.hero__inner > :nth-child(6) { animation-delay: 410ms; }
	.hero__inner > :nth-child(7) { animation-delay: 490ms; }

	/* Title rises, then light sweeps across it once */
	.hero__inner > .hero__title {
		animation:
			motion-rise var(--dur-reveal) var(--ease-out) 80ms both,
			motion-sheen var(--dur-sheen) var(--ease-in-out) 450ms both;
	}

	.hero__shape--main  { animation: motion-materialize var(--dur-shape) var(--ease-out) 120ms both; }
	.hero__shape--ghost { animation: motion-materialize var(--dur-shape) var(--ease-out) 260ms both; }
	.hero__glow  { animation: motion-fade 1650ms var(--ease-out) both; }
	.hero__grid  { animation: motion-fade 1450ms var(--ease-out) 200ms both; }
	.hero__scroll { animation: motion-fade var(--dur-reveal) var(--ease-out) 900ms both; }
	.hero-figure { animation: motion-lift var(--dur-reveal) var(--ease-out) 300ms both; }

	/* Scroll-linked depth (progressive enhancement: Chrome/Edge/Safari 26+) */
	@supports (animation-timeline: scroll()) {
		@keyframes motion-hero-exit { to { opacity: 0.15; transform: translateY(-48px) scale(0.97); } }
		@keyframes motion-shape-drift { to { rotate: 42deg; translate: -40px 140px; } }
		@keyframes motion-ghost-drift { to { rotate: 14deg; translate: 30px 70px; } }

		.hero__inner {
			animation: motion-hero-exit linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}
		.hero__shape--main {
			animation:
				motion-materialize var(--dur-shape) var(--ease-out) 120ms both,
				motion-shape-drift linear both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 100vh;
		}
		.hero__shape--ghost {
			animation:
				motion-materialize var(--dur-shape) var(--ease-out) 260ms both,
				motion-ghost-drift linear both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 100vh;
		}
	}

	/* Cross-document page transitions (Chrome 126+, Safari 18.2+) */
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: 430ms var(--ease-out) both motion-fade reverse; }
	::view-transition-new(root) { animation: 570ms var(--ease-out) both motion-fade; }
}

/* ── Expandable rows open smoothly (Chrome 131+; others open instantly) ──── */
@media (prefers-reduced-motion: no-preference) {
	:root { interpolate-size: allow-keywords; }
	.career-early::details-content {
		height: 0;
		opacity: 0;
		overflow: clip;
		transition:
			height var(--dur-ui) var(--ease-out),
			opacity var(--dur-ui) var(--ease-out),
			content-visibility var(--dur-ui) allow-discrete;
	}
	.career-early[open]::details-content { height: auto; opacity: 1; }
}

/* ── Scroll reveal — fires once (motion.js adds .is-revealed) ─────────────── */
@keyframes motion-reveal { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } }
html.motion-ok :is(.section-heading, .post-card, .pod, .page-content > *, .post-content > *, .section-nav, .page-featured-image, .post-nav a, .listing-empty):not(.is-revealed) {
	opacity: 0;
}
/* fill "backwards" only, so hover transforms still work after the reveal ends */
html.motion-ok .is-revealed {
	animation: motion-reveal var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms) backwards;
}

/* ── Reduced motion: gentle cross-fades, no travel ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.hero__inner > *,
	.hero__shape,
	.hero-figure {
		animation: motion-fade 550ms ease both;
	}
	.button:active,
	.wp-block-button__link:active { transform: none; }
	.pod:hover,
	.post-nav a:hover,
	.post-card:hover .post-image img,
	.page-content .wp-block-column:hover { transform: none !important; }
}

/* ── Reduced transparency / more contrast: solid chrome ───────────────────── */
@media (prefers-reduced-transparency: reduce) {
	header,
	header nav .sub-menu {
		background: #fbfbf8;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.hero__tags li { background: #23272a; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
	header { background: #fbfbf8; border-bottom-color: #5b6168 !important; }
	header nav .sub-menu { background: #fbfbf8; border-color: #5b6168; }
}