/* Shared motion: highway scene, driving trucks, scroll reveals. All motion stops for reduced-motion users. */
.highway { position: relative; height: 170px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #3a2417 0%, #8a4a24 38%, #e8a54b 62%, #f3c27a 66%, #2b2019 66.5%);
  box-shadow: 0 18px 40px rgba(0,0,0,.45) }
.highway .sun { position: absolute; left: 62%; top: 38%; width: 90px; height: 90px; margin: -45px; border-radius: 50%;
  background: radial-gradient(circle, #fff3d6 0%, #ffd27a 45%, rgba(255,190,90,0) 70%); animation: sunpulse 6s ease-in-out infinite }
.highway .hills { position: absolute; left: 0; right: 0; bottom: 34%; height: 40px;
  background: radial-gradient(60% 100% at 20% 100%, #4a2c1b 60%, transparent 61%), radial-gradient(50% 100% at 75% 100%, #5a3420 60%, transparent 61%) }
.highway .road { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: #1d1612 }
.highway .road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
  background: repeating-linear-gradient(90deg, #e8a54b 0 34px, transparent 34px 68px); animation: dashes .9s linear infinite }
.highway .road::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #6b4a2e }
.highway .rig { position: absolute; bottom: 14%; width: 210px; height: auto; animation: drive 9s linear infinite; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)) }
.highway .rig.back { bottom: 21%; width: 120px; opacity: .75; animation: driveback 14s linear infinite; animation-delay: -5s }
.highway .tag { position: absolute; left: 16px; top: 14px; font: 700 13px var(--body); letter-spacing: .16em; text-transform: uppercase; color: #fff3d6; text-shadow: 0 2px 8px rgba(0,0,0,.5) }
@keyframes dashes { from { background-position: 0 0 } to { background-position: -68px 0 } }
@keyframes drive { from { transform: translateX(-240px) } to { transform: translateX(calc(100vw + 40px)) } }
@keyframes driveback { from { transform: translateX(calc(100vw + 40px)) scaleX(-1) } to { transform: translateX(-160px) scaleX(-1) } }
@keyframes sunpulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.08) } }

/* little truck that drives along a road strip above footers */
.roadstrip { position: relative; height: 46px; overflow: hidden; border-bottom: 3px solid #3a2a1e }
.roadstrip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, #e8a54b 70%, transparent) 0 22px, transparent 22px 44px); animation: dashes2 1s linear infinite }
.roadstrip .rig { position: absolute; bottom: 9px; width: 120px; animation: drive 12s linear infinite }
@keyframes dashes2 { from { background-position: 0 0 } to { background-position: -44px 0 } }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease }
.reveal.in { opacity: 1; transform: none }

/* logo card float + loads tabs shimmer */
.logo-card { animation: floaty 6s ease-in-out infinite }
@keyframes floaty { 0%,100% { transform: rotate(-1.2deg) translateY(0) } 50% { transform: rotate(-.4deg) translateY(-6px) } }
.loadtab { position: relative; overflow: hidden }
.loadtab::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: shine 4.5s ease-in-out infinite }
@keyframes shine { 0%,60% { left: -80px } 100% { left: 110% } }
.lt-go { transition: transform .2s ease } .loadtab:hover .lt-go { transform: translateX(6px) }
.load { transition: transform .2s ease, box-shadow .2s ease } .load:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.4) }

@media (prefers-reduced-motion: reduce) {
  .highway .rig, .highway .sun, .highway .road::before, .roadstrip .rig, .roadstrip::before, .logo-card, .loadtab::after { animation: none }
  .highway .rig { left: 30% } .highway .rig.back { display: none } .roadstrip .rig { left: 40% }
  .reveal { opacity: 1; transform: none; transition: none }
}