/* ==========================================================================
   Borealine Freight — scene art, snow, route map and animations
   Everything animates transform or opacity only. Negative delays give each
   loop a good first frame, so the paused / reduced-motion state still looks
   composed. html[data-motion="paused"] freezes every loop.
   ========================================================================== */

.bf-anim { transform-box: fill-box; transform-origin: center; }
.bf-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bf-hero__inner, .bf-pagehero__inner { position: relative; z-index: 1; }

/* ---- Snow (pure CSS, two parallax layers, irregular tiles) ------------- */
.bf-snow { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bf-snow::before, .bf-snow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat; will-change: transform; }
.bf-snow::before {
	top: -280px;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95) 0 1.8px, transparent 2.6px),
		radial-gradient(circle at 47% 7%, rgba(255, 255, 255, 0.8) 0 1.3px, transparent 2px),
		radial-gradient(circle at 83% 22%, rgba(255, 255, 255, 0.9) 0 2px, transparent 2.8px),
		radial-gradient(circle at 28% 52%, rgba(255, 255, 255, 0.75) 0 1.4px, transparent 2.1px),
		radial-gradient(circle at 66% 61%, rgba(255, 255, 255, 0.95) 0 1.7px, transparent 2.5px),
		radial-gradient(circle at 9% 86%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 1.9px),
		radial-gradient(circle at 54% 93%, rgba(255, 255, 255, 0.9) 0 1.9px, transparent 2.7px),
		radial-gradient(circle at 92% 78%, rgba(255, 255, 255, 0.7) 0 1.3px, transparent 2px);
	background-size: 260px 280px;
	animation: bf-fall-a 10s linear infinite;
}
.bf-snow::after {
	top: -200px; opacity: 0.85;
	background-image:
		radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.6) 0 1.1px, transparent 1.8px),
		radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.7px),
		radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.6) 0 1.2px, transparent 1.9px),
		radial-gradient(circle at 88% 90%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.7px);
	background-size: 170px 200px;
	animation: bf-fall-b 15s linear infinite;
}
.bf-snow--soft { opacity: 0.55; }
.bf-hero[data-3d="on"] .bf-snow { display: none; }
@keyframes bf-fall-a { to { transform: translate3d(0, 280px, 0); } }
@keyframes bf-fall-b { to { transform: translate3d(0, 200px, 0); } }

