/* ========================================================
   Chữ 囍 mini rơi
   - Màn bìa: chỉ quanh NGOÀI thẻ bìa (dưới card)
   - Trong thiệp (sau mở): phủ viewport, pointer-events:none
   ======================================================== */

.falling-xi-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  overflow: hidden;
  z-index: 40;
  display: none;
}

/* Bật khi đã mở thiệp */
body.invite-opened .falling-xi-container:not(.falling-xi-container--cover) {
  display: block !important;
}

/* Nền màn bìa — dưới thẻ, chỉ thấy quanh ngoài card */
.falling-xi-container--cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block !important;
  pointer-events: none !important;
  overflow: hidden;
}

.cover-screen-wrapper .cover-card-container {
  position: relative;
  z-index: 2;
}

.falling-xi-item {
  position: absolute;
  top: -50px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: none;
  animation: xiPetalFall linear infinite;
  animation-play-state: running !important;
  transform-origin: center center;
  will-change: transform, opacity;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", "Microsoft YaHei", serif;
  font-weight: 600;
  line-height: 1;
}

.falling-xi-item span {
  display: inline-block;
  font-size: inherit;
  line-height: 1;
  font-weight: 600;
}

/* Xoay nhẹ 2D — giữ chữ 囍 đọc được (tránh rotateY làm thành “gạch”) */
@keyframes xiPetalFall {
  0% {
    transform: translate3d(0, -40px, 0) rotate(var(--rot-start, -12deg)) scale(var(--scale-base, 1));
    opacity: 0;
  }
  10% {
    opacity: var(--max-opacity, 0.8);
  }
  40% {
    transform: translate3d(var(--sway-1, 18px), 38vh, 0)
      rotate(calc(var(--rot-start, -12deg) + 28deg))
      scale(calc(var(--scale-base, 1) * 1.04));
    opacity: var(--max-opacity, 0.8);
  }
  70% {
    transform: translate3d(var(--sway-2, -16px), 72vh, 0)
      rotate(calc(var(--rot-start, -12deg) - 20deg))
      scale(var(--scale-base, 1));
    opacity: var(--max-opacity, 0.8);
  }
  92% {
    opacity: calc(var(--max-opacity, 0.8) * 0.5);
  }
  100% {
    transform: translate3d(var(--sway-3, 22px), 110vh, 0)
      rotate(calc(var(--rot-start, -12deg) + 40deg))
      scale(calc(var(--scale-base, 1) * 0.94));
    opacity: 0;
  }
}