:root {
  --blood: #e10600;
  --blood-deep: #7a0000;
  --ink: #0a0000;
  --punch: #ffe600;
  --bone: #fff8ef;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, #3a0000 0%, var(--ink) 70%),
    var(--ink);
}

.burst {
  position: absolute;
  inset: -8%;
  z-index: 0;
  background:
    center / cover no-repeat url("comic-burst.png"),
    radial-gradient(circle at 50% 50%, #5c0000, #0a0000);
  filter: contrast(1.15) saturate(1.25);
  opacity: 0.92;
  animation: rumble 0.18s steps(2) infinite;
}

.halftone {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.55) 1.1px, transparent 1.25px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
  opacity: 0.45;
}

.speedlines {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg 3deg,
    rgba(255, 230, 0, 0.07) 3deg 4deg,
    transparent 4deg 9deg,
    rgba(255, 255, 255, 0.05) 9deg 10deg
  );
  animation: spin-lines 18s linear infinite;
  opacity: 0.55;
  mix-blend-mode: screen;
}

.splatter {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, var(--blood) 0 8px, transparent 9px),
    radial-gradient(circle at 18% 22%, var(--blood-deep) 0 18px, transparent 19px),
    radial-gradient(circle at 86% 14%, var(--blood) 0 12px, transparent 13px),
    radial-gradient(circle at 78% 82%, var(--blood) 0 22px, transparent 23px),
    radial-gradient(circle at 14% 78%, var(--blood-deep) 0 14px, transparent 15px),
    radial-gradient(circle at 92% 48%, var(--blood) 0 7px, transparent 8px),
    radial-gradient(circle at 8% 52%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 70% 10%, #fff 0 2px, transparent 3px);
  opacity: 0.85;
}

.impact {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.starburst {
  width: min(92vw, 720px);
  aspect-ratio: 1;
  background: conic-gradient(
    from 10deg,
    var(--punch) 0 8deg,
    transparent 8deg 18deg,
    #fff 18deg 24deg,
    transparent 24deg 36deg,
    var(--blood) 36deg 42deg,
    transparent 42deg 55deg,
    var(--punch) 55deg 62deg,
    transparent 62deg 74deg,
    #fff 74deg 80deg,
    transparent 80deg 92deg,
    var(--blood) 92deg 100deg,
    transparent 100deg 112deg,
    var(--punch) 112deg 120deg,
    transparent 120deg 135deg,
    #fff 135deg 142deg,
    transparent 142deg 155deg,
    var(--blood) 155deg 164deg,
    transparent 164deg 180deg,
    var(--punch) 180deg 188deg,
    transparent 188deg 200deg,
    #fff 200deg 208deg,
    transparent 208deg 222deg,
    var(--blood) 222deg 230deg,
    transparent 230deg 245deg,
    var(--punch) 245deg 254deg,
    transparent 254deg 268deg,
    #fff 268deg 276deg,
    transparent 276deg 290deg,
    var(--blood) 290deg 300deg,
    transparent 300deg 315deg,
    var(--punch) 315deg 324deg,
    transparent 324deg 338deg,
    #fff 338deg 346deg,
    transparent 346deg 360deg
  );
  clip-path: polygon(
    50% 0%,
    57% 28%,
    84% 8%,
    70% 34%,
    100% 42%,
    72% 50%,
    96% 78%,
    64% 62%,
    62% 100%,
    50% 70%,
    38% 100%,
    36% 62%,
    4% 78%,
    28% 50%,
    0% 42%,
    30% 34%,
    16% 8%,
    43% 28%
  );
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: burst-pulse 0.9s ease-in-out infinite alternate;
}

.smash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.word {
  position: absolute;
  display: block;
}

.word b {
  display: inline-block;
  font-family: "Bangers", "Black Ops One", Impact, fantasy;
  font-weight: 400;
  font-style: normal;
  line-height: 0.85;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone);
  -webkit-text-stroke: 0.045em var(--ink);
  paint-order: stroke fill;
  text-shadow:
    0.06em 0.06em 0 var(--ink),
    0.1em 0.1em 0 var(--blood-deep),
    0 0 0.35em rgba(225, 6, 0, 0.45);
  user-select: none;
  animation: smash-in 0.55s cubic-bezier(0.2, 1.4, 0.3, 1) both;
}

