/* Animasi surat amplop: jatuh melayang tertiup angin lalu mendarat di tengah */
@keyframes envelope-drift-fall {
  0% {
    transform: translate(-50%, -140vh) rotate(-35deg) scale(0.65);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translate(-10%, -90vh) rotate(22deg) scale(0.75);
  }
  35% {
    transform: translate(-85%, -55vh) rotate(-18deg) scale(0.85);
  }
  55% {
    transform: translate(-25%, -25vh) rotate(14deg) scale(0.92);
  }
  75% {
    transform: translate(-65%, -5vh) rotate(-8deg) scale(0.97);
  }
  90% {
    transform: translate(-45%, -2%) rotate(4deg) scale(1.02);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
  }
}

/* Mengapung halus di tengah halaman setelah mendarat */
@keyframes envelope-idle-float {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px) rotate(1.5deg);
  }
}

/* Animasi saat amplop diklik */
@keyframes envelope-opened-pop {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  40% {
    transform: translate(-50%, -50%) scale(0.88);
  }
  75% {
    transform: translate(-50%, -50%) scale(1.15) rotate(-3deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.05) rotate(0deg);
  }
}

.envelope-falling {
  animation: envelope-drift-fall 3.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.envelope-idle {
  animation: envelope-idle-float 3.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .envelope-falling {
    animation: none;
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  .envelope-idle {
    animation: none;
  }
}