/*
 * Scroll Animations — observatorio-cero-theme
 *
 * Automatic fade-in scroll animations driven by IntersectionObserver (view-scroll-animations.js).
 * All transitions use design-token durations from theme.json and respect prefers-reduced-motion.
 * Opt-out available via Gutenberg block style 'is-style-no-fade' or class '.oc-no-fade'.
 */

/* ── Animation candidate initial state (only active when JS is initialized) ── */
html.oc-animations-ready .oc-animate-target {
	opacity: 0;
	transform: translateY(var(--wp--custom--scroll-animations--translate-y, 1.5rem));
	transition:
		opacity var(--wp--custom--scroll-animations--duration, 0.7s) ease-out,
		transform var(--wp--custom--scroll-animations--duration, 0.7s) ease-out;
	will-change: opacity, transform;
}

/* ── Visible state (triggered when element enters viewport) ── */
html.oc-animations-ready .oc-animate-target.oc-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* ── Opt-out: Gutenberg block style 'is-style-no-fade' & utility class '.oc-no-fade' ── */
.is-style-no-fade,
.oc-no-fade,
[data-no-fade],
.is-style-no-fade *,
.oc-no-fade *,
[data-no-fade] * {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ── Reduced motion: instant display ── */
@media (prefers-reduced-motion: reduce) {
	.oc-animate-target {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}