/**
 * Home page motion: scroll reveal and desktop hover polish.
 * Loaded on the front page, the About page and the Auto Service page, after
 * home-visit.css, with assets/js/home-motion.js. The hero keeps its own
 * entrance (home-hero.css). Page-only hover rules use these tokens from
 * assets/css/about.css and assets/css/auto-service.css.
 *
 * Reuse on another page: enqueue both files and add data-reveal to the
 * elements that should fade in. Never put data-reveal on the hero or any
 * other element that is on screen at load, and never nest it.
 */

/* Motion tokens: tune everything here. */
:root {
	--vac-motion-duration: 0.7s;
	/* Same curve as the hero entrance, so every entrance on the page feels alike. */
	--vac-motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--vac-motion-distance: 20px;
	/* Read by home-motion.js: delay between items entering together, and its cap. */
	--vac-motion-stagger: 70ms;
	--vac-motion-stagger-max: 420ms;
	--vac-motion-hover: 0.35s;
	--vac-motion-color: 0.2s;
	--vac-motion-lift: -2px;
	--vac-motion-card-lift: -4px;
	--vac-motion-zoom: 1.05;
}

/* ------------------------------------------------------------------ */
/* Scroll reveal                                                       */
/* ------------------------------------------------------------------ */

/*
 * Hidden only once the script has added .vac-motion to <html>, and never in
 * print or with reduced motion. The reveal uses the translate property, so it
 * never fights the hover transforms below.
 */
@media screen and (prefers-reduced-motion: no-preference) {
	.vac-motion [data-reveal]:not(.is-revealed) {
		opacity: 0;
		translate: 0 var(--vac-motion-distance);
	}

	.vac-motion [data-reveal].is-revealed {
		animation: vac-reveal var(--vac-motion-duration) var(--vac-motion-ease) var(--vac-reveal-delay, 0ms) backwards;
	}
}

@keyframes vac-reveal {
	from {
		opacity: 0;
		translate: 0 var(--vac-motion-distance);
	}
}

/* ------------------------------------------------------------------ */
/* Hover polish: mouse and trackpad only, no movement with reduced motion */
/* ------------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	/* Buttons: smooth colour change and a small lift. Focus styles are unchanged. */
	.vac-hero__btn,
	.vac-insurance__btn,
	.vac-visit__btn {
		transition:
			background-color var(--vac-motion-color) ease,
			border-color var(--vac-motion-color) ease,
			color var(--vac-motion-color) ease,
			transform var(--vac-motion-hover) var(--vac-motion-ease);
	}

	.vac-hero__btn:hover,
	.vac-insurance__btn:hover,
	.vac-visit__btn:hover {
		transform: translateY(var(--vac-motion-lift));
	}

	.vac-process__link,
	.vac-home-services__all,
	.vac-warranty__link,
	.vac-reviews__link {
		transition: color var(--vac-motion-color) ease;
	}

	/* Service cards: lift, deeper shadow, slow zoom clipped by the card, arrow nudge. */
	.vac-home-services__card {
		transition:
			transform var(--vac-motion-hover) var(--vac-motion-ease),
			box-shadow var(--vac-motion-hover) var(--vac-motion-ease);
	}

	.vac-home-services__card:hover {
		transform: translateY(var(--vac-motion-card-lift));
		box-shadow: 0 22px 40px -20px color-mix(in srgb, var(--color-dark) 45%, transparent);
	}

	.vac-home-services__img {
		transition: transform 0.9s var(--vac-motion-ease);
	}

	.vac-home-services__card:hover .vac-home-services__img {
		transform: scale(var(--vac-motion-zoom));
	}

	.vac-home-services__arrow {
		transition: transform var(--vac-motion-hover) var(--vac-motion-ease);
	}

	.vac-home-services__card:hover .vac-home-services__arrow {
		transform: translateX(4px);
	}

	/* Review cards: a subtle lift on top of the existing shadow change. */
	.vac-reviews__card {
		transition:
			box-shadow 0.25s ease,
			transform var(--vac-motion-hover) var(--vac-motion-ease);
	}

	.vac-reviews__card:hover {
		transform: translateY(var(--vac-motion-lift));
	}

	/*
	 * One accent for process steps, warranty facts and insurer tiles:
	 * a thin red line that draws in from the left.
	 */
	.vac-process__num,
	.vac-warranty__point,
	.vac-insurance__tile {
		position: relative;
	}

	.vac-process__num::after,
	.vac-warranty__point::before,
	.vac-insurance__tile::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: 2px;
		background: var(--color-red);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.5s var(--vac-motion-ease);
	}

	.vac-process__num::after {
		bottom: 0;
	}

	/* Sits on the 2px dark rule above each fact. */
	.vac-warranty__point::before {
		top: -2px;
	}

	/* Covers the tile's bottom border. */
	.vac-insurance__tile::after {
		bottom: -1px;
		left: -1px;
		right: -1px;
	}

	.vac-process__step:hover .vac-process__num::after,
	.vac-warranty__point:hover::before,
	.vac-insurance__tile:hover::after {
		transform: scaleX(1);
	}
}