/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-01E
   Aurora Background System
   File: /opt/simplpay/static/css/004-aurora.css
   ========================================================== */

.sp-aurora {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            var(--sp-bg),
            var(--sp-bg-soft)
        );
}


.sp-aurora::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(
            circle at 20% 20%,
            var(--sp-aurora-blue),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 18%,
            var(--sp-aurora-violet),
            transparent 30%
        ),
        radial-gradient(
            circle at 72% 76%,
            var(--sp-aurora-cyan),
            transparent 32%
        ),
        radial-gradient(
            circle at 18% 82%,
            var(--sp-aurora-white),
            transparent 28%
        );
    filter: blur(28px);
    transform: translateZ(0);
    animation:
        sp-aurora-drift
        18s
        ease-in-out
        infinite alternate;
}


.sp-aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.10),
            transparent 38%,
            rgba(255,255,255,.06)
        );
    mix-blend-mode: soft-light;
}


.sp-aurora-orb {
    position: absolute;
    width: 34vw;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(48px);
    opacity: .72;
    transform: translateZ(0);
    will-change: transform;
}


.sp-aurora-orb-blue {
    top: -8%;
    left: -10%;
    background:
        radial-gradient(
            circle,
            var(--sp-aurora-blue),
            transparent 70%
        );
    animation:
        sp-orb-blue
        16s
        ease-in-out
        infinite alternate;
}


.sp-aurora-orb-violet {
    top: 4%;
    right: -12%;
    background:
        radial-gradient(
            circle,
            var(--sp-aurora-violet),
            transparent 70%
        );
    animation:
        sp-orb-violet
        19s
        ease-in-out
        infinite alternate;
}


.sp-aurora-orb-cyan {
    bottom: -12%;
    right: 4%;
    background:
        radial-gradient(
            circle,
            var(--sp-aurora-cyan),
            transparent 70%
        );
    animation:
        sp-orb-cyan
        21s
        ease-in-out
        infinite alternate;
}


.sp-aurora-orb-white {
    bottom: -8%;
    left: 8%;
    background:
        radial-gradient(
            circle,
            var(--sp-aurora-white),
            transparent 72%
        );
    animation:
        sp-orb-white
        23s
        ease-in-out
        infinite alternate;
}


.sp-aurora-noise {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .035;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.8) 0,
            rgba(255,255,255,.8) 1px,
            transparent 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.6) 0,
            rgba(255,255,255,.6) 1px,
            transparent 1px,
            transparent 2px
        );
    background-size:
        3px 3px,
        4px 4px;
    mix-blend-mode: overlay;
}


.sp-aurora-vignette {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            circle at center,
            transparent 52%,
            rgba(15,23,42,.10) 100%
        );
}


html[data-sp-theme="dark"] .sp-aurora {
    background:
        linear-gradient(
            180deg,
            #090b12,
            #0f1420
        );
}


html[data-sp-theme="dark"] .sp-aurora::before {
    opacity: .92;
}


html[data-sp-theme="dark"] .sp-aurora-vignette {
    background:
        radial-gradient(
            circle at center,
            transparent 48%,
            rgba(0,0,0,.38) 100%
        );
}


html[data-sp-theme="dark"] .sp-aurora-noise {
    opacity: .022;
}


.sp-aurora-glow {
    position: relative;
}


.sp-aurora-glow::before {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(99,102,241,.24),
            transparent 55%
        ),
        radial-gradient(
            circle at 75% 65%,
            rgba(6,182,212,.20),
            transparent 58%
        );
    filter: blur(24px);
    opacity: .72;
    pointer-events: none;
}


.sp-aurora-border {
    position: relative;
    border: 1px solid transparent;
    background:
        linear-gradient(
            var(--sp-surface-2),
            var(--sp-surface-2)
        )
        padding-box,
        var(--sp-gradient-primary)
        border-box;
}


.sp-aurora-ring {
    box-shadow:
        0 0 0 1px rgba(255,255,255,.12),
        0 0 32px rgba(79,70,229,.18),
        0 0 56px rgba(6,182,212,.12);
}


.sp-aurora-highlight {
    position: relative;
    overflow: hidden;
}


.sp-aurora-highlight::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -35%;
    width: 45%;
    height: 190%;
    transform: rotate(18deg);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );
    animation:
        sp-aurora-sheen
        6.5s
        ease-in-out
        infinite;
    pointer-events: none;
}


@keyframes sp-aurora-drift {
    0% {
        transform:
            translate3d(-2%, -1%, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(2%, 2%, 0)
            scale(1.04);
    }

    100% {
        transform:
            translate3d(3%, -2%, 0)
            scale(1.02);
    }
}


@keyframes sp-orb-blue {
    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    100% {
        transform:
            translate3d(12vw, 8vh, 0)
            scale(1.12);
    }
}


@keyframes sp-orb-violet {
    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1.02);
    }

    100% {
        transform:
            translate3d(-10vw, 12vh, 0)
            scale(1.15);
    }
}


@keyframes sp-orb-cyan {
    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    100% {
        transform:
            translate3d(-8vw, -10vh, 0)
            scale(1.10);
    }
}


@keyframes sp-orb-white {
    0% {
        transform:
            translate3d(0, 0, 0)
            scale(.96);
    }

    100% {
        transform:
            translate3d(9vw, -7vh, 0)
            scale(1.08);
    }
}


@keyframes sp-aurora-sheen {
    0%,
    70% {
        left: -45%;
        opacity: 0;
    }

    78% {
        opacity: 1;
    }

    100% {
        left: 130%;
        opacity: 0;
    }
}


@media (max-width: 768px) {

    .sp-aurora-orb {
        width: 72vw;
        filter: blur(42px);
        opacity: .62;
    }

    .sp-aurora-orb-blue {
        top: -10%;
        left: -28%;
    }

    .sp-aurora-orb-violet {
        top: 6%;
        right: -30%;
    }

    .sp-aurora-orb-cyan {
        right: -18%;
        bottom: -14%;
    }

    .sp-aurora-orb-white {
        left: -8%;
        bottom: -10%;
    }

}


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

    .sp-aurora::before,
    .sp-aurora-orb,
    .sp-aurora-highlight::after {
        animation: none !important;
    }

}


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

    .sp-aurora::before {
        filter: none;
        opacity: .26;
    }

    .sp-aurora-orb {
        display: none;
    }

    .sp-aurora-noise {
        display: none;
    }

}