/* SYS_HERO_VISUAL_V1 */

/* =========================
   Reload / Entry animation
   ========================= */

.sys-entry-loader{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 45%,rgba(20,155,255,.15),transparent 32%),
        radial-gradient(circle at 50% 55%,rgba(255,0,120,.08),transparent 40%),
        #030507;
    opacity:1;
    visibility:visible;
    transition:
        opacity .65s cubic-bezier(.22,.8,.24,1),
        visibility .65s;
}

.sys-entry-loader.is-done{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.sys-entry-stage{
    width:220px;
    height:220px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sys-entry-logo{
    width:110px;
    height:110px;
    position:relative;
    z-index:4;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    filter:
        drop-shadow(0 0 18px rgba(255,255,255,.14))
        drop-shadow(0 0 35px rgba(30,160,255,.18));
    animation:sysEntryLogo 1.35s cubic-bezier(.2,.9,.25,1) both;
}

.sys-entry-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.09);
}

.sys-entry-ring.r1{
    width:155px;
    height:155px;
    animation:sysEntryRingA 2.4s linear infinite;
}

.sys-entry-ring.r2{
    width:195px;
    height:195px;
    border-color:rgba(35,157,255,.13);
    animation:sysEntryRingB 3.2s linear infinite reverse;
}

.sys-entry-ring::before{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#fff;
    top:50%;
    left:-4px;
    box-shadow:0 0 18px rgba(44,166,255,.9);
}

.sys-entry-progress{
    position:absolute;
    bottom:22px;
    width:92px;
    height:2px;
    overflow:hidden;
    border-radius:20px;
    background:rgba(255,255,255,.08);
}

.sys-entry-progress::after{
    content:"";
    display:block;
    width:45%;
    height:100%;
    border-radius:20px;
    background:rgba(255,255,255,.82);
    animation:sysEntryProgress 1.15s ease-in-out infinite;
}

@keyframes sysEntryLogo{
    0%{
        opacity:0;
        transform:scale(.55) rotate(-12deg);
        filter:blur(8px);
    }
    58%{
        opacity:1;
        transform:scale(1.08) rotate(2deg);
        filter:blur(0);
    }
    100%{
        transform:scale(1) rotate(0);
    }
}

@keyframes sysEntryRingA{
    to{transform:rotate(360deg)}
}

@keyframes sysEntryRingB{
    to{transform:rotate(360deg) scale(1.05)}
}

@keyframes sysEntryProgress{
    0%{transform:translateX(-120%)}
    100%{transform:translateX(240%)}
}


/* =========================
   New Hero
   ========================= */

.container-hero{
    isolation:isolate;
}

/* Old cube system stays in code, but is hidden */
.container-hero .background-animation{
    display:none !important;
}

.container-hero .brand-wrapper{
    z-index:20 !important;
}

.container-hero .brand-wrapper::before{
    content:"";
    position:absolute;
    width:320px;
    height:220px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
        radial-gradient(circle,rgba(25,150,255,.12),rgba(25,150,255,.03) 42%,transparent 70%);
    filter:blur(18px);
    pointer-events:none;
    z-index:-1;
}

.container-hero .brand-wrapper .logo{
    position:relative;
    animation:sysHeroBrand 5.5s ease-in-out infinite;
    filter:
        drop-shadow(0 8px 18px rgba(0,0,0,.45))
        drop-shadow(0 0 20px rgba(35,150,255,.10));
}

.sys-hero-appfield{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:4;
    pointer-events:none;
    direction:ltr;
}

.sys-hero-appicon{
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:var(--size);
    height:var(--size);
    opacity:var(--opacity);
    animation:
        sysHeroIconFloat var(--duration) ease-in-out
        var(--delay) infinite alternate;
    will-change:transform;
}

.sys-hero-appicon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:23%;
    box-shadow:
        0 9px 28px rgba(0,0,0,.34),
        0 0 0 1px rgba(255,255,255,.06);
    filter:saturate(.92) brightness(.82);
}

@keyframes sysHeroBrand{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-6px) scale(1.025)}
}

@keyframes sysHeroIconFloat{
    0%{
        transform:
            translate3d(0,8px,0)
            rotate(var(--rotate))
            scale(.96);
    }
    100%{
        transform:
            translate3d(var(--drift),-10px,0)
            rotate(calc(var(--rotate) * -1))
            scale(1.04);
    }
}

@media(max-width:700px){
    .sys-hero-appicon{
        opacity:calc(var(--opacity) * .72);
    }

    .container-hero .brand-wrapper::before{
        width:240px;
        height:180px;
    }

    .sys-entry-logo{
        width:92px;
        height:92px;
    }
}

@media(prefers-reduced-motion:reduce){
    .sys-entry-logo,
    .sys-entry-ring,
    .sys-entry-progress::after,
    .container-hero .brand-wrapper .logo,
    .sys-hero-appicon{
        animation:none !important;
    }
}