/*
 * Prudentia — motion system (Colonnade, cinematic).
 * Every effect has one job: the hero reveals in reading order and the wood band opens from its
 * centre column; each section's gold column line draws down before its heading rises; pillars,
 * steps and gallery frames settle in sequence; hovers and focus confirm what is interactive.
 * Only transform / opacity / clip-path are animated. Everything is off under
 * prefers-reduced-motion, and nothing is hidden unless the script has confirmed it is running
 * (html.pcc-js, set in <head> with a 4s fail-safe).
 */

:root {
	--pcc-ease-out: cubic-bezier(.16, 1, .3, 1);
	--pcc-ease-inout: cubic-bezier(.65, 0, .35, 1);
	--pcc-step: 110ms;
}

/* ---------------------------------------------------------------
 * Feedback (always on, cheap, also under reduced motion)
 * ------------------------------------------------------------- */
.wp-block-button__link,
.pcc-form button {
	transition: background-color .35s var(--pcc-ease-out), color .35s var(--pcc-ease-out), border-color .35s var(--pcc-ease-out), transform .2s var(--pcc-ease-out);
}
.wp-block-button__link:active,
.pcc-form button:active { transform: scale(.98); }

@media (prefers-reduced-motion: no-preference) {
	/* nav: underline draws from the left */
	.pcc-header .wp-block-navigation-item__content { position: relative; }
	.pcc-header .wp-block-navigation-item__content::after {
		content: ""; position: absolute; left: 1.55rem; right: 1.55rem; bottom: 18px; height: 1px;
		background: var(--wp--preset--color--gold); transform: scaleX(0); transform-origin: right;
		transition: transform .5s var(--pcc-ease-out);
	}
	.pcc-header .wp-block-navigation-item__content:hover::after,
	.pcc-header .wp-block-navigation-item__content:focus-visible::after { transform: scaleX(1); transform-origin: left; }

	/* outbound links */
	.pcc-sub-link a { background: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold)) left bottom / 0 1px no-repeat; transition: background-size .5s var(--pcc-ease-out), color .3s; }
	.pcc-sub-link a:hover { background-size: 100% 1px; }
	.pcc-sub-link a::after { display: inline-block; transition: transform .4s var(--pcc-ease-out); }
	.pcc-sub-link a:hover::after { transform: translate(3px, -3px); }

	/* form: focus line draws across */
	.pcc-form input[type=text], .pcc-form input[type=email], .pcc-form textarea {
		background-image: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold));
		background-repeat: no-repeat; background-position: left bottom; background-size: 0 1px;
		transition: background-size .6s var(--pcc-ease-out), border-color .3s;
	}
	.pcc-form input:focus, .pcc-form textarea:focus { background-size: 100% 1px; }
}

/* ---------------------------------------------------------------
 * Hero choreography (on load, like a film opening)
 * 1. letterbox bars hold, then open   2. the photo eases back from a slow push-in
 * 3. the title rises word by word     4. lead, buttons, columns and scroll cue follow
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* opacity only: a translate here would trap the fixed overlay menu */
	.pcc-js .pcc-header-wrap { opacity: 0; transition: opacity 1.2s var(--pcc-ease-out) 1.5s; }
	.pcc-js.pcc-loaded .pcc-header-wrap { opacity: 1; }

	.pcc-js .pcc-hero::before { background-size: 100% 13vh, 100% 13vh; transition: background-size 1.8s var(--pcc-ease-inout) .25s; }
	.pcc-js.pcc-loaded .pcc-hero::before { background-size: 100% 0, 100% 0; }

	.pcc-js .pcc-hero .wp-block-cover__image-background { scale: 1.16; transition: scale 4.2s var(--pcc-ease-out); }
	.pcc-js.pcc-loaded .pcc-hero .wp-block-cover__image-background { scale: 1.02; }

	.pcc-js .pcc-hero::after { opacity: 0; transition: opacity 2.4s var(--pcc-ease-out) 1.6s; }
	.pcc-js.pcc-loaded .pcc-hero::after { opacity: 1; }

	/* headline: each word rises out of its own mask */
	.pcc-hero h1 .pcc-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
	.pcc-hero h1 .pcc-w > span { display: inline-block; }
	.pcc-js .pcc-hero h1 .pcc-w > span { translate: 0 110%; transition: translate 1.5s var(--pcc-ease-out); transition-delay: calc(.7s + var(--i, 0) * 70ms); }
	.pcc-js.pcc-loaded .pcc-hero h1 .pcc-w > span { translate: 0 0; }

	.pcc-js .pcc-hero .pcc-hero-lead,
	.pcc-js .pcc-hero .pcc-hero-actions,
	.pcc-js .pcc-hero .pcc-cue-wrap { opacity: 0; translate: 0 18px; transition: opacity 1.2s var(--pcc-ease-out), translate 1.4s var(--pcc-ease-out); }
	.pcc-js .pcc-hero .pcc-cue-wrap { translate: -50% 18px; }
	.pcc-js .pcc-hero .pcc-hero-lead { transition-delay: 1.45s; }
	.pcc-js .pcc-hero .pcc-hero-actions { transition-delay: 1.65s; }
	.pcc-js .pcc-hero .pcc-cue-wrap { transition-delay: 2.2s; }
	.pcc-js.pcc-loaded .pcc-hero .pcc-hero-lead,
	.pcc-js.pcc-loaded .pcc-hero .pcc-hero-actions { opacity: 1; translate: 0 0; }
	.pcc-js.pcc-loaded .pcc-hero .pcc-cue-wrap { opacity: 1; translate: -50% 0; }
}

