/* ==========================================
   INTRO ENGINE
========================================== */

#intro{

    position:fixed;

    inset:0;

    background:#000;

    z-index:99999;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* hide after intro */

#intro.finished{

    pointer-events:none;

}

/* black base */

.intro-black{

    position:absolute;

    inset:0;

    background:#000;

}

/* stage */

.intro-stage{

    position:relative;

    width:100vw;

    height:100vh;

    overflow:hidden;

}

/* image */

#intro-image{

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transform:scale(1);

}
/* ==========================================
   CAMERA VIEWFINDER
========================================== */

.intro-viewfinder{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity .5s ease;

}

.intro-viewfinder.show{

    opacity:1;

}

/* center focus square */

.intro-focus{

    position:absolute;

    top:50%;

    left:50%;

    width:120px;

    height:120px;

    transform:translate(-50%,-50%);

    border:2px solid rgba(255,255,255,.9);

}

/* corner markers */

.intro-corner{

    position:absolute;

    width:40px;

    height:40px;

    border-color:#fff;

}

.top-left{

    top:30px;

    left:30px;

    border-top:2px solid;

    border-left:2px solid;

}

.top-right{

    top:30px;

    right:30px;

    border-top:2px solid;

    border-right:2px solid;

}

.bottom-left{

    bottom:30px;

    left:30px;

    border-bottom:2px solid;

    border-left:2px solid;

}

.bottom-right{

    bottom:30px;

    right:30px;

    border-bottom:2px solid;

    border-right:2px solid;

}

/* REC */

.intro-rec{

    position:absolute;

    top:28px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    font-size:.75rem;

    letter-spacing:3px;

    font-weight:600;

}

.intro-rec::before{

    content:"";

    display:inline-block;

    width:8px;

    height:8px;

    margin-right:8px;

    background:#ff2020;

    border-radius:50%;

}