/**
 * Keyframes + the scroll-reveal contract used by data-reveal elements
 * (toggled in assets/js/main.js via IntersectionObserver).
 */

[data-reveal] {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
	transition: opacity var(--duration-slow) var(--ease-standard),
		transform var(--duration-slow) var(--ease-standard);
	transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes ticker-scroll-y {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-50%);
	}
}

@keyframes icon-collapse-y {
	0%,
	22% {
		transform: scaleY(1);
		opacity: 1;
		color: var(--color-border);
		fill-opacity: 0;
	}
	27% {
		transform: scaleY(0.08);
		opacity: 1;
		color: var(--color-accent-blue);
		fill-opacity: 0;
	}
	32%,
	48% {
		transform: scaleY(0.08);
		opacity: 0;
		fill-opacity: 0;
	}
	55% {
		transform: scaleY(0.5);
		opacity: 1;
		color: var(--color-border);
		fill-opacity: 0.5;
	}
	62%,
	100% {
		transform: scaleY(1);
		opacity: 1;
		color: var(--color-border);
		fill-opacity: 0;
	}
}

@keyframes icon-collapse-x {
	0%,
	22% {
		transform: scaleX(1);
		opacity: 1;
		color: var(--color-border);
	}
	27% {
		transform: scaleX(0.08);
		opacity: 1;
		color: var(--color-accent-blue);
	}
	32%,
	48% {
		transform: scaleX(0.08);
		opacity: 0;
	}
	55% {
		transform: scaleX(0.5);
		opacity: 1;
		color: var(--color-accent-red);
	}
	62%,
	100% {
		transform: scaleX(1);
		opacity: 1;
		color: var(--color-border);
	}
}

@keyframes icon-x-wing {
	0%,
	12% {
		opacity: 0;
		transform: rotate(0deg);
	}
	17% {
		opacity: 1;
		transform: rotate(var(--wing-angle));
	}
	24%,
	100% {
		opacity: 0;
		transform: rotate(0deg);
	}
}

@keyframes icon-bar-side {
	0%,
	15% {
		opacity: 0;
		transform: scaleY(0.4);
	}
	45%,
	70% {
		opacity: 1;
		transform: scaleY(1);
	}
	100% {
		opacity: 0;
		transform: scaleY(0.4);
	}
}

@keyframes icon-gauge-fade {
	0%,
	20% {
		opacity: 1;
	}
	45%,
	60% {
		opacity: 0.2;
	}
	85%,
	100% {
		opacity: 1;
	}
}

@keyframes icon-tick-orbit {
	to {
		transform: rotate(360deg);
	}
}

@keyframes shimmer-sweep {
	0% {
		opacity: 1;
		background-position: 200% 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0.9;
		background-position: 0 0;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.glow-cta {
	position: absolute;
	inset: -20% -10%;
	background: var(--glow-cta);
	z-index: -1;
	animation: fade-in var(--duration-slow) var(--ease-standard) both;
}

.cta-burst {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}