.aurora-container {
    position: relative;
    width: 100%;
    background: #fafafa;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aurora-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.aurora-fx {
    --aurora: repeating-linear-gradient(100deg,
            #b0b0b0 10%, #dfdfdf 15%,
            #93c5fd 20%, #ddd6fe 25%, #60a5fa 30%);
    --white-gradient: repeating-linear-gradient(100deg,
            #fff 0%, #fff 7%,
            transparent 10%, transparent 12%, #fff 16%);

    pointer-events: none;
    position: absolute;
    inset: -10px;
    background-image: var(--white-gradient), var(--aurora);
    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;
    opacity: 0.5;
    filter: blur(10px) invert(1);
    will-change: transform;
    mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
}

.aurora-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--white-gradient), var(--aurora);
    background-size: 200%, 100%;
    background-attachment: fixed;
    mix-blend-mode: difference;
    animation: aurora 60s linear infinite;
}

@keyframes aurora {
    from {
        background-position: 50% 50%, 50% 50%;
    }

    to {
        background-position: 350% 50%, 350% 50%;
    }
}

.aurora-content {
    position: relative;
    z-index: 1;
}