/**
 * Dark Aurora Background
 * Oil slick / dark aurora gradient mesh for app differentiation
 * RunSmart - Quantum Spatial Design System
 */

/* Dark Aurora Background for Body */
body {
    background: #000000;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(123, 0, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(205, 255, 0, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(123, 0, 255, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 10% 80%, rgba(160, 204, 0, 0.06) 0%, transparent 50%);
    background-attachment: fixed;
    background-size: 200% 200%;
    animation: aurora-shift 20s ease-in-out infinite;
}

@keyframes aurora-shift {
    0%, 100% {
        background-position: 0% 0%, 100% 100%, 50% 100%, 10% 80%;
    }
    25% {
        background-position: 10% 10%, 90% 90%, 60% 90%, 20% 70%;
    }
    50% {
        background-position: 20% 5%, 80% 95%, 40% 95%, 5% 75%;
    }
    75% {
        background-position: 5% 15%, 95% 85%, 55% 85%, 15% 85%;
    }
}

/* Phone Frame Enhancement */
.phone-frame {
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.8),
        0 0 80px rgba(123, 0, 255, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Screen Inner Glow - Applied to background only */
.screen {
    position: relative;
    background: #000000;
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(123, 0, 255, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 0% 100%, rgba(205, 255, 0, 0.04) 0%, transparent 40%);
}

/* Ensure all screen content is above background */
.screen .status-bar,
.screen .content,
.screen .header,
.screen .header-with-back,
.screen .bottom-nav,
.screen .tab-bar {
    position: relative;
    z-index: 10;
}

/* Bottom nav needs higher z-index to stay on top */
.screen .bottom-nav,
.screen .tab-bar {
    z-index: 1000;
}