/* Reset + Base Setup */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  height: 100vh;
  position: relative;
  background-color: #87ceeb; /* Fallback if sky image fails */
}

/* Sky background */
.sky-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: flex;
  z-index: 0;
  animation: scrollSky 60s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  overflow: hidden;
}

.sky {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 👈 STRETCHES the image cleanly */
  display: block;
}

/* Trees background */
.trees {
  background: url("trees.png") no-repeat center bottom/cover;
  position: absolute;
  width: 100%;
  height: 85%;
  z-index: 1;
}

.track-wrapper {
  position: absolute;
  bottom: 0;
  height: 30vh;
  width: 200%; /* 2 tracks side-by-side */
  display: flex;
  z-index: 2;
  animation: moveTrack 3s linear infinite;
}

.track {
  width: 100%;
  height: 100%;
  background: url("track.png") repeat-x center/contain;
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: cover;
}

/* Car Setup */
.car {
  position: absolute;
  bottom: 27vh; /* adjust this for better car-to-track placement */
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: auto;
  z-index: 3;
  animation: shake 2.25s linear infinite;
}

/* Car Body */
.car-body {
  position: relative;
  width: 100%;
  z-index: 3;
  filter: drop-shadow(
    0 5px 5px rgba(0, 0, 0, 0.3)
  ); /* subtle shadow under car */
}

/* Wheels */
.wheel {
  position: absolute;
  width: 60px;
  height: 60px;
  object-fit: contain;
  animation: spin 1.2s linear infinite;
  z-index: 4;
}

/* Wheel Placement */
.left-wheel {
  bottom: -4px;
  left: 35px;
}

.right-wheel {
  bottom: -5px;
  right: 53px;
}

/* Animations */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveTrack {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes shake {
  0% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(-5px);
  }
}

@keyframes scrollSky {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
 @media (max-width: 768px) {
  /* SKY */
  .sky-wrapper {
    height: 100%;
  }
  .sky {
    object-fit: cover;
  }

  /* TREES */
  .trees {
    position: absolute;
    bottom: 20vh;         /* sits just above the track */
    width: 100%;
    height: 55vh;
    background: url('trees.png') no-repeat center bottom / cover;
  }

  /* TRACK */
  .track-wrapper {
    bottom: 0;
    height: 20vh;
    width: 200%;
    animation: moveTrack 3s linear infinite;
    overflow: hidden;
  }

  .track {
    width: 100%;
    height: 100%;
    background: url('track.png') repeat-x bottom / cover;
  }

  /* CAR */
  .car {
    width: 50vw;
    bottom: 20vh; /* same as track height */
  }

  .left-wheel {
    left: 10%;
    bottom: -3%;
  }

  .right-wheel {
    right: 10%;
    bottom: -3%;
  }
}

@media (max-width: 480px) {
  /* SKY */
  .sky-wrapper {
    height: 100%;
    width: 300%;
  }
  .sky {
    object-fit: cover;
  }

  /* TREES */
  .trees {
    position: absolute;
    bottom: 20vh;
    width: 173%;
    height: 50vh;
    background: url('trees.png') no-repeat center bottom / cover;
  }

  /* TRACK */
  .track-wrapper {
    bottom: 0;
    height: 20vh;
    width: 200%;
    animation: moveTrack 3s linear infinite;
    overflow: hidden;
  }

  .track {
    width: 100%;
    height: 100%;
    background: url('track.png') repeat-x bottom / cover;
  }

  /* CAR */
  .car {
    width: 65vw;
    bottom: 20vh;
  }

  .left-wheel {
    left: 9%;
    bottom: -4%;
  }

  .right-wheel {
    right: 17%;
    bottom: -13%;
  }
}