/* ========================================================================== */
/* LU APPEND-ONLY: AURORA SCROLL BACKGROUND MODULE                            */
/* ========================================================================== */

/* Overrides the solid grey background of the container so the aurora shines through */
.container_conart {
    background-color: transparent !important;
}

.lu-aurora-bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -999; /* Locked deep behind all content */
    pointer-events: none; /* Prevents interference with clicks/selections */
    background-color: #06000A; /* Deep space fallback */
    overflow: hidden;
}

.lu-aurora-layer {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    opacity: 0;
    
    /* Hardware acceleration: Offloads the fading and drifting to the GPU */
    will-change: opacity, transform;
    transition: opacity 0.1s linear; 
    animation: luAuroraDrift 20s infinite alternate linear;
}

/* Checkpoint 1 (0%): Midnight Violet */
.lu-aurora-layer-1 {
    background: radial-gradient(circle at 50% 50%, rgba(13,44,177,0.50) 0%, rgba(11,17,46,0.80) 40%, rgba(4,5,16,1.00) 80%);
    opacity: 1; /* Starts visible */
}

/* Checkpoint 2 (25%): Deep Sea Cyan */
.lu-aurora-layer-2 {
    background: radial-gradient(circle at 60% 40%, rgba(0, 180, 216, 0.4) 0%, rgba(13, 27, 42, 0.8) 40%, rgba(10, 5, 16, 1) 80%);
    animation-duration: 25s;
    animation-direction: alternate-reverse;
}

/* Checkpoint 3 (50%): Emerald Green */
.lu-aurora-layer-3 {
    background: radial-gradient(circle at 40% 60%, rgba(56, 176, 0, 0.3) 0%, rgba(0, 48, 73, 0.8) 40%, rgba(10, 5, 16, 1) 80%);
    animation-duration: 22s;
}

/* Checkpoint 4 (75%): Magenta / Pink */
.lu-aurora-layer-4 {
    background: radial-gradient(circle at 50% 30%, rgba(200, 20, 100, 0.3) 0%, rgba(50, 10, 40, 0.8) 40%, rgba(10, 5, 16, 1) 80%);
    animation-duration: 28s;
    animation-direction: alternate-reverse;
}

/* Checkpoint 5 (100%): Gold / Black (Seamless integration with footer) */
.lu-aurora-layer-5 {
    background: radial-gradient(circle at 50% 50%, rgba(201, 184, 139, 0.25) 0%, rgba(30, 25, 20, 0.8) 40%, rgba(6, 0, 10, 1) 80%);
    animation-duration: 24s;
}

/* Cinematic drifting motion to simulate Aurora */
@keyframes luAuroraDrift {
    0% { transform: rotate(0deg) translate(0, 0) scale(1); }
    50% { transform: rotate(5deg) translate(3%, 4%) scale(1.05); }
    100% { transform: rotate(-5deg) translate(-2%, -3%) scale(1); }
}