/* animation */
.float-bob-x {
  -webkit-animation-name: float-bob-x;
  animation-name: float-bob-x;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.float-bob-y {
  -webkit-animation-name: float-bob-y;
  animation-name: float-bob-y;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes float-bob-x {
  0% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
}

@keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

/* animation: marquee-scroll 30s linear infinite; */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }

  100% {
    /* * Di chuyển 50% vì bạn đã nhân đôi nội dung.
     * Khi kết thúc, nó sẽ lặp lại liền mạch.
     */
    transform: translateX(-50%);
  }
}

@keyframes reveal-line {
 from { width: 0; }
 to { width: 100%; }
}

/* Keyframe cho logo hiện ra */
@keyframes fade-in {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
}

/* Keyframe cho máy bay (Bay + Ẩn/Hiện) */
@keyframes fly-show-hide {
 0% {
  offset-distance: 0%;
  opacity: 0; /* Ẩn lúc bắt đầu (trước khi delay) */
 }
 1% {
  offset-distance: 0%; /* Bắt đầu bay */
  opacity: 1; /* Hiện ra */
 }
 99% {
  offset-distance: 100%; /* Sắp bay xong */
  opacity: 1; /* Vẫn hiện */
 }
 100% {
  offset-distance: 100%;
  opacity: 0; /* Ẩn đi khi kết thúc */
 }
}