/* Keyframes for animating the course tag */
@keyframes courseAnimation {
  0% {
      transform: rotate(-90deg) scale(1);
      opacity: 1;
  }
  50% {
      transform: rotate(-90deg) scale(1.2);
      opacity: 1;
  }
  100% {
      transform: rotate(-90deg) scale(1);
      opacity: 1;
  }
}

/* Keyframes for animating the food type flag */
@keyframes flagAnimation {
  0% {
      transform: scale(1) rotate(0);
  }
  50% {
      transform: scale(1.2) rotate(10deg);
  }
  100% {
      transform: scale(1) rotate(0);
  }
}

/* Apply animation on hover */
.group:hover .animate-course {
  animation: courseAnimation 1s ease-in-out ;
}

.group:hover .animate-flag {
  animation: flagAnimation 1s ease-in-out;
}

.image-hover-animation {
  transition: transform 0.3s ease-in-out; /* Smooth animation */
}

.card:hover .image-hover-animation {
  transform: scale(1.05) rotate(3deg); /* Slight zoom and rotation on hover */
}

.bg-image-animation {
  background-image: url('/static/images/Animasi/BG_Final.png');
  background-size: cover; /* Ensures the image always covers the entire container */
  background-repeat: no-repeat;
  background-position: center bottom; /* Keeps the image anchored to the bottom center */
  height: 100vh; /* Makes the container full viewport height */
  width: 100%; /* Ensures the container spans the full width */
}


.cloud {
  position: absolute;
  z-index: 5; /* Clouds above the background */
  width: auto;
  height: 100px; /* Adjust the height of the clouds */
  opacity: 0.8;
  animation: floatClouds 30s infinite linear; /* Animation to make clouds float */
}

.cloud1 {
  left: 10%;
  top: 20%;
  animation-duration: 65s;
}

/* Cloud 2 positioning */
.cloud2 {
  left: 50%;
  top: 15%;
  animation-duration: 40s;
}

/* Cloud 3 positioning */
.cloud3 {
  right: 10%;
  top: 10%;
  animation-duration: 30s;
}

.sun {
  right: 10%;
  top: 10%;
  position: absolute;
  z-index: 4; /* Ensure the sun is above the background */
  width: 80px;
  height: 80px;
  background-color: #FFD700; /* Sun's color */
  border-radius: 50%; /* Makes it a circle */
  box-shadow: 0 0 30px 15px rgba(255, 215, 0, 0.8); /* Glow effect */
  animation: rotateSun 10s linear infinite, pulseGlow 2s ease-in-out infinite;
}

/* Rotate animation */
@keyframes rotateSun {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pulse glow effect */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 30px 20px rgba(255, 215, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 50px 33px rgba(255, 215, 0, 0.8);
  }
}


/* Animation for floating clouds */
@keyframes floatClouds {
  0% {
      transform: translateX(-150%); /* Start from left off-screen */
  }
  100% {
      transform: translateX(120%); /* End at right off-screen */
  }
}

.gedung1 {
  position: absolute;
  right: 70%;
  top:43%;
  z-index: 4; 
  height: 250px; 
}

.gedung2 {
  position: absolute;
  right: 55%;
  top:42%;
  z-index: 3; 
  height: 250px; 
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; /* Smooth transition for hover effect */
}

.gedung2:hover {
  transform: scale(1.01); /* Slight zoom effect */
  filter: brightness(1.3); /* Brighten the image slightly */
}

.gedung3 {
  position: absolute;
  right: 73%;
  top:65%;
  z-index: 10; 
  height: 130px; 
}


.orang1 {
  position: absolute;
  right: 91%;
  top: 75%;
  z-index: 3;
  height: 60px;
  animation: moveBackForth 5s ease-in-out infinite;
  transform-origin: center; /* Ensures smooth transformation */
}

.orang2 {
  position: absolute;
  right: 73%;
  top: 75%;
  z-index: 3;
  height: 60px;
  animation: moveBackForth2 3s ease-in-out infinite;
}

.billboard {
  position: absolute;
  height: 200px;
  right: 32%;
  top: 46%;
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; /* Smooth transition for hover effect */
}

.billboard:hover {
  transform: scale(1.01); /* Slight zoom effect */
  filter: brightness(1.2); /* Brighten the image slightly */
}


