.dynamic-bg-container {
    position: fixed;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    z-index: 0;
    pointer-events: none;
}

.layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

.bg-layer {
    background-image: url('https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    filter: brightness(0.85) contrast(1.1) saturate(1.1);
    transform: translate(calc(var(--parallax-x) * 0.1), calc(var(--parallax-y) * 0.1));
}

.light-beams {
    background:
        radial-gradient(circle at 70% 20%, rgba(255, 255, 220, 0.2) 0%, transparent 60%),
        linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.1) 50%, transparent 55%);
    mix-blend-mode: screen;
    animation: flicker 8s infinite alternate;
    transform: translate(calc(var(--parallax-x) * 0.2), calc(var(--parallax-y) * 0.2));
}

.vignette {
    background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.4) 100%);
    z-index: 3;
}

#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

@keyframes flicker {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}