:root {
  --animHeight: 420px;
  --streetHeight: 70px;
  --skyWidth: -1575px;
  --cloudsWidth: -2625px;
  --cityWidth: -5100px;
  --airplaneWidth: 120px;
}

/* αρχικές τιμές για να μην “αναβοσβήνει” */

#a-scene {
  min-height: var(--animHeight);
  position: relative;
  background: #f4f1ed;
}

.fulldiv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#a-sky {
  background-image: url('/images/animation/sky.svg');
  background-size: calc(-1 * var(--skyWidth)) 100%;
  background-repeat: repeat-x;
  width: calc(100% - var(--skyWidth));
  animation: 30s infinite sky-an linear;
  will-change: transform;
}

#a-clouds {
  background-image: url('/images/animation/clouds.webp');
  background-size: calc(-1 * var(--cloudsWidth)) 50%;
  background-repeat: repeat-x;
  background-position: 0 10px;
  width: calc(100% - var(--cloudsWidth));
  animation: 36s infinite clouds-an linear;
  will-change: transform;
}

#a-street {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--streetHeight);
  background: linear-gradient(0deg, #ddd 0%, #999 60%);
}

#a-city {
  background-image: url('/images/animation/ier.webp');
  background-size: calc(-1 * var(--cityWidth)) 100%;
  background-repeat: repeat-x;
  background-position: 0 bottom;
  width: calc(100% - var(--cityWidth));
  animation: 44s infinite city-an linear;
  margin-bottom: var(--streetHeight);
  will-change: transform;
  z-index: 5;
}

#a-bike {
  background-image: url('/images/animation/bike.webp');
  background-size: auto 30%;
  background-repeat: no-repeat;
  background-position: center bottom 40px;
  animation: 1s infinite bike-an ease-in-out;
  z-index: 10;
}

#a-bike2 {
  background-image: url('/images/animation/bike2.webp');
  background-size: auto 30%;
  background-repeat: no-repeat;
  background-position: left 250px bottom 0;
  animation: 1s infinite bike-an ease-in-out;
  z-index: 10;
}

#a-airplane {
  position: absolute;
  bottom: 20px;
  /* Στο ύψος των ποδηλάτων περίπου */
  right: -150vw;
  /* Ξεκινάει πολύ έξω από την οθόνη στα δεξιά (ένα ολόκληρο πλάτος οθόνης) */
  background-image: url('/images/animation/airplane.webp');
  background-size: 100%;
  background-repeat: no-repeat;

  /* Αφήνουμε το box στο αρχικό του μέγεθος */
  width: calc(var(--animHeight) * 1);
  /* Το μεγαλώνουμε κατά 2 φορές ακριβώς από το κέντρο του */
  height: calc(var(--animHeight) * 1);
  scale: 1.1;

  animation: 30s infinite airplane-fly linear;
  z-index: 4;
  /* Το βάζουμε κάτω από το 5 του city */
}

@keyframes airplane-fly {
  0% {
    transform: translate(0, 0);
  }

  15% {
    transform: translate(-50vw, -10px);
  }

  30% {
    transform: translate(-100vw, 10px);
  }

  45% {
    transform: translate(-150vw, -10px);
  }

  60% {
    transform: translate(-200vw, 10px);
  }

  70% {
    transform: translate(-250vw, 0);
  }

  100% {
    transform: translate(-250vw, 0);
  }
}


@keyframes sky-an {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(var(--skyWidth), 0, 0);
  }
}

@keyframes clouds-an {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(var(--cloudsWidth), 0, 0);
  }
}

@keyframes city-an {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(var(--cityWidth), 0, 0);
  }
}

@keyframes bike-an {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes wheel-an {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}