* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
  position: relative;
}

.track {
  width: 500px;
  height: 100vh;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===================== CHARACTERS ===================== */

.char_frame {
  position: absolute;
  bottom: 2px;
  width: 100px;
  height: 150px;
  z-index: 10;
}

.char_frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  animation: run 0.75s infinite;
}

#char_frame_left {
  left: 40%;
  transform: translateX(-50%);
  visibility:hidden;
}

#char_frame_center {
  left: 50%;
  transform: translateX(-50%);
  visibility:visible;
}

#char_frame_right {
  left: 60%;
  transform: translateX(-50%);
  visibility: hidden;
}

/* ===================== RUN ANIMATION ===================== */
@keyframes run {
  0%   { content: url("assets/f1-removebg-preview.png"); }
  16%  { content: url("assets/f2-removebg-preview.png"); }
  32%  { content: url("assets/f3-removebg-preview.png"); }
  48%  { content: url("assets/f4-removebg-preview.png"); }
  64%  { content: url("assets/f5-removebg-preview.png"); }
  80%  { content: url("assets/f6-removebg-preview.png"); }
  100% { content: url("assets/f1-removebg-preview.png"); }
}

.char_frame img {
  content: url("assets/f1-removebg-preview.png");
}


/* ===================== RESPONSIVE ===================== */

/* Small phones (max 480px) */
@media (max-width: 480px) {
  .track {
    width: 100vw; /* full width */
  }

  .char_frame {
    width: 70px;
    height: 110px;
    bottom: 5px;
  }

  #char_frame_left {
    left: 30%;
  }

  #char_frame_center {
    left: 50%;
  }

  #char_frame_right {
    left: 70%;
  }
}

/* Medium phones / Tablets (max 768px) */
@media (max-width: 768px) {
  .track {
    width: 80vw;
  }

  .char_frame {
    width: 85px;
    height: 130px;
    bottom: 5px;
  }

  #char_frame_left {
    left: 35%;
  }

  #char_frame_center {
    left: 50%;
  }

  #char_frame_right {
    left: 65%;
  }
}

/* Laptops (max 1024px) */
@media (max-width: 1024px) {
  .track {
    width: 500px;
  }

  .char_frame {
    width: 95px;
    height: 145px;
  }
}

.train{
  display: flex;
  position:absolute;
  top: 50px;
  height: 400px;
  width: 100px;
}

#right_train{
  left: 553px;
  visibility: hidden;
}
#center_train{
  left: 712px;
  visibility: hidden;
  
}
#left_train{
  right: 553px;
  visibility: hidden;
}

.train img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}


.train {
  position: absolute;
  top: -450px;   /* start far above screen */
  height: 400px;
  width: 120px;
  z-index: 20;

  animation: trainComing 1.1s linear infinite;
}

.train img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* ======= Animation ======= */
@keyframes trainComing {
  0% {
    top: -450px;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    top: 100vh;
    opacity: 1;
  }
}