/* ---- Hero entry --------------------------------------------------------- */
@keyframes bf-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.bf-hero__copy > * { animation: bf-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.bf-hero__copy > :nth-child(2) { animation-delay: 0.08s; }
.bf-hero__copy > :nth-child(3) { animation-delay: 0.16s; }
.bf-hero__copy > :nth-child(4) { animation-delay: 0.24s; }
.bf-hero__copy > :nth-child(5) { animation-delay: 0.32s; }

/* ---- Hero scene loops --------------------------------------------------- */
.bf-twinkle { animation: bf-twinkle 3.8s ease-in-out infinite; }
@keyframes bf-twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.bf-aurora { animation: bf-aurora 16s ease-in-out infinite alternate; }
.bf-aurora--b { animation-duration: 22s; animation-delay: -6s; }
@keyframes bf-aurora { from { transform: translateX(-4%) scaleY(0.92); opacity: 0.5; } to { transform: translateX(4%) scaleY(1.06); opacity: 0.95; } }
.bf-truck { animation: bf-drive 28s linear infinite; animation-delay: -12s; }
@keyframes bf-drive { from { transform: translateX(-340px); } to { transform: translateX(1960px); } }
.bf-wheel { animation: bf-spin 0.8s linear infinite; }
.bf-plane { animation: bf-fly 70s linear infinite; animation-delay: -34s; }
@keyframes bf-fly { from { transform: translate(-640px, 30px); } to { transform: translate(2100px, -60px); } }
.bf-ship, .bf-ship-s { animation: bf-bob 5s ease-in-out infinite; transform-origin: 50% 85%; }
.bf-ship-wrap { animation: bf-sail 44s ease-in-out infinite alternate; animation-delay: -14s; }
@keyframes bf-bob { 0%, 100% { transform: translateY(0) rotate(-0.8deg); } 50% { transform: translateY(3px) rotate(0.8deg); } }
@keyframes bf-sail { from { transform: translateX(-140px); } to { transform: translateX(180px); } }

/* ---- Service illustration loops ---------------------------------------- */
.bf-train { animation: bf-train 18s linear infinite; animation-delay: -7s; }
@keyframes bf-train { from { transform: translateX(-300px); } to { transform: translateX(520px); } }
.bf-truck-s { animation: bf-truck-s 9s linear infinite; animation-delay: -3s; }
@keyframes bf-truck-s { from { transform: translateX(-160px); } to { transform: translateX(640px); } }
.bf-plane-s { animation: bf-fly-s 14s linear infinite; animation-delay: -6s; }
@keyframes bf-fly-s { from { transform: translate(-110px, 30px); } to { transform: translate(800px, -40px); } }
.bf-cloud--a { animation: bf-sway 24s ease-in-out infinite alternate; }
.bf-cloud--b { animation: bf-sway 32s ease-in-out infinite alternate-reverse; }
.bf-cloud--c { animation: bf-sway 40s ease-in-out infinite alternate; animation-delay: -10s; }
@keyframes bf-sway { from { transform: translateX(-26px); } to { transform: translateX(44px); } }
.bf-wave--a { animation: bf-wave 3.2s linear infinite; }
.bf-wave--b { animation: bf-wave 4.6s linear infinite reverse; }
@keyframes bf-wave { to { transform: translateX(-60px); } }
.bf-lift { animation: bf-lift 5s ease-in-out infinite; }
@keyframes bf-lift { 0%, 12% { transform: translateY(0); } 48%, 62% { transform: translateY(-20px); } 100% { transform: translateY(0); } }
.bf-van { animation: bf-van 11s linear infinite; animation-delay: -4s; }
@keyframes bf-van { from { transform: translateX(-120px); } to { transform: translateX(640px); } }

/* ---- Steps progress ----------------------------------------------------- */
.bf-steps::after { animation-delay: -3.5s; }
@keyframes bf-progress { 0% { transform: scaleX(0); opacity: 1; } 72% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---- Route map ---------------------------------------------------------- */
.bf-mapfig {
	margin: 0 auto; max-width: 62rem; padding: clamp(0.75rem, 3vw, 2rem);
	border-radius: 28px; box-shadow: var(--bf-shadow-lg);
	background: radial-gradient(60rem 30rem at 70% 0%, rgba(62, 230, 180, 0.1), transparent 60%), linear-gradient(160deg, #07162b, #12305a);
}
.bf-map { display: block; width: 100%; height: auto; }
.bf-map__grid { stroke: #7fb2ff; stroke-opacity: 0.15; stroke-width: 1; }
.bf-map__land { fill: #1b3f73; }
.bf-map__edge { fill: none; stroke: #7fb2ff; stroke-opacity: 0.55; stroke-width: 1.2; stroke-linejoin: round; }
#bf-dots circle { fill: #9cc4ff; fill-opacity: 0.3; }
.bf-route { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 8; }
.bf-route--truck { stroke: #ff6b7d; } .bf-route--train { stroke: #ffb36b; } .bf-route--plane { stroke: #ffd166; } .bf-route--ship { stroke: #6ee7f9; }
.bf-vehicle use { fill: currentColor; stroke: #07162b; stroke-width: 0.6; }
.bf-vehicle--truck { color: #ff6b7d; } .bf-vehicle--train { color: #ffb36b; } .bf-vehicle--plane { color: #ffd166; } .bf-vehicle--ship { color: #6ee7f9; }
.bf-city__dot { fill: #fff; stroke: #07162b; stroke-width: 1.5; }
.bf-city__ring { fill: none; stroke: #fff; stroke-width: 1.5; animation: bf-ping 3s ease-out infinite; }
.bf-city__label { font: 600 17px/1 var(--bf-font-body); fill: #eaf3ff; paint-order: stroke; stroke: #07162b; stroke-width: 4px; stroke-linejoin: round; }
@keyframes bf-ping { 0% { transform: scale(0.7); opacity: 0.8; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@media (max-width: 700px) {
	.bf-city__label { display: none; }
	.bf-city__label.is-major { display: block; font-size: 34px; stroke-width: 8px; }
}
.bf-mapfig__cap { margin-top: 0.75rem; text-align: center; font-size: 0.875rem; color: #a9bdd8; }
.bf-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem; margin-top: 1.75rem; font-weight: 500; color: var(--bf-muted); }
.bf-legend li { display: inline-flex; align-items: center; gap: 0.55rem; }
.bf-legend__chip { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #07162b; }
.bf-legend__chip--truck { background: #ff6b7d; } .bf-legend__chip--train { background: #ffb36b; } .bf-legend__chip--plane { background: #ffd166; } .bf-legend__chip--ship { background: #6ee7f9; }

/* ---- Trace & Track strip ------------------------------------------------ */
.bf-strip__line { stroke: currentColor; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.bf-strip__node { fill: var(--bf-primary); stroke: var(--bf-bg); stroke-width: 3; }
.bf-strip__ring { fill: none; stroke: var(--bf-primary); stroke-width: 2; animation: bf-ping 3.6s ease-out infinite; }
.bf-strip__vehicle { color: var(--bf-text); animation: bf-strip 14s linear infinite; animation-delay: -4s; }
.bf-strip__vehicle use { fill: currentColor; }
@keyframes bf-strip { from { transform: translateX(0); } to { transform: translateX(920px); } }

/* ---- Pause / reduced motion -------------------------------------------- */
html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after { animation-play-state: paused !important; }
html[data-motion] .bf-btn__spinner { animation-play-state: running !important; }
@media (prefers-reduced-motion: reduce) {
	html[data-motion="auto"] *, html[data-motion="auto"] *::before, html[data-motion="auto"] *::after { animation-play-state: paused !important; }
	html[data-motion="auto"] .bf-btn__spinner { animation-play-state: running !important; }
}