/* =========================================================
   WOKIZ LOADING SYSTEM
========================================================= */

:root {

    --gold:
        #f4bd18;

    --gold-light:
        #ffe36c;

    --background:
        #050505;

    --text:
        #ffffff;

    --muted:
        #676767;
}


* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;
}


html,
body {

    width:
        100%;

    min-height:
        100%;
}


body {

    min-height:
        100vh;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    color:
        var(--text);

    background:
        var(--background);
}


/* =========================================================
   BACKGROUND
========================================================= */

.background {

    position:
        fixed;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;
}


.grid {

    position:
        absolute;

    inset:
        -100px;

    opacity:
        .18;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 72%
        );

    animation:
        gridMove
        18s
        linear
        infinite;
}


.ambient {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    filter:
        blur(120px);

    opacity:
        .07;

    background:
        var(--gold);
}


.ambient-one {

    top:
        -300px;

    left:
        -180px;

    animation:
        ambientMoveOne
        10s
        ease-in-out
        infinite alternate;
}


.ambient-two {

    right:
        -250px;

    bottom:
        -320px;

    animation:
        ambientMoveTwo
        12s
        ease-in-out
        infinite alternate;
}


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

.loader {

    position:
        relative;

    z-index:
        10;

    width:
        min(
            430px,
            calc(100% - 40px)
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    animation:
        loaderEnter
        .8s
        cubic-bezier(.2,.8,.2,1)
        both;
}


/* =========================================================
   LOGO
========================================================= */

.logo-stage {

    position:
        relative;

    width:
        160px;

    height:
        160px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        32px;
}


.logo-glow {

    position:
        absolute;

    width:
        95px;

    height:
        95px;

    border-radius:
        50%;

    background:
        rgba(244,189,24,.16);

    filter:
        blur(30px);

    animation:
        glowPulse
        2.2s
        ease-in-out
        infinite;
}


.outer-ring {

    position:
        absolute;

    inset:
        10px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(244,189,24,.10);
}


.outer-ring::before {

    content:
        "";

    position:
        absolute;

    inset:
        -1px;

    border-radius:
        inherit;

    border-top:
        1px solid
        rgba(244,189,24,.8);

    border-right:
        1px solid
        transparent;

    border-bottom:
        1px solid
        transparent;

    border-left:
        1px solid
        transparent;

    animation:
        rotate
        4s
        linear
        infinite;
}


/* ORBITS */

.orbit {

    position:
        absolute;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,255,255,.055);
}


.orbit-one {

    inset:
        22px;

    animation:
        rotate
        3.2s
        linear
        infinite;
}


.orbit-two {

    inset:
        2px;

    animation:
        rotateReverse
        6s
        linear
        infinite;
}


.orbit span {

    position:
        absolute;

    width:
        5px;

    height:
        5px;

    top:
        -3px;

    left:
        50%;

    border-radius:
        50%;

    background:
        var(--gold);

    box-shadow:

        0 0 8px
        var(--gold),

        0 0 18px
        rgba(244,189,24,.7);
}


.orbit-two span {

    width:
        3px;

    height:
        3px;

    opacity:
        .65;
}


/* W BOX */

.logo {

    position:
        relative;

    width:
        84px;

    height:
        84px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        20px;

    border:
        1px solid
        rgba(244,189,24,.32);

    background:

        linear-gradient(
            145deg,
            rgba(244,189,24,.09),
            rgba(255,255,255,.015)
        ),

        #080808;

    box-shadow:

        inset 0 0 20px
        rgba(244,189,24,.035),

        0 0 35px
        rgba(244,189,24,.07);

    animation:
        logoFloat
        3s
        ease-in-out
        infinite;
}


.logo span {

    position:
        relative;

    z-index:
        2;

    color:
        var(--gold);

    font-size:
        51px;

    line-height:
        1;

    font-weight:
        900;

    text-shadow:

        0 0 14px
        rgba(244,189,24,.18);

    animation:
        wPulse
        2.2s
        ease-in-out
        infinite;
}


.logo-scan {

    position:
        absolute;

    z-index:
        1;

    left:
        0;

    right:
        0;

    height:
        20px;

    top:
        -30px;

    background:

        linear-gradient(
            transparent,
            rgba(244,189,24,.10),
            transparent
        );

    animation:
        scan
        2.8s
        linear
        infinite;
}


/* =========================================================
   BRAND
========================================================= */

.brand-top {

    margin-bottom:
        10px;

    color:
        rgba(244,189,24,.58);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        4px;
}


.brand h1 {

    font-size:
        36px;

    font-weight:
        900;

    letter-spacing:
        8px;

    padding-left:
        8px;

    color:
        #fff;

    text-shadow:

        0 0 30px
        rgba(255,255,255,.06);
}


.brand-line {

    position:
        relative;

    width:
        120px;

    height:
        1px;

    margin:
        17px auto 0;

    overflow:
        hidden;

    background:
        #1a1a1a;
}


.brand-line span {

    position:
        absolute;

    width:
        45px;

    height:
        100%;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    animation:
        lineMove
        2.2s
        ease-in-out
        infinite;
}


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

.status {

    min-height:
        20px;

    margin-top:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;
}


.status-dot {

    width:
        6px;

    height:
        6px;

    flex:
        0 0 6px;

    border-radius:
        50%;

    background:
        var(--gold);

    box-shadow:
        0 0 9px
        rgba(244,189,24,.7);

    animation:
        statusPulse
        1.3s
        ease-in-out
        infinite;
}


#wakeStatus {

    color:
        #777;

    font-size:
        12px;

    letter-spacing:
        .25px;
}


