/* ============================================================
   GARBAGROUND — scene layer (from Claude Design)
   Loads UNDER the player. Nothing here should capture clicks.
   ============================================================ */

@keyframes twk { 0%,100% { opacity: .9; } 50% { opacity: .25; } }
@keyframes blb { 0%,100% { opacity: .38; } 50% { opacity: .16; } }
@keyframes flm { 0%,100% { transform: scale(1,1); } 30% { transform: scale(.94,1.08); } 60% { transform: scale(1.05,.94); } }
@keyframes glw { 0%,100% { opacity: .55; } 50% { opacity: .38; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* scene sits behind everything, fixed, non-interactive */
#scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #0d0a1e;
  z-index: 0;
  pointer-events: none;
}
#scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* everything the visitor touches rides above the scene */
header, main, footer, .countdown { position: relative; z-index: 10; }

/* phase tinting — the whole ground shifts mood with the night */
#scene { transition: filter 1.4s ease; }
body.theme-closed     #scene { filter: saturate(.55) brightness(.72); }
body.theme-soundcheck #scene { filter: saturate(.8)  brightness(.88) hue-rotate(-8deg); }
body.theme-slow       #scene { filter: saturate(1)   brightness(1)   hue-rotate(-20deg); }
body.theme-fast       #scene { filter: saturate(1.35) brightness(1.12) hue-rotate(14deg); }
body.theme-bhajan     #scene { filter: saturate(1.05) brightness(.92) hue-rotate(-4deg); }
body.theme-aarti      #scene { filter: saturate(1.15) brightness(.86) hue-rotate(-10deg); }

/* dancers move with the phase; frozen for aarti */
#scene .dancers { animation: sway var(--sway, 2.2s) ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes sway { from { transform: translateY(0); } to { transform: translateY(-10px); } }
body.theme-aarti #scene .dancers { animation-play-state: paused; }

/* the player sits in the empty centre the design left for it */
.stage { position: relative; z-index: 10; }
.stage-frame {
  background: rgba(8, 5, 22, .55) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 217, 138, .3) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.55) !important;
}
#np-bg { display: none; }

@media (prefers-reduced-motion: reduce) {
  #scene, #scene .dancers { transition: none; animation: none !important; }
}