/* ========================================
   Comet Impact · Explosion Transition
   No tail line — pure glowing sphere → impact → radial light scatter
   Blue-Purple comet · White explosion · Center burst
   ======================================== */

/* ── Stage ── */
.comet-stage {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  overflow: hidden;
}

/* ── Comet: pure glowing sphere, no line ── */
.comet-body {
  position: absolute;
  pointer-events: none;
}

/* Innermost: dazzling white pinpoint */
.comet-body-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 8px 4px #fff,
    0 0 18px 8px #e0f7fa,
    0 0 35px 15px rgba(79, 195, 247, 0.95),
    0 0 60px 25px rgba(41, 182, 246, 0.7),
    0 0 90px 40px rgba(124, 77, 255, 0.45),
    0 0 140px 60px rgba(101, 31, 255, 0.2);
}

/* Mid ring: cyan-blue glow */
.comet-body-inner {
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(79, 195, 247, 0.35) 22%,
    rgba(41, 182, 246, 0.18) 48%,
    rgba(124, 77, 255, 0.06) 72%,
    transparent 100%
  );
}

/* Outer: purple halo */
.comet-body-aura {
  position: absolute;
  top: 50%; left: 50%;
  width: 140px; height: 140px;
  margin: -70px 0 0 -70px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(124, 77, 255, 0.22) 0%,
    rgba(101, 31, 255, 0.1) 30%,
    rgba(49, 27, 146, 0.04) 58%,
    transparent 100%
  );
  filter: blur(5px);
}

/* ── Spark dot behind comet (not a line) ── */
.comet-spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ── Impact flash ── */
.impact-flash {
  position: fixed;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 30px 15px #fff,
    0 0 80px 40px rgba(255, 255, 255, 0.9),
    0 0 150px 70px rgba(224, 247, 250, 0.6),
    0 0 250px 120px rgba(79, 195, 247, 0.3);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
}

/* ── Shockwave ring ── */
.impact-ring {
  position: fixed;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 0 10px 3px rgba(255, 255, 255, 0.6),
    0 0 30px 10px rgba(79, 195, 247, 0.4),
    inset 0 0 10px 3px rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 99998;
}

/* ── Explosion debris particle ── */
.explosion-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 99997;
}

/* ── Radial light expansion ── */
.radial-light {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99996;
  opacity: 0;
  background: radial-gradient(circle at center,
    #fff 0%,
    rgba(255, 255, 255, 0.98) 8%,
    rgba(255, 255, 255, 0.9) 20%,
    rgba(224, 247, 250, 0.6) 40%,
    rgba(255, 255, 255, 0.3) 60%,
    rgba(255, 255, 255, 0.05) 80%,
    transparent 100%
  );
}

/* ── Fullscreen white overlay (final phase) ── */
.whiteout {
  position: fixed;
  inset: 0;
  z-index: 99995;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

/* ── Screen shake ── */
body.comet-shake {
  animation: cometShake 0.25s ease-out;
}

@keyframes cometShake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(4px, -2px); }
  20%  { transform: translate(-4px, 3px); }
  35%  { transform: translate(3px, -2px); }
  50%  { transform: translate(-2px, 1.5px); }
  65%  { transform: translate(1.5px, -1px); }
  80%  { transform: translate(-1px, 0.5px); }
  100% { transform: translate(0, 0); }
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
  .comet-body, .comet-body-core, .comet-body-inner, .comet-body-aura,
  .comet-spark, .impact-flash, .impact-ring, .explosion-particle,
  .radial-light, .whiteout {
    animation: none !important;
    transition: none !important;
  }
  body.comet-shake { animation: none !important; }
}