/* ================================================
   BONZAIRE SPLASH SCREEN
   2s total: 0.5s radial-in | 1s hold | 0.5s radial-out
   ================================================ */

/* ── Overlay: radial reveal from center (PowerPoint style) ── */
#bonz-splash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: circle(0% at 50% 50%);
  animation: bonzSplashIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: all;
}

#bonz-splash.bonz-splash-out {
  animation: bonzSplashOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes bonzSplashIn {
  0%   { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(75% at 50% 50%); }
}

@keyframes bonzSplashOut {
  0%   { clip-path: circle(75% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); }
}

/* ── Radial glow behind logo: expands on intro ── */
#bonz-splash-glow {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: bonzGlowIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#bonz-splash.bonz-splash-out #bonz-splash-glow {
  animation: bonzGlowOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bonzGlowIn {
  0%   { box-shadow: 0 0 0px 0px rgba(212,175,55,0), 0 0 0px 0px rgba(184,134,11,0); }
  100% { box-shadow: 0 0 180px 130px rgba(212,175,55,0.14), 0 0 420px 260px rgba(184,134,11,0.06); }
}

@keyframes bonzGlowOut {
  0%   { box-shadow: 0 0 180px 130px rgba(212,175,55,0.14), 0 0 420px 260px rgba(184,134,11,0.06); }
  100% { box-shadow: 0 0 0px 0px rgba(212,175,55,0), 0 0 0px 0px rgba(184,134,11,0); }
}

/* ── Expanding rings: shoot outward during intro ── */
#bonz-splash-ring1,
#bonz-splash-ring2 {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 175, 55, 0.7);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#bonz-splash-ring1 {
  animation: bonzRingExpand 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

#bonz-splash-ring2 {
  animation: bonzRingExpand 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  border-color: rgba(212, 175, 55, 0.4);
}

#bonz-splash.bonz-splash-out #bonz-splash-ring1,
#bonz-splash.bonz-splash-out #bonz-splash-ring2 {
  animation: bonzRingCollapse 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bonzRingExpand {
  0%   { width: 280px; height: 280px; opacity: 0.9; }
  100% { width: 860px; height: 860px; opacity: 0; border-color: rgba(212,175,55,0); }
}

@keyframes bonzRingCollapse {
  0%   { opacity: 0.7; }
  100% { opacity: 0; }
}

/* ── Logo: fades in with overlay, fades out on outro ── */
#bonz-splash-logo {
  position: relative;
  z-index: 2;
  width: 300px;
  height: 300px;
  object-fit: contain;
  opacity: 0;
  animation: bonzLogoIn 0.45s ease 0.08s forwards;
}

#bonz-splash.bonz-splash-out #bonz-splash-logo {
  animation: bonzLogoOut 0.5s ease forwards;
}

@keyframes bonzLogoIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bonzLogoOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Mobile sizes ── */
@media (max-width: 768px) {
  #bonz-splash-logo {
    width: 240px;
    height: 240px;
  }
}

@media (max-width: 480px) {
  #bonz-splash-logo {
    width: 200px;
    height: 200px;
  }
}