/**
 * pndl Animations
 * Scroll-triggered entry animations with staggered children.
 *
 * Selectors are gated on `html.pndl-js-ready` so that if JavaScript fails to
 * load, nothing is hidden — elements simply display normally without animation.
 */

/* ----------------------------------------------------------------
   Base transition setup
   ---------------------------------------------------------------- */
html.pndl-js-ready .pndl-anim .pndl-item {
	transition-property: opacity, transform, filter, clip-path;
	transition-duration: var(--pndl-base-duration, 0.9s);
	transition-timing-function: var(--pndl-base-easing, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Scope will-change to items that have not yet animated,
   so we don't keep compositing layers alive forever. */
html.pndl-js-ready .pndl-anim:not(.is-playing) .pndl-item {
	will-change: opacity, transform;
}

/* ----------------------------------------------------------------
   1 — Soft Rise
   Gentle 24px lift with easeOutQuint. The default workhorse.
   ---------------------------------------------------------------- */
html.pndl-js-ready .pndl-anim.anim-soft-rise .pndl-item {
	opacity: 0;
	transform: translateY(24px);
}
html.pndl-js-ready .pndl-anim.anim-soft-rise.is-playing .pndl-item {
	opacity: 1;
	transform: translateY(0);
}

/* ----------------------------------------------------------------
   2 — Blur Focus
   Comes into focus from a soft blur. Cinematic, premium feel.
   ---------------------------------------------------------------- */
html.pndl-js-ready .pndl-anim.anim-blur-focus .pndl-item {
	opacity: 0;
	filter: blur(14px);
	transform: translateY(8px);
}
html.pndl-js-ready .pndl-anim.anim-blur-focus.is-playing .pndl-item {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
	transition-duration: 1s;
}

/* ----------------------------------------------------------------
   3 — Clip Reveal
   Unveils from the bottom like a curtain lifting. Editorial.
   ---------------------------------------------------------------- */
html.pndl-js-ready .pndl-anim.anim-clip-reveal .pndl-item {
	clip-path: inset(0 0 100% 0);
	transform: translateY(20px);
}
html.pndl-js-ready .pndl-anim.anim-clip-reveal.is-playing .pndl-item {
	clip-path: inset(0 0 0% 0);
	transform: translateY(0);
	transition-duration: 1.1s;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------------
   4 — Scale Whisper
   Subtle 96% → 100% scale with a hint of blur. Minimalist.
   ---------------------------------------------------------------- */
html.pndl-js-ready .pndl-anim.anim-scale-whisper .pndl-item {
	opacity: 0;
	transform: scale(0.96);
	filter: blur(3px);
}
html.pndl-js-ready .pndl-anim.anim-scale-whisper.is-playing .pndl-item {
	opacity: 1;
	transform: scale(1);
	filter: blur(0);
	transition-duration: 1s;
}

/* ----------------------------------------------------------------
   5 — Side Drift
   Slides in from the left. Works well for secondary sections.
   ---------------------------------------------------------------- */
html.pndl-js-ready .pndl-anim.anim-side-drift .pndl-item {
	opacity: 0;
	transform: translateX(-28px);
}
html.pndl-js-ready .pndl-anim.anim-side-drift.is-playing .pndl-item {
	opacity: 1;
	transform: translateX(0);
}

/* ----------------------------------------------------------------
   6 — Settle
   Descends gently from above with a slight scale-down.
   ---------------------------------------------------------------- */
html.pndl-js-ready .pndl-anim.anim-settle .pndl-item {
	opacity: 0;
	transform: translateY(-18px) scale(1.02);
	filter: blur(6px);
}
html.pndl-js-ready .pndl-anim.anim-settle.is-playing .pndl-item {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
	transition-duration: 1s;
}

/* ----------------------------------------------------------------
   Respect reduced motion preferences — fully disable motion,
   show items in their final state.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.pndl-js-ready .pndl-anim .pndl-item,
	html.pndl-js-ready .pndl-anim.is-playing .pndl-item {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}

/* ----------------------------------------------------------------
   Elementor editor — force items visible so authors aren't
   fighting hidden elements while editing.
   ---------------------------------------------------------------- */
body.elementor-editor-active .pndl-anim .pndl-item {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	clip-path: none !important;
	transition: none !important;
}

/* Internal helper — used by the JS debug loop to snap items back to
   their hidden state without a reverse transition. Applied for one
   frame, then removed. Do not add this class manually. */
html.pndl-js-ready .pndl-anim.pndl-no-transition .pndl-item {
	transition: none !important;
}