:root{--goud:#ebc87e;--wit:#fff;--lijn:rgba(255,255,255,.14);--pin-ai:#3fc1ff;--pin-live:#ebc87e;
  --tekst:Poppins,system-ui,sans-serif;--font:'Source Sans 3','Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--wit);font:300 16px/1.65 var(--tekst);-webkit-text-size-adjust:100%}
body{display:grid;place-items:center}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}

/* embed: het venster vult de iframe en blijft 16:9, zodat de bolletjes op het beeld blijven passen; is de iframe anders van vorm, dan komt er zwart naast */
#venster{position:relative;width:min(100vw,calc(100vh * 16 / 9));aspect-ratio:16/9;overflow:hidden;background:#07090f;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#venster>video,#poster{position:absolute;inset:0;width:100%;height:100%;display:block}
#poster{background:#07090f center/cover no-repeat}
#vid{object-fit:cover;opacity:0;transition:opacity .5s}
#vid.aan{opacity:1}
#venster{cursor:grab}#venster.sleep{cursor:grabbing}

/* bolletjes: letterlijk de speld uit de wereld (index.html .sch-pin), blauw AI-toezicht, oranje live toezicht. --schaal is 1 op de computer en alleen kleiner op een smal scherm */
#punten{position:absolute;inset:0;z-index:3;pointer-events:none;transition:opacity .4s}
.pin{--k:var(--pin-ai);--d:calc(26px*var(--schaal,1));--s:calc(12px*var(--schaal,1));--n:calc(28px*var(--schaal,1));position:absolute;left:0;top:0;width:0;height:0;will-change:transform;opacity:1;transition:opacity .3s ease}
.pin.live{--k:var(--pin-live)}
.pin.achter{opacity:.8}
.pin .ring{position:absolute;left:0;top:0;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius:50%;border:calc(3px*var(--schaal,1)) solid var(--k);
  background:radial-gradient(circle,rgba(8,10,16,.34) 0 44%,color-mix(in srgb,var(--k) 24%,transparent) 60%,transparent 74%);
  box-shadow:0 0 0 2px rgba(8,10,16,.82),inset 0 0 0 1.5px rgba(8,10,16,.7),0 0 12px var(--k),0 1px 5px rgba(0,0,0,.55)}
.pin .steel{position:absolute;left:calc(-1.5px*var(--schaal,1));bottom:calc(var(--d) / 2 - 1px);width:calc(3px*var(--schaal,1));height:var(--s);
  background:var(--k);box-shadow:0 0 0 1.5px rgba(8,10,16,.75)}
.pin .nr{position:absolute;left:0;bottom:calc(var(--d) / 2 + var(--s) - 2px);width:var(--n);height:var(--n);margin-left:calc(var(--n) / -2);
  border-radius:50%;display:flex;align-items:center;justify-content:center;gap:2px;box-sizing:border-box;background:var(--k);color:#0b0d12;
  font:700 calc(14px*var(--schaal,1))/1 var(--font);font-variant-numeric:tabular-nums;border:2px solid rgba(10,12,18,.9);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.3),0 2px 8px rgba(0,0,0,.55),0 0 12px color-mix(in srgb,var(--k) 70%,transparent)}
.pin.achter .ring{border-style:dashed;background:radial-gradient(circle,rgba(8,10,16,.26) 0 50%,transparent 72%);
  box-shadow:0 0 0 2px rgba(8,10,16,.62),inset 0 0 0 1.5px rgba(8,10,16,.5)}
