/*
 * AT Logistics · "Night Freight" motion layer  v1.3.1
 *
 * Contract (docs/design-system.md#motion):
 * 1. Content is visible without JS. Hidden "before" states only apply under html.atl-motion.
 * 2. html.atl-motion is never set for prefers-reduced-motion or the Elementor editor.
 * 3. Animate transform / translate / opacity / clip-path only. Never layout properties.
 * 4. Play once on first view. Only the hero backdrop loops.
 * 5. Colours come from the Elementor kit: var(--e-global-color-<id>).
 */

:root {
	--atl-ease-out: cubic-bezier(.16, 1, .3, 1);
	--atl-ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--atl-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
	--atl-dur-1: 160ms;
	--atl-dur-2: 420ms;
	--atl-dur-3: 900ms;
	--atl-stagger: 80ms;
	--atl-rise: 16px;
	--atl-signal-rgb: 13, 198, 0;
	/* Route grid: ink700 lines every 72 px, shared by .atl-hero and .atl-grid. */
	--atl-grid-line: rgba(34, 53, 43, .55);
	--atl-grid:
		repeating-linear-gradient(90deg, var(--atl-grid-line) 0 1px, transparent 1px 72px),
		repeating-linear-gradient(0deg, var(--atl-grid-line) 0 1px, transparent 1px 72px);
	--atl-grid-mask: radial-gradient(ellipse 75% 70% at 72% 42%, #000 10%, transparent 78%);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ------------------------------------------------------------------ */
/* Reveal + stagger                                                    */
/* ------------------------------------------------------------------ */

.atl-reveal {
	--atl-delay: calc(var(--atl-i, 0) * var(--atl-stagger));
	transition-property: opacity, transform, translate, box-shadow;
	transition-duration: var(--atl-dur-2), calc(var(--atl-dur-2) * 1.5), var(--atl-dur-1), var(--atl-dur-1);
	transition-timing-function: var(--atl-ease-out);
	transition-delay: var(--atl-delay), var(--atl-delay), 0s, 0s;
}

.atl-motion .atl-reveal:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, var(--atl-rise), 0);
}

.atl-reveal.is-done { transition-delay: 0s; }

/* ------------------------------------------------------------------ */
/* Hero backdrop: route grid, flight path, signal glow                 */
/* .atl-grid is the same grid on its own (footer, page banners).       */
/* ------------------------------------------------------------------ */

.atl-hero,
.atl-grid {
	position: relative;
	isolation: isolate;
}

.atl-hero { overflow: hidden; }

.atl-hero::before,
.atl-hero::after,
.atl-grid::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.atl-hero::before,
.atl-grid::before {
	inset: 0;
	background-image: var(--atl-grid);
	-webkit-mask-image: var(--atl-grid-mask);
	mask-image: var(--atl-grid-mask);
}

/* Centred banners (account pages): the grid fades out from the middle. */
.atl-grid--center { --atl-grid-mask: radial-gradient(ellipse 60% 85% at 50% 50%, #000 10%, transparent 78%); }

/* The AT Logistics plugin's atl.css has its own .atl-grid (a two-column grid) and loads late on pages
   with its widgets (Track, Register, Sign in, Reset password). Elementor sections keep their own layout. */
.e-con.atl-grid {
	display: var(--display, flex);
	gap: normal;
	align-items: normal;
	grid-template-columns: none;
}

.atl-hero::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='none'%3E%3Cpath d='M-20 560 C 260 520 420 300 640 250 S 1020 120 1240 40' fill='none' stroke='%230DC600' stroke-opacity='.32' stroke-width='1.5' stroke-dasharray='6 10'/%3E%3Cpath d='M-20 600 C 300 580 520 420 760 380 S 1080 300 1240 260' fill='none' stroke='%230DC600' stroke-opacity='.14' stroke-width='1' stroke-dasharray='3 9'/%3E%3C/svg%3E"),
		var(--atl-grid);
	background-size: 100% 100%, auto, auto;
}

.atl-hero::after {
	inset: -20%;
	background:
		radial-gradient(38% 34% at 74% 36%, rgba(var(--atl-signal-rgb), .17), transparent 70%),
		radial-gradient(28% 30% at 12% 88%, rgba(var(--atl-signal-rgb), .08), transparent 70%);
}

.atl-hero--soft::before { opacity: .55; }
.atl-hero--soft::after { opacity: .7; }

@media (prefers-reduced-motion: no-preference) {
	.atl-motion .atl-hero::after { animation: atl-drift 40s var(--atl-ease-in-out) infinite alternate; }
	.atl-hero.is-offscreen::after,
	.atl-hero.is-offscreen .atl-card-float { animation-play-state: paused; }
}

@keyframes atl-drift {
	to { transform: translate3d(-4%, 3%, 0) scale(1.06); }
}

/* ------------------------------------------------------------------ */
/* Route line (divider widget): draws in, then a packet travels it     */
/* ------------------------------------------------------------------ */

.atl-line .elementor-divider {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
}

.atl-motion .atl-line .elementor-divider-separator {
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--atl-dur-3) var(--atl-ease-in-out) calc(var(--atl-delay, 0s) + 120ms);
}

