/* ============================================================================
   NexView — animated drag-to-compare scene (#compare)
   ----------------------------------------------------------------------------
   Fully drawn (SVG + CSS), no image files, no dependencies. The DOM inside
   .nvc is built by assets/js/nv-compare.js; this file owns every visual.
   All classes are prefixed .nvc so nothing collides with the theme layer.

   Structure the JS builds:
     .nvc
       .nvc-pane.nvc-a      conventional CCTV — dimmed, scanlines, no HUD
         .nvc-stage         16:9 stage, cover-cropped on narrow screens
       .nvc-pane.nvc-b      NexView — zone, detection boxes, alerts (clipped)
         .nvc-stage
       .nvc-chip ×2         side labels with live clocks
       .nvc-h > .nvc-grip   divider + drag handle
   ========================================================================== */

.nvc {
    --nvc-cyan:  #00ADFF;   /* logo digital-square cyan — detections        */
    --nvc-blue:  #4A90E8;   /* theme accent — zone, chrome                  */
    --nvc-red:   #FF5D49;
    --nvc-green: #35C98F;
    --nvc-amber: #E0A935;

    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 620px;
    container-type: size;
    overflow: hidden;
    background: #050A12;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 24px;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 34px 84px -30px rgba(0, 0, 0, 0.92);
}
.nvc:focus-visible { outline: 2px solid var(--nvc-blue); outline-offset: 3px; }
@media (max-width: 640px) {
    .nvc { aspect-ratio: 4 / 3; border-radius: 16px; }
}

/* ── Panes and stage ─────────────────────────────────────────────────────── */

.nvc-pane { position: absolute; inset: 0; overflow: hidden; }
.nvc-b    { will-change: clip-path; }

/* The stage keeps the scene's 16:9 geometry at every container ratio and
   COVERS the frame, so percentage-positioned actors always stand on the
   scenery drawn under them: on the wide desktop frame it crops top/bottom,
   on a 4:3 phone frame it crops the sides — never letterboxes, never
   stretches. */
.nvc-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translate(-50%, -50%);
}
@container (max-aspect-ratio: 16/9) {
    .nvc-stage { width: auto; height: 100%; }
}
.nvc-scene { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Conventional side: the whole world is dark and desaturated — the overlays
   (scanlines, chip) sit outside the filtered stage so they stay crisp. */
.nvc-a .nvc-stage { filter: brightness(0.58) saturate(0.5) contrast(0.95); }
.nvc-b .nvc-stage { filter: brightness(1.05); }

/* CRT scanlines + slow flicker, conventional side only */
.nvc-scan {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: repeating-linear-gradient(0deg,
        rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px);
    animation: nvc-flicker 7s steps(1) infinite;
}
@keyframes nvc-flicker {
    0%, 100% { opacity: 0.9; }
    12%      { opacity: 0.65; }
    13%      { opacity: 0.95; }
    47%      { opacity: 0.78; }
    48%      { opacity: 0.95; }
    83%      { opacity: 0.7; }
}

/* ── Scene details animated from CSS ─────────────────────────────────────── */

/* refinery flare + tower obstruction lights (classes live inside the SVG) */
.nvc-flare  { transform-box: fill-box; transform-origin: 50% 100%;
              animation: nvc-flare 0.24s ease-in-out infinite alternate; }
@keyframes nvc-flare { from { transform: scaleY(1) scaleX(1); }
                       to   { transform: scaleY(0.82) scaleX(1.12); } }
.nvc-blink  { animation: nvc-blink 2.6s ease-in-out infinite; }
.nvc-blink2 { animation: nvc-blink 2.6s ease-in-out 1.3s infinite; }
@keyframes nvc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }

/* fire: flames flicker, smoke puffs rise on a stagger */
.nvc-flame { transform-box: fill-box; transform-origin: 50% 92%;
             animation: nvc-flame 0.19s ease-in-out infinite alternate; }
