/**
 * Shared scroll-reveal entrance animations.
 *
 * Any element with a `data-mainsail-reveal="<direction>"` attribute animates
 * in the first time it scrolls into the viewport — see mainsail-reveal.js
 * (registered/enqueued alongside this file, same shared-asset pattern
 * already used for Splide — see Plugin::register_shared_carousel_assets()).
 *
 * Graceful fallback, no !important needed: the hidden (pre-reveal) state
 * only applies under the `.mainsail-reveal-js` class, which the JS adds to
 * <html> itself, and ONLY when it's actually going to reveal things
 * (IntersectionObserver supported, prefers-reduced-motion not set). If JS
 * fails to load, is disabled, or the visitor prefers reduced motion, that
 * class is never added, this file's selectors never match anything, and
 * every element simply renders in its normal, fully-visible state — no
 * "content stuck invisible" failure mode.
 */

.mainsail-reveal-js [data-mainsail-reveal] {
	opacity: 0;
	transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--mainsail-reveal-delay, 0ms);
}

/* Named by ORIGIN — the side/point the element starts displaced from, and
   therefore visibly travels away from as it settles into its real,
   already-laid-out position (transform: none). Distances sized up
   slightly alongside the slower duration above, so the motion still reads
   as a deliberate slide rather than a slow fade with barely any travel. */
.mainsail-reveal-js [data-mainsail-reveal="up"] {
	transform: translateY(60px);
}

.mainsail-reveal-js [data-mainsail-reveal="down"] {
	transform: translateY(-60px);
}

.mainsail-reveal-js [data-mainsail-reveal="left"] {
	transform: translateX(-60px);
}

.mainsail-reveal-js [data-mainsail-reveal="right"] {
	transform: translateX(60px);
}

/* "Appears from center, then slides toward a side" — approximated as a
   single transition: starts slightly offset (not far enough to read as a
   full slide-in) plus a small scale-down, so it visually emerges near its
   own center before drifting/growing into its final position. */
.mainsail-reveal-js [data-mainsail-reveal="center-left"] {
	transform: translateX(32px) scale(0.92);
}

.mainsail-reveal-js [data-mainsail-reveal="center-right"] {
	transform: translateX(-32px) scale(0.92);
}

/* Pure scale/zoom-in + fade — no directional slide at all (e.g. a map
   embed "popping" into place, rather than sliding in from a side). */
.mainsail-reveal-js [data-mainsail-reveal="pop"] {
	transform: scale(0.85);
}

.mainsail-reveal-js [data-mainsail-reveal].is-revealed {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}