/* Floating 3D CCTV camera (#camFloat), driven by js/cam3d.js. Hangs just under the fixed site
   header (--qh-h from css/site-header.css), lined up with the logo, for the whole page. Sits
   below the header (z 1000) so menus open over it, and below the survey modal (z 10000). */
.cam-float {
  position: fixed; z-index: 990;
  top: var(--qh-h, 68px);
  left: max(8px, calc((100vw - 1280px) / 2 + 10px));
  width: 150px; height: 88px;
  padding: 0; border: 0; background: none; cursor: pointer;
  pointer-events: none;   /* only .cam-float__hit (the camera itself) takes clicks */
  -webkit-tap-highlight-color: transparent;
  opacity: 0; transition: opacity .6s ease;
}
.cam-float--ready, .cam-float--static { opacity: 1; }
.cam-float__hit { position: absolute; left: 0; top: 0; width: 58%; height: 100%; pointer-events: auto; }
.cam-float canvas { display: block; width: 100%; height: 100%; pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(26,33,36,.28)); }   /* lifts it off the white page */
.cam-float__poster { display: none; width: 100%; height: 100%; object-fit: contain; transform: rotate(180deg); }
.cam-float--static .cam-float__poster { display: block; }
.cam-float__label {
  position: absolute; left: 60%; top: 50%; transform: translate(-4px, -50%);
  white-space: nowrap; font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 12.5px;
  color: #1A2124; background: #fff; border: 1px solid rgba(26,33,36,.12); border-radius: 999px;
  padding: 5px 11px; box-shadow: 0 4px 14px rgba(26,33,36,.12);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.cam-float:hover .cam-float__label, .cam-float:focus-visible .cam-float__label { opacity: 1; transform: translate(0, -50%); }
.cam-float:focus-visible { outline: 2px solid #7AB23A; outline-offset: 2px; border-radius: 12px; }
.cam-float--right { left: auto; right: max(8px, calc((100vw - 1280px) / 2 + 10px)); }
.cam-float--right .cam-float__hit { left: auto; right: 0; }
.cam-float--right .cam-float__label { left: auto; right: 60%; }
.cam-float--right:hover .cam-float__label { transform: translate(0, -50%); }
@media (max-width: 1024px) { .cam-float { width: 104px; height: 62px; left: 6px; } .cam-float--right { left: auto; right: 6px; } }