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

PremiumZone

Sprint :
PZ-002

File :
assets/css/boot/boot.css

Description :
Boot Screen

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

/* ==========================================================
   PZ COMPONENT : BOOT
========================================================== */

.pz-boot{

    width:100vw;

    height:100vh;

    background:#000000;

    color:#FFFFFF;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

/* ==========================================================
   PZ COMPONENT : WINDOW
========================================================== */

.pz-window{

    width:min(92vw,720px);

    min-height:420px;

    border:1px solid #FFFFFF;

    display:flex;

    flex-direction:column;

    position:relative;

    overflow:hidden;

}

/* ==========================================================
   PZ ANIMATION : WINDOW
========================================================== */

.pz-window::before,

.pz-window::after{

    content:"";

    position:absolute;

    left:0;

    width:100%;

    height:1px;

    background:#FFFFFF;

    transform:scaleX(0);

    animation:pzFrameLine .45s ease forwards;

}

.pz-window::before{

    top:0;

    transform-origin:left;

}

.pz-window::after{

    bottom:0;

    transform-origin:right;

}

/* ==========================================================
   PZ COMPONENT : HEADER
========================================================== */

.pz-header{

    height:52px;

    border-bottom:1px solid #FFFFFF;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 18px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:13px;

}

/* ==========================================================
   PZ COMPONENT : BODY
========================================================== */

.pz-body{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:26px;

    padding:28px;

}

/* ==========================================================
   PZ COMPONENT : MESSAGE
========================================================== */

#pz-message{

    min-height:20px;

    letter-spacing:1px;

    opacity:.75;

}

.pz-message-show{

    animation:pzMessage .20s ease;

}

/* ==========================================================
   PZ ANIMATION : FRAME
========================================================== */

@keyframes pzFrameLine{

    from{

        transform:scaleX(0);

    }

    to{

        transform:scaleX(1);

    }

}

/* ==========================================================
   PZ ANIMATION : MESSAGE
========================================================== */

@keyframes pzMessage{

    from{

        opacity:0;

        transform:translateY(6px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}