.pin.achter .steel{opacity:.7}
.pin.achter .nr{box-shadow:0 0 0 1.5px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.45)}
.pin .nr .n{padding:0 1px}
.pin .nr .n.thermo{display:inline-flex;align-items:center;gap:0}
svg.thermo{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.pin .nr svg.thermo{width:calc(13px*var(--schaal,1));height:calc(15px*var(--schaal,1));margin:0 -3px 0 -1px}
.pin.alarm{--k:#ff2a1c;z-index:9000!important;opacity:1}
.pin.alarm .nr{color:#fff;animation:klop 1.1s ease-in-out infinite}
.pin.alarm .ring{animation:klop 1.1s ease-in-out infinite}
@keyframes klop{0%,100%{box-shadow:0 0 0 0 rgba(255,42,28,.75)}60%{box-shadow:0 0 0 calc(12px*var(--schaal,1)) rgba(255,42,28,0)}}

/* kleine onderdelen in het venster */
#pauze,#geluid{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(10,12,18,.55);border:1px solid var(--lijn);display:grid;place-items:center;z-index:5}
#geluid{right:50px}#geluid[hidden]{display:none}
#pauze svg,#geluid svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#pauze.gestopt svg{fill:currentColor;stroke:none}
/* het luidsprekertje wijst één keer op het geluid als de sirene start en het geluid nog op slot zit */
#geluid.puls{animation:geluid-puls 1.4s cubic-bezier(.2,.7,.3,1)}
@keyframes geluid-puls{0%{box-shadow:0 0 0 0 rgba(235,200,126,.9);border-color:var(--goud)}22%{transform:scale(1.2);color:var(--goud);border-color:var(--goud)}100%{box-shadow:0 0 0 20px rgba(235,200,126,0)}}

/* melding: tekst linksboven, elke regel met een symbool uit de wereld */
#log{position:absolute;left:calc(14px*var(--schaal,1));top:calc(14px*var(--schaal,1));display:flex;flex-direction:column;align-items:flex-start;gap:calc(6px*var(--schaal,1));max-width:min(80%,480px);z-index:4;text-align:left;pointer-events:none}
.lg{--k:#fff;--op:#fff;display:flex;align-items:center;gap:calc(8px*var(--schaal,1));padding:calc(4px*var(--schaal,1)) calc(13px*var(--schaal,1)) calc(4px*var(--schaal,1)) calc(4px*var(--schaal,1));border-radius:calc(18px*var(--schaal,1));background:rgba(9,10,14,.82);border:1px solid rgba(255,255,255,.13);box-shadow:0 calc(5px*var(--schaal,1)) calc(18px*var(--schaal,1)) rgba(0,0,0,.38);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);font:600 max(11.5px,calc(14px*var(--schaal,1)))/1.25 var(--tekst);color:#fff;max-height:calc(84px*var(--schaal,1));transform-origin:left center;animation:lg-in .46s cubic-bezier(.2,.85,.25,1.12) backwards;transition:opacity .22s,max-height .26s,padding .26s,margin .26s,transform .26s}
.lg:not(:last-child){opacity:.6;transform:scale(.96)}
/* de vorige regel gaat snel weg en klapt in, zodat de tekst naar boven opschuift */
.lg.weg{opacity:0;overflow:hidden;max-height:0;padding-top:0;padding-bottom:0;margin-top:calc(-7px*var(--schaal,1));transform:translateY(-6px) scale(.96)}
.lg>span{animation:lg-tekst .34s ease .1s backwards}
.ic{flex:none;position:relative;display:grid;place-items:center;width:calc(24px*var(--schaal,1));height:calc(24px*var(--schaal,1));min-width:18px;min-height:18px;border-radius:50%;background:var(--k);color:var(--op);animation:ic-in .5s cubic-bezier(.2,1.35,.4,1) .05s backwards}
.ic svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.lg.detectie,.lg.alarm{--k:#ff2a1c;border-color:rgba(255,70,50,.55)}
.lg.meldkamer{--k:var(--pin-ai);--op:#07141d}
.lg.mens{--k:var(--pin-live);--op:#1d1707}
.lg.veilig{--k:#4fbf7a;--op:#06170d;border-color:rgba(79,191,122,.5)}
/* ring om het symbool zolang er iets gebeurt; bij de sirene slingert de bel en gloeit de regel mee */
.lg.detectie .ic::after,.lg.alarm .ic::after,.lg.meldkamer .ic::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--k);animation:ic-ping 1.2s ease-out infinite}
.lg.alarm{animation:lg-in .46s cubic-bezier(.2,.85,.25,1.12) backwards,lg-rood .5s ease-in-out .3s infinite alternate}
.lg.alarm .ic svg{width:70%;height:70%;transform-origin:50% 16%;animation:ic-bel .25s ease-in-out infinite alternate}
.lg.alarm .ic svg path:first-child{fill:currentColor}
.lg.mens .ic svg{animation:ic-ren .32s ease-in-out infinite alternate}
.lg.veilig .ic path{stroke-dasharray:24;stroke-dashoffset:24;animation:ic-vink .42s ease-out .2s forwards}
#log.stil .lg,#log.stil .lg *,#log.stil .lg .ic::after{animation-play-state:paused}
@keyframes lg-in{from{opacity:0;transform:translateX(calc(-22px*var(--schaal,1))) scale(.94)}}
@keyframes lg-tekst{from{opacity:0;transform:translateX(calc(-8px*var(--schaal,1)))}}
@keyframes ic-in{from{transform:scale(.35);opacity:0}}
@keyframes ic-ping{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.65)}}
@keyframes ic-bel{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}
@keyframes ic-ren{from{transform:translateX(-5%)}to{transform:translateX(7%)}}
@keyframes ic-vink{to{stroke-dashoffset:0}}
@keyframes lg-rood{from{box-shadow:0 calc(6px*var(--schaal,1)) calc(22px*var(--schaal,1)) rgba(0,0,0,.38)}to{box-shadow:0 0 calc(18px*var(--schaal,1)) rgba(255,42,28,.6)}}
@media (prefers-reduced-motion:reduce){.lg,.lg>span,.ic,.ic svg,.ic::after,.lg.alarm,.lg.alarm .ic svg,.lg.mens .ic svg{animation:none!important}.lg.veilig .ic path{animation:none;stroke-dashoffset:0}}

@media (max-width:700px){
  #pauze,#geluid{right:6px;bottom:6px;width:28px;height:28px}#geluid{right:38px}
}
@media (prefers-reduced-motion:reduce){#venster>video,#poster{transition:none}.pin.alarm .nr,.pin.alarm .ring,#geluid.puls{animation:none}}