/* 65 CCTV: generated office feeds, local webcam channel, and restrained signal motion. */
.cctv-window {
  width:min(var(--w),58%);
  min-width:300px;
}

.cctv-content {
  padding:6px;
  color:#d7dfd6;
  background:#050706;
}

.cctv-feed {
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 9;
  border:1px solid #151815;
  outline:1px solid #8b8e86;
  background:#020403;
  isolation:isolate;
}

.cctv-media {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.26) sepia(.07) hue-rotate(144deg) saturate(.68) contrast(1.22) brightness(.82);
  transform:scale(1.012);
}

.cctv-webcam {
  transform:scaleX(-1) scale(1.025);
  filter:grayscale(.72) sepia(.12) hue-rotate(142deg) saturate(.58) contrast(1.34) brightness(.68);
}

.cctv-face-canvas {
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  transform:scaleX(-1) scale(1.025);
  filter:none;
}

.cctv-face-canvas.is-interactive { pointer-events:auto; }
.cctv-face-canvas.is-interactive.has-face-intent,
.cctv-face-canvas.is-interactive.has-face-hover { cursor:var(--cursor-action); }

.cctv-webcam.is-face-fx-source { opacity:0; }

.cctv-overlay {
  position:absolute;
  z-index:5;
  inset:0;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr auto;
  align-items:start;
  gap:6px;
  padding:9px 11px;
  color:#d7e5d5;
  font:700 clamp(8px,.72vw,12px)/1.1 "Courier New",monospace;
  letter-spacing:.04em;
  text-shadow:1px 1px 2px #000,0 0 4px #000;
  pointer-events:none;
}

.cctv-overlay > :nth-child(4) { align-self:end; }
.cctv-live { align-self:end; justify-self:end; color:#d8e7d6; }
.cctv-live::before { content:""; display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#aeb8ac; box-shadow:0 0 3px #dfe8dd; vertical-align:1px; }

.cctv-noise {
  position:absolute;
  z-index:3;
  inset:-18%;
  opacity:.035;
  mix-blend-mode:screen;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.82' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:cctv-noise-shift .1s steps(1,end) infinite;
  transition:opacity 160ms cubic-bezier(.23,1,.32,1);
}

.cctv-feed::after {
  content:"";
  position:absolute;
  z-index:4;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(218,230,220,.08) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 54%,rgba(0,0,0,.48) 100%);
  mix-blend-mode:screen,normal;
}

.cctv-scan-bar {
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  top:-8%;
  height:7%;
  opacity:.2;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(207,225,211,.13),transparent);
  animation:cctv-scan 5.8s linear infinite;
}

.cctv-camera-lock {
  position:absolute;
  z-index:7;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:8px;
  padding:12%;
  color:#cbd8c9;
  background:radial-gradient(ellipse at center,rgba(19,29,23,.72),rgba(1,3,2,.96));
  text-align:center;
}

.cctv-camera-lock[hidden],.cctv-media[hidden] { display:none; }
.cctv-camera-lock strong { color:#f0f2ec; }
.cctv-camera-lock p { max-width:38em; margin:0; color:#9eab9d; font-size:.82em; }

.cctv-controls {
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:7px;
}

.cctv-channel-list { display:flex; gap:3px; }
.cctv-controls button {
  min-height:24px;
  border:1px solid #7a8078;
  color:#cbd5c9;
  background:#0a100c;
  box-shadow:inset 1px 1px rgba(238,244,236,.18),inset -1px -1px #020302;
  font:700 .78em/1 "Courier New",monospace;
  cursor:pointer;
  transition:color 120ms ease-out,background-color 120ms ease-out,transform 90ms cubic-bezier(.23,1,.32,1);
}

.cctv-controls button:not(:disabled):hover,
.cctv-controls button:focus-visible,
.cctv-controls button[aria-pressed="true"] {
  color:#101510;
  background:#c2cabf;
}

.cctv-controls button:not(:disabled):active {
  transform:translateY(1px) scale(.985);
}

.cctv-controls button:disabled { opacity:.38; cursor:var(--cursor-default)!important; }

#cctv-auto { margin-left:auto; white-space:nowrap; }
.cctv-privacy {
  margin:5px 2px 0!important;
  color:#687667;
  font-size:.58em;
  line-height:1.15;
  letter-spacing:.025em;
}
.cctv-status { min-height:1.2em; margin:6px 2px 0!important; color:#8fa98c; font-size:.75em; letter-spacing:.04em; }

.cctv-feed.is-switching .cctv-media { animation:cctv-channel-switch 200ms steps(1,end); }
.cctv-feed.is-jittering .cctv-media { animation:cctv-frame-jitter var(--cctv-jitter-duration,90ms) linear; }
.cctv-feed.is-jittering::after { transform:translateY(2px); }
.cctv-feed[data-interaction] .cctv-noise,
.cctv-feed[data-motion-phase="DISRUPTION"] .cctv-noise { opacity:.018; }
.cctv-feed.are-effects-paused .cctv-noise { opacity:.025; animation:none; }
.cctv-feed.are-effects-paused .cctv-scan-bar { display:none; }

.cctv-icon {
  display:grid;
  place-items:center;
  width:clamp(23px,2.5vw,38px);
  height:clamp(17px,1.8vw,28px);
  border:2px solid #c7c4b9;
  color:#222;
  background:#aaa89e;
  box-shadow:2px 2px #000;
  font:700 clamp(5px,.45vw,8px)/1 "Courier New",monospace;
}

.mini-cctv { display:inline-block; width:14px; height:10px; margin-right:6px; border:1px solid #333; background:linear-gradient(to bottom,#454943 0 45%,#aaa89e 46%); vertical-align:middle; }

.os-window.is-maximized .cctv-content { display:grid; grid-template-rows:minmax(0,1fr) auto auto auto; min-height:0; }
.os-window.is-maximized .cctv-feed { min-height:0; aspect-ratio:auto; }

@keyframes cctv-noise-shift { 0%{transform:translate(0)} 33%{transform:translate(2%,-1%)} 66%{transform:translate(-1%,1%)} }
@keyframes cctv-scan { from{transform:translateY(0)} to{transform:translateY(1550%)} }
@keyframes cctv-channel-switch { 0%{opacity:1;translate:0 0} 26%{opacity:.12;translate:7px 0} 52%{opacity:.68;translate:-4px 0} 72%{opacity:.18;translate:1px 0} 100%{opacity:1;translate:0 0} }
@keyframes cctv-frame-jitter { 0%{translate:0 0} 15%{translate:-2px 0} 35%{translate:1px 0} 60%,100%{translate:0 0} }

@media (max-width:760px) {
  .cctv-window { left:9%!important; top:7%!important; width:82%!important; min-width:0; }
  .cctv-controls { align-items:stretch; flex-wrap:wrap; }
  .cctv-channel-list { flex:1 1 100%; }
  .cctv-channel-list button { flex:1; }
  #cctv-auto { margin-left:0; }
  .cctv-task { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .cctv-noise,.cctv-scan-bar,.cctv-feed.is-switching .cctv-media,.cctv-feed.is-jittering .cctv-media { animation:none!important; }
  .cctv-scan-bar { display:none; }
  .cctv-controls button { transition:none; }
  .cctv-controls button:not(:disabled):active { transform:none; }
}