.atl-motion .atl-line.is-in .elementor-divider-separator { clip-path: inset(0 0 0 0); }

/* Packet: a full-width layer with the dot at its right edge, moved by translateX(%). */
.atl-line:not(.atl-line--static) .elementor-divider::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 24px;
	margin-top: -12px;
	pointer-events: none;
	background: radial-gradient(circle at calc(100% - 5px) 50%,
		var(--e-global-color-signal, #0DC600) 0 4px,
		rgba(var(--atl-signal-rgb), .35) 5px,
		rgba(var(--atl-signal-rgb), 0) 12px);
}

.atl-motion .atl-line:not(.atl-line--static) .elementor-divider::after { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.atl-motion .atl-line.is-travel:not(.atl-line--static) .elementor-divider::after {
		animation: atl-packet 2.4s var(--atl-ease-in-out) 0s 3 forwards;
	}
}

@keyframes atl-packet {
	0%   { transform: translateX(-100%); opacity: 0; }
	12%  { opacity: 1; }
	100% { transform: translateX(0); opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* Sample tracking card                                                */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.atl-motion .atl-card-float.is-in.is-done {
		animation: atl-float 6s var(--atl-ease-in-out) 0s 3;
	}
}

@keyframes atl-float {
	50% { translate: 0 -6px; }
}

.atl-track-seq .elementor-icon-list-icon i,
.atl-track-seq .elementor-icon-list-icon svg,
.atl-track-seq .elementor-icon-list-text {
	transition: color 300ms ease, fill 300ms ease, opacity 300ms ease, transform 420ms var(--atl-ease-pop);
}

.atl-motion .atl-track-seq:not(.is-done) .elementor-icon-list-item:not(.is-on) .elementor-icon-list-icon i,
.atl-motion .atl-track-seq:not(.is-done) .elementor-icon-list-item:not(.is-on) .elementor-icon-list-icon svg {
	color: var(--e-global-color-ink700, #22352B);
	fill: var(--e-global-color-ink700, #22352B);
	transform: scale(.55);
}

.atl-motion .atl-track-seq:not(.is-done) .elementor-icon-list-item:not(.is-on) .elementor-icon-list-text {
	opacity: .4;
}

.atl-motion .atl-chip-pulse.is-on .elementor-heading-title {
	animation: atl-chip 1.2s var(--atl-ease-out) 1;
}

@keyframes atl-chip {
	0%   { transform: scale(1);    text-shadow: 0 0 0 rgba(var(--atl-signal-rgb), 0); }
	30%  { transform: scale(1.05); text-shadow: 0 0 22px rgba(var(--atl-signal-rgb), .65); }
	100% { transform: scale(1);    text-shadow: 0 0 0 rgba(var(--atl-signal-rgb), 0); }
}

.atl-chip-pulse .elementor-heading-title { display: inline-block; transform-origin: left center; }

/* ------------------------------------------------------------------ */
/* Cards: lift on hover / keyboard focus                               */
/* ------------------------------------------------------------------ */

.atl-lift:not(.atl-reveal) {
	transition: translate var(--atl-dur-1) var(--atl-ease-out), box-shadow var(--atl-dur-1) var(--atl-ease-out);
}

.atl-lift:focus-within {
	box-shadow: 0 18px 40px -20px rgba(7, 16, 12, .35), 0 0 0 2px rgba(var(--atl-signal-rgb), .45);
}

@media (hover: hover) {
	.atl-lift:hover {
		box-shadow: 0 18px 40px -20px rgba(7, 16, 12, .35), 0 0 0 1px rgba(var(--atl-signal-rgb), .45);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.atl-lift:focus-within { translate: 0 -4px; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.atl-lift:hover { translate: 0 -4px; }
}

/* ------------------------------------------------------------------ */
/* Icons                                                               */
/* ------------------------------------------------------------------ */

.atl-icon-air .elementor-icon,
.atl-icon-sea .elementor-icon { overflow: hidden; }

.atl-icon-air .elementor-icon i, .atl-icon-air .elementor-icon svg,
.atl-icon-sea .elementor-icon i, .atl-icon-sea .elementor-icon svg,
.atl-icon-pop .elementor-icon i, .atl-icon-pop .elementor-icon svg {
	transition: transform 600ms var(--atl-ease-out) calc(var(--atl-delay, 0s) + 200ms), opacity 400ms ease calc(var(--atl-delay, 0s) + 200ms);
}

.atl-motion .atl-icon-air:not(.is-in) .elementor-icon i,
.atl-motion .atl-icon-air:not(.is-in) .elementor-icon svg {
	transform: translate(-14px, 14px) rotate(-10deg);
	opacity: 0;
}

.atl-motion .atl-icon-sea:not(.is-in) .elementor-icon i,
.atl-motion .atl-icon-sea:not(.is-in) .elementor-icon svg {
	transform: translateX(-16px);
	opacity: 0;
}

.atl-motion .atl-icon-pop:not(.is-in) .elementor-icon i,
.atl-motion .atl-icon-pop:not(.is-in) .elementor-icon svg {
	transform: scale(.4);
	opacity: 0;
}

.atl-icon-pop .elementor-icon i,
.atl-icon-pop .elementor-icon svg { transition-timing-function: var(--atl-ease-pop), ease; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.atl-lift:hover .atl-icon-air .elementor-icon i,
	.atl-lift:hover .atl-icon-air .elementor-icon svg { animation: atl-icon-fly 900ms var(--atl-ease-in-out) 1; }
	.atl-lift:hover .atl-icon-sea .elementor-icon i,
	.atl-lift:hover .atl-icon-sea .elementor-icon svg { animation: atl-bob 1.4s var(--atl-ease-in-out) 1; }
	.atl-lift:hover .atl-icon-pop .elementor-icon i,
	.atl-lift:hover .atl-icon-pop .elementor-icon svg { animation: atl-wiggle 600ms var(--atl-ease-out) 1; }
}

/* Not "atl-fly": that name belongs to the voyage plane's generated keyframes below. */
@keyframes atl-icon-fly {
	0%   { transform: none; opacity: 1; }
	45%  { transform: translate(22px, -22px) rotate(-6deg); opacity: 0; }
	46%  { transform: translate(-22px, 22px) rotate(-6deg); opacity: 0; }
	100% { transform: none; opacity: 1; }
}

@keyframes atl-bob {
	0%, 100% { transform: none; }
	25% { transform: translateY(-3px) rotate(-7deg); }
	60% { transform: translateY(2px) rotate(5deg); }
}

@keyframes atl-wiggle {
	0%, 100% { transform: none; }
	40% { transform: scale(1.12) rotate(-6deg); }
	70% { transform: scale(.98) rotate(3deg); }
}

/* ------------------------------------------------------------------ */
/* How it works steps                                                  */
/* ------------------------------------------------------------------ */

.atl-step .elementor-widget-heading:first-child .elementor-heading-title {
	transition: transform 520ms var(--atl-ease-out) calc(var(--atl-delay, 0s) + 160ms), opacity 400ms ease calc(var(--atl-delay, 0s) + 160ms);
}

.atl-motion .atl-step:not(.is-in) .elementor-widget-heading:first-child .elementor-heading-title {
	transform: translateY(10px);
	opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Sample dashboard numbers                                            */
/* ------------------------------------------------------------------ */

.atl-countup .elementor-heading-title { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/* Header + navigation                                                 */
/* ------------------------------------------------------------------ */

.atl-header {
	transition: box-shadow 240ms ease;
}

.atl-header.is-scrolled {
	box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .7), 0 1px 0 rgba(var(--atl-signal-rgb), .14);
}

/* Replace Elementor's fade underline with one that grows from the left. */
.atl-nav .e--pointer-underline .elementor-item::after {
	opacity: 1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 260ms var(--atl-ease-out);
}

.atl-nav .e--pointer-underline .elementor-item:hover::after,
.atl-nav .e--pointer-underline .elementor-item:focus-visible::after,
.atl-nav .e--pointer-underline .elementor-item.elementor-item-active::after {
	transform: scaleX(1);
}

/* ------------------------------------------------------------------ */
/* Primary buttons: one sheen on hover, small press                    */
/* ------------------------------------------------------------------ */

.atl-btn-sheen .elementor-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: background-color var(--atl-dur-1) ease, color var(--atl-dur-1) ease, transform 120ms ease;
}

.atl-btn-sheen .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
	transform: translateX(-130%);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.atl-btn-sheen .elementor-button:hover::after {
		transform: translateX(130%);
		transition: transform 750ms var(--atl-ease-out);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.atl-btn-sheen .elementor-button:active { transform: scale(.98); }
}

/* ------------------------------------------------------------------ */
/* Film slot (Claude Motion MP4s on /how-it-works/ and later pages)    */
/* ------------------------------------------------------------------ */

.atl-film video,
.atl-film .elementor-video,
.atl-film .elementor-wrapper {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	background: var(--e-global-color-ink900, #0E1A14);
}

.atl-film--vertical video,
.atl-film--vertical .elementor-video,
.atl-film--vertical .elementor-wrapper { aspect-ratio: 9 / 16; max-width: 420px; }

.atl-film .elementor-wrapper,
.atl-film video { border: 1px solid var(--e-global-color-ink700, #22352B); overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Voyage scene [atl_voyage]: USA → Guyana, with a day and night cycle */
/*                                                                      */
/* Performance: the scene is a stack of SVG layers. Ambient motion      */
/* (sky, sun and moon, stars, clouds, waves, lights) animates whole     */
/* layers with opacity/transform only, which the browser composites on  */
/* the GPU without repainting. Only the action layer repaints, and only */
/* while the plane or ship is moving. Everything pauses off-screen or   */
/* in a hidden tab (.is-paused); low-power devices skip ambient motion  */
/* (.is-lite) and see the calm night scene.                             */
/* ------------------------------------------------------------------ */

.atl-voyage { --atl-cycle: 40s; position: relative; width: 100%; }
.atl-voyage__stage {
	position: relative;
	aspect-ratio: 480 / 200;
	border-radius: 14px;
	overflow: hidden;
	isolation: isolate;
	contain: layout paint;
	background: #07100C;
}
.atl-voyage__layer, .atl-voyage__group { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.atl-voyage__layer { overflow: visible; }
.atl-voyage__wheel { overflow: visible; }

/* Static (night) state */
.atl-voyage__day, .atl-voyage__warm, .atl-voyage__glints-layer, .atl-voyage__flock { opacity: 0; }
.atl-voyage__wheel { transform-origin: 50% 87.5%; transform: rotate(180deg); }
.atl-voyage__clouds-far { opacity: .14; }
.atl-voyage__clouds-near { opacity: .2; }
.atl-voyage__stars--b { opacity: .6; }
.atl-voyage__aurora { opacity: .2; }

.atl-voyage__shooting path { fill: none; stroke: #FFFFFF; stroke-width: 1.2; stroke-linecap: round; }
.atl-voyage__shooting { opacity: 0; }
.atl-voyage__sparkle { fill: none; stroke: #FFFFFF; stroke-width: .8; stroke-linecap: round; }
.atl-voyage__sun-disc { fill: #FFE7A3; }
.atl-voyage__moon { fill: #E8F0EA; }
.atl-voyage__crater { fill: #C9D6CD; }
.atl-voyage__land--night { fill: #0A1A12; }
.atl-voyage__land--day { fill: #2E6E4C; }
.atl-voyage__palm { fill: #0E2619; }
.atl-voyage__palm-layer--1 { transform-origin: 85.8% 71%; }
.atl-voyage__palm-layer--2 { transform-origin: 88.3% 71%; }
.atl-voyage__sign { font: 600 6px/1 'IBM Plex Mono', monospace; fill: var(--e-global-color-signal, #0DC600); letter-spacing: .05em; }
.atl-voyage__beacon { fill: #FF6B5E; }
.atl-voyage__beam-arm { transform-origin: 92.9% 65%; }
.atl-voyage__beam { opacity: .55; }
.atl-voyage__horizon { stroke: rgba(var(--atl-signal-rgb), .25); stroke-width: 1; }
.atl-voyage__glints path { fill: none; stroke: #FFF3C4; stroke-width: 1; stroke-linecap: round; }
.atl-voyage__sail { fill: #E8F0EA; }
.atl-voyage__sail-hull { fill: #0D2318; }
.atl-voyage__buoy { fill: #E8F0EA; }
.atl-voyage__buoy-light circle { fill: #38E024; }
.atl-voyage__wave { fill: none; stroke: rgba(var(--atl-signal-rgb), .24); stroke-width: 1.1; stroke-linecap: round; }
.atl-voyage__wave--2 { stroke: rgba(var(--atl-signal-rgb), .15); }
.atl-voyage__wave--3 { stroke: rgba(var(--atl-signal-rgb), .09); }
.atl-voyage__bird { fill: none; stroke: #0D2318; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }

/* Action layer: routes and ports (static, never repaints) */
.atl-voyage__route { fill: none; stroke: #2F4A3C; stroke-width: 1.3; stroke-dasharray: 3 6; stroke-linecap: round; }
.atl-voyage__haze { fill: none; stroke: rgba(var(--atl-signal-rgb), .1); stroke-width: 7; stroke-linecap: round; }
.atl-voyage__lane { fill: none; stroke: url(#atlv-contrail); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }

.atl-voyage__pin-dot { fill: var(--e-global-color-mutedd, #A7B8AE); }
.atl-voyage__pin--to .atl-voyage__pin-dot { fill: var(--e-global-color-signal, #0DC600); }
.atl-voyage__pin-ring { fill: none; stroke: rgba(167, 184, 174, .4); stroke-width: 1; }
.atl-voyage__pin--to .atl-voyage__pin-ring { stroke: rgba(var(--atl-signal-rgb), .6); }
.atl-voyage__pin-halo { opacity: .6; }
.atl-voyage__pin-pulse { fill: rgba(var(--atl-signal-rgb), .4); }
.atl-voyage__burst { fill: none; stroke: #38E024; stroke-width: 1.4; stroke-linecap: round; }
.atl-voyage__arrive { opacity: 0; transform-origin: 92.92% 65%; }

/* Craft layers: each plane/ship is drawn at the layer's origin and moved
   along its route with transform keyframes (generated, see below). */
.atl-voyage__craft { transform-origin: 0 0; }
.atl-voyage__plane { transform: translate(87.542%, 50.45%) rotate(42.3deg); }
.atl-voyage__ship--a { transform: translate(81.271%, 74.6%) rotate(-12.7deg); }
.atl-voyage__ship--b { opacity: 0; }
.atl-voyage__tail { stroke-width: 2.4; stroke-linecap: round; }
.atl-motion .atl-voyage:not(.is-in-view) .atl-voyage__craft { opacity: 0; }

.atl-voyage__plane-shape { fill: #FFFFFF; stroke: #07100C; stroke-width: .6; stroke-opacity: .5; }
.atl-voyage__nav { fill: #38E024; }
.atl-voyage__ship-hull { fill: #E8F0EA; }
.atl-voyage__ship-stripe { fill: var(--e-global-color-signal, #0DC600); }
.atl-voyage__ship-bridge { fill: #C9D6CD; }
.atl-voyage__ship-funnel { fill: var(--e-global-color-signal, #0DC600); }
.atl-voyage__box--a { fill: #0DC600; }
.atl-voyage__box--b { fill: #087A00; }
.atl-voyage__box--c { fill: #A7B8AE; }
.atl-voyage__wake { fill: none; stroke: rgba(232, 240, 234, .45); stroke-width: 1; stroke-linecap: round; }
.atl-voyage__smoke { fill: rgba(167, 184, 174, .4); }

.atl-voyage__ends {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	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-voyage__end--to { color: var(--e-global-color-signal, #0DC600); }

@media (prefers-reduced-motion: no-preference) {
	/* Round-the-clock journeys: a plane every 10 s, a ship every 10 s (two ships
	   alternating). Transform and opacity only, so they run on the compositor.
	   They keep running on low-power devices; only the ambient loops stop there. */
	.atl-motion .atl-voyage.is-in-view .atl-voyage__plane { animation: atl-fly 10s linear infinite; }
	.atl-motion .atl-voyage.is-in-view .atl-voyage__ship--a { animation: atl-sail 20s linear 1s infinite both; }
	.atl-motion .atl-voyage.is-in-view .atl-voyage__ship--b { animation: atl-sail 20s linear 11s infinite both; }
	.atl-motion .atl-voyage.is-in-view .atl-voyage__arrive--pulse { animation: atl-arrive-pulse 10s linear infinite; }
	.atl-motion .atl-voyage.is-in-view .atl-voyage__arrive--burst { animation: atl-arrive-burst 10s linear infinite; }
	.atl-motion .atl-voyage.is-in-view .atl-voyage__shooting { animation: atl-shoot 1.1s var(--atl-ease-out) 1.4s 1 both; }

	/* Ambient layers: one shared 40 s clock.
	   0–20% night · 20–30% sunrise · 30–70% day · 70–80% sunset · 80–100% night */
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__day { animation: atl-c-day var(--atl-cycle) linear infinite; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__warm { animation: atl-c-warm var(--atl-cycle) linear infinite; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__night,
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__lights { animation: atl-c-night var(--atl-cycle) linear infinite; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__wheel { animation: atl-c-wheel var(--atl-cycle) linear infinite; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__clouds-far { animation: atl-c-cloud var(--atl-cycle) linear infinite; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__clouds-near { animation: atl-c-cloud-near var(--atl-cycle) linear infinite; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__glints-layer { animation: atl-c-glint var(--atl-cycle) linear infinite; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__flock { animation: atl-c-birds var(--atl-cycle) linear infinite; }

	/* Ambient layers: independent loops */
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__stars--a { animation: atl-twinkle 3.2s ease-in-out infinite alternate; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__stars--b { animation: atl-twinkle 4.3s ease-in-out 1.1s infinite alternate-reverse; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__aurora { animation: atl-aurora 14s ease-in-out infinite alternate; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__drift { animation: atl-drift-x 18s ease-in-out infinite alternate; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__palm-layer { animation: atl-sway 5s ease-in-out infinite alternate; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__palm-layer--2 { animation-duration: 4.2s; animation-direction: alternate-reverse; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__beacons,
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__buoy-light { animation: atl-blink 1.6s steps(2, jump-none) infinite; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__beam-arm { animation: atl-sweep 5s ease-in-out infinite alternate; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__boat { animation: atl-boat 26s ease-in-out infinite alternate; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__waves--1 { animation: atl-wave-1 3s linear infinite; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__waves--2 { animation: atl-wave-2 4.4s linear infinite; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__waves--3 { animation: atl-wave-3 6.6s linear infinite; }
	.atl-motion .atl-voyage.is-in-view:not(.is-lite) .atl-voyage__bird { animation: atl-flap .55s ease-in-out infinite alternate; }

	/* Freeze everything while the scene is off-screen or the tab is hidden. */
	.atl-voyage.is-paused *,
	.atl-hero.is-offscreen .atl-voyage * { animation-play-state: paused !important; }
}

@keyframes atl-c-day { 0%, 22% { opacity: 0; } 36%, 64% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes atl-c-warm { 0%, 17% { opacity: 0; } 27% { opacity: 1; } 38%, 62% { opacity: 0; } 73% { opacity: 1; } 83%, 100% { opacity: 0; } }
@keyframes atl-c-night { 0%, 18% { opacity: 1; } 32%, 68% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes atl-c-wheel { from { transform: rotate(180deg); } to { transform: rotate(540deg); } }
@keyframes atl-c-cloud { 0%, 18% { opacity: .14; } 34%, 66% { opacity: .7; } 82%, 100% { opacity: .14; } }
@keyframes atl-c-cloud-near { 0%, 18% { opacity: .2; } 34%, 66% { opacity: .85; } 82%, 100% { opacity: .2; } }
@keyframes atl-c-glint { 0%, 30% { opacity: 0; } 42%, 58% { opacity: .85; } 70%, 100% { opacity: 0; } }
@keyframes atl-c-birds {
	0%, 34% { opacity: 0; transform: translateX(-33%); }
	38%, 62% { opacity: 1; }
	66%, 100% { opacity: 0; transform: translateX(79%); }
}
@keyframes atl-twinkle { from { opacity: .25; } to { opacity: 1; } }
@keyframes atl-aurora { from { transform: translateX(0) scaleY(1); } to { transform: translateX(-6%) scaleY(1.2); } }
@keyframes atl-drift-x { to { transform: translateX(-3.3%); } }
@keyframes atl-sway { from { transform: rotate(-2deg); } to { transform: rotate(2.5deg); } }
@keyframes atl-sweep { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
@keyframes atl-boat { to { transform: translateX(-9.6%); } }
@keyframes atl-wave-1 { to { transform: translateX(-4.1667%); } }
@keyframes atl-wave-2 { to { transform: translateX(-5%); } }
@keyframes atl-wave-3 { to { transform: translateX(-6.25%); } }
@keyframes atl-flap { to { transform: scaleY(.45); } }
@keyframes atl-blink { 50% { opacity: .15; } }
/* Arrivals at Guyana: plane lands at 4 s (40%), a ship docks at 8 s (80%) of every 10 s. */
@keyframes atl-arrive-pulse {
	0%, 39% { opacity: 0; transform: scale(.6); }
	41% { opacity: .9; transform: scale(1); }
	52% { opacity: 0; transform: scale(3.2); }
	79% { opacity: 0; transform: scale(.6); }
	81% { opacity: .9; transform: scale(1); }
	92%, 100% { opacity: 0; transform: scale(3.2); }
}
@keyframes atl-arrive-burst {
	0%, 39% { opacity: 0; transform: scale(.5) rotate(-20deg); }
	42% { opacity: 1; }
	49% { opacity: 0; transform: scale(1.5) rotate(0); }
	79% { opacity: 0; transform: scale(.5) rotate(-20deg); }
	82% { opacity: 1; }
	89%, 100% { opacity: 0; transform: scale(1.5) rotate(0); }
}
@keyframes atl-shoot { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(-12.5%, 11%); } }

/* Route cards glow each time their vehicle arrives (same 10 s clocks). */
.atl-route-card.is-live::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: 0 0 0 1px rgba(var(--atl-signal-rgb), .6), 0 12px 32px -12px rgba(var(--atl-signal-rgb), .5);
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.atl-motion .atl-route-card--air.is-live::after { animation: atl-card-ping 10s linear infinite }
	.atl-motion .atl-route-card--sea.is-live::after { animation: atl-card-ping-sea 10s linear infinite; }
	.atl-route-card.is-paused::after { animation-play-state: paused; }
}

@keyframes atl-card-ping { 0%, 39% { opacity: 0; } 42% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes atl-card-ping-sea { 0%, 79% { opacity: 0; } 82% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* @generated voyage-keyframes:start */
/* Generated by tools/build-voyage-keyframes.py — edit the script, not these lines. */
@keyframes atl-fly {
	0.00% { transform: translate(7.100%, 63.952%) rotate(-50.3deg); opacity: 0; }
	4.00% { transform: translate(7.100%, 63.952%) rotate(-50.3deg); opacity: 1; }
	5.50% { transform: translate(7.116%, 63.904%) rotate(-50.3deg); opacity: 1; }
	7.00% { transform: translate(7.233%, 63.569%) rotate(-50.1deg); opacity: 1; }
	8.50% { transform: translate(7.550%, 62.665%) rotate(-49.6deg); opacity: 1; }
	10.00% { transform: translate(8.192%, 60.884%) rotate(-48.6deg); opacity: 1; }
	11.50% { transform: translate(9.297%, 57.963%) rotate(-46.9deg); opacity: 1; }
	13.00% { transform: translate(10.989%, 53.807%) rotate(-44.4deg); opacity: 1; }
	14.50% { transform: translate(13.474%, 48.315%) rotate(-40.9deg); opacity: 1; }
	16.00% { transform: translate(16.981%, 41.614%) rotate(-36.2deg); opacity: 1; }
	17.50% { transform: translate(21.819%, 34.037%) rotate(-30.1deg); opacity: 1; }
	19.00% { transform: translate(28.282%, 26.356%) rotate(-22.6deg); opacity: 1; }
	20.50% { transform: translate(36.627%, 19.817%) rotate(-13.6deg); opacity: 1; }
	22.00% { transform: translate(47.085%, 16.179%) rotate(-2.9deg); opacity: 1; }
	23.50% { transform: translate(57.630%, 17.229%) rotate(7.7deg); opacity: 1; }
	25.00% { transform: translate(66.225%, 21.664%) rotate(16.6deg); opacity: 1; }
	26.50% { transform: translate(72.985%, 27.666%) rotate(24.0deg); opacity: 1; }
	28.00% { transform: translate(78.118%, 33.949%) rotate(30.0deg); opacity: 1; }
	29.50% { transform: translate(81.911%, 39.722%) rotate(34.7deg); opacity: 1; }
	31.00% { transform: translate(84.639%, 44.570%) rotate(38.3deg); opacity: 1; }
	32.50% { transform: translate(86.507%, 48.275%) rotate(40.8deg); opacity: 1; }
	34.00% { transform: translate(87.708%, 50.843%) rotate(42.5deg); opacity: 1; }
	35.50% { transform: translate(88.428%, 52.457%) rotate(43.6deg); opacity: 1; }
	37.00% { transform: translate(88.793%, 53.298%) rotate(44.1deg); opacity: 1; }
	38.50% { transform: translate(88.939%, 53.637%) rotate(44.3deg); opacity: 1; }
	40.00% { transform: translate(88.957%, 53.680%) rotate(44.3deg); opacity: 1; }
	46.00% { transform: translate(92.900%, 63.952%) rotate(50.3deg); opacity: 0; }
	100.00% { transform: translate(7.100%, 63.952%) rotate(-50.3deg); opacity: 0; }
}
@keyframes atl-sail {
	0.00% { transform: translate(12.238%, 72.101%) rotate(8.0deg); opacity: 0; }
	3.00% { transform: translate(12.238%, 72.521%) rotate(8.0deg); opacity: 1; }
	3.89% { transform: translate(12.358%, 72.670%) rotate(9.5deg); opacity: 1; }
	4.78% { transform: translate(12.714%, 72.898%) rotate(10.3deg); opacity: 1; }
	5.67% { transform: translate(13.322%, 73.261%) rotate(10.2deg); opacity: 1; }
	6.56% { transform: translate(14.164%, 73.811%) rotate(9.2deg); opacity: 1; }
	7.44% { transform: translate(15.258%, 74.621%) rotate(7.7deg); opacity: 1; }
	8.33% { transform: translate(16.599%, 75.688%) rotate(6.3deg); opacity: 1; }
	9.22% { transform: translate(18.173%, 76.932%) rotate(5.6deg); opacity: 1; }
	10.11% { transform: translate(19.971%, 78.216%) rotate(5.9deg); opacity: 1; }
	11.00% { transform: translate(21.993%, 79.382%) rotate(7.1deg); opacity: 1; }
	11.89% { transform: translate(24.214%, 80.284%) rotate(8.0deg); opacity: 1; }
	12.78% { transform: translate(26.606%, 80.852%) rotate(7.4deg); opacity: 1; }
	13.67% { transform: translate(29.163%, 81.112%) rotate(6.1deg); opacity: 1; }
	14.56% { transform: translate(31.859%, 81.158%) rotate(4.1deg); opacity: 1; }
	15.44% { transform: translate(34.673%, 81.121%) rotate(1.6deg); opacity: 1; }
	16.33% { transform: translate(37.569%, 81.116%) rotate(-0.9deg); opacity: 1; }
	17.22% { transform: translate(40.533%, 81.195%) rotate(-2.7deg); opacity: 1; }
	18.11% { transform: translate(43.547%, 81.356%) rotate(-3.0deg); opacity: 1; }
	19.00% { transform: translate(46.588%, 81.568%) rotate(-2.2deg); opacity: 1; }
	19.89% { transform: translate(49.627%, 81.688%) rotate(-1.0deg); opacity: 1; }
	20.78% { transform: translate(52.642%, 81.606%) rotate(0.2deg); opacity: 1; }
	21.67% { transform: translate(55.613%, 81.290%) rotate(0.7deg); opacity: 1; }
	22.56% { transform: translate(58.512%, 80.789%) rotate(0.1deg); opacity: 1; }
	23.44% { transform: translate(61.314%, 80.209%) rotate(-1.6deg); opacity: 1; }
	24.33% { transform: translate(64.016%, 79.661%) rotate(-3.9deg); opacity: 1; }
	25.22% { transform: translate(66.575%, 79.221%) rotate(-6.2deg); opacity: 1; }
	26.11% { transform: translate(68.966%, 78.896%) rotate(-7.9deg); opacity: 1; }
	27.00% { transform: translate(71.196%, 78.617%) rotate(-8.6deg); opacity: 1; }
	27.89% { transform: translate(73.246%, 78.280%) rotate(-8.5deg); opacity: 1; }
	28.78% { transform: translate(75.075%, 77.803%) rotate(-7.5deg); opacity: 1; }
	29.67% { transform: translate(76.683%, 77.149%) rotate(-6.2deg); opacity: 1; }
	30.56% { transform: translate(78.074%, 76.357%) rotate(-5.6deg); opacity: 1; }
	31.44% { transform: translate(79.213%, 75.552%) rotate(-6.0deg); opacity: 1; }
	32.33% { transform: translate(80.106%, 74.873%) rotate(-7.3deg); opacity: 1; }
	33.22% { transform: translate(80.757%, 74.442%) rotate(-8.8deg); opacity: 1; }
	34.11% { transform: translate(81.146%, 74.324%) rotate(-10.0deg); opacity: 1; }
	35.00% { transform: translate(81.275%, 74.494%) rotate(-10.4deg); opacity: 1; }
	41.00% { transform: translate(82.989%, 73.640%) rotate(-8.0deg); opacity: 0; }
	100.00% { transform: translate(12.238%, 72.101%) rotate(8.0deg); opacity: 0; }
}
/* @generated voyage-keyframes:end */

/* ------------------------------------------------------------------ */
/* Safety net                                                          */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.atl-reveal, .atl-line .elementor-divider-separator, .atl-lift,
	.atl-track-seq *, .atl-btn-sheen .elementor-button, .atl-header {
		transition-duration: 0s !important;
		animation: none !important;
	}
}