#jfIntro{
    position:fixed;
    inset:0;
    z-index:9999999;
    background:
        radial-gradient(circle at 50% 42%,rgba(0,255,110,.16),transparent 32%),
        radial-gradient(circle at 50% 50%,rgba(0,255,110,.05),transparent 55%),
        #020403;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    opacity:1;
    transition:opacity .7s ease,visibility .7s ease;
}

#jfIntro.jfIntroOut{
    opacity:0;
    visibility:hidden;
}

.jfIntroGlow{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(0,255,110,.05);
    filter:blur(70px);
    animation:jfPulse 2s ease-in-out infinite;
}

.jfIntroBox{
    position:relative;
    z-index:2;
    width:min(420px,85vw);
    text-align:center;
}

.jfIntroLogo{
    width:105px;
    height:105px;
    object-fit:cover;
    border-radius:26px;
    box-shadow:
        0 0 25px rgba(0,255,110,.45),
        0 0 70px rgba(0,255,110,.18);
    animation:jfLogoIn 1s cubic-bezier(.2,.8,.2,1);
}

.jfIntroName{
    margin-top:18px;
    font-size:34px;
    font-weight:950;
    letter-spacing:2px;
    color:#fff;
    text-shadow:0 0 18px rgba(255,255,255,.08);
}

.jfIntroName span{
    color:#00ef6f;
    text-shadow:0 0 24px rgba(0,255,110,.5);
}

.jfIntroSub{
    margin-top:7px;
    color:#7f9187;
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
}

.jfIntroTrack{
    width:240px;
    max-width:70vw;
    height:4px;
    border-radius:20px;
    background:#112019;
    margin:30px auto 0;
    overflow:hidden;
}

#jfIntroBar{
    width:4%;
    height:100%;
    border-radius:20px;
    background:linear-gradient(90deg,#00a84f,#00ff78);
    box-shadow:0 0 16px rgba(0,255,110,.7);
    transition:width .28s ease;
}

#jfIntroStatus{
    margin-top:12px;
    color:#68796f;
    font-size:12px;
}

.jfIntroParticles{
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        radial-gradient(circle,#00ff7844 1px,transparent 1px);
    background-size:55px 55px;
    opacity:.18;
    animation:jfMove 12s linear infinite;
}

@keyframes jfLogoIn{
    0%{
        transform:scale(.72);
        opacity:0;
        filter:blur(8px);
    }
    100%{
        transform:scale(1);
        opacity:1;
        filter:blur(0);
    }
}

@keyframes jfPulse{
    0%,100%{transform:scale(.9);opacity:.55}
    50%{transform:scale(1.12);opacity:1}
}

@keyframes jfMove{
    from{transform:translateY(0)}
    to{transform:translateY(55px)}
}