/* =========================================================
   PROGRESS
========================================================= */

.progress {

    width:
        min(
            300px,
            82vw
        );

    margin-top:
        27px;
}


.progress-track {

    position:
        relative;

    width:
        100%;

    height:
        3px;

    overflow:
        hidden;

    border-radius:
        100px;

    background:
        #151515;

    box-shadow:
        inset 0 0 4px
        rgba(0,0,0,.8);
}


.progress-bar {

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    width:
        38%;

    border-radius:
        inherit;

    background:

        linear-gradient(
            90deg,
            rgba(244,189,24,0),
            rgba(244,189,24,.45),
            var(--gold),
            var(--gold-light)
        );

    box-shadow:
        0 0 10px
        rgba(244,189,24,.4);

    animation:
        progressMove
        1.7s
        cubic-bezier(.65,0,.35,1)
        infinite;
}


.progress-light {

    position:
        absolute;

    right:
        0;

    top:
        50%;

    width:
        7px;

    height:
        7px;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        #fff;

    box-shadow:

        0 0 6px #fff,

        0 0 14px
        var(--gold);
}


/* =========================================================
   LOADING TEXT
========================================================= */

.loading-text {

    margin-top:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    color:
        #3f3f3f;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.loading-dots {

    display:
        flex;

    gap:
        3px;
}


.loading-dots i {

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        #555;

    animation:
        dotPulse
        1.2s
        ease-in-out
        infinite;
}


.loading-dots i:nth-child(2) {

    animation-delay:
        .18s;
}


.loading-dots i:nth-child(3) {

    animation-delay:
        .36s;
}


/* =========================================================
   PARTICLES
========================================================= */

.particles {

    position:
        fixed;

    inset:
        0;

    z-index:
        2;

    overflow:
        hidden;

    pointer-events:
        none;
}


.particles span {

    --size:
        2px;

    position:
        absolute;

    left:
        var(--x);

    bottom:
        -20px;

    width:
        var(--size);

    height:
        var(--size);

    border-radius:
        50%;

    background:
        var(--gold);

    opacity:
        0;

    box-shadow:
        0 0 8px
        rgba(244,189,24,.7);

    animation:
        particleRise
        var(--duration)
        linear
        var(--delay)
        infinite;
}


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

.bottom {

    position:
        fixed;

    z-index:
        10;

    left:
        50%;

    bottom:
        28px;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        #303030;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2px;

    white-space:
        nowrap;
}


.bottom-line {

    width:
        20px;

    height:
        1px;

    background:
        #242424;
}


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

@keyframes loaderEnter {

    from {

        opacity:
            0;

        transform:
            translateY(12px)
            scale(.98);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes rotate {

    to {

        transform:
            rotate(360deg);
    }
}


@keyframes rotateReverse {

    to {

        transform:
            rotate(-360deg);
    }
}


@keyframes glowPulse {

    0%,
    100% {

        opacity:
            .45;

        transform:
            scale(.85);
    }

    50% {

        opacity:
            1;

        transform:
            scale(1.2);
    }
}


@keyframes logoFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-4px);
    }
}


@keyframes wPulse {

    0%,
    100% {

        opacity:
            .75;
    }

    50% {

        opacity:
            1;

        text-shadow:

            0 0 14px
            rgba(244,189,24,.25),

            0 0 35px
            rgba(244,189,24,.12);
    }
}


@keyframes scan {

    from {

        top:
            -30px;
    }

    to {

        top:
            100px;
    }
}


@keyframes lineMove {

    0% {

        left:
            -50px;
    }

    100% {

        left:
            125px;
    }
}


@keyframes statusPulse {

    0%,
    100% {

        opacity:
            .35;

        transform:
            scale(.75);
    }

    50% {

        opacity:
            1;

        transform:
            scale(1.15);
    }
}


@keyframes progressMove {

    0% {

        left:
            -42%;
    }

    55% {

        width:
            50%;
    }

    100% {

        left:
            105%;

        width:
            25%;
    }
}


@keyframes dotPulse {

    0%,
    100% {

        opacity:
            .25;

        transform:
            scale(.7);
    }

    50% {

        opacity:
            1;

        transform:
            scale(1.2);
    }
}


@keyframes particleRise {

    0% {

        transform:
            translateY(0)
            scale(.6);

        opacity:
            0;
    }

    15% {

        opacity:
            .45;
    }

    70% {

        opacity:
            .15;
    }

    100% {

        transform:
            translateY(-105vh)
            scale(1.2);

        opacity:
            0;
    }
}


@keyframes gridMove {

    from {

        transform:
            translateY(0);
    }

    to {

        transform:
            translateY(55px);
    }
}


@keyframes ambientMoveOne {

    to {

        transform:
            translate(
                100px,
                80px
            );
    }
}


@keyframes ambientMoveTwo {

    to {

        transform:
            translate(
                -100px,
                -70px
            );
    }
}


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

@media(max-width:600px) {

    .logo-stage {

        width:
            145px;

        height:
            145px;

        margin-bottom:
            27px;
    }


    .logo {

        width:
            78px;

        height:
            78px;

        border-radius:
            18px;
    }


    .logo span {

        font-size:
            47px;
    }


    .brand h1 {

        font-size:
            31px;

        letter-spacing:
            7px;
    }


    .brand-top {

        font-size:
            8px;

        letter-spacing:
            3px;
    }


    #wakeStatus {

        font-size:
            11px;
    }


    .progress {

        width:
            min(
                270px,
                80vw
            );
    }


    .bottom {

        bottom:
            20px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    * {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}