/* --- SINFULMEDIA: VLOEIBAAR KOLKEND GLAMOUR EFFECT --- */

body {
    position: relative;
    overflow-x: hidden;
    background-color: #0d0a0f; /* Noodstop: basis donkere kleur */
}

/* ==========================================
   1. DE BASIS (Voor álle telefoons: Mobiel & Budget)
   ========================================== */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    
    /* Puur CSS verloop: kost 0% batterij en processor op mobiel */
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(212, 175, 55, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 40%, rgba(155, 28, 49, 0.25) 0%, transparent 60%),
        linear-gradient(135deg, #16111a 0%, #0d0a0f 100%);
    background-size: cover;
}

/* We verbergen de glitterlaag volledig op mobiel */
body::after {
    display: none;
}


/* ==========================================
   2. DE EXTRA'S (Alleen voor Desktop vanaf 1024px)
   ========================================== */
@media (min-width: 1024px) {
    
    /* Desktop krijgt de grotere, bewegende variant */
    body::before {
        top: -50%;
        left: -50%;
        width: 200vw;
        height: 200vh;
        will-change: transform;
        transform: translate3d(0,0,0);
        animation: kolkendWaterOpt 20s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
    }

    /* Desktop krijgt de glitters terug */
    body::after {
        display: block;
        content: "";
        position: fixed;
        top: -50%;
        left: -50%;
        width: 200vw;
        height: 200vh;
        z-index: -1;
        pointer-events: none;
        
        background-image: 
            radial-gradient(2px 2px at 10% 10%, rgba(212, 175, 55, 0.8), transparent),
            radial-gradient(4px 4px at 20% 30%, rgba(255, 215, 0, 0.9), transparent),
            radial-gradient(3px 3px at 70% 25%, rgba(212, 175, 55, 0.9), transparent),
            radial-gradient(4px 4px at 30% 70%, rgba(212, 175, 55, 0.9), transparent),
            radial-gradient(3px 3px at 90% 80%, rgba(255, 215, 0, 0.9), transparent);
            
        background-size: 300px 300px; /* Iets groter = minder herhalingen voor de desktop GPU */
        will-change: transform;
        transform: translate3d(0,0,0);
        animation: rondeGlitterStroomOpt 12s linear infinite;
    }
}

/* ==========================================
   3. DE ANIMATIE-DEFINITIES (Alleen actief op desktop)
   ========================================== */
@keyframes kolkendWaterOpt {
    0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    50% { transform: translate3d(-1%, 1%, 0) scale(1.04) rotate(2deg); }
    100% { transform: translate3d(1%, -1%, 0) scale(1.02) rotate(-2deg); }
}

@keyframes rondeGlitterStroomOpt {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.4; }
    50% { transform: translate3d(-5px, 5px, 0) rotate(180deg); opacity: 0.7; }
    100% { transform: translate3d(0, 0, 0) rotate(360deg); opacity: 0.4; }
}