/* 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. */
: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;}

/* Links and buttons that fade in keep their hover colours (style.css). */
.has-reveal :is(a, button)[data-reveal], .has-reveal [data-reveal-group] > :is(a, button){transition: opacity var(--reveal-duration) var(--reveal-easing) calc(var(--reveal-offset, 0s) + var(--reveal-delay, 0s)), color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;}

/* Items that a script moves around, e.g. Flickity cells, can't be a
 * data-reveal-group. Mark the wrapper data-reveal-items and each item
 * data-reveal-item: they fade in sequence once the wrapper is on screen. */
.has-reveal [data-reveal-items] [data-reveal-item]{opacity: 0; transition: opacity var(--reveal-duration) var(--reveal-easing) calc(var(--reveal-offset, 0s) + var(--reveal-delay, 0s) + var(--reveal-item-delay, 0s));}
.has-reveal [data-reveal-items].is-revealed [data-reveal-item], .has-reveal [data-reveal-items] [data-reveal-item]:focus-within{opacity: 1;}

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

/* 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 dd-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: --dd-parallax;}
		[data-parallax] :is(img, video){/*scale: 1.15; animation: dd-parallax linear both;*/ animation-timeline: --dd-parallax;}
	}
}