.word:nth-child(odd) b {
  color: var(--punch);
  text-shadow:
    0.06em 0.06em 0 var(--ink),
    0.12em 0.1em 0 var(--blood),
    -0.03em 0.02em 0 #fff;
}

.word:nth-child(3n) b {
  color: var(--blood);
  -webkit-text-stroke: 0.05em #fff;
  text-shadow:
    0.07em 0.07em 0 var(--ink),
    0.14em 0.12em 0 var(--punch);
}

.w1 {
  top: 4%;
  left: -2%;
  font-size: clamp(4.5rem, 18vw, 11rem);
  transform: rotate(-12deg) skewX(-8deg);
}

.w1 b {
  animation-delay: 0s;
  animation-name: smash-in, shake;
  animation-duration: 0.55s, 0.35s;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.3, 1), ease-in-out;
  animation-delay: 0s, 0.55s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
}

.w2 {
  top: 14%;
  right: -4%;
  font-size: clamp(5rem, 22vw, 13rem);
  transform: rotate(8deg) skewX(6deg);
}

.w2 b {
  color: var(--blood);
  animation-delay: 0.05s;
}

.w3 {
  top: 28%;
  left: 2%;
  font-size: clamp(2.8rem, 11vw, 7rem);
  transform: rotate(-4deg);
}

.w3 b {
  animation-delay: 0.08s;
}

.w4 {
  top: 2%;
  right: 8%;
  font-size: clamp(2.2rem, 8vw, 4.5rem);
  transform: rotate(18deg);
  opacity: 0.85;
}

.w4 b {
  animation-delay: 0.12s;
}

.w5 {
  bottom: 22%;
  left: -6%;
  font-size: clamp(4rem, 16vw, 10rem);
  transform: rotate(-18deg) skewX(-10deg);
}

.w5 b {
  animation-delay: 0.1s;
}

.w6 {
  top: 42%;
  left: -8%;
  font-size: clamp(2rem, 7vw, 4rem);
  transform: rotate(-28deg);
  opacity: 0.75;
}

.w6 b {
  animation-delay: 0.15s;
}

.w7 {
  bottom: 8%;
  right: -10%;
  font-size: clamp(3.2rem, 14vw, 8.5rem);
  transform: rotate(6deg) skewX(8deg);
}

.w7 b {
  animation-delay: 0.12s;
}

.w8 {
  top: 55%;
  right: -2%;
  font-size: clamp(3.5rem, 15vw, 9rem);
  transform: rotate(14deg);
}

.w8 b {
  animation-delay: 0.18s;
}

.w9 {
  bottom: 4%;
  left: 18%;
  font-size: clamp(3rem, 12vw, 7rem);
  transform: rotate(-6deg);
}

.w9 b {
  animation-delay: 0.2s;
}

.w10 {
  top: 8%;
  left: 28%;
  font-size: clamp(1.6rem, 5.5vw, 3.2rem);
  transform: rotate(4deg);
  opacity: 0.7;
}

.w10 b {
  font-family: "Anton", Impact, sans-serif;
  animation-delay: 0.22s;
}

.w11 {
  top: 68%;
  left: 6%;
  font-size: clamp(1.4rem, 4.8vw, 2.8rem);
  transform: rotate(-2deg) skewX(-4deg);
  opacity: 0.8;
}

.w11 b {
  font-family: "Black Ops One", Impact, sans-serif;
  animation-delay: 0.25s;
}

.w12 {
  top: 36%;
  right: 4%;
  font-size: clamp(2.4rem, 9vw, 5.5rem);
  transform: rotate(-12deg);
}

.w12 b {
  animation-delay: 0.16s;
}

