/* ===========================================
   jumpscare.css
   Reusable overlay used by js/jumpscare.js
   Include this on ANY page that calls triggerJumpscare()
   =========================================== */

.jumpscare-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.jumpscare-overlay.active {
  opacity: 1;
  transition: opacity 25ms linear;
}

.jumpscare-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: scareFlash 0.5s steps(2, end);
}

@keyframes scareFlash {
  0%   { filter: brightness(2) contrast(1.6) saturate(1.4); transform: scale(1.06); }
  50%  { filter: brightness(0.7) contrast(2);                transform: scale(1); }
  100% { filter: brightness(1); }
}

.screen-shake {
  animation: shake 0.4s linear;
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-8px, 4px); }
  40%      { transform: translate(8px, -4px); }
  60%      { transform: translate(-6px, -6px); }
  80%      { transform: translate(6px, 6px); }
}

/* Used for the "calm before the scare" — dims everything
   else on the page for a second so the scare reads clearly */
.about-to-scare {
  transition: filter 0.3s ease;
  filter: brightness(0.6) saturate(0.5);
}