:root {
  --bg: #282828;
  --fg: #ebdbb2;

  --glitch-intensity: 1;
  --glitch-duration: 250ms;

  --ghost-left: -6px;
  --ghost-right: 6px;

  --skew-kick: 1;
  --stretch-kick: 1;
  --flash-opacity: 0.03;
  --glitch-blur: 0.35px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  display: grid;
  place-items: center;
}

main {
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.message {
  position: relative;
  display: inline-block;
  margin: 0;
  max-width: none;
  text-align: center;
  white-space: nowrap;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-size: clamp(1rem, 2vw, 2.6rem);
  transform-origin: center;
  will-change: transform, filter, opacity;
  user-select: none;
}

.message::before,
.message::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  white-space: inherit;
}

.message::before {
  color: var(--fg);
  text-shadow: -2px 0 rgba(255, 0, 90, 0.85);
  mix-blend-mode: screen;
}

.message::after {
  color: var(--fg);
  text-shadow: 2px 0 rgba(0, 220, 255, 0.85);
  mix-blend-mode: screen;
}

.message.jiggle {
  animation: vhs-glitch var(--glitch-duration) linear both;
}

.message.jiggle::before {
  opacity: 0.85;
  animation: glitch-layer-left var(--glitch-duration) linear both;
}

.message.jiggle::after {
  opacity: 0.8;
  animation: glitch-layer-right var(--glitch-duration) linear both;
}

@keyframes vhs-glitch {
  0% {
    transform: translate3d(0, 0, 0) skewX(0deg) scaleX(1);
    filter: brightness(1) contrast(1) blur(0);
    opacity: 1;
  }

  3% {
    transform:
      translate3d(
        calc(-10px * var(--glitch-intensity)),
        calc(1px * var(--glitch-intensity)),
        0
      )
      skewX(calc(-9deg * var(--glitch-intensity) * var(--skew-kick)))
      scaleX(calc(1 + 0.015 * var(--glitch-intensity) * var(--stretch-kick)));
    filter: brightness(calc(1.04 + var(--flash-opacity))) contrast(1.15) blur(var(--glitch-blur));
  }

  6% {
    transform: translate3d(0, 0, 0) skewX(0deg) scaleX(1);
    filter: brightness(1) contrast(1) blur(0);
  }

  11% {
    transform:
      translate3d(
        calc(14px * var(--glitch-intensity)),
        calc(-2px * var(--glitch-intensity)),
        0
      )
      skewX(calc(13deg * var(--glitch-intensity) * var(--skew-kick)))
      scaleX(calc(1 - 0.02 * var(--glitch-intensity)));
    filter: brightness(calc(1.06 + var(--flash-opacity))) contrast(1.25) blur(var(--glitch-blur));
  }

  14% {
    transform:
      translate3d(
        calc(-6px * var(--glitch-intensity)),
        0,
        0
      )
      skewX(calc(-6deg * var(--glitch-intensity)))
      scaleX(calc(1 + 0.01 * var(--glitch-intensity)));
  }

  18% {
    transform: translate3d(0, 0, 0) skewX(0deg) scaleX(1);
    filter: brightness(1) contrast(1) blur(0);
  }

  27% {
    transform:
      translate3d(
        calc(-16px * var(--glitch-intensity)),
        calc(1px * var(--glitch-intensity)),
        0
      )
      skewX(calc(-15deg * var(--glitch-intensity) * var(--skew-kick)))
      scaleX(calc(1 + 0.025 * var(--glitch-intensity)));
    filter: brightness(calc(1.07 + var(--flash-opacity))) contrast(1.3) blur(var(--glitch-blur));
  }

  31% {
    transform:
      translate3d(
        calc(6px * var(--glitch-intensity)),
        0,
        0
      )
      skewX(calc(5deg * var(--glitch-intensity)))
      scaleX(calc(1 - 0.01 * var(--glitch-intensity)));
  }

  35% {
    transform: translate3d(0, 0, 0) skewX(0deg) scaleX(1);
    filter: brightness(1) contrast(1) blur(0);
  }

  46% {
    transform:
      translate3d(
        calc(18px * var(--glitch-intensity)),
        calc(2px * var(--glitch-intensity)),
        0
      )
      skewX(calc(17deg * var(--glitch-intensity) * var(--skew-kick)))
      scaleX(calc(1 - 0.03 * var(--glitch-intensity)));
    filter: brightness(calc(1.09 + var(--flash-opacity))) contrast(1.35) blur(var(--glitch-blur));
  }

  51% {
    transform:
      translate3d(
        calc(-8px * var(--glitch-intensity)),
        calc(-1px * var(--glitch-intensity)),
        0
      )
      skewX(calc(-8deg * var(--glitch-intensity)))
      scaleX(calc(1 + 0.012 * var(--glitch-intensity)));
  }

  58% {
    transform: translate3d(0, 0, 0) skewX(0deg) scaleX(1);
    filter: brightness(1) contrast(1) blur(0);
  }

  71% {
    transform:
      translate3d(
        calc(-12px * var(--glitch-intensity)),
        0,
        0
      )
      skewX(calc(-11deg * var(--glitch-intensity) * var(--skew-kick)))
      scaleX(calc(1 + 0.018 * var(--glitch-intensity)));
    filter: brightness(calc(1.05 + var(--flash-opacity))) contrast(1.18) blur(var(--glitch-blur));
  }

  76% {
    transform:
      translate3d(
        calc(5px * var(--glitch-intensity)),
        calc(1px * var(--glitch-intensity)),
        0
      )
      skewX(calc(4deg * var(--glitch-intensity)))
      scaleX(calc(1 - 0.008 * var(--glitch-intensity)));
  }

  83% {
    transform: translate3d(0, 0, 0) skewX(0deg) scaleX(1);
    filter: brightness(1) contrast(1) blur(0);
  }

  92% {
    transform:
      translate3d(
        calc(9px * var(--glitch-intensity)),
        calc(-1px * var(--glitch-intensity)),
        0
      )
      skewX(calc(8deg * var(--glitch-intensity)))
      scaleX(calc(1 - 0.01 * var(--glitch-intensity)));
    filter: brightness(calc(1.03 + var(--flash-opacity))) contrast(1.12) blur(var(--glitch-blur));
  }

  100% {
    transform: translate3d(0, 0, 0) skewX(0deg) scaleX(1);
    filter: brightness(1) contrast(1) blur(0);
    opacity: 1;
  }
}

