/* ==========================================================================
   Transit Logistics Express: animations

   How motion is controlled (set on <html> before first paint):
     data-anim   = max | reduced | off      Customizer: Look and motion > Animation level
     data-motion = on | paused              Visitor's "Pause animations" button, or their OS reduced-motion setting

   - Looping decorative motion only exists when data-anim="max".
   - "Paused" freezes it (animation-play-state) and shows all content immediately.
   - "off" removes every animation and transition.
   - Entrance animations only run while data-motion="on", so a paused page always shows final states.
   ========================================================================== */

/* ---- Switches ---------------------------------------------------------- */

html[data-anim="off"] *,
html[data-anim="off"] *::before,
html[data-anim="off"] *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

html[data-motion="paused"] *,
html[data-motion="paused"] *::before,
html[data-motion="paused"] *::after {
	animation-play-state: paused !important;
}

/* Only animate what is on screen */
html.js [data-inview]:not(.is-inview) *,
html.js [data-inview]:not(.is-inview) *::before,
html.js [data-inview]:not(.is-inview) *::after {
	animation-play-state: paused !important;
}

/* Without JavaScript the route map would keep moving: hide the moving vehicles for people who asked for less motion */
@media (prefers-reduced-motion: reduce) {
	html:not([data-motion]) .rm-vehicle {
		display: none;
	}
}

/* ---- Keyframes ---------------------------------------------------------- */

