/*
 * Animations ported from app/globals.css + tailwind.config.ts.
 * All keyframes wrapped in `prefers-reduced-motion: no-preference` per WCAG 2.3.3.
 */

@layer animations {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes fadeIn {
			0%   { opacity: 0; }
			100% { opacity: 1; }
		}

		@keyframes fadeInUp {
			0%   { opacity: 0; transform: translateY(20px); }
			100% { opacity: 1; transform: translateY(0); }
		}

		@keyframes fadeInRow {
			from { opacity: 0; transform: translateY(6px); }
			to   { opacity: 1; transform: translateY(0); }
		}

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

		@keyframes drawLine {
			to { stroke-dashoffset: 0; }
		}

		@keyframes routeTravel {
			0%   { stroke-dashoffset: 200; }
			100% { stroke-dashoffset: 0; }
		}

		@keyframes travelRoute {
			0%   { offset-distance: 0%;   opacity: 0; }
			5%   { opacity: 1; }
			95%  { opacity: 1; }
			100% { offset-distance: 100%; opacity: 0; }
		}

		@keyframes hubPulse {
			0%, 100% { r: 5; opacity: 1; }
			50%      { r: 7; opacity: 0.8; }
		}

		@keyframes shimmer {
			0%   { background-position: 200% center; }
			100% { background-position: -200% center; }
		}

		@keyframes travelConnector {
			from { left: 0;    opacity: 1; }
			to   { left: 100%; opacity: 0.4; }
		}

		@keyframes pulse-stage {
			0%, 100% { opacity: 1;    transform: scale(1); }
			50%      { opacity: 0.85; transform: scale(1.15); }
		}

		.fade-in       { animation: fadeIn 0.8s ease-out forwards; }
		.fade-in-up    { animation: fadeInUp 0.8s ease-out forwards; }
		.float         { animation: float 6s ease-in-out infinite; }
		.route-line    { stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawLine 2s ease-out forwards; }
		.freight-dot   { animation: travelRoute 4s linear infinite; }
		.hub-pulse     { animation: hubPulse 2s ease-in-out infinite; }
		.pulse-stage   { animation: pulse-stage 1.8s ease-in-out infinite; }
	}
}