/*
 * AT Logistics · freight hero scenes  v1.3.1
 *
 * [atl_freight mode="air|sea"] on the Air freight and Sea freight pages. Loaded only on
 * pages that use the shortcode, together with atl-freight-air.css or atl-freight-sea.css.
 * Same contract as atl-motion.css (docs/design-system.md#motion):
 * - The scene is complete without JS: a still frame with the plane or ship mid-route.
 * - It moves only under html.atl-motion with no reduced-motion preference.
 * - Transform and opacity only; paused off-screen or in a hidden tab (.is-paused).
 * - Decorative layers never take clicks; the stage reserves its height, so nothing shifts.
 */

.atl-freight {
	position: relative;
	width: 100%;
	pointer-events: none;
}

.atl-freight__stage {
	position: relative;
	aspect-ratio: 1200 / 250;
	contain: layout paint;
}

/* Route layers use stage percent (viewBox 0 0 100 100, stretched), so the craft keyframes
   fit every width; strokes keep their width when stretched. */
.atl-freight__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.atl-freight__layer * { vector-effect: non-scaling-stroke; }

.atl-freight__route {
	fill: none;
	stroke: var(--e-global-color-signal, #0DC600);
	stroke-opacity: .5;
	stroke-width: 1.5;
	stroke-dasharray: 3 7;
	stroke-linecap: round;
}

.atl-freight__haze {
	fill: none;
	stroke: rgba(var(--atl-signal-rgb), .08);
	stroke-width: 8;
	stroke-linecap: round;
}

/* Pins: USA (grey) and Guyana (green, with a halo). Positions are generated per scene. */
.atl-freight__pin,
.atl-freight__arrive {
	position: absolute;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
}

.atl-freight__pin svg,
.atl-freight__arrive svg { display: block; width: 100%; height: 100%; overflow: visible; }

.atl-freight__pin-dot { fill: var(--e-global-color-mutedd, #A7B8AE); }
.atl-freight__pin-ring { fill: none; stroke: rgba(167, 184, 174, .4); stroke-width: 1; }
.atl-freight__pin--to .atl-freight__pin-dot { fill: var(--e-global-color-signal, #0DC600); }
.atl-freight__pin--to .atl-freight__pin-ring { stroke: rgba(var(--atl-signal-rgb), .6); }
.atl-freight__pulse { fill: rgba(var(--atl-signal-rgb), .4); }
.atl-freight__arrive { opacity: 0; }

/* Craft: a stage-sized carrier moves to the route point with translate(%), a zero-size
   turn element sets the heading, and the drawing is centred on that point. */
.atl-freight__carrier {
	position: absolute;
	inset: 0;
	transform-origin: 0 0;
}

.atl-freight__turn,
.atl-freight__bob {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	transform-origin: 0 0;
}

.atl-freight__craft {
	position: absolute;
	display: block;
	overflow: visible;
}

.atl-motion .atl-freight:not(.is-in-view) .atl-freight__carrier { opacity: 0; }

.atl-freight__ends {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--e-global-color-mutedd, #A7B8AE);
}

.atl-freight__end--to { color: var(--e-global-color-signal, #0DC600); }

@media (max-width: 767px) {
	.atl-freight__stage { aspect-ratio: 600 / 280; }
	.atl-freight__pin,
	.atl-freight__arrive { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
}

@media (prefers-reduced-motion: no-preference) {
	.atl-freight.is-paused * { animation-play-state: paused !important; }
}