/* --- KONTENER --- */
.nm-phantom-container {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    overflow: hidden;
    /* Zmienne domyślne dla JS */
    --mouse-x: 50%;
    --mouse-y: 50%;
    --parallax-x: 0px;
    --parallax-y: 0px;
}

/* Wspólne style dla warstw, żeby Paralaksa działała płynnie */
.nm-phantom-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    will-change: transform; /* Optymalizacja GPU */
    transition: transform 0.1s linear; /* Płynność paralaksy */
}

/* --- 1. TOP GLOW (Z paralaksą) --- */
.nm-phantom-glow-top {
    background: radial-gradient(ellipse at center, var(--nm-top-color) 0%, transparent 70%);
    filter: blur(80px);
    mix-blend-mode: screen;
    top: -20%; left: -20%; width: 140%; /* Nadpisane przez inline style height */
    animation: nmPulseTop 8s infinite alternate ease-in-out;
    /* Paralaksa przesuwa tę warstwę */
    transform: translate(var(--parallax-x), var(--parallax-y)); 
}

/* --- 2. BOTTOM GLOW (Z paralaksą odwrotną) --- */
.nm-phantom-glow-bottom {
    background: radial-gradient(ellipse at center, var(--nm-bottom-color) 0%, transparent 70%);
    filter: blur(80px);
    mix-blend-mode: screen;
    top: auto; bottom: -20%; right: -20%; left: auto; width: 140%;
    animation: nmPulseBottom 10s infinite alternate ease-in-out;
    /* Paralaksa w drugą stronę dla głębi */
    transform: translate(calc(var(--parallax-x) * -1), calc(var(--parallax-y) * -1));
}

/* --- 3. LATARKA (TORCH) --- */
.nm-phantom-torch-layer {
    opacity: 0; /* Domyślnie ukryta */
    background: radial-gradient(
        circle at var(--mouse-x) var(--mouse-y), 
        var(--nm-torch-color) 0%, 
        transparent 60%
    );
    filter: blur(40px);
    mix-blend-mode: overlay; /* Tryb mieszania latarki */
    transition: opacity 0.3s;
}

/* Kiedy latarka jest włączona w PHP */
.nm-effect-torch .nm-phantom-torch-layer {
    opacity: 0.4; /* Siła latarki */
}

/* --- 4. ABERRACJA (RGB SPLIT) --- */
/* Dodajemy efekt na warstwie szumu */
.nm-effect-aberration .nm-phantom-noise {
    /* Tworzymy delikatne przesunięcie kanałów */
    text-shadow: 2px 0 0 red, -2px 0 0 blue;
    box-shadow: inset 3px 0 0 rgba(255,0,0,0.2), inset -3px 0 0 rgba(0,0,255,0.2);
    filter: contrast(120%);
}

/* --- POZOSTAŁE (BEZ ZMIAN) --- */
.nm-phantom-noise {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.08; mix-blend-mode: overlay;
    animation: nmNoiseAnim 0.5s steps(5) infinite; 
}

.nm-phantom-vignette {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, transparent 50%, var(--nm-vignette-color) 100%);
}

.nm-phantom-glass {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}

/* Animacje */
@keyframes nmPulseTop { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
@keyframes nmPulseBottom { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }
@keyframes nmNoiseAnim {
    0% { transform: translate(0,0); } 10% { transform: translate(-5%,-5%); }
    20% { transform: translate(-10%,5%); } 30% { transform: translate(5%,-10%); }
    40% { transform: translate(-5%,15%); } 50% { transform: translate(-10%,5%); }
    60% { transform: translate(15%,0); } 70% { transform: translate(0,10%); }
    80% { transform: translate(-15%,0); } 90% { transform: translate(10%,5%); }
    100% { transform: translate(5%,0); }
}