/* Motion ------------------------------------------------
 * Scroll reveals: mark one element with data-reveal, or a container with
 * data-reveal-group to fade its direct children in sequence (assets/js/reveal.js).
 * Parallax: mark an edge-to-edge media wrapper with data-parallax.
 * Content is only hidden while body has .has-reveal, so it stays visible
 * without JS, with reduced motion, and in print.
 */

/* Matches the reference site: an element waits up to 0.6s after entering the
 * screen (--reveal-offset, set per element in reveal.js), then fades over 1.5s
 * with ease. --easing front-loads the fade and makes it feel instant. */
:root{
	--reveal-duration: 1.5s;
	--reveal-easing: ease;
}

/* Scroll reveal --------------------------------------------- */
.has-reveal [data-reveal], .has-reveal [data-reveal-group] > *{opacity: 0; transition: opacity var(--reveal-duration) var(--reveal-easing) calc(var(--reveal-offset, 0s) + var(--reveal-delay, 0s));}
.has-reveal [data-reveal].is-revealed, .has-reveal [data-reveal-group] > .is-revealed, .has-reveal [data-reveal]:focus-within, .has-reveal [data-reveal-group] > :focus-within{opacity: 1;}

@media print{
	.has-reveal [data-reveal], .has-reveal [data-reveal-group] > *{opacity: 1; transition: none;}
}

/* Hero lines fade in each time a slide becomes active ------- */
@keyframes patina-fade-in{from{opacity: 0;}}

@media (prefers-reduced-motion: no-preference){
	.js .acf-slider .slide.is-active :is(.tagline-top, .slide-line-part, .tagline-bottom){animation: patina-fade-in var(--reveal-duration) var(--reveal-easing) both;}
	.js .acf-slider .slide.is-active .tagline-top{animation-delay: 0.2s;}
	.js .acf-slider .slide.is-active .slide-line-part{animation-delay: 0.4s;}
	.js .acf-slider .slide.is-active .slide-line-part + .slide-line-part{animation-delay: 0.55s;}
	.js .acf-slider .slide.is-active .tagline-bottom{animation-delay: 0.7s;}
}

/* Parallax: media drifts slower than the page. The media is scaled up so its
 * edges never show. Browsers without scroll-driven animations keep it still. */
@keyframes patina-parallax{from{translate: 0 -6%;} to{translate: 0 6%;}}

@supports (animation-timeline: view()){
	@media (prefers-reduced-motion: no-preference){
		[data-parallax]{overflow: clip; view-timeline-name: --patina-parallax;}
		[data-parallax] :is(img, video){scale: 1.15; animation: patina-parallax linear both; animation-timeline: --patina-parallax;}
	}
}