*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body{
    width:100%;
    min-height:100%;
    background:#000;
}

body{
    background-color:#000;
    background-image: radial-gradient(circle at center, #2a2a2a 0%, #141414 25%, #080808 55%, #000000 100%);
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    font-family:Arial, sans-serif;
    overflow:hidden;
}

/* WRAP */
.logo-wrap{
    flex:1;
    width:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:22px;
    padding:clamp(12px,4vw,28px);
}

/* ========================= */
/* LOGO RGB GLITCH */
/* ========================= */

.logo-container{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

/* BASE LOGO */
.logo{
    display:block;
    width:min(92vw,900px);
    max-width:100%;
    height:auto;
    max-height:58dvh;
    object-fit:contain;
    position:relative;
    animation:none;
}

/* MAIN GLITCH + FEINER RGB */
@keyframes logoGlitch{

    /* RUHE */
    0%, 65%, 100%{
        transform:translate(0,0) skew(0deg);
        filter:none;
    }

    /* BURST 1 */
    66%{
        transform:translate(-3px,1px) skew(1deg);
        filter:
            drop-shadow(4px 0 red)
            drop-shadow(-4px 0 cyan);
    }
    66.5%{
        transform:translate(5px,-2px) skew(-2deg);
        filter:
            drop-shadow(-5px 0 red)
            drop-shadow(5px 0 cyan);
    }
    67%{
        transform:translate(-2px,1px);
        filter:
            drop-shadow(3px 0 red)
            drop-shadow(-3px 0 cyan);
    }
    67.5%{
        transform:translate(0,0);
        filter:none;
    }

    /* BURST 2 */
    82%{
        transform:translate(6px,-2px);
        filter:
            drop-shadow(5px 0 red)
            drop-shadow(-5px 0 cyan);
    }
    82.4%{
        transform:translate(-4px,2px);
        filter:
            drop-shadow(-4px 0 red)
            drop-shadow(4px 0 cyan);
    }
    82.8%{
        transform:translate(0,0);
        filter:none;
    }

    /* BURST 3 */
    92%{
        transform:translate(-6px,1px);
        filter:
            drop-shadow(6px 0 red)
            drop-shadow(-6px 0 cyan);
    }
    92.3%{
        transform:translate(3px,-1px);
        filter:
            drop-shadow(-4px 0 red)
            drop-shadow(4px 0 cyan);
    }
    92.6%{
        transform:translate(0,0);
        filter:none;
    }
}

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

.loading{
    color:#fff;
    text-align:center;
    width:min(84vw,420px);
}

.loading-text{
    margin-bottom:10px;
    letter-spacing:2px;
    font-size:clamp(12px,2.8vw,15px);
    animation:textGlitch 4s infinite;
}

@keyframes textGlitch{
    0%, 85%, 100%{
        transform:translate(0);
    }
    86%{
        transform:translate(2px,-1px);
    }
    86.4%{
        transform:translate(-3px,1px);
    }
    86.8%{
        transform:translate(0);
    }
}

/* PROGRESS BAR */
.progress-bar{
    width:100%;
    height:20px;
    background:#000;
    border-radius:0px;
    overflow:hidden;
    border:1px solid #fff;
}

.progress{
    width:5%;
    height:100%;
     background:#fff;
    animation:flicker 6s infinite;
}

@keyframes flicker{
    0%, 88%, 100%{opacity:1;}
    89%{opacity:0.7;}
    89.4%{opacity:1;}
}

/* FOOTER */
footer{
    width:100%;
    text-align:center;
    color:#fff;
    padding:12px 12px calc(14px + env(safe-area-inset-bottom));
    font-size:clamp(11px,2.5vw,13px);
}

/* MOBILE */
@media (max-width:768px){
    .logo{
        width:94vw;
        max-height:54dvh;
    }
}

@media (max-width:480px){
    .logo{
        width:96vw;
        max-height:48dvh;
    }
}

@media (max-width:360px){
    .logo{
        max-height:44dvh;
    }
}