@keyframes glitch-layer-left {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  4% {
    opacity: 0.9;
    transform: translate3d(var(--ghost-left), -1px, 0);
    clip-path: inset(4% 0 72% 0);
  }

  9% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  15% {
    opacity: 0.85;
    transform: translate3d(calc(var(--ghost-left) * 1.2), 1px, 0);
    clip-path: inset(28% 0 43% 0);
  }

  22% {
    opacity: 0.2;
    transform: translate3d(calc(var(--ghost-left) * 0.45), 0, 0);
    clip-path: inset(60% 0 14% 0);
  }

  30% {
    opacity: 0.95;
    transform: translate3d(calc(var(--ghost-left) * 1.55), -1px, 0);
    clip-path: inset(8% 0 56% 0);
  }

  37% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  49% {
    opacity: 0.85;
    transform: translate3d(calc(var(--ghost-left) * 1.35), 1px, 0);
    clip-path: inset(42% 0 23% 0);
  }

  57% {
    opacity: 0.3;
    transform: translate3d(calc(var(--ghost-left) * 0.7), 0, 0);
    clip-path: inset(70% 0 6% 0);
  }

  68% {
    opacity: 0.88;
    transform: translate3d(calc(var(--ghost-left) * 1.1), -1px, 0);
    clip-path: inset(18% 0 47% 0);
  }

  78% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  90% {
    opacity: 0.7;
    transform: translate3d(calc(var(--ghost-left) * 0.9), 0, 0);
    clip-path: inset(55% 0 17% 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes glitch-layer-right {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  5% {
    opacity: 0.82;
    transform: translate3d(var(--ghost-right), 1px, 0);
    clip-path: inset(12% 0 58% 0);
  }

  10% {
    opacity: 0.12;
    transform: translate3d(calc(var(--ghost-right) * 0.4), 0, 0);
    clip-path: inset(76% 0 2% 0);
  }

  17% {
    opacity: 0.9;
    transform: translate3d(calc(var(--ghost-right) * 1.25), -1px, 0);
    clip-path: inset(34% 0 32% 0);
  }

  25% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  33% {
    opacity: 0.92;
    transform: translate3d(calc(var(--ghost-right) * 1.5), 1px, 0);
    clip-path: inset(6% 0 68% 0);
  }

  41% {
    opacity: 0.28;
    transform: translate3d(calc(var(--ghost-right) * 0.6), 0, 0);
    clip-path: inset(62% 0 11% 0);
  }

  52% {
    opacity: 0.84;
    transform: translate3d(calc(var(--ghost-right) * 1.15), -1px, 0);
    clip-path: inset(46% 0 21% 0);
  }

  61% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }

  73% {
    opacity: 0.86;
    transform: translate3d(calc(var(--ghost-right) * 1.05), 0, 0);
    clip-path: inset(20% 0 45% 0);
  }

  84% {
    opacity: 0.18;
    transform: translate3d(calc(var(--ghost-right) * 0.5), 0, 0);
    clip-path: inset(80% 0 1% 0);
  }

  93% {
    opacity: 0.72;
    transform: translate3d(calc(var(--ghost-right) * 0.85), 1px, 0);
    clip-path: inset(57% 0 13% 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 560px) {
  .message {
    white-space: normal;
    max-width: 18ch;
    font-size: clamp(1rem, 5vw, 1.45rem);
  }

  .message::before,
  .message::after {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .message.jiggle,
  .message.jiggle::before,
  .message.jiggle::after {
    animation-duration: 120ms;
  }
}