.drag-item {
  padding: 4px;
  transition: all 0.2s ease-in-out;
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

#invitation_card.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
}

.hidden-before-open {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease-in-out;
}

.show-after-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#navigation a.active {
  color: #570df8; /* warna primary DaisyUI */
  font-weight: bold;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fade-in 1s ease-out forwards;
}
.animate-fade-up {
  animation: fade-up 0.8s ease-out forwards;
}
.animate-scale-in {
  animation: scale-in 1s ease-out forwards;
}

@keyframes swing {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(2deg);
  }
}
.animate-swing {
  animation: swing 4s ease-in-out infinite;
}

@keyframes photo-bounce {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.05) rotate(1deg);
  }
}
.animate-photo {
  animation: photo-bounce 5s ease-in-out infinite;
}

/* ===========================
   LAYOUT BACKGROUND
   =========================== */
.container-undangan {
  width: 100%;
  max-width: 480px; /* untuk mobile width max 480px */
  margin: 0 auto;
  /* padding: 0 1rem;  */
  /* background-color: #eff0ea; */
  word-break: break-word;
  overflow: hidden; /* hindari horizontal scroll */
  min-height: 100vh; /* supaya full height pada mobile */
  display: flex;
  flex-direction: column; /* susun konten secara vertikal */
}

/* Tablet dan ke atas */
@media (min-width: 640px) {
  .container-undangan {
    max-width: 640px; /* ukuran container sedikit lebih besar */
    padding: 0 1.5rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container-undangan {
    max-width: 768px; /* tetap fokus pada layout mobile-first */
    padding: 0 2rem;
  }
}

#invitation_card {
  min-height: 100vh;
  background-color: #eff0ea;
  color: #222;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.bg_top1 {
  background-image: url('{{ asset("Theme/deasy/bg_top.svg") }}');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
  position: absolute;
  top: -30px;
  left: -30px;
  width: 180px;
  height: 180px;
  z-index: 2;
  animation: sway 3s ease-in-out infinite alternate;
}

.bg_top2 {
  background-image: url('{{ asset("Theme/deasy/bunga_atas.svg") }}');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  position: absolute;
  top: -20px;
  right: -10px;
  width: 150px;
  height: 140px;
  z-index: 2;
  animation: sway 3s ease-in-out infinite alternate,
    moveUpDown 5s ease-in-out infinite;
}

.bg_bawah {
  background-image: url('{{ asset("Theme/deasy/bg_bottom.svg") }}');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 2;
}

@keyframes moveUpDown {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes sway {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

/* Responsive adjustments for tablet and above */
@media (min-width: 640px) {
  .bg_top1 {
    top: -40px;
    left: -40px;
    width: 260px;
    height: 260px;
  }

  .bg_top2 {
    top: -30px;
    right: 0;
    width: 220px;
    height: 210px;
  }

  .bg_bawah {
    height: 160px;
  }
}

@media (min-width: 768px) {
  .bg_top1 {
    width: 300px;
    height: 300px;
  }

  .bg_top2 {
    width: 265px;
    height: 250px;
  }

  .bg_bawah {
    height: 180px;
  }
}