/* Shared animated portal background with iOS StepVise parity. */
:root {
    --peoplehub-portal-aurora-blue: #0044EE;
    --peoplehub-portal-aurora-purple: #8E6BFF;
    --peoplehub-portal-aurora-red: #FF6E83;
    --peoplehub-portal-aurora-pink: #FFB6CC;
}

.peoplehub-staff-portal:not(.peoplehub-login-page),
.peoplehub-supervisor-portal {
    position: relative;
    isolation: isolate;
    --peoplehub-portal-aurora-static:
        radial-gradient(circle at 14% 82%, rgba(255, 182, 204, 0.35) 0%, rgba(255, 182, 204, 0) 56%),
        radial-gradient(circle at 86% 16%, rgba(255, 110, 131, 0.32) 0%, rgba(255, 110, 131, 0) 52%),
        radial-gradient(circle at 12% 20%, rgba(142, 107, 255, 0.30) 0%, rgba(142, 107, 255, 0) 50%),
        linear-gradient(130deg, var(--peoplehub-portal-aurora-blue) 0%, var(--peoplehub-portal-aurora-purple) 45%, var(--peoplehub-portal-aurora-red) 72%, var(--peoplehub-portal-aurora-pink) 100%);
}

.peoplehub-staff-portal:not(.peoplehub-login-page)::before,
.peoplehub-supervisor-portal::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: var(--peoplehub-portal-aurora-static);
    background-size: 180% 180%, 170% 170%, 160% 160%, 220% 220%;
    background-position: 0% 40%, 100% 10%, 0% 90%, 0% 50%;
    animation: peoplehubPortalGradientShift 8s ease-in-out infinite alternate;
}

@keyframes peoplehubPortalGradientShift {
    0% {
        background-position: 0% 40%, 100% 10%, 0% 90%, 0% 50%;
    }

    100% {
        background-position: 100% 60%, 0% 90%, 100% 10%, 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .peoplehub-staff-portal:not(.peoplehub-login-page)::before,
    .peoplehub-supervisor-portal::before {
        animation: none;
        background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    }
}

@media (max-width: 768px) {

    .peoplehub-staff-portal:not(.peoplehub-login-page)::before,
    .peoplehub-supervisor-portal::before {
        animation: none;
        background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    }
}