/* The BONDING PARTY. Cheap CSS-only effects: keyframes are always running once body.party is set,
   so there is nothing to compute per frame in JS beyond the --beatms custom property (set once). */
:root { --beatms: 483.9ms; }

/* ---------- opening hit overlay ---------- */
#party-intro { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; }
#party-intro .pi-black, #party-intro .pi-flash, #party-intro .pi-strobe { position: absolute; inset: 0; opacity: 0; }
#party-intro .pi-black { background: #000; }
#party-intro .pi-flash { background: #fff; }
#party-intro .pi-strobe { background: #fff; }
#party-intro .pi-title {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; gap: 6px;
  font-family: 'Lilita One', Nunito, sans-serif; opacity: 0; transform: scale(0.4);
}
#party-intro .pi-title b {
  font-size: clamp(48px, 12vw, 120px); color: #ffd23f;
  -webkit-text-stroke: 4px #2a1409; text-shadow: 0 0 30px rgba(255, 210, 63, .8);
}
#party-intro .pi-title span {
  font-size: clamp(18px, 4vw, 34px); color: #fff; -webkit-text-stroke: 2px #2a1409;
  letter-spacing: .04em;
}

body.party-intro #party-intro { opacity: 1; }
body.party-intro #party-intro .pi-black { animation: piBlack 2s ease-out forwards; }
body.party-intro #party-intro .pi-flash { animation: piFlash 2s ease-out forwards; }
body.party-intro #party-intro .pi-title { animation: piTitle 2s cubic-bezier(.2, 1.4, .3, 1) forwards; }
@keyframes piBlack { 0% { opacity: 1; } 28% { opacity: 1; } 55% { opacity: 0; } 100% { opacity: 0; } }
@keyframes piFlash { 0% { opacity: 0; } 30% { opacity: 0; } 38% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; } }
@keyframes piTitle { 0% { opacity: 0; transform: scale(.4); } 34% { opacity: 0; transform: scale(.4); } 46% { opacity: 1; transform: scale(1.15); } 56% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }

#party-intro .pi-strobe.go { animation: piStrobe .12s ease-out; }
@keyframes piStrobe { 0% { opacity: .55; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  body.party-intro #party-intro .pi-flash { animation: none; opacity: 0; }
  #party-intro .pi-strobe { display: none; }
}

/* ---------- HUD: rainbow border + bouncing cards while the party is live ---------- */
body.party #hud { animation: partyGlow calc(var(--beatms) * 4) linear infinite; }
@keyframes partyGlow {
  0% { filter: drop-shadow(0 0 10px #ff4f7e); }
  25% { filter: drop-shadow(0 0 12px #ffd23f); }
  50% { filter: drop-shadow(0 0 12px #5be38d); }
  75% { filter: drop-shadow(0 0 12px #49c6ff); }
  100% { filter: drop-shadow(0 0 10px #ff4f7e); }
}
body.party #side .card, body.party #bar { animation: partyBounce var(--beatms) ease-in-out infinite; }
body.party #side .card:nth-child(2) { animation-delay: calc(var(--beatms) * -0.15); }
@keyframes partyBounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 55% { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  body.party #hud { animation-duration: calc(var(--beatms) * 10); }
  body.party #side .card, body.party #bar { animation: none; }
}