/*
 * Shared "appear on scroll" reveal (assets/js/reveal.js).
 *
 * Any element with [data-gb-appear] fades/rises in the first time it enters the
 * viewport. Optional inline custom properties:
 *   --gb-appear-index  stagger position (0, 1, 2 …) inside a group;
 *   --gb-appear-shift  start offset on the block axis (default 1.5rem).
 *
 * Safety: nothing is ever hidden unless reveal.js has set
 * <html data-gb-appear-ready>, which it does only AFTER its observer is
 * running. No JS, a failed script, STATIC_ACCESSIBLE or reduced motion means the
 * content is simply visible. Elements already on screen at set-up are marked
 * as appeared before the attribute is set, so nothing visible ever blinks.
 *
 * Only opacity, translate and scale are animated (compositor-friendly).
 * The journey section keeps its own [data-gb-reveal] system; the two
 * attributes never overlap.
 */

:root[data-gb-appear-ready] [data-gb-appear] {
	transition:
		opacity var(--gb-duration-reveal) var(--gb-ease-out),
		translate var(--gb-duration-reveal) var(--gb-ease-out),
		scale var(--gb-duration-reveal) var(--gb-ease-out);
	transition-delay: calc(var(--gb-appear-index, 0) * var(--gb-appear-step, 80ms));
}

:root[data-gb-appear-ready] [data-gb-appear]:not([data-gb-appeared]) {
	opacity: 0;
	translate: 0 var(--gb-appear-shift, 1.5rem);
}

/* LIGHT: one short fade, no movement and no stagger (cheaper on modest devices). */
:root[data-gb-appear-ready][data-gb-experience="LIGHT"] [data-gb-appear] {
	transition-delay: 0ms;
}

:root[data-gb-appear-ready][data-gb-experience="LIGHT"] [data-gb-appear]:not([data-gb-appeared]) {
	translate: none;
}