/* =====================================================
   SURVEILLANCE SYSTEM
===================================================== */

/* =====================================================
   HERO
===================================================== */

.surv-hero{

    min-height:45vh;

    display:flex;

    align-items:flex-end;

    padding:70px;

    background:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.94)),
    url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1600&auto=format&fit=crop')
    center/cover no-repeat;

    border-bottom:1px solid rgba(124,255,124,0.12);

}

.surv-hero-content{

    max-width:850px;

}

.surv-system-id{

    color:#7CFF7C;

    letter-spacing:3px;

    margin-bottom:20px;

    font-size:14px;

}

.surv-hero h1{

    font-family:'Oswald', sans-serif;

    font-size:92px;

    line-height:1;

    letter-spacing:8px;

    margin-bottom:25px;

}

.surv-subtitle{

    color:#7CFF7C;

    font-size:20px;

    letter-spacing:3px;

    margin-bottom:30px;

}

.surv-description{

    color:#cfcfcf;

    line-height:1.9;

    max-width:760px;

    font-size:18px;

}

/* =====================================================
   MAIN
===================================================== */

.surv-main{

    padding:60px;

}

/* =====================================================
   SECTION
===================================================== */

.surv-section{

    margin-bottom:70px;

}

.surv-section-title{

    color:#7CFF7C;

    margin-bottom:35px;

    letter-spacing:3px;

    font-size:18px;

}

/* =====================================================
   GRID
===================================================== */

.surv-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(340px,1fr));

    gap:30px;

    align-items:start;

}

/* =====================================================
   CAMERA CARD
===================================================== */

.surv-camera{

    position:relative;

    background:#0b1117;

    border:1px solid rgba(255,255,255,0.06);

    overflow:hidden;

    transition:0.3s;

    min-width:0;

}

.surv-camera:hover{

    transform:translateY(-5px);

    border-color:rgba(124,255,124,0.25);

    box-shadow:
    0 0 30px rgba(124,255,124,0.08);

}

/* =====================================================
   PREVIEW
===================================================== */

.surv-preview{

    height:220px;

    position:relative;

    overflow:hidden;

    background:black;

}

.surv-preview img,
.surv-preview video{

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0.72;

    filter:
        grayscale(100%)
        contrast(1.2)
        brightness(0.8);

    animation:
        surv_camera_zoom 20s infinite alternate;
}

/* =====================================================
   SCANLINES
===================================================== */

.surv-scan{

    position:absolute;

    inset:0;

    background:repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 2px,
        rgba(255,255,255,0.03) 3px
    );

    pointer-events:none;

}

/* =====================================================
   STATUS
===================================================== */

.surv-status{

    position:absolute;

    top:15px;

    left:15px;

    background:black;

    border:1px solid rgba(124,255,124,0.3);

    color:#7CFF7C;

    padding:6px 10px;

    font-size:11px;

    letter-spacing:2px;

}

/* =====================================================
   CAMERA BODY
===================================================== */

.surv-camera-body{

    padding:30px;

    overflow:hidden;

}

/* =====================================================
   TITLE
===================================================== */

.surv-camera-title{

    font-size:32px;

    font-family:'Oswald', sans-serif;

    letter-spacing:2px;

    margin-bottom:18px;

    line-height:1.1;

}

/* =====================================================
   DESCRIPTION
===================================================== */

.surv-camera-desc{

    color:#bcbcbc;

    line-height:1.8;

    margin-bottom:30px;

}

/* =====================================================
   TERMINAL
===================================================== */

.surv-terminal{

    margin-top:70px;

    background:black;

    border:1px solid rgba(124,255,124,0.15);

    padding:30px;

    color:#7CFF7C;

    line-height:2;

    overflow:auto;

}

/* =====================================================
   FOOTER
===================================================== */

.surv-footer{

    margin-top:70px;

    text-align:center;

    color:rgba(255,255,255,0.2);

    font-size:12px;

    letter-spacing:3px;

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:900px){

.surv-hero{

    padding:50px 30px;

}

.surv-hero h1{

    font-size:58px;

}

.surv-main{

    padding:30px;

}

.surv-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:600px){

.surv-camera-title{

    font-size:24px;

}

.surv-description{

    font-size:16px;

}

.surv-hero h1{

    font-size:42px;

}

}

/* =====================================================
   REC INDICATOR
===================================================== */

.surv-preview::after{

    content:"REC ●";

    position:absolute;

    top:15px;

    right:15px;

    color:#ff4a4a;

    font-size:11px;

    letter-spacing:2px;

    z-index:20;

    animation:
        surv_rec_blink 1s infinite;
}

/* =====================================================
   TIMESTAMP
===================================================== */

.surv-timestamp{

    position:absolute;

    bottom:12px;

    left:12px;

    background:rgba(0,0,0,0.7);

    padding:4px 8px;

    font-size:11px;

    color:#7CFF7C;

    letter-spacing:1px;

    z-index:20;
}

.surv-scan{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.surv-scan::after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    height:70px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(124,255,124,0.10),
            transparent
        );

    animation:
        surv_scan_move 5s linear infinite;
}

/* =====================================================
   GLITCH
===================================================== */

.surv-camera:hover .surv-preview{

    animation:
        surv_glitch 0.15s;
}

.corrupted video,
.corrupted img{
    
    filter:
        grayscale(100%)
        contrast(2)
        brightness(0.55);
}
.corrupted video{

    animation:
        node13_corruption 12s infinite;

}
@keyframes node13_corruption {

    /* normaali */

    0%,
    18%,
    34%,
    52%,
    78%,
    100% {

        opacity:0.75;

        filter:
        grayscale(100%)
        contrast(1.2)
        brightness(0.8)
        blur(0px);

    }

    /* häiriö */

    20%,
    22% {

        opacity:0.25;

        filter:
        grayscale(100%)
        contrast(3)
        brightness(1.5)
        blur(5px);

    }

    36%,
    40% {

        opacity:0.15;

        filter:
        grayscale(100%)
        contrast(4)
        brightness(2)
        blur(8px);

    }

    80%,
    84% {

        opacity:0.4;

        filter:
        grayscale(100%)
        contrast(3)
        brightness(0.4)
        blur(4px);

    }

}
.corrupted::before{

    content:"VISUAL FEED CORRUPTED";

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    color:red;

    font-size:20px;

    z-index:30;

    pointer-events:none;
}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes surv_scan_move{

    from{
        transform:translateY(-100%);
    }

    to{
        transform:translateY(260px);
    }
}

@keyframes surv_rec_blink{

    50%{
        opacity:0.3;
    }
}

@keyframes surv_camera_zoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.06);
    }
}

@keyframes surv_glitch{

    0%{
        transform:translateX(0);
    }

    25%{
        transform:translateX(-3px);
    }

    50%{
        transform:translateX(3px);
    }

    75%{
        transform:translateX(-2px);
    }

    100%{
        transform:translateX(0);
    }
}

.signal-lost{

    animation:
        signalLostBlink 12s infinite;

}

@keyframes signalLostBlink {

    0%,
    18%,
    34%,
    52%,
    78%,
    100% {

        opacity:0;

    }

    20%,
    22%,
    36%,
    40%,
    80%,
    84% {

        opacity:1;

    }

}