/*
==========================================================

PremiumZone

Version :
0.0.0

File :
assets/background/frame.css

Description :
PremiumZone Frame

==========================================================
*/

/* ==========================================================
   FRAME
========================================================== */

.pz-frame{

    position:fixed;

    left:50%;

    top:50%;

    transform:

        translate(

            -50%,

            -50%

        );

    width:

        min(

            760px,

            88vw

        );

    aspect-ratio:

        .73;

    max-height:

        74vh;

    overflow:hidden;

    z-index:100;

    pointer-events:auto;

}

/* ==========================================================
   PANEL
========================================================== */

.pz-frame-panel{

    position:absolute;

    inset:1px;

    background:

        rgba(

            0,

            0,

            0,

            .80

        );

    backdrop-filter:

        blur(

            1px

        );

    z-index:1;

}

/* ==========================================================
   BORDER
========================================================== */

.pz-frame-line{

    position:absolute;

    display:flex;

    overflow:hidden;

    z-index:20;

}

/* ==========================================================
   TOP
========================================================== */

.pz-frame-top{

    top:0;

    left:0;

    width:100%;

    height:2px;

    flex-direction:row;

}

/* ==========================================================
   RIGHT
========================================================== */

.pz-frame-right{

    top:0;

    right:0;

    width:2px;

    height:100%;

    flex-direction:column;

}

/* ==========================================================
   BOTTOM
========================================================== */

.pz-frame-bottom{

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    flex-direction:row;

}

/* ==========================================================
   LEFT
========================================================== */

.pz-frame-left{

    top:0;

    left:0;

    width:2px;

    height:100%;

    flex-direction:column;

}

/* ==========================================================
   SEGMENT
========================================================== */

/* ==========================================================
   SEGMENT
========================================================== */

.pz-frame-segment{

    flex:none;

    width:7px;

    height:2px;

    margin-right:1px;

    background:

        rgba(

            255,

            255,

            255,

            .62

        );

    box-shadow:

        0 0 2px

        rgba(

            255,

            255,

            255,

            .45

        );

    transition:

        opacity .15s,

        background .15s,

        box-shadow .15s;

}

.pz-frame-segment-v{

    width:2px;

    height:7px;

    margin-right:0;

    margin-bottom:1px;

}

/* ==========================================================
   GAP
========================================================== */

.pz-frame-gap{

    opacity:0;

}

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

.pz-frame-glitch{

    background:

        #00F3FF;

    box-shadow:

        0 0 3px

        #00F3FF,

        0 0 8px

        rgba(

            0,

            243,

            255,

            .45

        );

}

/* ==========================================================
   HIGHLIGHT
========================================================== */

.pz-frame-highlight{

    background:

        rgba(

            255,

            255,

            255,

            .95

        );

    box-shadow:

        0 0 2px

        rgba(

            255,

            255,

            255,

            .50

        );

}

/* ==========================================================
   SCANNER
========================================================== */

.pz-frame-scanner{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#00F3FF;

    box-shadow:

        0 0 6px #00F3FF,

        0 0 12px rgba(

            0,

            243,

            255,

            .5

        );

    display:none;

    z-index:30;

}

/* ==========================================================
   CONTENT
========================================================== */

.pz-frame-content{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    padding:40px;

    z-index:10;

}