/* ========================================= */
/* --- SPECIAL EDITION: THE LOUD RAINBOW --- */
/* ========================================= */

.emerald-spectral-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* CRITICAL: Lets you click right through */
    z-index: 9900; /* Sits high over the paper */
    overflow: hidden;
    mix-blend-mode: screen; /* Gives it that shiny, glassy look */

    /* The Rainbow Wash AND the glowing emerald orbs */
    background: 
        /* The Over The Rainbow Shift - CRANKED UP */
        linear-gradient(
            120deg, 
            rgba(255, 102, 178, 0.30), /* Loud Harperville Pink */
            rgba(255, 165, 0, 0.25),   /* Vibrant Orange */
            rgba(255, 215, 0, 0.25),   /* Bright Gold */
            rgba(0, 230, 118, 0.35),   /* Piercing Emerald */
            rgba(0, 191, 255, 0.30),   /* Electric Blue */
            rgba(138, 43, 226, 0.25)   /* Deep Violet */
        ),
        /* The Emerald Stage Lights (Also boosted) */
        radial-gradient(circle at 15% 20%, rgba(0, 230, 118, 0.20), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(4, 130, 67, 0.25), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 230, 118, 0.15), transparent 65%);
    
    /* Makes the rainbow gradient huge so it can pan across the screen */
    background-size: 300% 300%, 100% 100%, 100% 100%, 100% 100%;
    
    /* Animates both the drifting orbs and the panning rainbow */
    animation: 
        spectral-drift 12s ease-in-out infinite alternate, 
        rainbow-shift 15s ease-in-out infinite alternate; /* Sped up the shift slightly */
}

/* --- THE GOLD DUST PARTICLES --- */
.emerald-spectral-overlay::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    
    /* Creating individual gold sparkles scattered in a 200px tile */
    background-image: 
        radial-gradient(1.5px 1.5px at 15px 25px, #ffd700 100%, transparent),
        radial-gradient(2px 2px at 50px 75px, rgba(255, 215, 0, 0.9) 100%, transparent),
        radial-gradient(1px 1px at 90px 40px, #ffef96 100%, transparent),
        radial-gradient(2.5px 2.5px at 130px 120px, rgba(255, 215, 0, 0.7) 100%, transparent),
        radial-gradient(1px 1px at 170px 10px, #ffd700 100%, transparent),
        radial-gradient(1.5px 1.5px at 190px 90px, rgba(255, 223, 0, 0.8) 100%, transparent);
    
    background-size: 200px 200px; /* Tiles the sparkles seamlessly */
    
    /* Drifts diagonally while twinkling */
    animation: gold-drift 25s linear infinite, gold-twinkle 4s ease-in-out infinite alternate;
}

/* --- THE PRISMATIC LIGHT BEAM --- */
.emerald-spectral-overlay::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    pointer-events: none;
    
    /* The beam is now much sharper and brighter */
    background: linear-gradient(
        45deg,
        transparent 35%,
        rgba(255, 102, 178, 0.20) 40%, /* Pink edge */
        rgba(255, 215, 0, 0.25) 45%,   /* Gold edge */
        rgba(0, 230, 118, 0.35) 50%,   /* Emerald core */
        rgba(0, 191, 255, 0.20) 55%,   /* Blue edge */
        transparent 65%
    );
    animation: spectral-sweep 12s linear infinite; /* Sweeps a little faster */
}

/* --- KEYFRAMES --- */
@keyframes rainbow-shift {
    0% { background-position: 0% 50%, 0% 0%, 0% 0%, 0% 0%; }
    50% { background-position: 100% 50%, 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 0% 50%, 0% 0%, 0% 0%, 0% 0%; }
}

@keyframes spectral-drift {
    0% { transform: scale(1) translate(0px, 0px); opacity: 0.6; }
    50% { transform: scale(1.05) translate(2vw, -2vh); opacity: 1; }
    100% { transform: scale(1) translate(-2vw, 2vh); opacity: 0.6; }
}

@keyframes spectral-sweep {
    0% { transform: translate(-10%, -10%) rotate(0deg); }
    100% { transform: translate(10%, 10%) rotate(360deg); }
}

@keyframes gold-drift {
    0% { background-position: 0px 0px; }
    100% { background-position: 200px 200px; } 
}

@keyframes gold-twinkle {
    0% { opacity: 0.2; }
    50% { opacity: 1; } /* Flashes pure gold */
    100% { opacity: 0.4; }
}

/* Makes highlighted text glow emerald instead of the standard blue */
::selection {
    background: var(--curtain-emerald);
    color: white;
}