/* The loading screen: Easy Lane's logo and a truck on the road. It fades in only after a
   moment, so a quick start never flashes it. The same rules style the React copy (Splash). */
.splash { position: fixed; inset: 0; z-index: 100; background: #1e2226; display: flex; align-items: center; justify-content: center; opacity: 0; animation: splash-in .3s ease .35s forwards; font-family: "Anek Latin Variable", system-ui, -apple-system, "Segoe UI", sans-serif; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.splash-logo { width: 150px; height: auto; display: block; }
.splash-s { color: #b7bec6; font-size: 14px; margin-top: -12px; }
.splash-road { width: min(340px, 78vw); height: 44px; background: #2c3137; border-radius: 6px; position: relative; overflow: hidden; }
.splash-road::before { content: ""; position: absolute; left: 0; right: -40px; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, #fccf3f 0 22px, transparent 22px 40px); animation: splash-road .6s linear infinite; }
.splash-road::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; bottom: 6px; border-top: 1.5px solid rgba(255, 255, 255, 0.45); border-bottom: 1.5px solid rgba(255, 255, 255, 0.45); }
.splash-truck { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffffff; background: #2c3137; padding: 0 4px; z-index: 1; box-sizing: content-box; animation: splash-bob .5s ease-in-out infinite alternate; }
.splash-msg { color: #b7bec6; font-size: 13.5px; }
@keyframes splash-in { to { opacity: 1; } }
@keyframes splash-road { to { transform: translateX(-40px); } }
@keyframes splash-bob { to { transform: translate(-50%, calc(-50% - 1.5px)); } }
@media (prefers-reduced-motion: reduce) {
  .splash, .splash-road::before, .splash-truck { animation: none; }
  .splash { opacity: 1; }
}