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

PremiumZone

Version :
1.0.0

File :
assets/css/logo.css

Description :
PremiumZone Logo

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

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

#pz-logo-engine{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    opacity:0;

    transform:

        scale(.96);

    will-change:

        opacity,

        transform;

}

/* ==========================================================
   LETTER
========================================================== */

.pz-logo-letter{

    display:grid;

    grid-auto-flow:row;

    row-gap:0;

    column-gap:0;

    line-height:1;

}

/* ==========================================================
   ROW
========================================================== */

.pz-logo-row{

    display:flex;

    justify-content:center;

    gap:2px;

    height:14px;

}

/* ==========================================================
   STROKE
========================================================== */

.pz-stroke{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:10px;

    height:14px;

    font-family:

        monospace;

    font-size:18px;

    font-weight:700;

    color:#00F3FF;

    text-shadow:

        0 0 2px #00F3FF,

        0 0 8px rgba(

            0,

            243,

            255,

            .85

        ),

        0 0 18px rgba(

            0,

            243,

            255,

            .35

        );

    opacity:.85;

    transition:

        opacity .12s linear;

}

/* ==========================================================
   BREATH
========================================================== */

.pz-stroke.active{

    animation:

        pz-logo-breath

        2.6s

        ease-in-out

        infinite;

}

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

.pz-stroke.glitch{

    opacity:.35;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes pz-logo-breath{

    0%{

        opacity:.82;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.82;

    }

}

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

@media(

    max-width:768px

){

    .pz-logo-row{

        height:12px;

    }

    .pz-stroke{

        width:8px;

        height:12px;

        font-size:15px;

    }

}