/* ─────────────────────────────────────────────
   Biototal — Scroll Animations
   Usage: add one of these classes to any block
   via "Additional CSS class" in the WP editor.

   animate-fade-in
   animate-fade-up
   animate-fade-down
   animate-fade-left
   animate-fade-right
   animate-scale-up
   animate-scale-down

   Modifier (optional, add alongside):
   animate-delay-1   → 100ms delay
   animate-delay-2   → 200ms delay
   animate-delay-3   → 300ms delay
   animate-delay-4   → 400ms delay
   animate-delay-5   → 500ms delay

   For staggered children (apply to the parent):
   animate-stagger-children
────────────────────────────────────────────── */

/* Base state — hidden before intersection */
.animate-fade-in,
.animate-fade-up,
.animate-fade-down,
.animate-fade-left,
.animate-fade-right,
.animate-scale-up,
.animate-scale-down {
	opacity: 0;
	transition:
		opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}

/* Per-animation starting transforms */
.animate-fade-up    { transform: translateY(28px); }
.animate-fade-down  { transform: translateY(-28px); }
.animate-fade-left  { transform: translateX(28px); }
.animate-fade-right { transform: translateX(-28px); }
.animate-scale-up   { transform: scale(0.94); }
.animate-scale-down { transform: scale(1.06); }

/* Triggered state — added by JS when in view */
.animate-fade-in.is-visible,
.animate-fade-up.is-visible,
.animate-fade-down.is-visible,
.animate-fade-left.is-visible,
.animate-fade-right.is-visible,
.animate-scale-up.is-visible,
.animate-scale-down.is-visible {
	opacity: 1;
	transform: none;
}

/* Delay modifiers */
.animate-delay-1 { transition-delay: 100ms; }
.animate-delay-2 { transition-delay: 200ms; }
.animate-delay-3 { transition-delay: 300ms; }
.animate-delay-4 { transition-delay: 400ms; }
.animate-delay-5 { transition-delay: 500ms; }

/* Staggered children
   Parent gets .animate-stagger-children
   Each direct child is automatically staggered */
.animate-stagger-children > * {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}

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

/* Stagger delay per child (up to 12) */
.animate-stagger-children.is-visible > *:nth-child(1)  { transition-delay:  50ms; }
.animate-stagger-children.is-visible > *:nth-child(2)  { transition-delay: 120ms; }
.animate-stagger-children.is-visible > *:nth-child(3)  { transition-delay: 190ms; }
.animate-stagger-children.is-visible > *:nth-child(4)  { transition-delay: 260ms; }
.animate-stagger-children.is-visible > *:nth-child(5)  { transition-delay: 330ms; }
.animate-stagger-children.is-visible > *:nth-child(6)  { transition-delay: 400ms; }
.animate-stagger-children.is-visible > *:nth-child(7)  { transition-delay: 470ms; }
.animate-stagger-children.is-visible > *:nth-child(8)  { transition-delay: 540ms; }
.animate-stagger-children.is-visible > *:nth-child(9)  { transition-delay: 610ms; }
.animate-stagger-children.is-visible > *:nth-child(10) { transition-delay: 680ms; }
.animate-stagger-children.is-visible > *:nth-child(11) { transition-delay: 750ms; }
.animate-stagger-children.is-visible > *:nth-child(12) { transition-delay: 820ms; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.animate-fade-in,
	.animate-fade-up,
	.animate-fade-down,
	.animate-fade-left,
	.animate-fade-right,
	.animate-scale-up,
	.animate-scale-down,
	.animate-stagger-children > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}