.hero {
  position: relative;
  height: 150px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.hero {
  background-image: url(tlo.jpg);
  background-size: 120vw 150px;
  background-position: 0 -10%;
  background-repeat: repeat-x;
  animation: scrollBg 10s linear forwards;
}

.parking {
  position: absolute;
  top: 0;
  right: -30%;
  width: 40%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 3;
  animation: parkingAppear 2s 8s forwards;
}

.plane {
  position: absolute;
  top: 60px;
  right: -150px;
  width: 60px;
  height: 60px;
  object-fit: contain;
  z-index: 2.5;
  opacity: 0;
  animation: planeFly 5s 11s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* 2s pauza po auto/parking */
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 1;
}

.car {
  position: absolute;
  bottom: 0px;
  left: -25%;
  width: 64px;
  height: 64px;
  object-fit: contain;
  z-index: 2;
  animation: drive 10s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, bump 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

@keyframes drive {
  0% {
    left: -25%;
  }
  100% {
    left: 75%;
  }
}

@keyframes scrollBg {
  0% {
    background-position: 0 -10%;
  }
  100% {
    background-position: 60% -10%;
  }
}

@keyframes parkingAppear {
  0% {
    right: -30%;
    opacity: 0;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}

@keyframes planeFly {
  0% {
    right: -150px;
    top: 60px;
    opacity: 0;
    width: 60px;
    height: 60px;
  }
  10% {
    opacity: 1;
  }
  50% {
    top: -30px;
    width: 160px;
    height: 160px;
  }
  90% {
    opacity: 1;
  }
  100% {
    right: calc(100vw + 150px);
    top: -60px;
    opacity: 0;
    width: 60px;
    height: 60px;
  }
}

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