/**
 * Shared entrance and scroll-reveal motion.
 *
 * The service-page selectors establish the hidden state from the first CSS
 * paint. JavaScript only changes the final state, preventing a visible flash
 * before initialization.
 */

@keyframes vac-hero-enter {
	from {
		opacity: 0;
		transform: translate3d(0, 8px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes vac-section-enter {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes vac-section-enter-left {
	from {
		opacity: 0;
		transform: translate3d(-16px, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes vac-section-enter-right {
	from {
		opacity: 0;
		transform: translate3d(16px, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Hero targets are hidden before animation.js executes. */
.vac-services-page > .vac-services__hero,
:is(
	.vac-collision-page,
	.vac-paint-page,
	.vac-pdr-page,
	.vac-frame-page,
	.vac-claims-page,
	.vac-detailing-page,
	.vac-ev-body-page
) > section[class*="__hero"] {
	visibility: hidden;
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}

.vac-services-page > .vac-services__hero.is-visible,
:is(
	.vac-collision-page,
	.vac-paint-page,
	.vac-pdr-page,
	.vac-frame-page,
	.vac-claims-page,
	.vac-detailing-page,
	.vac-ev-body-page
) > section[class*="__hero"].is-visible {
	visibility: visible;
	animation: vac-hero-enter 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Standalone service sections and hub catalog items reveal independently. */
:is(
	.vac-collision-page,
	.vac-paint-page,
	.vac-pdr-page,
	.vac-frame-page,
	.vac-claims-page,
	.vac-detailing-page,
	.vac-ev-body-page
) > section:not([class*="__hero"]),
.vac-services-page .vac-services__catalog-head,
.vac-services-page .vac-services__item,
.reveal,
.reveal-left,
.reveal-right {
	visibility: hidden;
	opacity: 0;
}

:is(
	.vac-collision-page,
	.vac-paint-page,
	.vac-pdr-page,
	.vac-frame-page,
	.vac-claims-page,
	.vac-detailing-page,
	.vac-ev-body-page
) > section:not([class*="__hero"]),
.vac-services-page .vac-services__catalog-head,
.vac-services-page .vac-services__item,
.reveal {
	transform: translate3d(0, 12px, 0);
}

.reveal-left {
	transform: translate3d(-16px, 0, 0);
}

.reveal-right {
	transform: translate3d(16px, 0, 0);
}

:is(
	.vac-collision-page,
	.vac-paint-page,
	.vac-pdr-page,
	.vac-frame-page,
	.vac-claims-page,
	.vac-detailing-page,
	.vac-ev-body-page
) > section:not([class*="__hero"]).is-visible,
.vac-services-page .vac-services__catalog-head.is-visible,
.vac-services-page .vac-services__item.is-visible,
.reveal.revealed {
	visibility: visible;
	animation: vac-section-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reveal-left.revealed {
	visibility: visible;
	animation: vac-section-enter-left 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reveal-right.revealed {
	visibility: visible;
	animation: vac-section-enter-right 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reveal-delay-1 {
	animation-delay: 80ms !important;
}

.reveal-delay-2 {
	animation-delay: 160ms !important;
}

.reveal-delay-3 {
	animation-delay: 240ms !important;
}

.reveal-delay-4 {
	animation-delay: 320ms !important;
}

/* Motion is decorative. Keep all content immediately readable when reduced. */
@media (prefers-reduced-motion: reduce) {
	.vac-services-page > .vac-services__hero,
	:is(
		.vac-collision-page,
		.vac-paint-page,
		.vac-pdr-page,
		.vac-frame-page,
		.vac-claims-page,
		.vac-detailing-page,
		.vac-ev-body-page
	) > section,
	.vac-services-page .vac-services__catalog-head,
	.vac-services-page .vac-services__item,
	.reveal,
	.reveal-left,
	.reveal-right {
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* Progressive fallback when scripting is explicitly unavailable. */
@media (scripting: none) {
	.vac-services-page > .vac-services__hero,
	:is(
		.vac-collision-page,
		.vac-paint-page,
		.vac-pdr-page,
		.vac-frame-page,
		.vac-claims-page,
		.vac-detailing-page,
		.vac-ev-body-page
	) > section,
	.vac-services-page .vac-services__catalog-head,
	.vac-services-page .vac-services__item,
	.reveal,
	.reveal-left,
	.reveal-right {
		visibility: visible;
		opacity: 1;
		transform: none;
		animation: none;
	}
}