/* scroll-linked depth (browsers with scroll-driven animations; others simply skip it) */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		/* hero: the photo drifts slower than the page, the copy recedes */
		.pcc-hero .wp-block-cover__image-background { animation: pcc-hero-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
		/* (on the copy, not its container: a transformed container would capture the absolutely placed scroll cue) */
		.pcc-hero .wp-block-cover__inner-container > :not(.pcc-cue-wrap) { animation: pcc-hero-recede linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
		/* title card: the forest moves through the frame; the title holds, then lifts away */
		.pcc-title-card .wp-block-cover__image-background { animation: pcc-card-pan linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
		.pcc-title-card .wp-block-cover__inner-container { animation: pcc-card-title linear both; animation-timeline: view(); animation-range: contain 30% exit 90%; }
		/* write-up photos: gentle inner parallax */
		.pcc-sub-photo { overflow: hidden; }
		.pcc-sub-photo img { animation: pcc-inner-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
	}
}
@keyframes pcc-hero-drift { to { translate: 0 20%; } }
@keyframes pcc-hero-recede { to { translate: 0 -14%; opacity: 0; } }
@keyframes pcc-card-pan { from { translate: 0 -9%; } to { translate: 0 9%; } }
@keyframes pcc-card-title { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -40px; } }
@keyframes pcc-inner-parallax { from { translate: 0 -4%; scale: 1.08; } to { translate: 0 4%; scale: 1.08; } }

/* ---------------------------------------------------------------
 * Scroll reveals (targets tagged by assets/site.js; no content changes)
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* default: settle upward */
	.pcc-js [data-reveal] {
		opacity: 0; translate: 0 36px;
		transition: opacity 1.2s var(--pcc-ease-out), translate 1.5s var(--pcc-ease-out);
		transition-delay: calc(var(--d, 0) * var(--pcc-step));
	}
	.pcc-js [data-reveal].is-in { opacity: 1; translate: 0 0; }

	/* section headings: rise out of a mask */
	.pcc-js [data-reveal="mask"] { opacity: 1; translate: 0 .35em; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--pcc-ease-inout) .25s, translate 1.2s var(--pcc-ease-out) .25s; }
	.pcc-js [data-reveal="mask"].is-in { clip-path: inset(0 0 -10% 0); translate: 0 0; }

	/* eyebrow: the rule draws, then the label */
	.pcc-js [data-reveal="eyebrow"] { translate: 0 0; }
	.pcc-js [data-reveal="eyebrow"]::before { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--pcc-ease-inout) .1s; }
	.pcc-js [data-reveal="eyebrow"].is-in::before { transform: scaleX(1); }

	/* the gold column line above a centred head draws downward (the head itself stays put) */
	.pcc-js [data-reveal="line"] { opacity: 1; translate: 0 0; }
	.pcc-js [data-reveal="line"]::before { transform: scaleY(0); transform-origin: top; transition: transform 1s var(--pcc-ease-inout); }
	.pcc-js [data-reveal="line"].is-in::before { transform: scaleY(1); }

	/* pillars and steps: each column rises in turn, its numeral a beat later */
	.pcc-js .pcc-pillar[data-reveal]::before,
	.pcc-js .pcc-steps > li[data-reveal]::before { opacity: 0; transition: opacity .9s var(--pcc-ease-out); transition-delay: calc(.35s + var(--d, 0) * var(--pcc-step)); }
	.pcc-js .pcc-pillar[data-reveal].is-in::before,
	.pcc-js .pcc-steps > li[data-reveal].is-in::before { opacity: 1; }

	/* photos in frames: unmask upward, image settles */
	.pcc-js [data-reveal="photo"] { opacity: 1; translate: 0 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.8s var(--pcc-ease-inout); transition-delay: calc(var(--d, 0) * 130ms); }
	.pcc-js [data-reveal="photo"].is-in { clip-path: inset(0 0 0 0); }

	/* gallery frames: settle in sequence */
	.pcc-js .pcc-gal-item[data-reveal] { transition-delay: calc(var(--d, 0) * 110ms); }
}

/* Never leave content hidden for people who asked for less motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	[data-reveal] { opacity: 1 !important; translate: none !important; clip-path: none !important; }
}