@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

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

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

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

.animate-fade-in-down {
  animation: fade-in-down 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-600 {
  animation-delay: 0.6s;
}

.lamp-left,
.lamp-right {
  position: absolute;
  z-index: 20;
  width: 60px; /* ukuran default */
  max-width: 15vw; /* responsive width maksimal */
}

/* Posisi default untuk desktop */
.lamp-left {
  left: 1rem; /* 16px */
  top: 6rem; /* 96px */
}

.lamp-right {
  right: 1rem;
  top: 9rem; /* 144px */
}

/* Media query untuk mobile */
@media (max-width: 640px) {
  .lamp-left {
    left: 5vw; /* lebih flexible */
    top: 5vh;
    width: 12vw;
  }

  .lamp-right {
    right: 5vw;
    top: 8vh;
    width: 12vw;
  }
}

/* Animasi kamu */
@keyframes sway-left {
  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }
  25% {
    transform: translateY(-8px) rotate(-12deg);
  }
  50% {
    transform: translateY(0) rotate(-8deg);
  }
  75% {
    transform: translateY(8px) rotate(-4deg);
  }
}

@keyframes sway-right {
  0%,
  100% {
    transform: translateY(0) rotate(8deg);
  }
  25% {
    transform: translateY(8px) rotate(12deg);
  }
  50% {
    transform: translateY(0) rotate(8deg);
  }
  75% {
    transform: translateY(-8px) rotate(4deg);
  }
}

.animate-sway-left {
  animation: sway-left 3s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.animate-sway-right {
  animation: sway-right 3s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  animation-delay: 1.5s;
}