/* =========================
   KEYFRAMES
========================= */

@keyframes fall {
  0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 1; }
  100% {
    transform:
      translateY(110vh)
      translateX(calc(var(--drift, 0px) + var(--vx-wind-x, 0px)))
      rotate(var(--rot, 0deg));
    opacity: 1;
  }
}

@keyframes confetti {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 1; }
}

@keyframes leaves {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  50% { transform: translateY(50vh) rotate(180deg); }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 1; }
}

@keyframes hearts {
  0% { transform: translateY(-10vh) scale(0.8); opacity: 1; }
  100% { transform: translateY(110vh) scale(1.2); opacity: 1; }
}

@keyframes sparkles {
  0% { transform: translateY(-10vh) scale(0.5); opacity: 1; }
  100% { transform: translateY(110vh) scale(1.2); opacity: 1; }
}

@keyframes fireworks {
  0% { transform: translateY(100vh) scale(0.2); opacity: 0; }
  50% { transform: translateY(var(--target-y, 30vh)) scale(1); opacity: 1; }
  100% { transform: translateY(var(--target-y, 30vh)) scale(1.5); opacity: 0; }
}

/* =========================
   MAI & DAO FLOWERS
========================= */
.vx-particle-mai,
.vx-particle-dao {
  animation-name: flower-fall;
  animation-timing-function: cubic-bezier(.4,.0,.2,1);
}

@keyframes flower-fall {
  0% {
    transform: translateY(-10vh) rotate(0deg);
    opacity: 0;
  }
  15% { opacity: 1; }
  100% {
    transform:
      translateY(110vh)
      translateX(calc(var(--drift, 0px) + var(--vx-wind-x, 0px)))
      rotate(360deg);
    opacity: 0;
  }
}

/* =========================
   OVERLAY
========================= */

#vx-holiday-particles-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
}

#vx-holiday-particles-overlay .vx-particle {
  position: fixed;
  top: -10vh;
  left: var(--x);
  will-change: transform, opacity;
}

/* =========================
   MOBILE: DISABLE CORNER DECORATION
========================= */

@media (max-width: 767px) {
  .vx-holiday-corner-decoration {
    display: none !important;
  }
}

/* =========================
   ACCESSIBILITY
========================= */

@media (prefers-reduced-motion: reduce) {
  #vx-holiday-particles-overlay {
    display: none !important;
  }
}

/* =========================
   LANTERNS
========================= */

.vx-lantern {
  transform-origin: top center;
  animation: lantern-sway 6s ease-in-out infinite;
}

@keyframes lantern-sway {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(2deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

/* =========================
   RIBBONS
========================= */

.vx-ribbon {
  transform-origin: top center;
  animation: ribbon-float 8s ease-in-out infinite;
}

@keyframes ribbon-float {
  0%   { transform: rotate(0deg) translateY(0); }
  25%  { transform: rotate(3deg) translateY(4px); }
  50%  { transform: rotate(0deg) translateY(0); }
  75%  { transform: rotate(-3deg) translateY(4px); }
  100% { transform: rotate(0deg) translateY(0); }
}

/* =========================
   COUPLETS
========================= */

.vx-couplet {
  pointer-events: none;
  transform-origin: top center;
  animation: couplet-sway 7s ease-in-out infinite;
  will-change: transform;
}

.vx-couplet-right {
  animation-delay: 1.8s;
}

/* Main sway */
@keyframes couplet-sway {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(1.2deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-1.2deg); }
  100% { transform: rotate(0deg); }
}

/* =========================
   TASSEL ONLY
========================= */

.vx-couplet-tassel-line,
.vx-couplet-tassel-ball {
  transform-origin: top center;
  animation: tassel-sway 2.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes tassel-sway {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* =========================
   ACCESSIBILITY
========================= */

@media (prefers-reduced-motion: reduce) {
  .vx-couplet,
  .vx-couplet-tassel-line,
  .vx-couplet-tassel-ball {
    animation: none !important;
  }
}

.top-16 {
  top: calc(var(--spacing) * 16);
}