#dorivu-loader {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: #030303;

    color: #fff;

    isolation: isolate;

    transition:
        opacity 1s cubic-bezier(.77, 0, .18, 1),
        transform 1s cubic-bezier(.77, 0, .18, 1);

}


/* =========================================================
   EXIT
========================================================= */

#dorivu-loader.px-finished {

    opacity: 0;

    transform: scale(1.08);

    pointer-events: none;

}


/* =========================================================
   GRID
========================================================= */

.px-grid {

    position: absolute;

    inset: -100px;

    background-image:

        linear-gradient(
            rgba(255, 106, 0, .045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 106, 0, .045) 1px,
            transparent 1px
        );

    background-size:
        40px 40px;

    transform:
        perspective(500px)
        rotateX(55deg)
        scale(1.5);

    transform-origin:
        center bottom;

    animation:
        pxGridMove 5s linear infinite;

    mask-image:
        linear-gradient(
            to top,
            black,
            transparent 85%
        );

}


@keyframes pxGridMove {

    from {

        background-position:
            0 0,
            0 0;

    }

    to {

        background-position:
            0 40px,
            40px 0;

    }

}


/* =========================================================
   SCANLINES
========================================================= */

.px-scanlines {

    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(255,255,255,.018) 4px
        );

    pointer-events: none;

}


/* =========================================================
   NOISE
========================================================= */

.px-noise {

    position: absolute;

    inset: -50%;

    opacity: .04;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    animation:
        pxNoise .2s steps(2) infinite;

}


@keyframes pxNoise {

    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(3%, -2%);
    }

    50% {
        transform: translate(-2%, 3%);
    }

    75% {
        transform: translate(2%, 2%);
    }

    100% {
        transform: translate(-3%, -1%);
    }

}


/* =========================================================
   ORANGE ORB
========================================================= */

.px-orb {

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,106,0,.22),
            rgba(255,106,0,.07) 35%,
            transparent 70%
        );

    filter: blur(20px);

    animation:
        pxOrb 3s ease-in-out infinite;

}


@keyframes pxOrb {

    0%,
    100% {

        transform: scale(.85);

        opacity: .5;

    }

    50% {

        transform: scale(1.15);

        opacity: 1;

    }

}


/* =========================================================
   HUD
========================================================= */

.px-hud {

    position: absolute;

    display: flex;

    flex-direction: column;

    gap: 5px;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: .2em;

    color:
        rgba(255,255,255,.3);

}


.px-hud span:first-child {

    color:
        rgba(255,106,0,.8);

}


.px-hud-tl {

    top: 35px;

    left: 35px;

}


.px-hud-tr {

    top: 35px;

    right: 35px;

    text-align: right;

}


.px-hud-bl {

    bottom: 35px;

    left: 35px;

}


.px-hud-br {

    bottom: 35px;

    right: 35px;

    text-align: right;

}


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

.px-loader-content {

    position: relative;

    z-index: 10;

    width:
        min(600px, 82vw);

    display: flex;

    flex-direction: column;

    align-items: center;

    animation:
        pxEnter 1.2s
        cubic-bezier(.16,1,.3,1);

}


@keyframes pxEnter {

    from {

        opacity: 0;

        transform:
            translateY(50px)
            scale(.9);

        filter: blur(10px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);

    }

}


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

.px-logo {

    position: relative;

    font-size:
        clamp(55px, 10vw, 105px);

    font-weight: 900;

    letter-spacing:
        -.1em;

    line-height: .9;

}


.px-logo-main {

    display: flex;

    position: relative;

    z-index: 3;

}


.px-logo-main span {

    display: inline-block;

    opacity: 0;

    transform:
        translateY(50px)
        scale(.3)
        rotate(10deg);

    animation:
        pxLetter .7s
        cubic-bezier(.16,1,.3,1)
        forwards;

}


.px-logo-main span:nth-child(1) {
    animation-delay: .1s;
}

.px-logo-main span:nth-child(2) {
    animation-delay: .16s;
}

.px-logo-main span:nth-child(3) {
    animation-delay: .22s;
}

.px-logo-main span:nth-child(4) {
    animation-delay: .28s;
}

.px-logo-main span:nth-child(5) {
    animation-delay: .34s;
}

.px-logo-main span:nth-child(6) {
    animation-delay: .40s;
}


@keyframes pxLetter {

    0% {

        opacity: 0;

        transform:
            translateY(50px)
            scale(.3)
            rotate(10deg);

        filter: blur(15px);

    }

    70% {

        opacity: 1;

        transform:
            translateY(-8px)
            scale(1.08)
            rotate(-2deg);

        filter: blur(0);

    }

    100% {

        opacity: 1;

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

    }

}


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