@keyframes reveal-up {
	from { opacity: 0; transform: translate3d(0, 34px, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes reveal-left {
	from { opacity: 0; transform: translate3d(-56px, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes reveal-right {
	from { opacity: 0; transform: translate3d(56px, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes reveal-scale {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: none; }
}
@keyframes reveal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes fade-up {
	from { opacity: 0; transform: translate3d(0, 24px, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes word-up {
	from { transform: translate3d(0, 112%, 0); }
	to   { transform: none; }
}
@keyframes kenburns {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.15) translate3d(-1.6%, -1.2%, 0); }
}
@keyframes hero-line {
	0%   { opacity: 0; transform: translateX(-20vw) skewX(-20deg); }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(120vw) skewX(-20deg); }
}
@keyframes dot-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
@keyframes marquee {
	to { transform: translateX(-50%); }
}
@keyframes drive {
	from { transform: translateX(-140px); }
	to   { transform: translateX(calc(100vw + 140px)); }
}
@keyframes rail {
	from { transform: translate3d(-96px, 0, 0); }
	to {
		transform: translate3d(900px, 0, 0);
		transform: translate3d(100cqw, 0, 0);
	}
}
@keyframes stripes {
	to { transform: translateX(-101.5px); }
}
@keyframes spin {
	to { transform: rotate(360deg); }
}
@keyframes pulse-dot {
	0%   { transform: scale(1); opacity: 0.75; }
	100% { transform: scale(3.8); opacity: 0; }
}
@keyframes float-a {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -12px, 0); }
}
@keyframes float-b {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
	50%      { transform: translate3d(6px, 8px, 0) rotate(1.2deg); }
}
@keyframes journey-grow {
	0%, 28%, 100% { transform: scale(1); }
	6%, 20%       { transform: scale(1.14); }
}
@keyframes journey-fill {
	0%, 28%, 100% { opacity: 0; }
	6%, 20%       { opacity: 1; }
}
@keyframes rm-flow {
	to { stroke-dashoffset: -26; }
}
@keyframes ping {
	0%   { opacity: 0.9; transform: scale(1); }
	80%, 100% { opacity: 0; transform: scale(3.8); }
}
@keyframes truck-nudge {
	to { transform: translateX(5px); }
}
@keyframes truck-go {
	to { opacity: 0; transform: translateX(150%); }
}
@keyframes plane-go {
	0%   { opacity: 1; transform: translate(0, 0); }
	60%  { opacity: 0; transform: translate(20px, -20px); }
	61%  { opacity: 0; transform: translate(-20px, 20px); }
	100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes draw {
	from { stroke-dashoffset: 1; }
	to   { stroke-dashoffset: 0; }
}
@keyframes pop {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: none; }
}

/* Scene keyframes */
@keyframes sc-twinkle {
	0%, 100% { opacity: 0.2; }
	50%      { opacity: 1; }
}
@keyframes sc-halo {
	0%, 100% { opacity: 0.55; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.1); }
}
@keyframes sc-shoot {
	0%, 90% { opacity: 0; transform: translate(0, 0); }
	91%     { opacity: 1; }
	100%    { opacity: 0; transform: translate(-300px, 110px); }
}
@keyframes sc-cloud {
	from { transform: translateX(-420px); }
	to   { transform: translateX(1900px); }
}
@keyframes sc-fly {
	from { transform: translateX(-340px); }
	to   { transform: translateX(1780px); }
}
@keyframes sc-fly-far {
	from { transform: translateX(-420px); }
	to   { transform: translateX(2700px); }
}
@keyframes sc-win {
	0%, 100% { opacity: 0.15; }
	45%, 65% { opacity: 0.95; }
}
@keyframes sc-wave {
	to { transform: translateX(-1440px); }
}
@keyframes sc-ripple {
	0%, 100% { opacity: 0.12; transform: scaleX(0.7); }
	50%      { opacity: 0.4; transform: scaleX(1.1); }
}
@keyframes sc-sail {
	from { transform: translateX(-280px); }
	to   { transform: translateX(1720px); }
}
@keyframes sc-bob {
	0%, 100% { transform: translateY(0) rotate(0); }
	50%      { transform: translateY(3px) rotate(-0.6deg); }
}
@keyframes sc-trolley {
	from { transform: translateX(0); }
	to   { transform: translateX(130px); }
}
@keyframes sc-hoist {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(70px); }
}
@keyframes sc-rope {
	0%, 100% { transform: scaleY(1); }
	50%      { transform: scaleY(2.75); }
}
@keyframes sc-blink {
	0%, 49%  { opacity: 0.15; }
	50%, 100% { opacity: 1; }
}
@keyframes sc-dash {
	to { stroke-dashoffset: 52; }
}
@keyframes sc-drive {
	from { transform: translateX(-280px); }
	to   { transform: translateX(1720px); }
}
@keyframes sc-jolt {
	from { transform: translateY(0); }
	to   { transform: translateY(-1.2px); }
}

/* ---- Scroll reveal ------------------------------------------------------ */

html.js[data-motion="on"]:not([data-anim="off"]) [data-reveal]:not(.is-visible) {
	opacity: 0;
}

html.js[data-motion="on"]:not([data-anim="off"]) [data-reveal].is-visible {
	animation: reveal-up 0.85s var(--ease) backwards;
	animation-delay: calc(var(--i, 0) * 90ms);
}

html.js[data-motion="on"]:not([data-anim="off"]) [data-reveal="left"].is-visible {
	animation-name: reveal-left;
}

html.js[data-motion="on"]:not([data-anim="off"]) [data-reveal="right"].is-visible {
	animation-name: reveal-right;
}

html.js[data-motion="on"]:not([data-anim="off"]) [data-reveal="scale"].is-visible {
	animation-name: reveal-scale;
}

html[data-anim="reduced"][data-motion="on"] [data-reveal].is-visible {
	animation-name: reveal-fade;
}

/* Safety net: if the theme script never starts (blocked, delayed or broken by another plugin),
   show everything after a moment instead of leaving it invisible. The script adds .js-ready
   as soon as it is running, which switches this off. */
@keyframes reveal-failsafe {
	to { opacity: 1; }
}

html.js:not(.js-ready)[data-motion="on"]:not([data-anim="off"]) [data-reveal]:not(.is-visible) {
	animation: reveal-failsafe 0.2s linear 2.5s forwards;
	animation-play-state: running !important; /* beats the "paused until in view" rule near the top */
}

/* The forms (tracking, quote) never wait for the script. They enter with plain CSS on load
   and are visible whatever happens to the script. */
html[data-motion="on"]:not([data-anim="off"]) [data-enter] {
	animation: reveal-up 0.85s var(--ease) backwards;
	animation-delay: calc(var(--i, 0) * 90ms);
}

html[data-motion="on"]:not([data-anim="off"]) [data-enter="right"] {
	animation-name: reveal-right;
}

html[data-anim="reduced"][data-motion="on"] [data-enter] {
	animation-name: reveal-fade;
}

/* ---- Hero --------------------------------------------------------------- */

.w {
	display: inline-block;
	margin-block: -0.08em;
	padding-block: 0.08em;
	overflow: hidden;
	vertical-align: top;
}

.w__i {
	display: inline-block;
}

html[data-anim="max"][data-motion="on"] .w__i {
	animation: word-up 0.95s var(--ease) both;
	animation-delay: calc(var(--i, 0) * 80ms + 120ms);
}

html[data-anim="max"][data-motion="on"] .hero__copy > :not(.hero__title),
html[data-anim="max"][data-motion="on"] .page-hero__inner > :not(.page-hero__title) {
	animation: fade-up 0.9s var(--ease) both;
}

html[data-anim="max"][data-motion="on"] .hero__copy > .eyebrow,
html[data-anim="max"][data-motion="on"] .page-hero__inner > .eyebrow {
	animation-delay: 0s;
}

html[data-anim="max"][data-motion="on"] .hero__text,
html[data-anim="max"][data-motion="on"] .page-hero__text {
	animation-delay: 0.65s;
}

html[data-anim="max"][data-motion="on"] .hero__cta {
	animation-delay: 0.85s;
}

html[data-anim="max"][data-motion="on"] .hero__map {
	animation: reveal-scale 1.2s var(--ease) 0.5s both;
}

html[data-anim="max"] .hero__slide.is-active .hero__img {
	animation: kenburns 14s ease-out both;
}

html[data-anim="max"] .hero__lines span {
	animation: hero-line 11s linear infinite;
}

.hero__lines span:nth-child(1) { left: 14%; }
.hero__lines span:nth-child(2) { left: 46%; }
.hero__lines span:nth-child(3) { left: 78%; }

html[data-anim="max"] .hero__lines span:nth-child(2) { animation-delay: -4s; }
html[data-anim="max"] .hero__lines span:nth-child(3) { animation-delay: -8s; }

/* Photo dots */
.hero__dot {
	position: relative;
	width: 48px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
}

.hero__dot span {
	position: absolute;
	top: 14px;
	right: 0;
	left: 0;
	height: 4px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 2px;
}

.hero__dot span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
}

.hero__dot.is-active span::after {
	transform: scaleX(1);
}

html[data-anim="max"][data-motion="on"] .hero__dot.is-active span::after {
	transform: scaleX(0);
	animation: dot-fill 7s linear forwards;
}

.hero__dot:hover span {
	background: rgba(255, 255, 255, 0.7);
}

/* Route map */
.routemap pattern circle {
	fill: rgba(255, 255, 255, 0.2);
}

.rm-route {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 2 11;
}

.rm-route--air {
	stroke: var(--accent-ink);
}

.rm-route--sea {
	stroke: rgba(255, 255, 255, 0.78);
}

.rm-route--road {
	stroke: rgba(255, 255, 255, 0.5);
}

html[data-anim="max"] .rm-route {
	animation: rm-flow 2s linear infinite;
}

.rm-node {
	fill: var(--accent);
	stroke: #fff;
	stroke-width: 2;
}

.rm-ping {
	fill: none;
	stroke: var(--accent-ink);
	stroke-width: 2;
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
}

html[data-anim="max"] .rm-ping {
	animation: ping 2.6s ease-out infinite;
}

html[data-anim="max"] .rm-ping--2 { animation-delay: -0.4s; }
html[data-anim="max"] .rm-ping--3 { animation-delay: -0.9s; }
html[data-anim="max"] .rm-ping--4 { animation-delay: -1.3s; }
html[data-anim="max"] .rm-ping--5 { animation-delay: -1.7s; }
html[data-anim="max"] .rm-ping--6 { animation-delay: -2.1s; }

.rm-label {
	fill: rgba(255, 255, 255, 0.72);
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.26em;
}

.rm-vehicle {
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
}

.rm-vehicle--air {
	color: #fff;
}

/* ---- Ticker, vehicles and decoration ------------------------------------ */

html[data-anim="max"] .marquee__track {
	animation: marquee 44s linear infinite;
}

html[data-anim="max"] .marquee:hover .marquee__track {
	animation-play-state: paused;
}

html[data-anim="max"] .route-line__vehicle {
	animation: drive 28s linear infinite;
	animation-delay: -8s;
}

html[data-anim="max"] .page-hero__vehicle {
	animation: drive 21s linear infinite;
	animation-delay: -7s;
}

html[data-anim="max"] .page-hero__stripes {
	animation: stripes 5s linear infinite;
}

html[data-anim="max"] .steps__vehicle {
	animation: rail 13s linear infinite;
}

html[data-anim="max"] .stats__ring--a {
	animation: spin 90s linear infinite;
}

html[data-anim="max"] .stats__ring--b {
	animation: spin 70s linear infinite reverse;
}

html[data-anim="max"] .why__ring {
	animation: spin 48s linear infinite;
}

html[data-anim="max"] .why__dot::after {
	animation: pulse-dot 2s ease-out infinite;
}

html[data-anim="max"] .why__img--inset {
	animation: float-a 7s ease-in-out infinite;
}

html[data-anim="max"] .why__badge {
	animation: float-b 6s ease-in-out infinite;
}

html[data-anim="max"] .collage__img--b {
	animation: float-a 8s ease-in-out infinite;
}

html[data-anim="max"] .collage__img--c {
	animation: float-a 9s ease-in-out -3s infinite reverse;
}

html[data-anim="max"] .collage__block {
	animation: float-b 7s ease-in-out infinite;
}

html[data-anim="max"] .journey__dot,
html[data-anim="max"] .journey__dot::before,
html[data-anim="max"] .journey__dot .icon--on {
	animation-duration: 7.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-delay: calc(var(--i, 0) * 1.5s);
}

html[data-anim="max"] .journey__dot {
	animation-name: journey-grow;
}

html[data-anim="max"] .journey__dot::before,
html[data-anim="max"] .journey__dot .icon--on {
	animation-name: journey-fill;
}

/* Steps rail draws itself when it scrolls into view */
html.js[data-motion="on"]:not([data-anim="off"]) .steps__line {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.6s var(--ease);
}

html.js[data-motion="on"]:not([data-anim="off"]) .steps-wrap.is-inview .steps__line {
	transform: scaleX(1);
}

@keyframes steps-failsafe {
	to { transform: scaleX(1); }
}

html.js:not(.js-ready)[data-motion="on"]:not([data-anim="off"]) .steps__line {
	animation: steps-failsafe 0.2s linear 2.5s forwards;
	animation-play-state: running !important;
}

/* ---- Forms and buttons -------------------------------------------------- */

html[data-motion="on"] .track-form__btn:hover .track-form__truck {
	animation: truck-nudge 0.5s ease-in-out infinite alternate;
}

html[data-motion="on"] .track-form.is-sending .track-form__truck {
	animation: truck-go 0.5s var(--ease) forwards;
}

.qform__submit .qform__plane {
	transition: transform 0.3s var(--ease);
}

.qform__submit:hover .qform__plane {
	transform: translate(3px, -3px);
}

html[data-motion="on"] .qform__submit.is-sending .qform__plane {
	animation: plane-go 0.9s ease-in-out infinite;
}

html[data-motion="on"] .qform__done:not([hidden]) {
	animation: pop 0.5s var(--ease) both;
}

html[data-motion="on"] .qform__done:not([hidden]) .icon--draw * {
	animation: draw 0.7s ease-out 0.25s both;
}

html[data-motion="on"] .nav.is-open .nav__list > li {
	animation: fade-up 0.5s var(--ease) backwards;
}

html[data-motion="on"] .nav.is-open .nav__list > li:nth-child(2) { animation-delay: 0.05s; }
html[data-motion="on"] .nav.is-open .nav__list > li:nth-child(3) { animation-delay: 0.1s; }
html[data-motion="on"] .nav.is-open .nav__list > li:nth-child(4) { animation-delay: 0.15s; }
html[data-motion="on"] .nav.is-open .nav__list > li:nth-child(5) { animation-delay: 0.2s; }
html[data-motion="on"] .nav.is-open .nav__list > li:nth-child(n + 6) { animation-delay: 0.25s; }

/* ---- Scene -------------------------------------------------------------- */

.sc-far {
	fill: #171c25;
}

.sc-near {
	fill: #0d1117;
}

.sc-win {
	fill: #ffd9a0;
	opacity: 0.75;
}

.sc-star {
	fill: #fff;
	opacity: 0.7;
}

.sc-box {
	stroke: #0a0c10;
	stroke-width: 0.8;
}

.sc-box--1 { fill: #4a5260; }
.sc-box--2 { fill: #c9ced6; }
.sc-box--3 { fill: #2e343e; }

.sc-ink {
	fill: #0b0e12;
}

.sc-st {
	fill: none;
	stroke: #0b0e12;
}

.sc-shoot {
	opacity: 0;
}

html[data-anim="max"] .sc-star {
	animation: sc-twinkle 4s ease-in-out infinite;
}

html[data-anim="max"] .sc-halo {
	transform-box: fill-box;
	transform-origin: center;
	animation: sc-halo 7s ease-in-out infinite;
}

html[data-anim="max"] .sc-shoot {
	animation: sc-shoot 17s linear infinite;
	animation-delay: -3s;
}

html[data-anim="max"] .sc-cloud--1 { animation: sc-cloud 150s linear infinite; animation-delay: -70s; }
html[data-anim="max"] .sc-cloud--2 { animation: sc-cloud 210s linear infinite; animation-delay: -150s; }
html[data-anim="max"] .sc-cloud--3 { animation: sc-cloud 260s linear infinite; animation-delay: -40s; }

html[data-anim="max"] .sc-fly--1 {
	animation: sc-fly 30s linear infinite;
	animation-delay: -12s;
}

html[data-anim="max"] .sc-fly--2 {
	animation: sc-fly-far 54s linear infinite;
	animation-delay: -34s;
}

html[data-anim="max"] .sc-win {
	animation: sc-win 8s ease-in-out infinite;
}

html[data-anim="max"] .sc-wave--1 { animation: sc-wave 15s linear infinite; }
html[data-anim="max"] .sc-wave--2 { animation: sc-wave 21s linear infinite; }
html[data-anim="max"] .sc-wave--3 { animation: sc-wave 29s linear infinite; }

html[data-anim="max"] .sc-ripple {
	transform-box: fill-box;
	transform-origin: center;
	animation: sc-ripple 3.6s ease-in-out infinite;
}

html[data-anim="max"] .sc-sail {
	animation: sc-sail 96s linear infinite;
	animation-delay: -52s;
}

html[data-anim="max"] .sc-bob {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: sc-bob 5s ease-in-out infinite;
}

html[data-anim="max"] .sc-trolley {
	animation: sc-trolley 15s ease-in-out infinite alternate;
}

html[data-anim="max"] .sc-hoist {
	animation: sc-hoist 7.5s ease-in-out infinite;
}

html[data-anim="max"] .sc-rope {
	transform-box: fill-box;
	transform-origin: top center;
	animation: sc-rope 7.5s ease-in-out infinite;
}

html[data-anim="max"] .sc-blink {
	animation: sc-blink 2.4s steps(1) infinite;
}

html[data-anim="max"] .sc-dash {
	animation: sc-dash 1.1s linear infinite;
}

html[data-anim="max"] .sc-drive {
	animation: sc-drive 26s linear infinite;
	animation-delay: -12s;
}

html[data-anim="max"] .sc-jolt {
	animation: sc-jolt 0.45s ease-in-out infinite alternate;
}