/*
 * AT Logistics · Sea freight hero scene  v1.3.1  ([atl_freight mode="sea"], with atl-freight.css)
 *
 * A container ship sails the dashed sea lane from the USA and docks in Guyana every
 * 20 s, the same rhythm as the ships in the home page's voyage scene, over slow
 * wave lines. Still frame: the ship mid-voyage. Low-power devices keep the ship
 * but drop the waves' drift (.is-lite).
 */

.atl-freight--sea { --atl-craft-w: clamp(84px, 11vw, 140px); }

/* Drawing: viewBox -42 -30 64 44, origin on the waterline. */
.atl-freight--sea .atl-freight__craft {
	width: var(--atl-craft-w);
	height: calc(var(--atl-craft-w) * .6875);
	left: calc(var(--atl-craft-w) * -.65625);
	top: calc(var(--atl-craft-w) * -.46875);
}

.atl-freight__horizon { fill: none; stroke: rgba(var(--atl-signal-rgb), .25); stroke-width: 1; }
.atl-freight__wave { fill: none; stroke: rgba(var(--atl-signal-rgb), .24); stroke-width: 1.1; stroke-linecap: round; }
.atl-freight__waves--2 .atl-freight__wave { stroke: rgba(var(--atl-signal-rgb), .15); }
.atl-freight__waves--3 .atl-freight__wave { stroke: rgba(var(--atl-signal-rgb), .09); }

/* The water fades out at both ends instead of stopping at the content edge. The mask sits
   on this still wrapper so it doesn't travel with the drifting waves. */
.atl-freight__water {
	position: absolute;
	inset: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Wave layers are 120% wide with a 6-unit (5%) period, so a -5% shift loops seamlessly. */
.atl-freight__waves { width: 120%; }

.atl-freight__ship-hull { fill: #E8F0EA; }
.atl-freight__ship-stripe { fill: var(--e-global-color-signal, #0DC600); }
.atl-freight__ship-bridge { fill: #C9D6CD; }
.atl-freight__ship-funnel { fill: var(--e-global-color-signal, #0DC600); }
.atl-freight__box--a { fill: #0DC600; }
.atl-freight__box--b { fill: #087A00; }
.atl-freight__box--c { fill: #A7B8AE; }
.atl-freight__wake { fill: none; stroke: rgba(232, 240, 234, .45); stroke-width: 1; stroke-linecap: round; }
.atl-freight__smoke { fill: rgba(167, 184, 174, .4); }

@media (prefers-reduced-motion: no-preference) {
	.atl-motion .atl-freight--sea.is-in-view .atl-freight__bob { animation: atl-fs-bob 3.4s var(--atl-ease-in-out) infinite alternate; }
	.atl-motion .atl-freight--sea.is-in-view:not(.is-lite) .atl-freight__waves--1 { animation: atl-fs-wave 6s linear infinite; }
	.atl-motion .atl-freight--sea.is-in-view:not(.is-lite) .atl-freight__waves--2 { animation: atl-fs-wave 9s linear infinite; }
	.atl-motion .atl-freight--sea.is-in-view:not(.is-lite) .atl-freight__waves--3 { animation: atl-fs-wave 13s linear infinite; }
}

@keyframes atl-fs-bob {
	from { transform: translateY(1px) rotate(-1.4deg); }
	to { transform: translateY(-1px) rotate(1.4deg); }
}

@keyframes atl-fs-wave { to { transform: translateX(-5%); } }

/* @generated freight-keyframes:start */
/* Generated by tools/build-freight-keyframes.py; edit the script, not these lines. */
.atl-freight--sea .atl-freight__pin--from { left: 3%; top: 72%; }
.atl-freight--sea .atl-freight__pin--to, .atl-freight--sea .atl-freight__arrive { left: 97%; top: 70%; }
.atl-freight--sea .atl-freight__carrier { transform: translate(54.70%, 69.95%); }
@media (prefers-reduced-motion: no-preference) {
	.atl-motion .atl-freight--sea.is-in-view .atl-freight__carrier { animation: atl-fs-path 20s linear infinite; }
	.atl-motion .atl-freight--sea.is-in-view .atl-freight__arrive { animation: atl-fs-arrive 20s linear infinite; }
}
@keyframes atl-fs-path {
	0% { transform: translate(3.00%, 72.00%); opacity: 0; }
	4% { transform: translate(3.00%, 72.00%); opacity: 1; }
	7.7% { transform: translate(5.28%, 72.79%); opacity: 1; }
	11.4% { transform: translate(8.33%, 73.67%); opacity: 1; }
	15.1% { transform: translate(12.06%, 74.45%); opacity: 1; }
	18.8% { transform: translate(16.38%, 75.02%); opacity: 1; }
	22.5% { transform: translate(21.21%, 75.25%); opacity: 1; }
	26.2% { transform: translate(26.46%, 75.08%); opacity: 1; }
	29.9% { transform: translate(32.05%, 74.50%); opacity: 1; }
	33.6% { transform: translate(37.90%, 73.56%); opacity: 1; }
	37.3% { transform: translate(43.91%, 72.35%); opacity: 1; }
	41% { transform: translate(50.00%, 71.00%); opacity: 1; }
	44.7% { transform: translate(56.09%, 69.65%); opacity: 1; }
	48.4% { transform: translate(62.10%, 68.44%); opacity: 1; }
	52.1% { transform: translate(67.95%, 67.50%); opacity: 1; }
	55.8% { transform: translate(73.54%, 66.92%); opacity: 1; }
	59.5% { transform: translate(78.79%, 66.75%); opacity: 1; }
	63.2% { transform: translate(83.62%, 66.98%); opacity: 1; }
	66.9% { transform: translate(87.94%, 67.55%); opacity: 1; }
	70.6% { transform: translate(91.67%, 68.33%); opacity: 1; }
	74.3% { transform: translate(94.72%, 69.21%); opacity: 1; }
	78% { transform: translate(97.00%, 70.00%); opacity: 1; }
	84% { transform: translate(97.00%, 70.00%); opacity: 1; }
	90% { transform: translate(97.80%, 70.00%); opacity: 0; }
	100% { transform: translate(3.00%, 72.00%); opacity: 0; }
}
@keyframes atl-fs-arrive {
	0%, 77% { opacity: 0; transform: scale(.6); }
	79% { opacity: .9; transform: scale(1); }
	90%, 100% { opacity: 0; transform: scale(3.2); }
}
/* @generated freight-keyframes:end */