/* ══════════════════════════════════════════════════════════
   FX — the click burst (burst.js), both pages
   ══════════════════════════════════════════════════════════ */
.burst {
  --fx: #5BE3D2;
  position: fixed; z-index: 3000; inline-size: 0; block-size: 0; pointer-events: none;
}
.burst > i, .b-shards b { position: absolute; left: 0; top: 0; }
.b-ring {
  inline-size: 16px; block-size: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 1.5px solid var(--fx); box-shadow: 0 0 18px var(--fx), inset 0 0 10px rgba(91,227,210,0.5);
  animation: bRing 0.7s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}
.b-ring--2 { border-width: 1px; border-style: dashed; animation-duration: 0.95s; animation-delay: 0.05s; opacity: 0; }
@keyframes bRing { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(13); opacity: 0; } }
.b-hex {
  inline-size: 46px; block-size: 52px; margin: -26px 0 0 -23px; background: var(--fx);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%, 50% 0, 50% 6%, 5% 28%, 5% 72%, 50% 94%, 95% 72%, 95% 28%, 50% 6%);
  filter: drop-shadow(0 0 8px var(--fx));
  animation: bHex 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
@keyframes bHex { 0% { transform: scale(0.3) rotate(-30deg); opacity: 1; } 60% { opacity: 0.9; } 100% { transform: scale(1.9) rotate(30deg); opacity: 0; } }
.b-cross { inline-size: 1px; block-size: 1px; }
.b-cross::before, .b-cross::after { content: ''; position: absolute; background: #fff; box-shadow: 0 0 10px var(--fx); animation: bFlash 0.35s ease-out forwards; }
.b-cross::before { inline-size: 120px; block-size: 1px; left: -60px; top: 0; }
.b-cross::after  { inline-size: 1px; block-size: 120px; left: 0; top: -60px; }
@keyframes bFlash { 0% { opacity: 1; transform: scale(0.2); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
.b-shards b {
  inline-size: 14px; block-size: 1.5px; margin-top: -0.75px; background: linear-gradient(90deg, #fff, var(--fx));
  box-shadow: 0 0 6px var(--fx); transform-origin: 0 50%;
  transform: rotate(var(--a)) translateX(6px);
  animation: bShard 0.75s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}
@keyframes bShard { to { transform: rotate(var(--a)) translateX(var(--d)) scaleX(0.3); opacity: 0; } }
.b-label {
  position: absolute; left: 18px; top: 14px; white-space: nowrap; font-style: normal;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--fx); text-shadow: 0 0 8px rgba(91,227,210,0.8); padding: 2px 6px;
  border: 1px solid rgba(91,227,210,0.5); background: rgba(11,13,16,0.75);
  animation: bLabel 1s steps(1) forwards, bLabelFade 1s ease-out forwards;
}
@keyframes bLabel { 0% { clip-path: inset(0 100% 0 0); } 10% { clip-path: inset(0 60% 0 0); } 20% { clip-path: inset(0 25% 0 0); } 30%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes bLabelFade { 0%, 60% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }

/* the whole screen takes the hit: a brief chromatic flash on the edges */
.burst::after {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(91,227,210,0.35), inset 0 0 120px rgba(91,227,210,0.12);
  animation: bScreen 0.5s ease-out forwards;
}
@keyframes bScreen { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .burst { display: none; } }