/* =========================================
   BUTTON IMPACT HORROR TEXT OVERLAY
   Full-screen red-button payoff text.
   Main word slams first, then the trail layers lag and slide after it.
========================================= */

.impact-text-overlay {
  position: fixed;
  inset: 0;
  z-index: 99980;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.impact-text-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.impact-text-overlay__flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
}

.impact-text-overlay.is-active .impact-text-overlay__flash {
  animation: impactOverlayFlash 820ms cubic-bezier(0.12, 0.78, 0.2, 1) both;
}

.impact-text-overlay__word {
  --impact-rotate: -4deg;
  --impact-drop: clamp(6rem, 18vh, 15rem);

  position: absolute;
  top: 48%;
  left: 50%;
  width: min(96vw, 1600px);
  transform: translate(-50%, -50%) rotate(var(--impact-rotate));
  transform-origin: 50% 55%;

  font-family: "Bangers", Impact, Haettenschweiler, "Arial Narrow Bold", system-ui, sans-serif;
  font-size: clamp(3.1rem, 9.6vw, 12rem);
  line-height: 0.84;
  letter-spacing: clamp(0.015em, 0.7vw, 0.12em);
  text-align: center;
  text-transform: uppercase;

  color: #ffffff;
  white-space: normal;
  text-wrap: balance;
  opacity: 0;

  text-shadow:
    0 0 0.03em rgba(255, 255, 255, 1),
    0 0 0.13em rgba(255, 255, 255, 0.72),
    0.045em 0.045em 0 rgba(0, 0, 0, 0.76),
    -0.030em 0.018em 0 rgba(255, 70, 70, 0.32),
    0.038em -0.024em 0 rgba(90, 180, 255, 0.30);
}

.impact-text-overlay__word--main {
  filter: contrast(1.28);
}

.impact-text-overlay__word--trail {
  color: rgba(255, 255, 255, 0.68);
  filter: blur(0.018em);
  mix-blend-mode: screen;
}

.impact-text-overlay__word--trail-1 {
  --impact-rotate: -7deg;
}

.impact-text-overlay__word--trail-2 {
  --impact-rotate: 3deg;
}

.impact-text-overlay__word--trail-3 {
  --impact-rotate: -11deg;
}

.impact-text-overlay.is-active .impact-text-overlay__word--main {
  animation: impactTextMain 1540ms cubic-bezier(0.11, 0.82, 0.18, 1) both;
}

.impact-text-overlay.is-active .impact-text-overlay__word--trail-1 {
  animation: impactTextTrail1 1540ms cubic-bezier(0.11, 0.82, 0.18, 1) both;
}

.impact-text-overlay.is-active .impact-text-overlay__word--trail-2 {
  animation: impactTextTrail2 1540ms cubic-bezier(0.11, 0.82, 0.18, 1) both;
}

.impact-text-overlay.is-active .impact-text-overlay__word--trail-3 {
  animation: impactTextTrail3 1540ms cubic-bezier(0.11, 0.82, 0.18, 1) both;
}

@keyframes impactOverlayFlash {
  0% {
    opacity: 0;
  }

  3% {
    opacity: 0.95;
  }

  12% {
    opacity: 0.34;
  }

  22% {
    opacity: 0.58;
  }

  44% {
    opacity: 0.09;
  }

  100% {
    opacity: 0;
  }
}

@keyframes impactTextMain {
  0% {
    opacity: 0;
    transform: translate(-50%, -62%) rotate(-2deg) scale(1.34);
    filter: blur(0.04em) contrast(2.2);
  }

  5% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-4deg) scale(1.04);
    filter: blur(0) contrast(1.6);
  }

  11% {
    opacity: 0.28;
    transform: translate(-50%, -50%) rotate(3deg) scale(1.08);
  }

  17% {
    opacity: 1;
    transform: translate(-50%, -49%) rotate(-6deg) scale(1.00);
  }

  48% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 1rem)) rotate(-6deg) scale(1.00);
    filter: blur(0) contrast(1.42);
  }

  68% {
    opacity: 0.82;
    transform: translate(-50%, calc(-50% + 4.4rem)) rotate(-9deg) scale(0.98);
    filter: blur(0.01em) contrast(1.32);
  }

  88% {
    opacity: 0.24;
    transform: translate(-50%, calc(-50% + var(--impact-drop))) rotate(-18deg) scale(0.96);
    filter: blur(0.025em) contrast(1.25);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + var(--impact-drop) + 6rem)) rotate(-24deg) scale(0.90);
    filter: blur(0.08em) contrast(1);
  }
}

@keyframes impactTextTrail1 {
  0%,
  4% {
    opacity: 0;
    transform: translate(-51.5%, -51%) rotate(-7deg) scale(1.08);
  }

  8% {
    opacity: 0.56;
  }

  58% {
    opacity: 0.34;
    transform: translate(-51%, calc(-50% + 0.75rem)) rotate(-8deg) scale(1.03);
  }

  70% {
    opacity: 0.30;
    transform: translate(-50.5%, calc(-50% + 1.8rem)) rotate(-11deg) scale(1.02);
  }

  84% {
    opacity: 0.18;
    transform: translate(-50.2%, calc(-50% + 6.8rem)) rotate(-15deg) scale(1.00);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + var(--impact-drop) + 7rem)) rotate(-22deg) scale(0.98);
  }
}

@keyframes impactTextTrail2 {
  0%,
  8% {
    opacity: 0;
    transform: translate(-48.5%, -49%) rotate(3deg) scale(1.03);
  }

  13% {
    opacity: 0.42;
  }

  62% {
    opacity: 0.25;
    transform: translate(-49%, calc(-50% + 0.45rem)) rotate(2deg) scale(1.02);
  }

  74% {
    opacity: 0.21;
    transform: translate(-49.5%, calc(-50% + 1.4rem)) rotate(-5deg) scale(1.01);
  }

  88% {
    opacity: 0.12;
    transform: translate(-49.8%, calc(-50% + 7.8rem)) rotate(-10deg) scale(0.98);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + var(--impact-drop) + 9rem)) rotate(-17deg) scale(0.94);
  }
}

@keyframes impactTextTrail3 {
  0%,
  12% {
    opacity: 0;
    transform: translate(-52%, -48%) rotate(-11deg) scale(1.16);
  }

  18% {
    opacity: 0.32;
  }

  66% {
    opacity: 0.18;
    transform: translate(-51.2%, calc(-50% + 0.25rem)) rotate(-12deg) scale(1.06);
  }

  78% {
    opacity: 0.15;
    transform: translate(-50.5%, calc(-50% + 1.1rem)) rotate(-15deg) scale(1.03);
  }

  92% {
    opacity: 0.08;
    transform: translate(-50.2%, calc(-50% + 8.8rem)) rotate(-21deg) scale(0.98);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + var(--impact-drop) + 11rem)) rotate(-30deg) scale(0.92);
  }
}

@media (max-width: 767px) {
  .impact-text-overlay__word {
    font-size: clamp(2.7rem, 13vw, 7rem);
    letter-spacing: clamp(0.01em, 0.9vw, 0.09em);
    width: min(94vw, 780px);
  }
}