.nvc-flame.nvc-core { animation-duration: 0.13s; }
@keyframes nvc-flame { from { transform: scaleY(1) scaleX(1); }
                       to   { transform: scaleY(0.86) scaleX(1.1); } }
.nvc-smoke { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0;
             animation: nvc-smoke 3.4s linear infinite; }
.nvc-smoke.s2 { animation-delay: 1.1s; }
.nvc-smoke.s3 { animation-delay: 2.3s; }
@keyframes nvc-smoke {
    0%   { transform: translateY(0)     scale(0.6); opacity: 0; }
    18%  { opacity: 0.34; }
    100% { transform: translateY(-30px) scale(1.7); opacity: 0; }
}

/* embers ride the updraft above the flames */
.nvc-ember { transform-box: fill-box; opacity: 0;
             animation: nvc-ember 2.3s linear infinite; }
.nvc-ember.e2 { animation-delay: 0.6s; }
.nvc-ember.e3 { animation-delay: 1.2s; }
.nvc-ember.e4 { animation-delay: 1.7s; }
@keyframes nvc-ember {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    12%  { opacity: 0.9; }
    100% { transform: translate(var(--dx, 7px), -48px) scale(0.25); opacity: 0; }
}
.nvc-fglow { animation: nvc-fglow 0.34s ease-in-out infinite alternate; }
@keyframes nvc-fglow { from { opacity: 0.5; } to { opacity: 0.26; } }

/* fire grows in when "ignited" by the timeline */
.nvc-fire .nvc-fig { transform-origin: 50% 100%; transform: scale(0);
                     transition: transform 1.6s cubic-bezier(0.2, 0.9, 0.3, 1.05); }
.nvc-fire.nvc-lit .nvc-fig { transform: scale(1); }

/* forklift beacon + lit process-building windows */
.nvc-beacon { animation: nvc-beacon 1.1s steps(1) infinite; }
@keyframes nvc-beacon { 0%, 100% { opacity: 1; } 55% { opacity: 0.12; } }
.nvc-win { animation: nvc-win 9s ease-in-out infinite; }
@keyframes nvc-win { 0%, 58%, 100% { opacity: 0.5; } 62% { opacity: 0.2; }
                     66% { opacity: 0.5; } }

/* low fog drifting across the yard (inside the stage so the CCTV side
   inherits the dim treatment) */
.nvc-fog {
    position: absolute;
    top: 34%; height: 44%; width: 58%;
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(150, 180, 205, 0.09), transparent 70%);
    animation: nvc-fog 80s ease-in-out infinite alternate;
}
.nvc-fog.f2 { top: 50%; height: 38%; width: 66%; opacity: 0.7;
              animation-duration: 110s; animation-delay: -45s; }
@keyframes nvc-fog { from { transform: translateX(-8%); }
                     to   { transform: translateX(52%); } }

/* ── Restricted zone (NexView side) ──────────────────────────────────────── */

.nvc-zone { position: absolute; inset: 0; width: 100%; height: 100%;
            pointer-events: none; }
.nvc-zone polygon {
    fill: rgba(74, 144, 232, 0.05);
    stroke: rgba(74, 144, 232, 0.55);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 7 5;
    animation: nvc-ants 40s linear infinite;
    transition: fill 0.5s ease, stroke 0.5s ease;
}
@keyframes nvc-ants { to { stroke-dashoffset: -600; } }
.nvc-zone-lab {
    position: absolute;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.34em;
    color: rgba(74, 144, 232, 0.6);
    white-space: nowrap;
    pointer-events: none;
    transition: color 0.5s ease;
}
/* the zone goes hot while the intruder is inside it */
.nvc-zhot .nvc-zone polygon { fill: rgba(255, 93, 73, 0.09);
                              stroke: rgba(255, 93, 73, 0.8); }
.nvc-zhot .nvc-zone-lab     { color: rgba(255, 93, 73, 0.85); }

