/* Screen effects for story moments: fade between areas, red flash when caught, camera shake. */
.fade-overlay,
.red-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.fade-overlay {
  z-index: 40;
  background: #000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.fade-overlay.is-dark {
  opacity: 1;
}

.red-flash {
  z-index: 41;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(120, 0, 10, 0.55) 0%, rgba(40, 0, 4, 0.95) 100%);
}

.red-flash.is-active {
  animation: red-flash-pulse 0.6s ease-out forwards;
}

@keyframes red-flash-pulse {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0.7; }
}

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

@keyframes screen-shake {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-10px, 6px); }
  30% { transform: translate(9px, -7px); }
  45% { transform: translate(-8px, -5px); }
  60% { transform: translate(7px, 6px); }
  75% { transform: translate(-4px, 3px); }
  100% { transform: translate(0, 0); }
}

@keyframes screen-shake-gentle {
  0% { transform: translate(0, 0); }
  30% { transform: translate(-2px, 1px); }
  60% { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .fade-overlay {
    transition-duration: 0.15s;
  }

  #game.shake {
    animation-name: screen-shake-gentle;
  }
}