/* Reset */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Stop page scroll */
}

.stage {
  position: center;
  width: 1000px;   /* roughly the width of the train */
  height: 800px;  /* roughly the height of the train + some space */
  overflow: hidden; /* hide anything outside the stage */
}

/* Centered logo */
.logo {
  position: absolute;
  top: 6%;
  left:15%;
  z-index: 2;
  animation: float 3s ease-in-out infinite;
}


.logo img {
  width: 350px; /* Adjust size */
  transform: rotate(-10deg);
}


/* Background scroll animation */
.background {
  background-image: url("assets/city.png");
  background-repeat: repeat-x;       
  background-size: auto 75%;            /* scale to fill width */
  background-position: 0 center;   /* start at the top */
  width: 100%;
  height: 95%;
  position: relative;
  top: 0;
  left: 0;
  z-index: -2;

  /* Animate the background position */
  animation: scrollBackground 2s linear infinite;
}

@keyframes scrollBackground {
  from { background-position:  0; }
  to   { background-position:  100%; } /* seamless infinite scroll */
}



/* Foreground element */
.foreground {
  position: absolute;
  width: 100%;
  height: 95%;
  top: 37%;
  left: 23%;
  z-index: -1;
}

.animated-foreground {
  width: 1000px;
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translatX(0%) translateY(0px); }
  50% { transform: translateX(-1%) translateY(-6px); }
}



/* foreground scroll animation */
.rail {
  background-image: url("assets/rail.png");
  background-repeat: repeat-x;       
  background-size: auto 75%;            /* scale to fill width */
  background-position: 0 center;   /* start at the top */
  width: 1000px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 22.5%;
  z-index: 1;

  /* Animate the background position */
  animation: scrollRail 8s linear infinite;
}

@keyframes scrollRail {
  from { background-position:  0;}
  to   { background-position:  100%;} /* seamless infinite scroll */
}