/* Subtle ambient motion for the voting page.  It stays behind the existing
   cards and controls, keeps the dark Gospel Love palette, and respects users
   who prefer reduced motion. */
#app .lottery {
  position: relative !important;
  isolation: isolate;
  background: #171517 !important;
}

#app .lottery::before,
#app .lottery::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background-repeat: no-repeat;
  will-change: opacity, background-position;
}

#app .lottery::before {
  background:
    radial-gradient(circle at 18% 20%, rgba(240, 178, 122, .16), transparent 30%),
    radial-gradient(circle at 84% 62%, rgba(146, 92, 146, .13), transparent 34%);
  background-size: 120% 120%, 130% 130%;
  animation: gospel-lottery-glow 18s ease-in-out infinite alternate;
}

#app .lottery::after {
  opacity: .42;
  background:
    radial-gradient(circle at 76% 18%, rgba(247, 205, 164, .1), transparent 18%),
    radial-gradient(circle at 28% 78%, rgba(104, 76, 122, .1), transparent 24%);
  background-size: 145% 145%, 155% 155%;
  animation: gospel-lottery-glow-reverse 24s ease-in-out infinite alternate;
}

#app .lottery > .record,
#app .lottery > .history_popup,
#app .lottery > .wrapper {
  position: relative;
  z-index: 1;
}

@keyframes gospel-lottery-glow {
  0% { background-position: 0% 0%, 100% 100%; opacity: .72; }
  50% { background-position: 50% 25%, 75% 40%; opacity: 1; }
  100% { background-position: 100% 60%, 0% 10%; opacity: .78; }
}

@keyframes gospel-lottery-glow-reverse {
  0% { background-position: 100% 0%, 0% 100%; opacity: .28; }
  50% { background-position: 45% 40%, 50% 55%; opacity: .5; }
  100% { background-position: 0% 80%, 100% 5%; opacity: .32; }
}

@media (prefers-reduced-motion: reduce) {
  #app .lottery::before,
  #app .lottery::after {
    animation: none;
  }
}