/* ============================================================
   Jumpscare Effects — CRT glitch, shadow figure, etc.
   ============================================================ */

/* ── CRT Glitch Overlay ── */
.scare-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99999;
}

.scare-glitch {
  background: rgba(0, 0, 0, 0.05);
  animation: scareGlitch 0.4s ease-out forwards;
}

@keyframes scareGlitch {
  0% {
    clip-path: inset(0 0 85% 0);
    filter: hue-rotate(0deg);
    transform: translateX(0);
  }
  10% {
    clip-path: inset(20% 0 50% 0);
    filter: hue-rotate(90deg);
    transform: translateX(-3px);
    background: rgba(255, 0, 100, 0.08);
  }
  20% {
    clip-path: inset(60% 0 10% 0);
    filter: hue-rotate(180deg);
    transform: translateX(5px);
    background: rgba(0, 255, 100, 0.06);
  }
  30% {
    clip-path: inset(10% 0 70% 0);
    filter: hue-rotate(270deg);
    transform: translateX(-2px);
  }
  50% {
    clip-path: inset(40% 0 30% 0);
    filter: hue-rotate(45deg);
    transform: translateX(3px);
    background: rgba(100, 0, 255, 0.05);
  }
  70% {
    clip-path: inset(0);
    filter: hue-rotate(0deg);
    transform: translateX(0);
    background: rgba(0, 0, 0, 0.03);
  }
  100% {
    clip-path: inset(0);
    filter: none;
    transform: translateX(0);
    opacity: 0;
  }
}

/* ── Shadow Figure ── */
.scare-shadow {
  position: fixed;
  top: 20%;
  right: -40px;
  width: 30px;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 70%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  pointer-events: none;
  z-index: 99998;
  animation: shadowSlide 0.8s ease-in-out forwards;
}

[data-theme="light"] .scare-shadow {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, transparent 70%);
}

@keyframes shadowSlide {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  20% {
    transform: translateX(-50px);
    opacity: 0.7;
  }
  50% {
    transform: translateX(-50px);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}