/*
 * Coastal motion layer
 *
 * This file deliberately has no hidden default state. Visual concealment starts
 * only after coastal-motion.js adds .ec-coastal-motion to <html>, so content
 * remains readable if JavaScript is unavailable or fails.
 */

html.ec-coastal-motion {
	--wf-motion-ease: cubic-bezier(.16, 1, .3, 1);
	--wf-motion-soft-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
 * Immersive hero: the foreground photograph remains a complete, contained
 * image. Depth comes from the already-blurred background copy and a soft
 * colour light layer, never by enlarging or cropping the foreground image.
 * -------------------------------------------------------------------------- */
html.ec-coastal-motion .ec-immersive-photo {
	object-fit: contain !important;
	transform: none !important;
	animation: none !important;
	will-change: auto;
}

html.ec-coastal-motion .ec-immersive-slide::after {
	content: "";
	position: absolute;
	inset: -14%;
	z-index: 2;
	pointer-events: none;
	opacity: .36;
	background:
		radial-gradient(ellipse 45% 40% at 14% 28%, rgba(216, 188, 128, .38), transparent 72%),
		radial-gradient(ellipse 40% 50% at 78% 74%, rgba(102, 153, 139, .25), transparent 70%);
	mix-blend-mode: soft-light;
	transform: translate3d(-2%, 1%, 0);
}

html.ec-coastal-motion:not(.ec-coastal-motion-reduced) .ec-immersive-slide.is-active .ec-immersive-backdrop img {
	animation: wf-backdrop-drift 16s var(--wf-motion-soft-ease) infinite alternate;
	will-change: transform;
}

html.ec-coastal-motion:not(.ec-coastal-motion-reduced) .ec-immersive-slide.is-active::after {
	animation: wf-colour-drift 18s var(--wf-motion-soft-ease) infinite alternate;
	will-change: transform;
}

@keyframes wf-backdrop-drift {
	from { transform: scale(1.09) translate3d(-.45%, .3%, 0); }
	to { transform: scale(1.16) translate3d(.75%, -.55%, 0); }
}

@keyframes wf-colour-drift {
	from { transform: translate3d(-2%, 1%, 0) scale(1); }
	to { transform: translate3d(2.5%, -1.75%, 0) scale(1.04); }
}

/* Parent markup supplies .wf-title-line > span. A line is only masked after
 * progressive enhancement is active, then replays when a slide becomes active. */
html.ec-coastal-motion .ec-immersive-slide .wf-title-line {
	display: block;
	overflow: hidden;
	padding: 0 0 .1em;
	margin: 0 0 -.1em;
}

html.ec-coastal-motion .ec-immersive-slide .wf-title-line > span {
	display: block;
	opacity: 0;
	transform: translate3d(0, 112%, 0);
}

html.ec-coastal-motion:not(.ec-coastal-motion-paused):not(.ec-coastal-motion-reduced) .ec-immersive-slide.is-active .wf-title-line > span {
	animation: wf-title-unmask 1.08s var(--wf-motion-ease) both;
}

html.ec-coastal-motion:not(.ec-coastal-motion-paused):not(.ec-coastal-motion-reduced) .ec-immersive-slide.is-active .wf-title-line:nth-child(2) > span { animation-delay: 115ms; }
html.ec-coastal-motion:not(.ec-coastal-motion-paused):not(.ec-coastal-motion-reduced) .ec-immersive-slide.is-active .wf-title-line:nth-child(3) > span { animation-delay: 225ms; }
html.ec-coastal-motion:not(.ec-coastal-motion-paused):not(.ec-coastal-motion-reduced) .ec-immersive-slide.is-active .wf-title-line:nth-child(4) > span { animation-delay: 335ms; }

@keyframes wf-title-unmask {
	from { opacity: 0; transform: translate3d(0, 112%, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* A user-paused hero must never leave a newly selected heading masked. */
html.ec-coastal-motion.ec-coastal-motion-paused .ec-immersive-slide.is-active .wf-title-line > span {
	opacity: 1;
	transform: none;
	animation: none !important;
}

/* --------------------------------------------------------------------------
 * Scroll reveals. These selectors are only added by the progressive-enhancement
 * script. The short per-card delay is written to --wf-reveal-delay by JS.
 * -------------------------------------------------------------------------- */
html.ec-coastal-motion:not(.ec-coastal-motion-reduced) [data-wf-motion-target] {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
}

html.ec-coastal-motion:not(.ec-coastal-motion-reduced) [data-wf-motion-target].wf-is-visible {
	animation: wf-section-reveal 820ms var(--wf-motion-ease) var(--wf-reveal-delay, 0ms) both;
}

html.ec-coastal-motion [data-wf-stagger] [data-wf-motion-target] {
	--wf-reveal-delay: 0ms;
}

@keyframes wf-section-reveal {
	from {
		opacity: 0;
		transform: translate3d(0, 26px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Reuse the motion language on existing non-conflicting editorial elements. */
html.ec-coastal-motion .ec-sns-card {
	transition: box-shadow 360ms var(--wf-motion-soft-ease), transform 360ms var(--wf-motion-soft-ease);
}

/* --------------------------------------------------------------------------
 * Link and button response: no menu, form control, or submission behaviour is
 * touched. These are visual-only reactions for existing action affordances.
 * -------------------------------------------------------------------------- */
html.ec-coastal-motion :is(.ec-button, .ec-immersive-cta, .ec-sticky-consult, .ec-sticky-phone) {
	transition: transform 260ms var(--wf-motion-ease), box-shadow 260ms var(--wf-motion-ease), background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

html.ec-coastal-motion :is(.ec-button, .ec-immersive-cta, .ec-text-link) span,
html.ec-coastal-motion .ec-portfolio-arrow {
	transition: transform 260ms var(--wf-motion-ease), background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
	html.ec-coastal-motion :is(.ec-button, .ec-immersive-cta, .ec-sticky-consult, .ec-sticky-phone):hover {
		transform: translate3d(0, -3px, 0);
		box-shadow: 0 11px 22px rgba(37, 47, 39, .12);
	}

	html.ec-coastal-motion :is(.ec-button, .ec-immersive-cta, .ec-text-link):hover span {
		transform: translate3d(5px, 0, 0);
	}

	html.ec-coastal-motion .ec-portfolio-link:hover .ec-portfolio-arrow {
		transform: translate3d(4px, 0, 0) rotate(-8deg);
	}

	html.ec-coastal-motion .ec-sns-card:hover {
		transform: translate3d(0, -4px, 0);
		box-shadow: 0 16px 30px rgba(37, 47, 39, .13);
	}
}

html.ec-coastal-motion :is(.ec-button, .ec-immersive-cta, .ec-text-link, .ec-portfolio-link):focus-visible span,
html.ec-coastal-motion .ec-portfolio-link:focus-visible .ec-portfolio-arrow {
	transform: translate3d(4px, 0, 0);
}

/* Pausing is driven by document visibility, the reduced-motion preference, and
 * the existing [data-ec-immersive-toggle] state. There is no JS animation loop. */
html.ec-coastal-motion.ec-coastal-motion-paused .ec-immersive-slide.is-active :is(.ec-immersive-backdrop img),
html.ec-coastal-motion.ec-coastal-motion-paused .ec-immersive-slide.is-active::after {
	animation-play-state: paused !important;
}
html.ec-coastal-motion.ec-coastal-motion-hidden [data-wf-motion-target].wf-is-visible {
	animation-play-state: paused !important;
}

@media (max-width: 780px) {
	html.ec-coastal-motion .ec-immersive-slide::after {
		inset: -20%;
		opacity: .28;
	}

	html.ec-coastal-motion:not(.ec-coastal-motion-reduced) [data-wf-motion-target] {
		transform: translate3d(0, 18px, 0);
	}

	@keyframes wf-section-reveal {
		from {
			opacity: 0;
			transform: translate3d(0, 18px, 0);
		}
		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	html.ec-coastal-motion .ec-immersive-slide::after,
	html.ec-coastal-motion .ec-immersive-backdrop img,
	html.ec-coastal-motion .ec-immersive-slide .wf-title-line > span,
	html.ec-coastal-motion [data-wf-motion-target],
	html.ec-coastal-motion [data-wf-motion-target].wf-is-visible {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
		will-change: auto;
	}

	html.ec-coastal-motion :is(.ec-button, .ec-immersive-cta, .ec-text-link, .ec-portfolio-arrow, .ec-sns-card) {
		transition: none !important;
	}
}