/* Decorative effects sit outside the app and never intercept a click or touch. */
.autumn-celebration {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  contain: strict;
}

.autumn-celebration[data-celebration='summary'] {
  z-index: 0;
}

.autumn-particle {
  position: absolute;
  display: block;
  width: max-content;
  line-height: 1.2;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  pointer-events: none;
  animation-duration: var(--particle-duration);
  animation-delay: var(--particle-delay, 0s);
  animation-fill-mode: both;
}

.autumn-particle[data-motion='fall'] {
  top: -48px;
  animation-name: autumn-confetti-fall;
  animation-timing-function: ease-in;
}

.autumn-particle[data-motion='rise'] {
  bottom: -44px;
  animation-name: autumn-hearts-rise;
  animation-timing-function: linear;
}

@keyframes autumn-confetti-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .95; }
  75% { opacity: .85; }
  100% { transform: translate3d(var(--particle-drift), 112vh, 0) rotate(360deg); opacity: 0; }
}

@keyframes autumn-hearts-rise {
  0% { transform: translate3d(0, 0, 0) scale(.8) rotate(0deg); opacity: 0; }
  10% { opacity: .6; }
  75% { opacity: .5; }
  100% { transform: translate3d(var(--particle-drift), -112vh, 0) scale(1.1) rotate(40deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .autumn-celebration { display: none; }
  .autumn-particle { animation: none; }
}