.px-logo-glitch {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0;

}


.px-glitch-1 {

    color: #ff6a00;

    animation:
        pxGlitchOne 2.8s infinite;

}


.px-glitch-2 {

    color: #fff;

    animation:
        pxGlitchTwo 2.8s infinite;

}


@keyframes pxGlitchOne {

    0%,
    72%,
    100% {

        opacity: 0;

        clip-path:
            inset(0 0 100% 0);

    }

    74% {

        opacity: .9;

        clip-path:
            inset(20% 0 55% 0);

        transform:
            translateX(7px);

    }

    76% {

        opacity: 0;

    }

}


@keyframes pxGlitchTwo {

    0%,
    80%,
    100% {

        opacity: 0;

        clip-path:
            inset(100% 0 0 0);

    }

    82% {

        opacity: .7;

        clip-path:
            inset(55% 0 20% 0);

        transform:
            translateX(-6px);

    }

    84% {

        opacity: 0;

    }

}


/* =========================================================
   TAGLINE
========================================================= */

.px-tagline {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 25px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: .4em;

    color:
        rgba(255,255,255,.45);

}


.px-tagline span {

    width: 35px;

    height: 1px;

    background:
        #ff6a00;

    box-shadow:
        0 0 8px #ff6a00;

}


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

.px-progress-wrapper {

    width: 100%;

    margin-top: 55px;

}


.px-progress-info {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: .15em;

    color:
        rgba(255,255,255,.4);

}


#px-percent {

    color:
        #ff6a00;

    font-weight: bold;

}


.px-progress {

    position: relative;

    width: 100%;

    height: 3px;

    background:
        rgba(255,255,255,.08);

    overflow: hidden;

}


#px-progress-bar {

    width: 0%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #ff4500,
            #ff6a00,
            #ffb067
        );

    box-shadow:
        0 0 12px #ff6a00,
        0 0 35px rgba(255,106,0,.5);

    transition:
        width .2s ease;

}


.px-progress-glow {

    position: absolute;

    top: 0;

    left: -100px;

    width: 100px;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            white,
            transparent
        );

    opacity: .7;

    animation:
        pxProgressGlow 1.5s linear infinite;

}


@keyframes pxProgressGlow {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(700px);

    }

}


/* =========================================================
   DATA
========================================================= */

.px-data {

    width: 100%;

    display: flex;

    justify-content: space-between;

    margin-top: 13px;

    font-family:
        "Courier New",
        monospace;

    font-size: 7px;

    letter-spacing: .2em;

    color:
        rgba(255,255,255,.18);

}


#px-data-center {

    color:
        rgba(255,106,0,.6);

}


/* =========================================================
   SCAN
========================================================= */

.px-scan {

    position: absolute;

    left: 0;

    top: -20%;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff6a00,
            #fff,
            #ff6a00,
            transparent
        );

    box-shadow:
        0 0 20px #ff6a00,
        0 0 60px #ff6a00;

    opacity: .6;

    animation:
        pxScan 3s linear infinite;

}


@keyframes pxScan {

    from {

        transform:
            translateY(0);

    }

    to {

        transform:
            translateY(140vh);

    }

}


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

.px-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

}


.px-particle {

    position: absolute;

    width: 3px;

    height: 3px;

    background:
        #ff6a00;

    box-shadow:
        0 0 10px #ff6a00;

    animation:
        pxParticle 1.8s ease-out forwards;

}


@keyframes pxParticle {

    0% {

        opacity: 0;

        transform:
            translate(0,0)
            scale(.2);

    }

    30% {

        opacity: 1;

    }

    100% {

        opacity: 0;

        transform:
            translate(
                var(--x),
                var(--y)
            )
            scale(0);

    }

}


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

@media (max-width: 600px) {

    .px-loader-content {

        width: 82vw;

    }

    .px-logo {

        font-size: 15vw;

    }

    .px-progress-wrapper {

        margin-top: 40px;

    }

    .px-hud {

        font-size: 6px;

    }

    .px-hud-tl,
    .px-hud-tr {

        top: 20px;

    }

    .px-hud-bl,
    .px-hud-br {

        bottom: 20px;

    }

    .px-hud-tl,
    .px-hud-bl {

        left: 20px;

    }

    .px-hud-tr,
    .px-hud-br {

        right: 20px;

    }

}


/* =========================================================
   BODY LOCK
========================================================= */

body:has(#dorivu-loader) {

    overflow: hidden;

}