html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: black;
  overflow: hidden;
  animation: horrorFlash 0.3s infinite alternate;
  font-family: monospace;
  color: white;
  text-align: center;
}

@keyframes horrorFlash {
  0%   { background-color: black; }
  33%  { background-color: maroon; }
  66%  { background-color: red; }
  100% { background-color: brown; }
}

h1 {
  font-size: 6vw;
  text-shadow: 0 0 10px red, 0 0 20px black;
  animation: bleed 1s infinite alternate;
  letter-spacing: 0.1em;
}

@keyframes bleed {
  0%   { color: darkred; transform: scale(1) rotate(0deg); }
  50%  { color: crimson; transform: scale(1.1) rotate(2deg); }
  100% { color: firebrick; transform: scale(0.98) rotate(-2deg); }
}

.glitchy {
  font-size: 4vw;
  position: relative;
  animation: shake 0.1s infinite;
  color: white;
  filter: hue-rotate(45deg) contrast(2) brightness(1.2);
}

.glitchy::before,
.glitchy::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.6;
  color: red;
  animation: glitch 0.3s infinite;
}

.glitchy::after {
  color: brown;
  animation-delay: 0.15s;
}

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

@keyframes glitch {
  0% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
