/* =========================================================
   YSD v2 — film layer: hosted video, perimeter walk (scroll
   scrub), time-of-day dial, service loops, intruder detection
   ========================================================= */

/* scrub videos (VideoScrub mounts two <video>s, only the active one is visible) */
.scrub-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.scrub-video.is-active{opacity:1}

/* ---------- WALK — perimeter walkthrough ---------- */
.walk{position:relative;background:var(--ink)}
.walk__pin{position:relative;height:100svh;overflow:hidden;isolation:isolate}
.walk__stage{position:absolute;inset:0;background:var(--ink)}
.walk__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s}
.walk__stage.is-ready .walk__poster{opacity:0}
.walk__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(7,7,8,.6) 10%,rgba(7,7,8,0) 30%,rgba(7,7,8,0) 68%,rgba(7,7,8,.7) 88%,var(--ink) 100%)}
.walk__copy{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 28px);z-index:3;pointer-events:none}
.walk__copy .head{margin-bottom:0;max-width:640px}
.walk__copy .head__title{font-size:clamp(2rem,4.6vw,3.6rem)}
.walk__copy .head__lead{max-width:44ch;font-size:1rem}
.walk__hud{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 var(--gut) 28px;pointer-events:none}
.walk__rail{position:relative;height:1px;background:rgba(236,234,229,.18);margin-bottom:14px}
.walk__rail i{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:left}
.walk__rail b{position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--ink);border:1px solid rgba(236,234,229,.5);transform:translateX(-50%);transition:background .4s,border-color .4s}
.walk__rail b.is-on{background:var(--brass);border-color:var(--brass)}
.walk__meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:rgba(236,234,229,.75);text-transform:uppercase}
.walk__meta .rec{display:inline-flex;align-items:center;gap:7px}
.walk__meta .rec i{width:7px;height:7px;border-radius:50%;background:var(--alert);animation:blink 1.4s steps(2,start) infinite}
.walk__hint{display:inline-flex;align-items:center;gap:8px;color:var(--muted-2)}
.walk__hint .ico{width:14px;height:14px}
.callout{position:absolute;z-index:4;display:flex;flex-direction:column;gap:4px;left:var(--x);top:var(--y);transform:translate(-50%,-100%);pointer-events:none;
  opacity:0;transition:opacity .5s var(--e-out),transform .6s var(--e-out)}
.callout.is-on{opacity:1;transform:translate(-50%,calc(-100% - 10px))}
.callout__dot{position:absolute;left:50%;bottom:-18px;width:9px;height:9px;border-radius:50%;background:var(--brass);transform:translateX(-50%);box-shadow:0 0 0 4px rgba(200,162,75,.18)}
.callout__line{position:absolute;left:50%;bottom:-14px;width:1px;height:14px;background:rgba(200,162,75,.7)}
.callout__tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.callout__name{font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--paper);white-space:nowrap;padding:8px 12px;border:1px solid rgba(236,234,229,.18);background:rgba(7,7,8,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:3px}
.callout__name small{display:block;font-weight:450;color:var(--muted);font-size:.78rem;margin-top:2px;white-space:normal;max-width:30ch}
.walk--still .walk__pin{height:auto;aspect-ratio:16/9}
@media (max-width:720px){
  .walk__copy{top:calc(var(--nav-h) + 16px)}
  .walk__copy .head__lead{display:none}
  .callout__name{font-size:.8rem;padding:6px 9px}
  .callout__name small{display:none}
}

/* ---------- TIME OF DAY dial (replaces the compare slider) ---------- */
.tod{position:relative}
.tod__scene{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
.tod__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s}
.tod__scene.is-ready .tod__poster{opacity:0}
.tod__ir{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--e-out);pointer-events:none}
.tod__ir::after{content:""}
.tod__scan{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.14) 2px 3px)}
.tod__scene.is-ir .tod__ir,.tod__scene.is-ir .tod__scan{opacity:1}
.tod__tag{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;padding:7px 10px;background:rgba(7,7,8,.55);border:1px solid var(--line);border-radius:3px;color:rgba(236,234,229,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tod__tag .ico{width:13px;height:13px}
.tod__tag--r{left:auto;right:16px}
.tod__clock{font-feature-settings:"tnum" 1;min-width:5ch;text-align:right}
.tod__ctl{margin-top:22px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}
.tod__ctl .ico{width:18px;height:18px;color:var(--muted)}
.tod__range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:ew-resize;margin:0}
.tod__range:focus{outline:none}
.tod__range::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,rgba(236,234,229,.5),rgba(236,234,229,.12) 70%,rgba(200,162,75,.5))}
.tod__range::-moz-range-track{height:1px;background:linear-gradient(90deg,rgba(236,234,229,.5),rgba(236,234,229,.12) 70%,rgba(200,162,75,.5))}
.tod__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--paper);border:1px solid rgba(200,162,75,.6);margin-top:-12.5px;box-shadow:0 8px 24px rgba(0,0,0,.6);transition:transform .25s var(--e-out)}
.tod__range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--paper);border:1px solid rgba(200,162,75,.6);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.tod__range:focus-visible::-webkit-slider-thumb{outline:1.5px solid var(--brass);outline-offset:3px}
.tod__range:active::-webkit-slider-thumb{transform:scale(1.12)}
.tod__marks{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted-2);text-transform:uppercase}
.tod__marks span:last-child{color:rgba(200,162,75,.8)}
.tod__note{margin-top:14px;text-align:center;font-size:.84rem;color:var(--muted-2)}

/* ---------- SERVICES media loops ---------- */
.svc__media-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--e-out)}
.svc__media-vid.is-on{opacity:1}
.svc__media-img.is-on{opacity:1}
.svc__frame.has-vid .svc__media-img.is-on{opacity:1}

/* ---------- LIVE: intruder detection ---------- */
.cam__intr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s;filter:saturate(.8) contrast(1.05)}
.cam.is-intr .cam__intr{opacity:1}
.cam__box{position:absolute;z-index:3;left:0;top:0;width:0;height:0;border:1.5px solid var(--alert);pointer-events:none;opacity:0;transition:opacity .3s;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.cam__box::before,.cam__box::after{content:"";position:absolute;width:8px;height:8px;border-color:var(--alert);border-style:solid}
.cam__box::before{left:-2px;top:-2px;border-width:2px 0 0 2px}
.cam__box::after{right:-2px;bottom:-2px;border-width:0 2px 2px 0}
.cam__box b{position:absolute;left:-1.5px;bottom:100%;margin-bottom:4px;font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.18em;padding:3px 6px;background:var(--alert);color:#0a0a0a;white-space:nowrap}
.cam.is-intr .cam__box{opacity:1}
.lb__stage .cam__box b{font-size:11px}

/* ---------- LOCAL video ---------- */
.local__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s,filter 1.2s var(--e-out)}
.local__vid.is-ready{opacity:1}
.local__media.is-cctv .local__vid{filter:saturate(.3) sepia(.2) contrast(1.12) brightness(.95)}