/**
 * Scroll-triggered block animations.
 *
 * Add animation classes via the block "Additional CSS class(es)" field,
 * or choose an animation from the block Style panel (registered block styles).
 *
 * @package made-to-thrive-2026-base
 */

:root {
	--animate-duration: 1.15s;
	--animate-duration-fast: 0.75s;
	--animate-duration-slow: 1.5s;
	--animate-distance: 28px;
	--animate-distance-sm: 16px;
	--animate-stagger-step: 150ms;
	--animate-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Shared selectors: manual classes + registered block styles */
[class*="animate-fade"],
[class*="animate-scale"],
[class*="is-style-animate-fade"],
[class*="is-style-animate-scale"],
.animate-stagger,
.is-style-animate-stagger {
	will-change: opacity, transform;
}

.animate-fade-up,
.is-style-animate-fade-up,
.animate-fade-down,
.is-style-animate-fade-down,
.animate-fade-in,
.is-style-animate-fade-in,
.animate-fade-left,
.is-style-animate-fade-left,
.animate-fade-right,
.is-style-animate-fade-right,
.animate-scale-in,
.is-style-animate-scale-in {
	opacity: 0;
	transition:
		opacity var(--animate-duration) var(--animate-ease),
		transform var(--animate-duration) var(--animate-ease);
}

.animate-fade-up,
.is-style-animate-fade-up {
	transform: translate3d(0, var(--animate-distance), 0);
}

.animate-fade-down,
.is-style-animate-fade-down {
	transform: translate3d(0, calc(var(--animate-distance) * -1), 0);
}

.animate-fade-left,
.is-style-animate-fade-left {
	transform: translate3d(var(--animate-distance), 0, 0);
}

.animate-fade-right,
.is-style-animate-fade-right {
	transform: translate3d(calc(var(--animate-distance) * -1), 0, 0);
}

.animate-fade-in,
.is-style-animate-fade-in {
	transform: none;
}

.animate-scale-in,
.is-style-animate-scale-in {
	transform: scale(0.96);
}

.animate-fade-up.is-in-view,
.is-style-animate-fade-up.is-in-view,
.animate-fade-down.is-in-view,
.is-style-animate-fade-down.is-in-view,
.animate-fade-in.is-in-view,
.is-style-animate-fade-in.is-in-view,
.animate-fade-left.is-in-view,
.is-style-animate-fade-left.is-in-view,
.animate-fade-right.is-in-view,
.is-style-animate-fade-right.is-in-view,
.animate-scale-in.is-in-view,
.is-style-animate-scale-in.is-in-view {
	opacity: 1;
	transform: none;
}

/* Duration modifiers */
.animate-fast,
.is-style-animate-fast {
	--animate-duration: var(--animate-duration-fast);
}

.animate-slow,
.is-style-animate-slow {
	--animate-duration: var(--animate-duration-slow);
}

/* Delay modifiers (combine with any animation class) */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.35s; }
.animate-delay-4 { transition-delay: 0.5s; }
.animate-delay-5 { transition-delay: 0.65s; }
.animate-delay-6 { transition-delay: 0.8s; }
.animate-delay-7 { transition-delay: 0.95s; }
.animate-delay-8 { transition-delay: 1.1s; }
.animate-delay-9 { transition-delay: 1.25s; }
.animate-delay-10 { transition-delay: 1.4s; }

/* Manual delays override stagger timing on individual children */
.animate-stagger.is-in-view > *.animate-delay-1,
.is-style-animate-stagger.is-in-view > *.animate-delay-1 { transition-delay: 0.1s; }
.animate-stagger.is-in-view > *.animate-delay-2,
.is-style-animate-stagger.is-in-view > *.animate-delay-2 { transition-delay: 0.2s; }
.animate-stagger.is-in-view > *.animate-delay-3,
.is-style-animate-stagger.is-in-view > *.animate-delay-3 { transition-delay: 0.35s; }
.animate-stagger.is-in-view > *.animate-delay-4,
.is-style-animate-stagger.is-in-view > *.animate-delay-4 { transition-delay: 0.5s; }
.animate-stagger.is-in-view > *.animate-delay-5,
.is-style-animate-stagger.is-in-view > *.animate-delay-5 { transition-delay: 0.65s; }
.animate-stagger.is-in-view > *.animate-delay-6,
.is-style-animate-stagger.is-in-view > *.animate-delay-6 { transition-delay: 0.8s; }
.animate-stagger.is-in-view > *.animate-delay-7,
.is-style-animate-stagger.is-in-view > *.animate-delay-7 { transition-delay: 0.95s; }
.animate-stagger.is-in-view > *.animate-delay-8,
.is-style-animate-stagger.is-in-view > *.animate-delay-8 { transition-delay: 1.1s; }
.animate-stagger.is-in-view > *.animate-delay-9,
.is-style-animate-stagger.is-in-view > *.animate-delay-9 { transition-delay: 1.25s; }
.animate-stagger.is-in-view > *.animate-delay-10,
.is-style-animate-stagger.is-in-view > *.animate-delay-10 { transition-delay: 1.4s; }

