/* ========================================================
   HIỆU ỨNG CHỮ HỶ MINI RƠI — AMBIENT FALLING MINI 囍 EFFECT
   ======================================================== */

.falling-lotus-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  overflow: hidden;
  z-index: 1005; /* Nổi trên bìa envelope-screen (z-index 999) lúc chưa mở thiệp */
  display: block !important;
}

.envelope-screen .ambient-particles {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 12 !important;
  display: block !important;
}

.lotus-petal,
.falling-xi-item {
  position: absolute;
  top: -45px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: none;
  animation: xiPetalFall linear infinite;
  transform-origin: center center;
  will-change: transform, opacity;
  font-family: var(--font-title, "Cinzel", Georgia, serif);
  font-weight: 700;
  line-height: 1;
}

.falling-xi-item span {
  display: inline-block;
  font-size: inherit;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

@keyframes xiPetalFall {
  0% {
    transform: translateY(-40px) translateX(0) rotate(var(--rot-start, 0deg)) rotateY(0deg) scale(var(--scale-base, 0.9));
    opacity: 0;
  }
  12% {
    opacity: var(--max-opacity, 0.75);
  }
  35% {
    transform: translateY(35vh) translateX(var(--sway-1, 28px)) rotate(calc(var(--rot-start, 0deg) + 60deg)) rotateY(130deg) scale(calc(var(--scale-base, 0.9) * 1.05));
  }
  65% {
    transform: translateY(68vh) translateX(var(--sway-2, -24px)) rotate(calc(var(--rot-start, 0deg) + 160deg)) rotateY(240deg) scale(var(--scale-base, 0.9));
    opacity: var(--max-opacity, 0.75);
  }
  88% {
    opacity: calc(var(--max-opacity, 0.75) * 0.75);
  }
  100% {
    transform: translateY(106vh) translateX(var(--sway-3, 35px)) rotate(calc(var(--rot-start, 0deg) + 260deg)) rotateY(360deg) scale(calc(var(--scale-base, 0.9) * 0.92));
    opacity: 0;
  }
}