/* =========================================================
   SYS_HERO_LOGO_ORB_V3
   Keep original website background
   Add blur orb + logo entry animation only
   ========================================================= */

.sys-hero-shell-v3{
    position: relative !important;
}

.sys-hero-orb-v3{
    position: absolute !important;
    left: 50%;
    top: 50%;
    width: 280px;
    height: 280px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    pointer-events: none;
    z-index: 1;
    opacity: .92;

    background:
        radial-gradient(circle at 50% 50%,
            rgba(255, 0, 110, 0.26) 0%,
            rgba(141, 45, 255, 0.19) 22%,
            rgba(0, 130, 255, 0.16) 44%,
            rgba(0, 0, 0, 0.05) 68%,
            rgba(0, 0, 0, 0) 80%);

    filter: blur(34px);
    box-shadow:
        0 0 46px rgba(255, 0, 110, 0.10),
        0 0 72px rgba(0, 132, 255, 0.10);
}

.sys-hero-orb-v3::after{
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: inherit;
    border: 1px solid rgba(89, 180, 255, 0.12);
    opacity: .9;
}

.sys-hero-logo-v3,
.sys-hero-title-v3{
    position: relative !important;
    z-index: 3 !important;
    will-change: transform, opacity, filter;
}

.sys-hero-logo-v3{
    --sys-logo-base-y: 18px;
    transform: translateY(var(--sys-logo-base-y));
    transform-origin: center center;
    filter:
        drop-shadow(0 0 14px rgba(255, 0, 110, 0.22))
        drop-shadow(0 0 18px rgba(0, 132, 255, 0.11));
}

.sys-hero-title-v3{
    --sys-title-base-y: 28px;
    transform: translateY(var(--sys-title-base-y));
    text-shadow:
        0 0 10px rgba(255,255,255,0.08),
        0 0 22px rgba(255, 0, 110, 0.05);
}

/* default floating when page is stable */
body:not(.sys-hero-enter) .sys-hero-logo-v3{
    animation: sysHeroLogoFloat 5.3s ease-in-out infinite;
}

body:not(.sys-hero-enter) .sys-hero-title-v3{
    animation: sysHeroTitleFloat 5.3s ease-in-out infinite;
}

body:not(.sys-hero-enter) .sys-hero-orb-v3{
    animation: sysHeroOrbPulse 5.8s ease-in-out infinite;
}

/* entry animation on open / reload / page open */
body.sys-hero-enter .sys-hero-logo-v3{
    animation:
        sysHeroLogoIn .95s cubic-bezier(.18,.84,.18,1) both,
        sysHeroLogoFloat 5.3s 1s ease-in-out infinite;
}

body.sys-hero-enter .sys-hero-title-v3{
    animation:
        sysHeroTitleIn .95s .12s cubic-bezier(.18,.84,.18,1) both,
        sysHeroTitleFloat 5.3s 1.08s ease-in-out infinite;
}

body.sys-hero-enter .sys-hero-orb-v3{
    animation:
        sysHeroOrbIn 1.08s cubic-bezier(.18,.84,.18,1) both,
        sysHeroOrbPulse 5.8s 1.05s ease-in-out infinite;
}

@keyframes sysHeroLogoIn{
    0%{
        opacity: 0;
        transform: translateY(calc(var(--sys-logo-base-y) + 46px)) scale(.82);
        filter:
            blur(8px)
            drop-shadow(0 0 0 rgba(255,0,110,0));
    }
    60%{
        opacity: 1;
        transform: translateY(calc(var(--sys-logo-base-y) - 4px)) scale(1.04);
    }
    100%{
        opacity: 1;
        transform: translateY(var(--sys-logo-base-y)) scale(1);
        filter:
            drop-shadow(0 0 14px rgba(255, 0, 110, 0.22))
            drop-shadow(0 0 18px rgba(0, 132, 255, 0.11));
    }
}

@keyframes sysHeroTitleIn{
    0%{
        opacity: 0;
        transform: translateY(calc(var(--sys-title-base-y) + 42px));
        filter: blur(8px);
    }
    100%{
        opacity: 1;
        transform: translateY(var(--sys-title-base-y));
        filter: blur(0);
    }
}

@keyframes sysHeroOrbIn{
    0%{
        opacity: 0;
        transform: translate(-50%, -50%) scale(.62);
        filter: blur(54px);
    }
    100%{
        opacity: .92;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(34px);
    }
}

@keyframes sysHeroLogoFloat{
    0%   { transform: translateY(var(--sys-logo-base-y)) scale(1); }
    50%  { transform: translateY(calc(var(--sys-logo-base-y) + 4px)) scale(1.02); }
    100% { transform: translateY(var(--sys-logo-base-y)) scale(1); }
}

@keyframes sysHeroTitleFloat{
    0%   { transform: translateY(var(--sys-title-base-y)); }
    50%  { transform: translateY(calc(var(--sys-title-base-y) + 3px)); }
    100% { transform: translateY(var(--sys-title-base-y)); }
}

@keyframes sysHeroOrbPulse{
    0%{
        transform: translate(-50%, -50%) scale(1);
        opacity: .82;
    }
    50%{
        transform: translate(-50%, -50%) scale(1.04);
        opacity: .97;
    }
    100%{
        transform: translate(-50%, -50%) scale(1);
        opacity: .82;
    }
}

@media (max-width: 991.98px){
    .sys-hero-orb-v3{
        width: 220px;
        height: 220px;
        filter: blur(28px);
    }

    .sys-hero-logo-v3{
        --sys-logo-base-y: 16px;
    }

    .sys-hero-title-v3{
        --sys-title-base-y: 22px;
    }
}