/* Stagger children inside groups, columns, or grids */
.animate-stagger > *,
.is-style-animate-stagger > * {
	opacity: 0;
	transform: translate3d(0, var(--animate-distance-sm), 0);
	transition:
		opacity var(--animate-duration) var(--animate-ease),
		transform var(--animate-duration) var(--animate-ease);
}

.animate-stagger.is-in-view > *,
.is-style-animate-stagger.is-in-view > * {
	opacity: 1;
	transform: none;
}

.animate-stagger.is-in-view > *:nth-child(1),
.is-style-animate-stagger.is-in-view > *:nth-child(1) { transition-delay: calc(var(--animate-stagger-step) * 0); }
.animate-stagger.is-in-view > *:nth-child(2),
.is-style-animate-stagger.is-in-view > *:nth-child(2) { transition-delay: calc(var(--animate-stagger-step) * 1); }
.animate-stagger.is-in-view > *:nth-child(3),
.is-style-animate-stagger.is-in-view > *:nth-child(3) { transition-delay: calc(var(--animate-stagger-step) * 2); }
.animate-stagger.is-in-view > *:nth-child(4),
.is-style-animate-stagger.is-in-view > *:nth-child(4) { transition-delay: calc(var(--animate-stagger-step) * 3); }
.animate-stagger.is-in-view > *:nth-child(5),
.is-style-animate-stagger.is-in-view > *:nth-child(5) { transition-delay: calc(var(--animate-stagger-step) * 4); }
.animate-stagger.is-in-view > *:nth-child(6),
.is-style-animate-stagger.is-in-view > *:nth-child(6) { transition-delay: calc(var(--animate-stagger-step) * 5); }
.animate-stagger.is-in-view > *:nth-child(7),
.is-style-animate-stagger.is-in-view > *:nth-child(7) { transition-delay: calc(var(--animate-stagger-step) * 6); }
.animate-stagger.is-in-view > *:nth-child(8),
.is-style-animate-stagger.is-in-view > *:nth-child(8) { transition-delay: calc(var(--animate-stagger-step) * 7); }
.animate-stagger.is-in-view > *:nth-child(9),
.is-style-animate-stagger.is-in-view > *:nth-child(9) { transition-delay: calc(var(--animate-stagger-step) * 8); }
.animate-stagger.is-in-view > *:nth-child(10),
.is-style-animate-stagger.is-in-view > *:nth-child(10) { transition-delay: calc(var(--animate-stagger-step) * 9); }
.animate-stagger.is-in-view > *:nth-child(11),
.is-style-animate-stagger.is-in-view > *:nth-child(11) { transition-delay: calc(var(--animate-stagger-step) * 10); }
.animate-stagger.is-in-view > *:nth-child(12),
.is-style-animate-stagger.is-in-view > *:nth-child(12) { transition-delay: calc(var(--animate-stagger-step) * 11); }

/* Block editor: keep content visible while editing */
.editor-styles-wrapper [class*="animate-fade"],
.editor-styles-wrapper [class*="animate-scale"],
.editor-styles-wrapper [class*="is-style-animate-fade"],
.editor-styles-wrapper [class*="is-style-animate-scale"],
.editor-styles-wrapper .animate-stagger > *,
.editor-styles-wrapper .is-style-animate-stagger > * {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	[class*="animate-fade"],
	[class*="animate-scale"],
	[class*="is-style-animate-fade"],
	[class*="is-style-animate-scale"],
	.animate-stagger > *,
	.is-style-animate-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}