/*!
 * Base Animations  v2.1.1
 * Lightweight scroll & entrance animations for the WordPress block editor.
 * No dependencies. Apply by typing a class into a block's
 * "Advanced > Additional CSS class(es)" field.
 *
 * TWO INDEPENDENT SYSTEMS:
 *   1) Entrance animations  (animate-fade*, animate-zoom*, animate-stagger)
 *      — JavaScript-triggered, play ONCE as the element scrolls into view.
 *   2) Scroll-driven effects (animate-scroll-*)
 *      — pure CSS, progress tied to scroll position. No JavaScript.
 *
 * NAMING RULE for direction: the word is the way the element TRAVELS into place.
 *   animate-fade-up   = starts low, rises up
 *   animate-fade-down = starts high, drops down
 *   animate-fade-left = starts right, moves left
 *   animate-fade-right= starts left, moves right
 */

/* ===========================================================================
   TUNABLE CONTROLS  (variable names match Animate.css conventions)
   Override in your child theme to restyle everything at once, e.g.
       :root { --animate-duration: 1.2s; }
   …or scope to one section by setting a variable on a wrapper block.
   =========================================================================== */
:root {
	--animate-duration: 1s;                         /* how long each entrance runs      */
	--animate-ease: cubic-bezier(0.22, 1, 0.36, 1); /* gentle ease-out                  */
	--animate-distance: 1.5rem;                     /* travel distance for slides       */
	--animate-scroll-distance: 4rem;                /* travel distance for scroll effects (larger so the direction is visible against the fade) */
	--animate-zoom: 0.92;                           /* start scale for zoom-in          */
	--animate-origin: center;                       /* transform origin (e.g. zoom point) */
	--animate-stagger-delay: 300ms;                 /* gap between cascaded children     */

	/* The effect used by "animate-default". Set this in your child theme to
	   define your house animation — every block with "animate-default" inherits
	   it. Use any transform value: translateY(1.5rem), scale(0.92), or "none"
	   for a pure opacity fade.
	   IMPORTANT: set this in your child theme's style.css. If left unset,
	   animate-default will do a simple opacity fade (no movement). */
	--animate-default-transform: none;

	/* Scroll-driven scrub range. "entry 0%" = element edge appears;
	   "cover 50%" = element is roughly centred. Widen the end (e.g. cover 75%)
	   to make the effect more gradual. */
	--animate-scroll-start: entry 0%;
	--animate-scroll-end: cover 50%;
}

/* ===========================================================================
   1) ENTRANCE ANIMATIONS — play once on scroll-in
   --------------------------------------------------------------------------
   GUARDED so content is NEVER left invisible:
     • prefers-reduced-motion: no-preference → users who want less motion just
       see the content, no animation.
     • scripting: enabled → the hidden start state only applies when JavaScript
       is available to reveal it again. No-JS visitors (and older browsers that
       don't support this query) simply see the content, no animation.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {

	/* --- standalone element: starting (hidden) state ---
	   (excludes stagger containers — those hide their CHILDREN, not themselves) */
	:is(
		.animate-default,
		.animate-fade,
		.animate-fade-up,
		.animate-fade-down,
		.animate-fade-left,
		.animate-fade-right,
		.animate-zoom-in,
		.animate-zoom-out
	):not(.animate-stagger) {
		opacity: 0;
		transition:
			opacity var(--animate-duration) var(--animate-ease),
			transform var(--animate-duration) var(--animate-ease);
		transition-delay: var(--animate-delay, 0ms);
		transform-origin: var(--animate-origin);
		will-change: opacity, transform;
	}

	.animate-default:not(.animate-stagger)    { transform: var(--animate-default-transform); }
	.animate-fade-up:not(.animate-stagger)    { transform: translateY(var(--animate-distance)); }
	.animate-fade-down:not(.animate-stagger)  { transform: translateY(calc(var(--animate-distance) * -1)); }
	.animate-fade-left:not(.animate-stagger)  { transform: translateX(var(--animate-distance)); }
	.animate-fade-right:not(.animate-stagger) { transform: translateX(calc(var(--animate-distance) * -1)); }
	.animate-zoom-in:not(.animate-stagger)    { transform: scale(var(--animate-zoom)); }
	.animate-zoom-out:not(.animate-stagger)   { transform: scale(calc(2 - var(--animate-zoom))); }
	/* animate-fade on its own = opacity only, no movement */

	/* --- standalone element: revealed (final) state --- */
	:is(
		.animate-default,
		.animate-fade,
		.animate-fade-up,
		.animate-fade-down,
		.animate-fade-left,
		.animate-fade-right,
		.animate-zoom-in,
		.animate-zoom-out
	).is-visible {
		opacity: 1;
		transform: none;
	}

	/* --- STAGGER CONTAINER ---------------------------------------------------
	   Put e.g.  "animate-stagger animate-fade-up"  on a Columns / Grid / Group
	   block. Its DIRECT children animate in sequence — no classes on the
	   children, no extra wrapper block, works for any number of items
	   (including dynamic Query Loops). */
	.animate-stagger > * {
		opacity: 0;
		transition:
			opacity var(--animate-duration) var(--animate-ease),
			transform var(--animate-duration) var(--animate-ease);
		/* each child waits (its position) × (the gap) before starting */
		transition-delay: calc(var(--animate-index, 0) * var(--animate-stagger-delay));
		transform-origin: var(--animate-origin);
		will-change: opacity, transform;
	}

	.animate-stagger.animate-default > *    { transform: var(--animate-default-transform); }
	.animate-stagger.animate-fade-up > *    { transform: translateY(var(--animate-distance)); }
	.animate-stagger.animate-fade-down > *  { transform: translateY(calc(var(--animate-distance) * -1)); }
	.animate-stagger.animate-fade-left > *  { transform: translateX(var(--animate-distance)); }
	.animate-stagger.animate-fade-right > * { transform: translateX(calc(var(--animate-distance) * -1)); }
	.animate-stagger.animate-zoom-in > *    { transform: scale(var(--animate-zoom)); }
	.animate-stagger.animate-zoom-out > *   { transform: scale(calc(2 - var(--animate-zoom))); }

	.animate-stagger > .is-visible {
		opacity: 1;
		transform: none;
	}
}