.rumput_billboard {
  position: absolute;
  height: 200px;
  right: 22%;
  top: 45%;
  z-index: 1;
}

.rumput_gedung_2 {
  position: absolute;
  height: 120px;
  right: 5px;
  top: 65%;
  z-index: 2;
}

.stall_barco {
  position: absolute;
  height: 130px;
  right: 15%;
  top: 60%;
  z-index: 2;
  transition: box-shadow 0.3s ease, transform 0.3s ease, filter 0.3s ease; /* Smooth shadow, zoom, and filter */
}

.stall_barco:hover {
  transform: scale(1.01); /* Slight zoom effect */
  filter: brightness(1.2); /* Brighten the image slightly */
}


/* Keyframes for back-and-forth movement and mirroring */
@keyframes moveBackForth {
  0% {
    transform: translateX(0) scaleX(-1); /* Start at left, facing left */
  }
  49.9% {
    transform: translateX(100px) scaleX(-1); /* Move right 50px, still facing left */
  }
  50% {
    transform: translateX(100px) scaleX(1); /* Instant flip at 50px */
  }
  100% {
    transform: translateX(0) scaleX(1); /* Move back to left, still facing left */
  }
}

@keyframes moveBackForth2 {
  0% {
    transform: translateX(0) scaleX(1); /* Start at left, facing left */
  }
  49.9% {
    transform: translateX(60px) scaleX(1); /* Move right 50px, still facing left */
  }
  50% {
    transform: translateX(60px) scaleX(-1); /* Instant flip at 50px */
  }
  100% {
    transform: translateX(0) scaleX(-1); /* Move back to left, still facing left */
  }
}

@keyframes moveTruck {
  0% {
    transform: translateX(0); /* Start at the leftmost side of the screen */
  }
  40% {
    transform: translateX(800px); /* Stop at gedung1 (700px) */
  }
  60% {
    transform: translateX(800px); /* Stop 200px to the right of gedung1 (900px) */
  }
  70% {
    transform: translateX(1100px); /* Stop 200px to the right of gedung1 (900px) */
  }
  80% {
    transform: translateX(1100px); /* Stop 200px to the right of gedung1 (900px) */
  }
  100% {
    transform: translateX(120vw); /* Move to the rightmost side of the screen */
  }
}

.truk {
  position: absolute;
  left: -15%;
  top: 70%;
  z-index: 6;
  height: 100px;
  animation: moveTruck 15s linear infinite, transform 0.3s ease, filter 0.3s ease; /* Ensure continuous movement */
  animation-delay: 2s;
}

.truk:hover {
  transform: scale(1.01); /* Slight zoom effect */
  filter: brightness(1.3); /* Brighten the image slightly */
}


.motor {
  position: absolute;
  left: -200px;
  top: 80%;
  z-index: 20;
  height: 80px;
  animation: moveMotor 12s ease-in-out infinite; /* 6s for the full cycle */
  animation-delay: 3s;
}

/* Keyframes for back-and-forth movement with flipping */
@keyframes moveMotor {
  0% {
    transform: translateX(1800px) scaleX(-1); /* Start at left, facing left */
  }
  100% {
    transform: translateX(-500px) scaleX(-1); /* Move right 50px, still facing left */
  }
}

.box {
  position: absolute;
  right: 280px;
  top: 73%;
  z-index: 4;
  height: 60px;
  width: 60px; /* Define width for visibility */
  opacity: 0; /* Initially hidden */
  animation: appearDisappear 30s infinite; /* Trigger animation */
}

.gedung_resto {
  position: absolute;
  right: 0;
  top: 42%;
  z-index: 2;
  height: 200px;
  transition: box-shadow 0.3s ease, transform 0.3s ease, filter 0.3s ease; /* Smooth shadow, zoom, and filter */

}

.gedung_resto:hover {
  transform: scale(1.01); /* Slight zoom effect */
  filter: brightness(1.3); /* Brighten the image slightly */
}


.kursi {
  position: absolute;
  right: 35%;
  top: 75%;
  z-index: 3;
  height: 30px;
}

.phone {
  position: absolute;
  right: 35%;
  top: 75%;
  z-index: 20;
  height: 100px;
  width:60px;
}

