/* ==========================================================================
   CadExtra Animations
   ========================================================================== */

/* ─────────────────────────────────────────────
   Gear Rotations
   ───────────────────────────────────────────── */
@keyframes gearRotateCW {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes gearRotateCCW {
	from { transform: rotate(360deg); }
	to   { transform: rotate(0deg); }
}

/* One-shot: gear icon spins exactly one rotation on hover */
@keyframes gearSpin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────
   Fade In / Slide
   ───────────────────────────────────────────── */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-32px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(32px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ─────────────────────────────────────────────
   Glow Pulse (logo, CTA)
   ───────────────────────────────────────────── */
/* logoPulse removed — logo now uses a static drop-shadow in main.css */

@keyframes pulseGlow {
	0%, 100% {
		box-shadow: 0 0 8px rgba(0, 150, 255, 0.3);
	}
	50% {
		box-shadow: 0 0 24px rgba(0, 150, 255, 0.6);
	}
}

/* ─────────────────────────────────────────────
   Scroll Indicator
   ───────────────────────────────────────────── */
@keyframes bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%       { transform: translateX(-50%) translateY(8px); }
}

/* ─────────────────────────────────────────────
   Hero Content Entry Sequence
   ───────────────────────────────────────────── */
.hero-logo {
	animation: fadeInUp 0.7s ease both;
	animation-delay: 0.1s;
}

.hero-headline {
	animation: fadeInUp 0.7s ease both;
	animation-delay: 0.25s;
}

.hero-subline {
	animation: fadeInUp 0.7s ease both;
	animation-delay: 0.4s;
}

.hero-cta-group {
	animation: fadeInUp 0.7s ease both;
	animation-delay: 0.55s;
}

.hero-scroll-indicator {
	animation: bounce 2s ease-in-out infinite;
	animation-delay: 1s;
}

/* ─────────────────────────────────────────────
   Service Card Stagger (driven by --card-index CSS var)
   ───────────────────────────────────────────── */
.js-animate-card {
	transition-delay: calc(var(--card-index, 0) * 120ms);
}

/* ─────────────────────────────────────────────
   Shimmer on CTA buttons
   ───────────────────────────────────────────── */
/* Handled via .btn--shimmer::after in main.css */

/* ─────────────────────────────────────────────
   Page Transition (optional)
   ───────────────────────────────────────────── */
@keyframes pageEnter {
	from { opacity: 0; }
	to   { opacity: 1; }
}

body {
	animation: pageEnter 0.35s ease both;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.hero-canvas {
		display: none;
	}

	.gear-rotate-cw,
	.gear-rotate-ccw,
	.footer-gear-decoration,
	.contact-gear-deco,
	.hgear {
		animation: none !important;
	}
}