.scene--party {
  filter: saturate(1.42) brightness(1.1);
  animation: party-scene-colors 1.25s linear infinite;
}

.party-mode-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 25%, rgb(255 68 204 / 20%), transparent 24%),
    radial-gradient(circle at 84% 34%, rgb(67 231 255 / 20%), transparent 25%),
    radial-gradient(circle at 50% 82%, rgb(255 222 82 / 18%), transparent 28%);
  animation: party-lights 900ms ease-in-out infinite alternate;
}

.party-mode-label {
  position: absolute;
  top: max(8vh, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 8vw, 54px);
  font-weight: 700;
  text-align: center;
  text-shadow:
    0 0 12px rgb(255 255 255 / 80%),
    0 0 28px rgb(255 95 220 / 70%);
  animation: party-label 650ms ease-in-out infinite alternate;
}

.party-confetti {
  position: absolute;
  left: var(--party-left);
  top: -8vh;
  width: 9px;
  height: 15px;
  border-radius: 2px;
  background: hsl(var(--party-hue) 92% 65%);
  box-shadow: 0 0 8px hsl(var(--party-hue) 92% 65% / 60%);
  opacity: 0;
  will-change: transform, opacity;
  animation: party-confetti-fall var(--party-duration) linear var(--party-delay) 2;
}

.party-confetti--round {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

@keyframes party-scene-colors {
  from { filter: saturate(1.42) brightness(1.1) hue-rotate(0deg); }
  to { filter: saturate(1.42) brightness(1.1) hue-rotate(360deg); }
}

@keyframes party-lights {
  from { opacity: .68; transform: scale(1); }
  to { opacity: 1; transform: scale(1.06); }
}

@keyframes party-label {
  from { transform: scale(.96); opacity: .78; }
  to { transform: scale(1.04); opacity: 1; }
}

@keyframes party-confetti-fall {
  0% { transform: translate3d(0, -5vh, 0) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% {
    transform: translate3d(var(--party-drift), 116vh, 0) rotate(var(--party-rotation));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene--party,
  .party-mode-layer,
  .party-mode-label { animation: none; }

  .party-confetti {
    top: var(--party-left);
    animation: party-confetti-soft 1.4s ease-in-out var(--party-delay) 3 alternate;
  }
}

@keyframes party-confetti-soft {
  from { transform: scale(.7); opacity: .15; }
  to { transform: scale(1.15); opacity: .9; }
}