/* ── Actors ──────────────────────────────────────────────────────────────── */

.nvc-actor {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -100%);
    z-index: 2;
    transition: opacity 0.9s ease;
}
.nvc-actor.nvc-hidden { opacity: 0; }
.nvc-fig svg { display: block; overflow: visible; }
/* limb rotation is applied by JS as SVG rotate(a x y) around fixed pivots,
   so no transform-box/origin plumbing is needed here */

/* ── Detection boxes — corner-bracket VMS style, NexView side only ───────── */

.nvc-box {
    --bc: var(--nvc-cyan);
    position: absolute;
    inset: -9px -7px -2px -7px;
    border: 1px solid color-mix(in srgb, var(--bc) 75%, transparent);
    border-radius: 1px;
    box-shadow: 0 0 10px -6px var(--bc);
    opacity: 0;
    scale: 1.12;
    /* Snappy on purpose — a slow fade on top of the staggered reveal made the
       panel read as still loading. The scale still lands after the opacity so
       the box reads as "locking on" rather than just appearing. */
    transition: opacity 0.32s ease, scale 0.45s cubic-bezier(0.22, 0.85, 0.3, 1);
}
.nvc-box.nvc-on { opacity: 1; scale: 1; }
.nvc-box s { position: absolute; width: 7px; height: 7px;
             border: 0 solid var(--bc); }
.nvc-box s:nth-of-type(1) { top: -1px;    left: -1px;
             border-top-width: 2px;    border-left-width: 2px; }
.nvc-box s:nth-of-type(2) { top: -1px;    right: -1px;
             border-top-width: 2px;    border-right-width: 2px; }
.nvc-box s:nth-of-type(3) { bottom: -1px; left: -1px;
             border-bottom-width: 2px; border-left-width: 2px; }
.nvc-box s:nth-of-type(4) { bottom: -1px; right: -1px;
             border-bottom-width: 2px; border-right-width: 2px; }

.nvc-c-cyan  { --bc: var(--nvc-cyan);  }
.nvc-c-red   { --bc: var(--nvc-red);   }
.nvc-c-green { --bc: var(--nvc-green); }
.nvc-c-amber { --bc: var(--nvc-amber); }

/* Label above the box. The JS counter-scales it against the actor's depth
   scale so type stays the same size whether the actor is near or far. */
.nvc-tag {
    position: absolute;
    bottom: 100%;
    left: -1px;
    margin-bottom: 6px;
    transform-origin: left bottom;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--bc);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.nvc-tag b { font-weight: 400; opacity: 0.72; margin-left: 5px; }
.nvc-flip .nvc-tag { left: auto; right: -1px; transform-origin: right bottom; }

/* ── Scan sweep (NexView side) ───────────────────────────────────────────── */

.nvc-sweep {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, transparent,
        rgba(0, 173, 255, 0.4) 18%, rgba(0, 173, 255, 0.4) 82%, transparent);
    animation: nvc-sweep 9s cubic-bezier(0.45, 0, 0.4, 1) 1.5s infinite;
}
@keyframes nvc-sweep {
    0%       { top: -2%; opacity: 0; }
    4%       { opacity: 1; }
    54%      { top: 102%; opacity: 1; }
    58%, 100%{ top: 102%; opacity: 0; }
}

/* ── Side chips (labels + clocks) ────────────────────────────────────────── */

