/* ═══════════════════════════════════════════════════════════════
   PAULS AUTOSERVICE — Animations (animations.css)
   NFS Unbound: Scroll-Reveal, Stencil-Spray, Speed-Lines
   ═══════════════════════════════════════════════════════════════ */

/* ─── Keyframes ─────────────────────────────────────────────────── */

@keyframes stencil-reveal {
	0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
	100% { clip-path: inset(0 0% 0 0);   opacity: 1; }
}

@keyframes fade-up {
	0%   { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes spray-splat {
	0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
	60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
	100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

@keyframes speed-line-dash {
	0%   { left: -200px; opacity: 0; }
	10%  { opacity: 0.4; }
	90%  { opacity: 0.4; }
	100% { left: 110%; opacity: 0; }
}

@keyframes bounce-down {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%       { transform: translateX(-50%) translateY(8px); }
}

@keyframes scroll-dot {
	0%   { top: 8px; opacity: 1; }
	80%  { top: 22px; opacity: 0; }
	100% { top: 8px; opacity: 0; }
}

@keyframes rough-shake {
	0%, 100% { transform: rotate(0deg); }
	25%       { transform: rotate(-1.5deg); }
	75%       { transform: rotate(1.5deg); }
}

@keyframes tag-draw {
	0%   { stroke-dashoffset: 600; opacity: 0; }
	20%  { opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes hero-line-in {
	0%   { width: 0; opacity: 0; }
	100% { width: 80px; opacity: 1; }
}

@keyframes pulse-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 29, 59, 0.15); }
	50%       { box-shadow: 0 0 0 12px rgba(0, 29, 59, 0); }
}

/* ─── Scroll-Reveal Base State ─────────────────────────────────── */
/* Applied by JS (IntersectionObserver) via .reveal class.          */

.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity   var(--duration-reveal) var(--ease-smooth),
		transform var(--duration-reveal) var(--ease-smooth);
}

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

.reveal--left {
	transform: translateX(-40px);
}
.reveal--left.is-visible {
	transform: translateX(0);
}

.reveal--right {
	transform: translateX(40px);
}
.reveal--right.is-visible {
	transform: translateX(0);
}

.reveal--scale {
	transform: scale(0.9);
}
.reveal--scale.is-visible {
	transform: scale(1);
}

/* Staggered children */
.reveal-stagger > * {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity   var(--duration-slow) var(--ease-smooth),
		transform var(--duration-slow) var(--ease-bounce);
}

.reveal-stagger.is-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0ms;   }
.reveal-stagger.is-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: 100ms; }
.reveal-stagger.is-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: 400ms; }

/* ─── Hero Title — Stencil Spray-In ────────────────────────────── */
.hero-title-animate {
	animation: stencil-reveal var(--duration-reveal) var(--ease-snap) both;
	animation-delay: 200ms;
}

.hero-subtitle-animate {
	animation: fade-up var(--duration-reveal) var(--ease-smooth) both;
	animation-delay: 500ms;
	max-width: none;
}

.hero-cta-animate {
	animation: spray-splat var(--duration-slow) var(--ease-bounce) both;
	animation-delay: 800ms;
}

/* ─── Stencil Underline — Animate on reveal ─────────────────────── */
.stencil-text.is-visible::after {
	animation: hero-line-in var(--duration-slow) var(--ease-snap) forwards;
}

/* ─── Service Card Hover ─────────────────────────────────────────── */
.service-card:hover .service-card__icon {
	animation: rough-shake 0.3s var(--ease-smooth);
}

/* ─── Pulse on CTA Button ────────────────────────────────────────── */
.btn-primary {
	animation: pulse-glow 3s infinite;
}

.btn-primary:hover {
	animation: none;
}

/* ─── Reduce Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.reveal,
	.reveal-stagger > * {
		opacity: 1;
		transform: none;
	}
}