/* =========================================================
   SYS LOGO ORB V4
   Original Neonight background untouched
   ========================================================= */

.container-hero .brand-wrapper{
    position:absolute !important;
    inset:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    /*
       original space-evenly made logo/text too far apart
    */
    gap:7px !important;

    padding:0 !important;

    /*
       bring complete SYS lockup slightly lower
    */
    transform:translateY(19px) !important;

    overflow:visible !important;
    z-index:10 !important;
}


/* -------------------------
   Circular blurred aura
   ------------------------- */

.container-hero .brand-wrapper::before{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:245px;
    height:165px;

    transform:
        translate(-50%,-50%)
        scale(1);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,0,105,.27) 0%,
            rgba(177,15,149,.17) 23%,
            rgba(20,139,255,.14) 44%,
            rgba(3,10,18,.04) 65%,
            transparent 78%
        );

    filter:blur(27px);

    opacity:.82;

    pointer-events:none;
    z-index:-2;

    animation:
        sysOrbBreathV4 4.8s
        ease-in-out infinite;
}


/* thin futuristic orbit */
.container-hero .brand-wrapper::after{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:215px;
    height:118px;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    border:
        1px solid
        rgba(79,176,255,.13);

    box-shadow:
        0 0 22px rgba(0,145,255,.04),
        inset 0 0 22px rgba(255,0,105,.025);

    opacity:.75;

    pointer-events:none;
    z-index:-1;

    animation:
        sysOrbitV4 5.8s
        ease-in-out infinite;
}


/* -------------------------
   Existing dashboard logo
   SIZE IS NOT CHANGED
   ------------------------- */

.container-hero .brand-wrapper .logo{
    position:relative !important;
    z-index:3 !important;

    /*
       Do NOT change width/height.
       Only move it down.
    */
    margin:0 !important;

    transform:
        translateY(6px) !important;

    transform-origin:center center;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255,0,105,.21)
        )
        drop-shadow(
            0 0 16px
            rgba(19,151,255,.11)
        ) !important;

    will-change:
        transform,
        filter,
        opacity;
}


/* SeeYouIOS Store */
.container-hero .brand-wrapper .name{
    position:relative !important;
    z-index:3 !important;

    margin:0 !important;
    padding:0 !important;

    /*
       Close the distance between logo and text
    */
    transform:
        translateY(2px) !important;

    line-height:1.12 !important;

    text-shadow:
        0 2px 12px rgba(0,0,0,.60),
        0 0 12px rgba(255,255,255,.045);
}


/* -------------------------
   Normal idle animation
   ------------------------- */

.container-hero:not(.sys-hero-enter-v4)
.brand-wrapper .logo{
    animation:
        sysLogoIdleV4 4.6s
        ease-in-out infinite;
}

.container-hero:not(.sys-hero-enter-v4)
.brand-wrapper .name{
    animation:
        sysTitleIdleV4 4.6s
        ease-in-out infinite;
}


/* -------------------------
   Entry animation
   Every page open / reload
   ------------------------- */

.container-hero.sys-hero-enter-v4
.brand-wrapper .logo{
    animation:
        sysLogoEnterV4 .95s
        cubic-bezier(.16,.88,.22,1)
        both !important;
}

.container-hero.sys-hero-enter-v4
.brand-wrapper .name{
    animation:
        sysTitleEnterV4 .95s .13s
        cubic-bezier(.16,.88,.22,1)
        both !important;
}


/* animations */

@keyframes sysLogoEnterV4{

    0%{
        opacity:0;

        transform:
            translateY(34px)
            scale(.72);

        filter:
            blur(9px)
            drop-shadow(
                0 0 0
                rgba(255,0,105,0)
            );
    }

    62%{
        opacity:1;

        transform:
            translateY(3px)
            scale(1.055);
    }

    100%{
        opacity:1;

        transform:
            translateY(6px)
            scale(1);

        filter:
            blur(0)
            drop-shadow(
                0 0 10px
                rgba(255,0,105,.21)
            )
            drop-shadow(
                0 0 16px
                rgba(19,151,255,.11)
            );
    }
}


@keyframes sysTitleEnterV4{

    0%{
        opacity:0;

        transform:
            translateY(24px);

        filter:blur(6px);
    }

    100%{
        opacity:1;

        transform:
            translateY(2px);

        filter:blur(0);
    }
}


@keyframes sysLogoIdleV4{

    0%,
    100%{
        transform:
            translateY(6px)
            scale(1);
    }

    50%{
        transform:
            translateY(2px)
            scale(1.018);
    }
}


@keyframes sysTitleIdleV4{

    0%,
    100%{
        transform:
            translateY(2px);
    }

    50%{
        transform:
            translateY(0);
    }
}


@keyframes sysOrbBreathV4{

    0%,
    100%{
        opacity:.70;

        transform:
            translate(-50%,-50%)
            scale(.92);
    }

    50%{
        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1.08);
    }
}


@keyframes sysOrbitV4{

    0%,
    100%{
        opacity:.34;

        transform:
            translate(-50%,-50%)
            scale(.96);
    }

    50%{
        opacity:.75;

        transform:
            translate(-50%,-50%)
            scale(1.04);
    }
}


/* Mobile */
@media(max-width:700px){

    .container-hero .brand-wrapper{
        gap:5px !important;

        transform:
            translateY(12px) !important;
    }

    .container-hero .brand-wrapper::before{
        width:205px;
        height:140px;

        filter:blur(23px);
    }

    .container-hero .brand-wrapper::after{
        width:180px;
        height:100px;
    }

    .container-hero .brand-wrapper .logo{
        transform:
            translateY(4px) !important;
    }

    .container-hero .brand-wrapper .name{
        transform:
            translateY(1px) !important;
    }
}


/* Reduced motion */
@media(prefers-reduced-motion:reduce){

    .container-hero .brand-wrapper::before,
    .container-hero .brand-wrapper::after,
    .container-hero .brand-wrapper .logo,
    .container-hero .brand-wrapper .name{
        animation:none !important;
    }
}