.w13 {
  bottom: 30%;
  right: 12%;
  font-size: clamp(2rem, 7.5vw, 4.2rem);
  transform: rotate(22deg);
  opacity: 0.8;
}

.w13 b {
  animation-delay: 0.28s;
}

.w14 {
  top: 20%;
  left: -4%;
  font-size: clamp(1.8rem, 6vw, 3.5rem);
  transform: rotate(-22deg);
  opacity: 0.65;
}

.w14 b {
  animation-delay: 0.3s;
}

.w15 {
  bottom: 14%;
  left: 40%;
  font-size: clamp(2.2rem, 8vw, 4.8rem);
  transform: rotate(3deg) skewX(5deg);
}

.w15 b {
  animation-delay: 0.2s;
}

.w16 {
  top: 48%;
  left: 35%;
  font-size: clamp(1.5rem, 5vw, 3rem);
  transform: rotate(9deg);
  opacity: 0.55;
}

.w16 b {
  animation-delay: 0.32s;
}

.w17 {
  top: 78%;
  left: -2%;
  font-size: clamp(2.6rem, 10vw, 6rem);
  transform: rotate(-8deg);
}

.w17 b {
  animation-delay: 0.24s;
}

.w18 {
  top: 60%;
  left: 22%;
  font-size: clamp(1.8rem, 6.5vw, 3.8rem);
  transform: rotate(-16deg);
  opacity: 0.7;
}

.w18 b {
  animation-delay: 0.34s;
}

.w19 {
  top: 0;
  left: 10%;
  font-size: clamp(1.2rem, 4vw, 2.4rem);
  transform: rotate(-3deg);
  opacity: 0.5;
}

.w19 b {
  font-family: "Anton", Impact, sans-serif;
  animation-delay: 0.36s;
}

.w20 {
  bottom: 0;
  left: -5%;
  font-size: clamp(2rem, 9vw, 5rem);
  transform: rotate(2deg);
  opacity: 0.75;
}

.w20 b {
  animation-delay: 0.26s;
}

.w21 {
  top: 10%;
  left: 55%;
  font-size: clamp(1.7rem, 6vw, 3.4rem);
  transform: rotate(-25deg);
  opacity: 0.6;
}

.w21 b {
  animation-delay: 0.38s;
}

.w22 {
  bottom: 40%;
  left: 48%;
  font-size: clamp(2.8rem, 11vw, 6.5rem);
  transform: rotate(11deg) skewX(-6deg);
  opacity: 0.7;
}

.w22 b {
  animation-delay: 0.3s;
}

.w23 {
  top: 88%;
  right: 15%;
  font-size: clamp(1.6rem, 5.5vw, 3.2rem);
  transform: rotate(-14deg);
  opacity: 0.65;
}

.w23 b {
  animation-delay: 0.4s;
}

.w24 {
  top: 32%;
  left: 45%;
  font-size: clamp(1.9rem, 7vw, 4rem);
  transform: rotate(-7deg);
  opacity: 0.55;
}

.w24 b {
  animation-delay: 0.35s;
}

@keyframes smash-in {
  0% {
    opacity: 0;
    transform: scale(2.6);
    filter: blur(4px);
  }
  70% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes shake {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: -2px 1px;
  }
  75% {
    translate: 2px -1px;
  }
}

@keyframes rumble {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-1px, 1px);
  }
  100% {
    transform: translate(1px, -1px);
  }
}

@keyframes spin-lines {
  to {
    transform: rotate(360deg);
  }
}

@keyframes burst-pulse {
  from {
    transform: scale(0.92) rotate(-2deg);
    opacity: 0.4;
  }
  to {
    transform: scale(1.06) rotate(2deg);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .burst,
  .speedlines,
  .starburst,
  .word b {
    animation: none !important;
  }

  .word b {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 520px) {
  .w6,
  .w10,
  .w11,
  .w14,
  .w16,
  .w19,
  .w21,
  .w24 {
    opacity: 0.35;
  }
}