/* MedMentor Aurora Background - Unified Design System
 * Based on shadcn.io Aurora component
 * Pure CSS, GPU-accelerated, 60fps performance
 * Colors: White + Purple (#5B51FF) only
 * 
 * FIXED BACKGROUND - Applies to entire page, content scrolls over it
 */

/* Body-level Aurora - Single fixed background for entire page */
body.medmentor-aurora-page {
    position: relative;
    min-height: 100vh;
}

body.medmentor-aurora-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: 
        repeating-linear-gradient(100deg,
            #FFFFFF 0%,
            #FFFFFF 10%,
            rgba(91, 81, 255, 0.12) 12%,
            rgba(91, 81, 255, 0.18) 18%,
            rgba(91, 81, 255, 0.15) 22%,
            #FFFFFF 25%,
            #FFFFFF 35%,
            rgba(91, 81, 255, 0.10) 37%,
            rgba(91, 81, 255, 0.20) 43%,
            rgba(91, 81, 255, 0.14) 48%,
            #FFFFFF 50%,
            #FFFFFF 60%,
            rgba(91, 81, 255, 0.16) 62%,
            rgba(91, 81, 255, 0.12) 68%,
            rgba(91, 81, 255, 0.18) 72%,
            #FFFFFF 75%,
            #FFFFFF 85%,
            rgba(91, 81, 255, 0.14) 87%,
            rgba(91, 81, 255, 0.10) 93%,
            #FFFFFF 100%
        );
    background-size: 300% 300%;
    background-position: 50% 50%;
    background-attachment: fixed;
    animation: aurora-flow 60s linear infinite;
    opacity: 1;
    will-change: background-position;
}

/* Aurora animation - smooth continuous flow */
@keyframes aurora-flow {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 200% 75%;
    }
    75% {
        background-position: 300% 25%;
    }
    100% {
        background-position: 400% 50%;
    }
}

/* Ensure all page content stays above the fixed aurora */
body.medmentor-aurora-page > * {
    position: relative;
    z-index: 1;
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
    .medmentor-aurora-bg::before {
        animation: none;
        background-position: 50% 50%;
    }
}

/* Performance optimization for mobile */
@media (max-width: 768px) {
    .medmentor-aurora-bg::before {
        animation-duration: 90s; /* Slower on mobile for better performance */
        background-size: 250% 250%; /* Smaller size for less GPU load */
    }
}