/* Basic body styles and flicker animation */
body {
  background-color: black;
  color: #ccc;
  font-family: 'Courier New', monospace;
  margin: 0;
  padding: 40px;
  text-align: center;
  overflow: hidden;
  background-image: url('fnaf1office.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  box-sizing: border-box;
  text-shadow: 0 0 1px #fff, 0 0 2px #0ff;
  min-height: 100vh;
  transition: background-color 0.3s;
}

/* Hide the native system cursor on all elements */
body, button, input, select, textarea, a, label {
  cursor: none !important;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.2;
  }
}

.flicker {
  animation: flicker 2s infinite; 
}


/* Flash effect when jumpscare happens */
@keyframes flash {
  0%, 100% { background-color: black; }
  50% { background-color: white; }
}

body.flash {
  animation: flash 0.3s ease-in-out 2;
}

.text-container {
  background-color: rgba(0, 0, 0, 0.9);
  padding: 8px 15px;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 20px;
}


/* Wrapper to limit width and center */
.camera-wrapper {
  max-width: 720px;  /* adjust this width if needed */
  margin: 0 auto;
  padding: 0 10px;
}

/* Hide radio buttons */
.camera-system input[type="radio"] {
  display: none;
}

/* Style labels as buttons - matching heading colors with cyan glow but no flicker */
.camera-system label {
  cursor: pointer;
  margin: 0 8px;
  padding: 10px 18px;
  border: 2px solid #33cccc;
  color: #ccc;
  background-color: rgba(17, 17, 17, 0.8);
  font-family: 'Courier New', monospace;
  border-radius: 4px;
  text-shadow: 0 0 4px #0ff, 0 0 10px #0ff;
  transition: background-color 0.3s, color 0.3s;
  user-select: none;
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
}

/* Hover effect with subtle brightening */
.camera-system label:hover {
  background-color: rgba(51, 204, 204, 0.2);
  color: #eee;
  text-shadow: 0 0 8px #0ff, 0 0 16px #0ff;
}

/* Show which camera is selected with a stronger cyan background */
.camera-system input[type="radio"]:checked + label {
  background-color: #0ff;
  color: #000;
  text-shadow: none;
  pointer-events: none;
}

/* Feeds container with border and overlays */
.feeds {
  margin-top: 20px;
  min-height: 180px;
  border: 2px solid #33cccc;
  border-radius: 6px;
  padding: 5px;
  position: relative;
}

/* Individual feed styling with overlays */
.feed {
  position: relative;
  display: none;
  color: #0ff;
  background: rgba(0, 0, 0, 0.7);
  padding: 15px;
  border-radius: 6px;
  border: 2px solid #33cccc;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 2px #0ff;
  min-height: 180px;
  line-height: normal;
  overflow: hidden;
}

/* Overlay behind jumpscare GIF */
.feed::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 255, 255, 0.1);
  pointer-events: none;
  z-index: 5;
  animation: staticNoise 0.15s infinite;
  mix-blend-mode: screen;
  border-radius: 6px;
}

/* Subtle flickering scanline overlay */
.feed::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,255,0.05),
    rgba(0,255,255,0.05) 1px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 6;
  animation: scanlineMove 5s linear infinite;
  border-radius: 6px;
}

/* Static noise keyframes */
@keyframes staticNoise {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 100%;
  }
}

/* Scanline move keyframes */
@keyframes scanlineMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

/* Show feed corresponding to checked camera */
#cam1:checked ~ label[for="cam1"] ~ .feeds .cam1,
#cam2:checked ~ label[for="cam2"] ~ .feeds .cam2,
#cam3:checked ~ label[for="cam3"] ~ .feeds .cam3,
#cam4:checked ~ label[for="cam4"] ~ .feeds .cam4 {
  display: block;
}

/* Center and fix jumpscare GIF size to Freddy's */
.jumpscare {
  display: none;
  width: 320px;
  height: auto;
  margin: 0 auto;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 10;
  border-radius: 8px;
  box-shadow: 0 0 15px #0ff, 0 0 30px #33cccc;
}

/* Camera monitor border with limited width */
.camera-monitor-border {
  width: 100%; /* fills camera-wrapper */
  height: 12px;
  margin-top: 30px;
  border-top: 3px solid #33cccc;
  border-bottom: 3px solid #33cccc;
  background: linear-gradient(90deg, #0ff 0%, #33cccc 50%, #0ff 100%);
  border-radius: 4px;
}

/* Camera-themed button */
.camera-button {
  display: inline-block;
  background: linear-gradient(145deg, #0ff, #33cccc);
  border: 2px solid #33cccc;
  border-radius: 6px;
  color: #000;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  padding: 12px 24px;
  margin-bottom: 20px;
  cursor: pointer;
  text-shadow: 0 0 4px #0ff, 0 0 10px #33cccc;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  user-select: none;
  text-decoration: none;
  box-shadow: 0 0 15px #0ff, 0 0 30px #33cccc;
}

.camera-button:hover {
  background: linear-gradient(145deg, #33cccc, #0ff);
  color: #000;
  box-shadow: 0 0 25px #0ff, 0 0 40px #33cccc;
}