/**
 * Shared @keyframes definitions for the theme.
 *
 * Consolidated out of individual module stylesheets — @keyframes names are
 * global regardless of which file declares them, so keeping them scattered
 * risked silent duplicate-name collisions across modules.
 */

/* Used by modules/hero-breadcrumb/hero-breadcrumb.css */
@keyframes hero-line-bottom-in {
	from {
		opacity: 0;
		transform: translate(-100px, 160px) rotate(-32deg);
	}

	to {
		opacity: 0.5;
		transform: translate(0, 0) rotate(-32deg);
	}
}

@keyframes hero-line-top-in {
	from {
		opacity: 0;
		transform: translate(100px, -160px) rotate(-32deg);
	}

	to {
		opacity: 0.5;
		transform: translate(0, 0) rotate(-32deg);
	}
}

/* Used by modules/hero/hero.css */
@keyframes image-reveal-up {
	to {
		clip-path: polygon(
			860px 0,
			100% 0,
			100% 100%,
			70px 100%
		);
	}
}

@keyframes image-slide-up {
	from {
		transform: translateY(100px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes hero-image-up {
	from {
		opacity: 0;
		transform: translateX(80px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

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

@keyframes hero-red-up {
	from {
		opacity: 0;
		transform: translateY(100%) rotate(var(--rot-d));
	}
	to {
		opacity: 0.35;
		transform: translateY(0) rotate(var(--rot-d));
	}
}

@keyframes hero-grey-down {
	from {
		opacity: 0;
		transform: translateY(-100%) rotate(var(--rot-d));
	}
	to {
		opacity: 0.35;
		transform: translateY(0) rotate(var(--rot-d));
	}
}

@keyframes hero-red-2 {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 0.35;
		transform: translateX(35px);
	}
}

@keyframes hero-grey-2 {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 0.35;
		transform: translateX(70px);
	}
}

@keyframes red-line-up {
	from {
		transform: translateY(100%) rotate(var(--rot-d));
	}

	to {
		transform: translateY(0) rotate(var(--rot-d));
	}
}

@keyframes grey-line-down {
	from {
		transform: translateY(-100%) rotate(var(--rot-d));
	}

	to {
		transform: translateY(0) rotate(var(--rot-d));
	}
}

/*
 * Scroll-reveal for repeater/card items (assets/js/site.js wires every
 * .box-item with an IntersectionObserver + MutationObserver). The class
 * goes on the .box-item itself when it scrolls into view — NOT on a
 * .box-group ancestor — so the reveal selector must match .box-item.in-view
 * directly, not ".box-group.in-view .box-item".
 */
.box-item {
	opacity: 0;
	transform: translateY(40px);

	transition:
		opacity 0.3s ease,
		transform 0.3s ease;

	transition-delay: calc(var(--i, 0) * 10ms);
}

.box-item.in-view {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.box-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}