/* Only the transparent decorations move; the cover artwork stays still. */
.party-cover .party-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.party-cover .party-motion .ribbon-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform;
  animation: var(--party-sway) var(--party-duration, 6s) ease-in-out
    var(--party-delay, 0s) infinite;
}

.party-cover .party-motion .bunting-layer {
  --party-sway: party-bunting-sway;
  --party-duration: 6.4s;
  --party-delay: -1.6s;
  clip-path: inset(0 0 82% 0);
  transform-origin: 50% 4%;
}

.party-cover .party-motion .curl-left-layer {
  --party-sway: party-left-ribbon-float;
  --party-duration: 7.7s;
  --party-delay: -2.4s;
  clip-path: inset(17% 62% 16% 0);
  transform-origin: 12% 24%;
}

.party-cover .party-motion .curl-right-layer {
  --party-sway: party-right-ribbon-float;
  --party-duration: 9.1s;
  --party-delay: -5.3s;
  clip-path: inset(17% 0 16% 62%);
  transform-origin: 88% 24%;
}

.party-cover .party-motion .party-confetti {
  position: absolute;
  top: -12px;
  display: block;
  width: var(--confetti-width, 4px);
  height: var(--confetti-height, 7px);
  background: var(--confetti-color, #d77c66);
  border-radius: var(--confetti-radius, 1px);
  opacity: 0;
  pointer-events: none;
  animation: party-confetti-fall var(--confetti-duration, 16s) linear
    var(--confetti-delay, 0s) infinite;
}

@keyframes party-bunting-sway {
  0%, 100% { transform: rotate(-0.8deg); }
  50% { transform: rotate(0.8deg); }
}

@keyframes party-left-ribbon-float {
  0%, 100% { transform: translate3d(0, -3px, 0) rotate(-0.55deg); }
  50% { transform: translate3d(2px, 5px, 0) rotate(0.55deg); }
}

@keyframes party-right-ribbon-float {
  0%, 100% { transform: translate3d(0, 4px, 0) rotate(0.5deg); }
  50% { transform: translate3d(-2px, -4px, 0) rotate(-0.5deg); }
}

@keyframes party-confetti-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -18px, 0) rotate(var(--confetti-rotation, 0deg));
  }
  8% { opacity: var(--confetti-opacity, 0.66); }
  45% {
    transform: translate3d(var(--confetti-drift, 5px), calc(var(--confetti-fall, 1100px) * 0.45), 0)
      rotate(calc(var(--confetti-rotation, 0deg) + 95deg));
  }
  92% { opacity: var(--confetti-opacity, 0.66); }
  100% {
    opacity: 0;
    transform: translate3d(0, var(--confetti-fall, 1100px), 0)
      rotate(calc(var(--confetti-rotation, 0deg) + 220deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .party-cover:not(.motion-opt-in) .party-motion .ribbon-layer {
    animation: none !important;
  }

  .party-cover:not(.motion-opt-in) .party-motion .party-confetti {
    display: none;
    animation: none !important;
  }

  /* Restore only these decorations after the visitor explicitly presses play. */
  .party-cover.motion-opt-in .party-motion .ribbon-layer {
    animation: var(--party-sway) var(--party-duration, 6s) ease-in-out
      var(--party-delay, 0s) infinite !important;
  }

  .party-cover.motion-opt-in .party-motion .party-confetti {
    animation: party-confetti-fall var(--confetti-duration, 16s) linear
      var(--confetti-delay, 0s) infinite !important;
  }
}

.party-cover.motion-paused .party-motion .ribbon-layer,
.party-cover.motion-paused .party-motion .party-confetti {
  animation-play-state: paused !important;
}