/**
 * Block Motion — CSS Animations
 * https://blockagency.co
 *
 * 100% CSS. Zero JavaScript for animations.
 * JS is only for IntersectionObserver triggers and text splitting.
 *
 * Scroll-driven: uses animation-timeline: view().
 * Dynamic @keyframes are generated per-block by PHP based on
 * user configuration (scale + opacity + blur combinations).
 * Unsupported browsers (~22%) see the element without animation.
 */

/* ── Spring easing presets ──
   ========================================================================== */

:root {
	--motion-easing: cubic-bezier(0.16, 1, 0.3, 1);

	--motion-spring-gentle: linear(
		0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%,
		0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%,
		1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001
	);
	--motion-spring-moderate: linear(
		0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%,
		0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%,
		1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%,
		0.995 71.2%, 1
	);
	--motion-spring-bouncy: linear(
		0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%,
		1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161,
		1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%,
		0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
		0.997 69.8%, 1.003 76.9%, 1
	);
	--motion-spring-snappy: linear(
		0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001,
		1.142 16%, 1.185, 1.209 19.5%, 1.215 21.4%, 1.209 23.5%,
		1.162 28.2%, 1.039 36.8%, 1.007 40.2%, 0.984, 0.968 47.1%,
		0.965 51.2%, 0.969 55.9%, 1.001 68.2%, 1.006 76.1%, 1
	);
}

/* ── Registered custom properties ──
   ========================================================================== */

@property --motion-duration {
	syntax: "<time>";
	inherits: false;
	initial-value: 0.6s;
}

@property --motion-distance {
	syntax: "<length>";
	inherits: false;
	initial-value: 32px;
}

@property --motion-delay {
	syntax: "<time>";
	inherits: false;
	initial-value: 0s;
}

@property --motion-stagger {
	syntax: "<time>";
	inherits: false;
	initial-value: 0.1s;
}

/* ── Reveal animations ──
   ========================================================================== */

.fade-in,
.slide-up,
.slide-down,
.slide-left,
.slide-right,
.scale-in,
.scale-out,
.blur-in,
.tilt-up,
.clip-reveal {
	--motion-duration: 0.6s;
	--motion-distance: 32px;
	--motion-delay: 0s;
	opacity: 0;
	transition:
		opacity var(--motion-duration) var(--motion-easing),
		transform var(--motion-duration) var(--motion-easing);
	transition-delay: var(--motion-delay);
}

.slide-up    { transform: translateY(var(--motion-distance)); }
.slide-down  { transform: translateY(calc(var(--motion-distance) * -1)); }
.slide-left  { transform: translateX(calc(var(--motion-distance) * -1)); }
.slide-right { transform: translateX(var(--motion-distance)); }

.scale-in {
	--motion-scale: 0.96;
	transform: scale(var(--motion-scale));
}

.scale-out {
	--motion-scale: 1.06;
	transform: scale(var(--motion-scale));
}

.tilt-up {
	--motion-rotate: 4deg;
	transform: translateY(var(--motion-distance)) perspective(800px) rotateX(var(--motion-rotate));
	transform-origin: bottom center;
}

.blur-in {
	--motion-blur: 8px;
	filter: blur(var(--motion-blur));
	transition:
		opacity var(--motion-duration) var(--motion-easing),
		transform var(--motion-duration) var(--motion-easing),
		filter var(--motion-duration) var(--motion-easing);
	transition-delay: var(--motion-delay);
}

.clip-reveal {
	clip-path: inset(0 0 100% 0);
	transition:
		opacity var(--motion-duration) var(--motion-easing),
		transform var(--motion-duration) var(--motion-easing),
		clip-path var(--motion-duration) var(--motion-easing);
	transition-delay: var(--motion-delay);
}

/* Visible states */

.fade-in.is-visible,
.slide-up.is-visible,
.slide-down.is-visible,
.slide-left.is-visible,
.slide-right.is-visible,
.scale-in.is-visible,
.scale-out.is-visible,
.tilt-up.is-visible {
	opacity: 1;
	transform: none;
}

.blur-in.is-visible {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

.clip-reveal.is-visible {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 0 0);
}

/* ── On-load ──
   ========================================================================== */

.animate-load {
	--motion-duration: 0.6s;
	--motion-delay: 0s;
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--motion-duration) var(--motion-easing),
		transform var(--motion-duration) var(--motion-easing);
	transition-delay: var(--motion-delay);
}

.animate-load.is-ready {
	opacity: 1;
	transform: none;
}

/* ── Delay utilities ──
   ========================================================================== */

.delay-1 { --motion-delay: 0.1s; }
.delay-2 { --motion-delay: 0.2s; }
.delay-3 { --motion-delay: 0.3s; }
.delay-4 { --motion-delay: 0.4s; }
.delay-5 { --motion-delay: 0.5s; }

/* ── Counters ──
   ========================================================================== */

.counter {
	--motion-duration: 0.6s;
	--motion-delay: 0s;
	opacity: 0;
	transition: opacity var(--motion-duration) var(--motion-easing);
	transition-delay: var(--motion-delay);
}

.counter.is-visible { opacity: 1; }

/* ── Text reveals ──
   ========================================================================== */

.text-reveal-lines .bm-line {
	--motion-duration: 0.6s;
	display: block;
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity var(--motion-duration) var(--motion-easing),
		transform var(--motion-duration) var(--motion-easing);
}

.text-reveal-lines.is-visible .bm-line { opacity: 1; transform: none; }

.text-reveal-words .bm-word {
	--motion-duration: 0.6s;
	display: inline-block;
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity var(--motion-duration) var(--motion-easing),
		transform var(--motion-duration) var(--motion-easing);
}

.text-reveal-words.is-visible .bm-word { opacity: 1; transform: none; }
.text-reveal-words .bm-word + .bm-word { margin-left: 0.25em; }

/* ══════════════════════════════════════════════════════════════════════
   SCROLL-DRIVEN ANIMATIONS
   Base classes only. Dynamic @keyframes are generated per-block
   by PHP (block_motion_render_block_filter) based on user config.
   ══════════════════════════════════════════════════════════════════════ */

.scroll-scale { overflow: hidden; }

/* Fallback: elements visible by default for unsupported browsers */
.scroll-scale,
.scroll-parallax,
.scroll-opacity,
.scroll-blur {
	/* Dynamic animation applied via inline <style> from PHP */
}

/* ── Reduced motion ──
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.fade-in, .slide-up, .slide-down, .slide-left, .slide-right,
	.scale-in, .scale-out, .blur-in, .tilt-up, .clip-reveal,
	.animate-load, .counter,
	.text-reveal-lines .bm-line, .text-reveal-words .bm-word {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.scroll-scale, .scroll-parallax, .scroll-opacity, .scroll-blur {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
	}
}