/**
 * Footer Car Animation - Bao Mai Style
 * CSS-based car driving across footer skyline
 */

/* Footer Scene Container */
.kg-footer-scene {
  position: relative;
  width: 100%;
  height: 90px;
  background: var(--kg-footer-scene-bg, #2F2F2F);
  overflow: hidden;
  margin-top: 0;
}

/* Skyline Silhouette - City Buildings */
.kg-footer-skyline {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  height: 70px;
}

/* Road */
.kg-footer-road {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: #1A1A1A;
}

.kg-footer-road::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    #3A3A3A 0px,
    #3A3A3A 40px,
    transparent 40px,
    transparent 80px
  );
  transform: translateY(-50%);
}

/* Moving Car Container */
.kg-footer-car {
  position: absolute;
  bottom: 26px;
  left: 0;
  width: 100px;
  height: auto;
  animation: kgCarDrive 24s linear infinite;
  z-index: 10;
}

.kg-footer-car img,
.kg-footer-car svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

/* Headlight glow effect */
.kg-footer-car::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 20px;
  background: radial-gradient(ellipse at left, rgba(255,220,100,0.35) 0%, transparent 70%);
  pointer-events: none;
}

/* Car Animation */
@keyframes kgCarDrive {
  from { 
    transform: translateX(-120px);
  }
  to { 
    transform: translateX(calc(100vw + 120px));
  }
}

/* Buildings using CSS shapes */
.kg-building {
  position: absolute;
  bottom: 24px;
  background: #3D3D3D;
}

.kg-building-1 {
  left: 2%;
  width: 30px;
  height: 45px;
  border-radius: 2px 2px 0 0;
}
.kg-building-2 {
  left: 5%;
  width: 25px;
  height: 55px;
  border-radius: 2px 2px 0 0;
}
.kg-building-3 {
  left: 9%;
  width: 35px;
  height: 40px;
  border-radius: 2px 2px 0 0;
}
.kg-building-4 {
  left: 14%;
  width: 20px;
  height: 60px;
  border-radius: 2px 2px 0 0;
}
.kg-building-5 {
  left: 17%;
  width: 40px;
  height: 35px;
  border-radius: 2px 2px 0 0;
}
.kg-building-6 {
  left: 23%;
  width: 28px;
  height: 50px;
  border-radius: 2px 2px 0 0;
}
.kg-building-7 {
  left: 27%;
  width: 35px;
  height: 65px;
  border-radius: 2px 2px 0 0;
}
.kg-building-8 {
  left: 33%;
  width: 22px;
  height: 42px;
  border-radius: 2px 2px 0 0;
}
.kg-building-9 {
  left: 36%;
  width: 30px;
  height: 55px;
  border-radius: 2px 2px 0 0;
}
.kg-building-10 {
  left: 40%;
  width: 45px;
  height: 48px;
  border-radius: 2px 2px 0 0;
}
.kg-building-11 {
  left: 46%;
  width: 25px;
  height: 38px;
  border-radius: 2px 2px 0 0;
}
.kg-building-12 {
  left: 49%;
  width: 32px;
  height: 58px;
  border-radius: 2px 2px 0 0;
}
.kg-building-13 {
  left: 54%;
  width: 28px;
  height: 44px;
  border-radius: 2px 2px 0 0;
}
.kg-building-14 {
  left: 58%;
  width: 38px;
  height: 52px;
  border-radius: 2px 2px 0 0;
}
.kg-building-15 {
  left: 64%;
  width: 24px;
  height: 40px;
  border-radius: 2px 2px 0 0;
}
.kg-building-16 {
  left: 67%;
  width: 35px;
  height: 60px;
  border-radius: 2px 2px 0 0;
}
.kg-building-17 {
  left: 73%;
  width: 30px;
  height: 46px;
  border-radius: 2px 2px 0 0;
}
.kg-building-18 {
  left: 77%;
  width: 42px;
  height: 55px;
  border-radius: 2px 2px 0 0;
}
.kg-building-19 {
  left: 83%;
  width: 26px;
  height: 42px;
  border-radius: 2px 2px 0 0;
}
.kg-building-20 {
  left: 87%;
  width: 35px;
  height: 50px;
  border-radius: 2px 2px 0 0;
}
.kg-building-21 {
  left: 92%;
  width: 28px;
  height: 38px;
  border-radius: 2px 2px 0 0;
}

/* Window lights on buildings */
.kg-building::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 4px;
  background: rgba(255, 200, 100, 0.3);
  border-radius: 1px;
}

.kg-building::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  background: rgba(255, 200, 100, 0.2);
  border-radius: 1px;
}

/* Tall buildings get extra windows */
.kg-building-2::before,
.kg-building-4::before,
.kg-building-7::before,
.kg-building-9::before,
.kg-building-16::before {
  top: 6px;
  width: 50%;
}
.kg-building-2::after,
.kg-building-4::after,
.kg-building-7::after,
.kg-building-9::after,
.kg-building-16::after {
  top: 14px;
  width: 40%;
}

/* Antenna on some buildings */
.kg-building-7::before {
  box-shadow: 0 -8px 0 0 #4A4A4A;
}

/* Reduced Motion - Stop Animation */
@media (prefers-reduced-motion: reduce) {
  .kg-footer-car {
    animation: none;
    left: 15%;
  }
  
  .kg-footer-scene::after {
    content: none;
  }
}

/* Mobile - Smaller scene */
@media (max-width: 768px) {
  .kg-footer-scene {
    height: 55px;
  }
  
  .kg-footer-car {
    width: 55px;
    bottom: 14px;
  }
  
  .kg-footer-skyline {
    bottom: 14px;
    height: 41px;
  }
  
  .kg-footer-road {
    height: 14px;
  }
  
  .kg-building {
    bottom: 14px;
  }
  
  .kg-building-1 { width: 15px; height: 22px; }
  .kg-building-2 { width: 12px; height: 28px; left: 5%; }
  .kg-building-3 { width: 18px; height: 20px; left: 9%; }
  .kg-building-4 { width: 10px; height: 30px; left: 14%; }
  .kg-building-5 { width: 20px; height: 18px; left: 17%; }
  .kg-building-6 { width: 14px; height: 25px; left: 23%; }
  .kg-building-7 { width: 18px; height: 33px; left: 27%; }
  .kg-building-8 { width: 11px; height: 21px; left: 33%; }
  .kg-building-9 { width: 15px; height: 28px; left: 36%; }
  .kg-building-10 { width: 22px; height: 24px; left: 40%; }
  .kg-building-11 { width: 12px; height: 19px; left: 46%; }
  .kg-building-12 { width: 16px; height: 29px; left: 49%; }
  .kg-building-13 { width: 14px; height: 22px; left: 54%; }
  .kg-building-14 { width: 19px; height: 26px; left: 58%; }
  .kg-building-15 { width: 12px; height: 20px; left: 64%; }
  .kg-building-16 { width: 18px; height: 30px; left: 67%; }
  .kg-building-17 { width: 15px; height: 23px; left: 73%; }
  .kg-building-18 { width: 21px; height: 28px; left: 77%; }
  .kg-building-19 { width: 13px; height: 21px; left: 83%; }
  .kg-building-20 { width: 18px; height: 25px; left: 87%; }
  .kg-building-21 { width: 14px; height: 19px; left: 92%; }
}

/* Very small screens */
@media (max-width: 480px) {
  .kg-footer-car {
    width: 40px;
    bottom: 10px;
  }
  
  .kg-footer-scene {
    height: 45px;
  }
}