/* DARKPLACE: haunted neon word (horror palette + breathing pulse + glitch bite) */
.darkplace-word {
  position: relative; /* needed for the ghost double */
  display: inline-block;
  letter-spacing: 0.08em;
  transform-origin: center;

  /* RED INK GLOW (makes the actual letters glow red) + chromatic fringing + base glow */
  text-shadow:
    0 0 2px rgba(255, 60, 60, 0.95),
    0 0 6px rgba(255, 20, 20, 0.65),
    -1px 0 0 rgba(0, 255, 120, 0.18),
    1px 0 0 rgba(255, 160, 0, 0.16),
    0 0 10px rgba(255, 0, 0, 0.35),
    0 0 22px rgba(255, 0, 0, 0.22),
    0 0 44px rgba(255, 0, 0, 0.12);

  animation:
    dp-flicker 2.6s infinite steps(1, end),
    dp-horrorhues 10.5s infinite linear,
    dp-breathe 4.8s infinite ease-in-out,
    dp-glitchbite 3.8s infinite steps(1, end),
    dp-glowpulse 3.9s infinite ease-in-out;

  will-change: color, text-shadow, filter, transform, opacity;
}

/* ---------------------------------------------------------
   Ghost double (VHS misregistration)
   Requires: data-word="DARKPLACE" on the element
---------------------------------------------------------- */
.darkplace-word::after {
  content: attr(data-word);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  transform: translateX(1px);
  filter: blur(0.35px);
  mix-blend-mode: screen;
}

/* ---------------------------------------------------------
   flicker stays “haunted” but not too seizure-y
---------------------------------------------------------- */
@keyframes dp-flicker {
  0%,
  100% {
    opacity: 1;
    filter: none;
    transform: translateX(0) scale(1);
  }

  12% {
    opacity: 0.96;
  }
  13% {
    opacity: 0.78;
  } /* soft drop */
  14% {
    opacity: 1;
  }

  48% {
    opacity: 0.93;
  }
  49% {
    opacity: 0.65;
    transform: translateX(-0.7px) scale(0.995);
  }
  50% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  82% {
    opacity: 0.92;
  }
  83% {
    opacity: 0.7;
    filter: saturate(1.3) contrast(1.15);
  }
  84% {
    opacity: 1;
    filter: none;
  }
}

/* ---------------------------------------------------------
   horror hues (NO pink/purple): red -> orange -> yellow -> green -> back
---------------------------------------------------------- */
@keyframes dp-horrorhues {
  0% {
    color: rgba(255, 70, 70, 1); /* blood red */
  }
  33% {
    color: rgba(255, 150, 40, 1); /* burnt orange */
  }
  66% {
    color: rgba(255, 230, 90, 1); /* jaundice yellow */
  }
  85% {
    color: rgba(170, 255, 120, 1); /* sickly green */
  }
  100% {
    color: rgba(255, 70, 70, 1);
  }
}

/* ---------------------------------------------------------
   slow size pulse: shrink/grow (breathing) + tiny “wrong” tilt
---------------------------------------------------------- */
@keyframes dp-breathe {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  35% {
    transform: scale(1.06) rotate(0.2deg);
  }
  55% {
    transform: scale(0.97) rotate(-0.15deg);
  }
  72% {
    transform: scale(1.03) rotate(0.1deg);
  }
}

/* ---------------------------------------------------------
   GLITCH BITE (rare squish + skew)
   Feels like tracking catches then releases.
---------------------------------------------------------- */
@keyframes dp-glitchbite {
  0%,
  100% {
    transform: translateX(0) scale(1) skewX(0deg);
  }

  46% {
    transform: translateX(0) scale(1) skewX(0deg);
  }
  47% {
    transform: translateX(-1px) scaleX(1.08) scaleY(0.94) skewX(-6deg);
  }
  48% {
    transform: translateX(1px) scaleX(0.96) scaleY(1.04) skewX(3deg);
  }
  49% {
    transform: translateX(0) scale(1) skewX(0deg);
  }
}

/* ---------------------------------------------------------
   glow pulses independently
   NOTE: This overrides the base text-shadow while animating,
   so we include the RED INK GLOW here too.
---------------------------------------------------------- */
@keyframes dp-glowpulse {
  0%,
  100% {
    text-shadow:
      0 0 2px rgba(255, 60, 60, 0.9),
      0 0 6px rgba(255, 20, 20, 0.6),
      -1px 0 0 rgba(0, 255, 120, 0.14),
      1px 0 0 rgba(255, 160, 0, 0.12),
      0 0 10px rgba(255, 0, 0, 0.28),
      0 0 22px rgba(255, 0, 0, 0.16),
      0 0 44px rgba(255, 0, 0, 0.1);
  }

  40% {
    text-shadow:
      0 0 3px rgba(255, 80, 80, 0.95),
      0 0 9px rgba(255, 30, 30, 0.7),
      -1px 0 0 rgba(0, 255, 120, 0.2),
      1px 0 0 rgba(255, 160, 0, 0.18),
      0 0 14px rgba(255, 0, 0, 0.36),
      0 0 30px rgba(255, 0, 0, 0.22),
      0 0 60px rgba(255, 0, 0, 0.14);
  }

  70% {
    text-shadow:
      0 0 2px rgba(255, 50, 50, 0.85),
      0 0 5px rgba(255, 10, 10, 0.55),
      -1px 0 0 rgba(0, 255, 120, 0.12),
      1px 0 0 rgba(255, 160, 0, 0.1),
      0 0 9px rgba(255, 0, 0, 0.24),
      0 0 18px rgba(255, 0, 0, 0.13),
      0 0 36px rgba(255, 0, 0, 0.08);
  }
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .darkplace-word {
    animation: none;
  }
  .darkplace-word::after {
    display: none;
  }
}