/*
Animations for Logistics Vehicles
This file contains the keyframes and layout styles for the animated decorative bands.
*/
.animation-band {
position: relative;
width: 100%;
height: 180px;
overflow: hidden;
}
/* Common vehicle styling */
.animated-vehicle {
position: absolute;
will-change: transform;
z-index: 10;
}
/* --- The Road --- */
.bg-road {
background: linear-gradient(to bottom, var(--tw-gradient-from, #e9f1ff) 0%, var(--tw-gradient-from, #e9f1ff) 65%, #656464 65%, #656464 100%);
}
.road-lines {
position: absolute;
bottom: 25px; /* Middle of the road */
width: 100%;
height: 4px;
background-image: linear-gradient(to right, #ffffff 50%, transparent 50%);
background-size: 60px 100%;
opacity: 0.7;
}
/* The City Skyline */
.scenery-city {
position: absolute;
bottom: 63px; /* Just above the road */
width: 100%;
height: 120px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
background-size: 1000px 120px;
}
/* --- The Ocean --- */
.bg-ocean {
background: linear-gradient(to bottom, #dbe9ff 0%, #dbe9ff 55%, #0d1c2d 55%, #233143 100%);
}
.wave-lines {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
background-image: radial-gradient(circle at 10px 0px, transparent 15px, #233143 16px);
background-size: 40px 20px;
opacity: 0.3;
}
/* --- The Sky --- */
.bg-sky {
background: linear-gradient(to bottom, #e5efff 0%, #f8f9ff 100%);
}
.clouds {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
background-size: 1000px 200px;
animation: driftClouds 60s linear infinite;
opacity: 0.8;
}
/* --- Animations --- */
@keyframes driftClouds {
from { background-position: 0 0; }
to { background-position: -1000px 0; }
}
@keyframes driveLeftToRight {
from { transform: translateX(-200px); }
to { transform: translateX(calc(100vw + 200px)); }
}
@keyframes driveRightToLeft {
from { transform: translateX(calc(100vw + 200px)) scaleX(-1); }
to { transform: translateX(-200px) scaleX(-1); }
}
@keyframes floatShip {
0% { transform: translateY(0) translateX(-300px); }
25% { transform: translateY(-4px) translateX(calc(25vw)); }
50% { transform: translateY(0px) translateX(calc(50vw)); }
75% { transform: translateY(-4px) translateX(calc(75vw)); }
100% { transform: translateY(0) translateX(calc(100vw + 300px)); }
}
@keyframes flyPlane {
0% { transform: translateY(30px) translateX(-300px); }
100% { transform: translateY(-20px) translateX(calc(100vw + 300px)); }
}
/* Vehicle Types */
.vehicle-truck { width: 140px; height: 55px; bottom: 33px; }
.vehicle-truck-lane-2 { width: 130px; height: 50px; bottom: 5px; filter: brightness(0.8); }
.vehicle-ship { width: 250px; height: 100px; bottom: 20px; }
.vehicle-plane { width: 200px; height: 80px; top: 40px; bottom: auto; }
/* Speeds */
.anim-truck-slow { animation: driveLeftToRight 28s linear infinite; }
.anim-truck-fast { animation: driveLeftToRight 16s linear infinite; }
.anim-truck-reverse { animation: driveRightToLeft 22s linear infinite; }
.anim-ship { animation: floatShip 45s linear infinite; }
.anim-plane { animation: flyPlane 15s linear infinite; }