@keyframes appearDisappear {
  0%, 40% {
    opacity: 0; /* Hidden for the first 10 seconds */
  }
  40.1%, 60% {
    opacity: 1; /* Visible for the last 2 seconds */
  }
  60.1%, 100% {
    opacity: 0; /* Visible for the last 2 seconds */
  }
}

@keyframes moveRightAndDisappear {
  0% {
    transform: translateX(0); /* Start at original position */
    opacity: 0; /* Fully invisible */
  }
  50% {
    transform: translateX(0); /* Still in original position */
    opacity: 0; /* Still invisible */
  }
  51% {
    transform: translateX(0); /* Start becoming visible */
    opacity: 1; /* Fully visible */
  }
  70% {
    transform: translateX(100px); /* Move 100px to the right */
    opacity: 1; /* Still visible */
  }
  71%{
    transform: translateX(100px); /* Move 100px to the right */
    opacity: 0;
  }
  80% {
    transform: translateX(100px); /* End position remains the same */
    opacity: 0; /* Still visible */
  }
  100% {
    transform: translateX(100px); /* End position remains the same */
    opacity: 0; /* Fully invisible */
  }
}

@keyframes moveLeftAndDisappear {
  0% {
    transform: translateX(0); /* Start at original position */
    opacity: 0; /* Fully invisible */
  }
  71% {
    transform: translateX(0); /* Still in original position */
    opacity: 0; /* Still invisible */
  }
  72% {
    transform: translateX(0); /* Start becoming visible */
    opacity: 1; /* Fully visible */
  }
  89% {
    transform: translateX(-100px); /* Move 100px to the left */
    opacity: 1; /* Still visible */
  }
  90% {
    transform: translateX(-100px); /* End position at 100px to the left */
    opacity: 0; /* Fully invisible */
  }
  91% {
    transform: translateX(-100px); /* End position remains the same */
    opacity: 0; /* Still invisible */
  }
  100% {
    transform: translateX(-100px); /* End position remains the same */
    opacity: 0; /* Fully invisible */
  }
}

.orang3 {
  position: absolute;
  left: 42%;
  top: 73%;
  z-index: 1;
  height: 70px;
  animation: moveRightAndDisappear 15s infinite; /* 15-second loop */
}


.orang4 {
  position: absolute;
  left: 50%;
  top: 73%;
  z-index: 1;
  height: 70px;
  animation: moveLeftAndDisappear 15s infinite;
}


@keyframes moveLeftAndDisappear {
  0% {
    transform: translateX(0); /* Start at original position */
    opacity: 0; /* Fully invisible */
  }
  71% {
    transform: translateX(0); /* Still in original position */
    opacity: 0; /* Still invisible */
  }
  72% {
    transform: translateX(0); /* Start becoming visible */
    opacity: 1; /* Fully visible */
  }
  89% {
    transform: translateX(-100px); /* Move 100px to the left */
    opacity: 1; /* Still visible */
  }
  90% {
    transform: translateX(-100px); /* End position at 100px to the left */
    opacity: 0; /* Fully invisible */
  }
  91% {
    transform: translateX(-100px); /* End position remains the same */
    opacity: 0; /* Still invisible */
  }
  100% {
    transform: translateX(-100px); /* End position remains the same */
    opacity: 0; /* Fully invisible */
  }
}


.motor_roket {
  position: absolute;
  left: 200px;
  bottom:200px;
  z-index: 2;
  height: 100px; /* Adjust based on your image size */
  transform: rotate(-45deg); /* Tilt diagonally to the right */
  animation: launchDiagonalRight 5s ease-in-out; /* Rocket launch animation */
  animation-delay: 30s;
}



@keyframes launchDiagonalRight {
  0% {
    top: 70%;
    left: 200px; /* Starting position */
    transform: rotate(-45deg) scale(1); /* Initial tilt */
    opacity: 1;
  }
  70% {
    top: 30%;
    left: 400px; /* Move diagonally toward the right */
    transform: rotate(-15deg) scale(1.1); /* Slight zoom for perspective */
    opacity: 1;
  }
  100% {
    top: -20%;
    left: 600px; /* Off-screen diagonally to the right */
    transform: rotate (-10deg) scale(0.9); /* Smaller as it moves away */
    opacity: 0; /* Fade out */
  }
}

@keyframes flicker {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(0.8);
    opacity: 0.8;
  }
}