/* --- DURATION modifiers (plain classes, no gate needed) --- */
.animate-fast   { --animate-duration: 0.6s; }
.animate-slow   { --animate-duration: 1.5s; }
.animate-slower { --animate-duration: 2.2s; }

/* --- manual per-element DELAYS (for hand-sequencing without a container) --- */
.animate-delay-1 { --animate-delay: 150ms; }
.animate-delay-2 { --animate-delay: 300ms; }
.animate-delay-3 { --animate-delay: 450ms; }
.animate-delay-4 { --animate-delay: 600ms; }
.animate-delay-5 { --animate-delay: 800ms; }
.animate-delay-6 { --animate-delay: 1000ms; }

/* --- STAGGER cascade speed (gap between children) --- */
.animate-stagger.animate-stagger-fast   { --animate-stagger-delay: 150ms; }
.animate-stagger.animate-stagger-slow   { --animate-stagger-delay: 500ms; }
.animate-stagger.animate-stagger-slower { --animate-stagger-delay: 700ms; }

/* --- TRANSFORM ORIGIN helpers ---
   Mainly useful for zoom on off-centre elements (e.g. short, left-aligned text
   that otherwise appears to zoom "from the left"). Set on the element, or on a
   stagger container to apply to all its children. */
.animate-origin-center { --animate-origin: center; }
.animate-origin-left   { --animate-origin: left center; }
.animate-origin-right  { --animate-origin: right center; }
.animate-origin-top    { --animate-origin: center top; }
.animate-origin-bottom { --animate-origin: center bottom; }

/* ===========================================================================
   2) SCROLL-DRIVEN EFFECTS (animate-scroll-*) — pure CSS, no JavaScript
   --------------------------------------------------------------------------
   These scrub WITH the scroll: progress is tied to the element's position, so
   the effect plays out as you scroll it into view (and reverses on the way
   back). The range runs from --animate-scroll-start to --animate-scroll-end;
   the default finishes around when the element is centred, so the effect is
   still visibly happening as you arrive at it (not over before it appears).

   Supported in Chromium and Safari. Firefox currently needs a flag, so the
   whole block is wrapped in @supports: where it's unsupported, the rules are
   ignored and the element simply shows normally (graceful fallback).
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {

		.animate-scroll-fade,
		.animate-scroll-fade-up,
		.animate-scroll-fade-down,
		.animate-scroll-fade-left,
		.animate-scroll-fade-right,
		.animate-scroll-zoom,
		.animate-scroll-zoom-out {
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: var(--animate-scroll-start) var(--animate-scroll-end);
			transform-origin: var(--animate-origin);
		}

		.animate-scroll-fade       { animation-name: animate-scroll-fade; }
		.animate-scroll-fade-up    { animation-name: animate-scroll-fade-up; }
		.animate-scroll-fade-down  { animation-name: animate-scroll-fade-down; }
		.animate-scroll-fade-left  { animation-name: animate-scroll-fade-left; }
		.animate-scroll-fade-right { animation-name: animate-scroll-fade-right; }
		.animate-scroll-zoom       { animation-name: animate-scroll-zoom; }
		.animate-scroll-zoom-out   { animation-name: animate-scroll-zoom-out; }

		@keyframes animate-scroll-fade {
			from { opacity: 0; }
			to   { opacity: 1; }
		}
		@keyframes animate-scroll-fade-up {
			from { opacity: 0; transform: translateY(var(--animate-scroll-distance)); }
			to   { opacity: 1; transform: none; }
		}
		@keyframes animate-scroll-fade-down {
			from { opacity: 0; transform: translateY(calc(var(--animate-scroll-distance) * -1)); }
			to   { opacity: 1; transform: none; }
		}
		@keyframes animate-scroll-fade-left {
			from { opacity: 0; transform: translateX(var(--animate-scroll-distance)); }
			to   { opacity: 1; transform: none; }
		}
		@keyframes animate-scroll-fade-right {
			from { opacity: 0; transform: translateX(calc(var(--animate-scroll-distance) * -1)); }
			to   { opacity: 1; transform: none; }
		}
		@keyframes animate-scroll-zoom {
			from { opacity: 0; transform: scale(var(--animate-zoom)); }
			to   { opacity: 1; transform: none; }
		}
		@keyframes animate-scroll-zoom-out {
			from { opacity: 0; transform: scale(calc(2 - var(--animate-zoom))); }
			to   { opacity: 1; transform: none; }
		}
	}
}

/* make a scroll-driven effect even more gradual (longer scrub) */
.animate-scroll-long   { --animate-scroll-end: cover 75%; }
.animate-scroll-longer { --animate-scroll-end: cover 90%; }