.hero-explosion-target {
  position: relative;
  isolation: isolate;
}

.hero-explosion-canvas {
  position: absolute;
  z-index: 4;
  max-width: none;
  pointer-events: none;
  filter: saturate(.78) contrast(1.08);
}

.hero-explosion-target.is-detonating {
  animation: hero-text-detonation 1100ms cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes hero-text-detonation {
  0% {
    color: #f3f5ff;
    filter: none;
    text-shadow: none;
  }
  14% {
    color: #fff8d6;
    filter: brightness(1.7);
    text-shadow: 0 0 12px #ffcc66, 0 0 28px #ff7a33;
  }
  31% {
    color: rgba(255, 244, 211, .26);
    filter: blur(1px) brightness(2.1);
    text-shadow: 0 0 18px #ff6b2c, 0 0 55px rgba(255, 48, 20, .9);
  }
  52% {
    color: rgba(243, 245, 255, .07);
    filter: blur(3px);
    text-shadow: 0 0 42px rgba(255, 77, 25, .55);
  }
  78% {
    color: rgba(243, 245, 255, .62);
    filter: blur(.5px);
    text-shadow: 0 0 16px rgba(255, 130, 40, .26);
  }
  100% {
    color: #f3f5ff;
    filter: none;
    text-shadow: none;
  }
}

.stackhal-site:has(.hero-explosion-target) {
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  .hero-explosion-target.is-detonating {
    animation: none;
  }

  .hero-explosion-canvas {
    display: none;
  }
}