.nvc-chip {
    position: absolute;
    top: 14px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(5, 9, 15, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.nvc-chip-l { left: 14px;  color: #8A97A5; }
.nvc-chip-r { right: 14px; color: var(--nvc-cyan);
              border-color: rgba(0, 173, 255, 0.28); }
.nvc-chip .nvc-clock { font-weight: 400; opacity: 0.65; margin-left: 2px; }
.nvc-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.nvc-dot-rec  { background: var(--nvc-red);
                animation: nvc-blink 1.6s ease-in-out infinite; }
.nvc-dot-live { background: var(--nvc-green);
                box-shadow: 0 0 6px var(--nvc-green); }
@media (max-width: 640px) {
    .nvc-chip { font-size: 8.5px; padding: 5px 8px; gap: 6px;
                top: 10px; letter-spacing: 0.09em; }
    .nvc-chip-l { left: 10px; }
    .nvc-chip-r { right: 10px; }
    .nvc-chip .nvc-clock, .nvc-long { display: none; }
}

/* ── Alert toasts (NexView side) ─────────────────────────────────────────── */

.nvc-alerts {
    position: absolute;
    top: 52px;
    right: 14px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-end;
    pointer-events: none;
}
.nvc-toast {
    --tc: var(--nvc-red);
    min-width: 196px;
    max-width: 236px;
    padding: 8px 12px 9px;
    border-radius: 8px;
    background: rgba(5, 9, 15, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-left: 2px solid var(--tc);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    translate: 12px 0;
    transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.22, 0.85, 0.3, 1);
}
.nvc-toast.nvc-on  { opacity: 1; translate: 0 0; }
.nvc-toast b {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #F5F7FA;
}
.nvc-toast b::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tc);
    margin-right: 7px;
    box-shadow: 0 0 6px var(--tc);
}
.nvc-toast span {
    display: block;
    margin-top: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: #78838F;
}
.nvc-t-red   { --tc: var(--nvc-red);   }
.nvc-t-amber { --tc: var(--nvc-amber); }
.nvc-t-green { --tc: var(--nvc-green); }
@media (max-width: 640px) {
    /* docked bottom-right so they never collide with the side chips */
    .nvc-alerts { top: auto; bottom: 10px; right: 10px; gap: 5px; }
    .nvc-toast  { min-width: 148px; max-width: 172px; padding: 6px 9px 7px; }
    .nvc-toast b    { font-size: 10px; }
    .nvc-toast span { font-size: 8.5px; }
}

/* ── Bottom status line (NexView side) ───────────────────────────────────── */

.nvc-status {
    position: absolute;
    right: 16px;
    bottom: 12px;
    z-index: 6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(122, 156, 186, 0.65);
    pointer-events: none;
}
@media (max-width: 640px) { .nvc-status { display: none; } }

/* ── Divider + grip ──────────────────────────────────────────────────────── */

.nvc-h {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    z-index: 8;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.55) 14%,
        rgba(255, 255, 255, 0.55) 86%,
        rgba(255, 255, 255, 0.06));
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.65);
}
.nvc-grip {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(5, 9, 15, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}
.nvc-grip::before, .nvc-grip::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px; height: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.92);
    margin-top: -4px;
}
.nvc-grip::before { left: 11px;  border-right: 0; border-top: 0;
                    transform: rotate(45deg); }
.nvc-grip::after  { right: 11px; border-left: 0;  border-bottom: 0;
                    transform: rotate(45deg); }
/* gentle pulse until the visitor first grabs it */
.nvc:not(.nvc-touched) .nvc-grip { animation: nvc-pulse 2.4s ease-in-out infinite; }
@keyframes nvc-pulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6),
                           0 0 0 0 rgba(255, 255, 255, 0.22); }
    50%      { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6),
                           0 0 0 9px rgba(255, 255, 255, 0); }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .nvc-scan, .nvc-flare, .nvc-blink, .nvc-blink2,
    .nvc-flame, .nvc-smoke, .nvc-zone polygon,
    .nvc-dot-rec, .nvc-grip, .nvc-ember, .nvc-fglow,
    .nvc-beacon, .nvc-win, .nvc-fog {
        animation: none !important;
    }
    .nvc-sweep { display: none; }
    .nvc-fire .nvc-fig { transform: scale(1); transition: none; }
    .nvc-box, .nvc-toast { transition: opacity 0.3s ease; }
}