/* Kontener bazowy dla efektów */
#uzf-effect-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none;
    z-index: 99999999 !important;
    overflow: hidden;
    background: transparent;
}

/* 1. Hologram Scanline - PROMIENIOWANIE */
.uzf-effect-hologram.uzf-active::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, transparent, rgba(0, 242, 255, 0.6), transparent);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.5);
    animation: uzf-scan 4s linear forwards;
}

/* 2. Cyber-Glitch - PRZESUWAJĄCY SIĘ BŁĄD */
.uzf-effect-glitch.uzf-active::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 150px;
    background: repeating-linear-gradient(0deg, rgba(255,0,255,0.2) 0px, rgba(0,242,255,0.2) 2px, transparent 4px);
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="f"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="1" /></filter></svg>#f');
    animation: uzf-scan 3s linear forwards;
}

/* 3. Neon Flicker - PULSUJĄCY PAS */
.uzf-effect-neon.uzf-active::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, transparent, rgba(255, 0, 255, 0.3), transparent);
    box-shadow: 0 0 50px rgba(255, 0, 255, 0.4);
    animation: uzf-scan 2s linear forwards;
}

/* 4. Digital Rain - KONTEYNER (ruch jest w JS) */
.uzf-effect-digital_rain canvas {
    position: absolute;
    top: 0;
    left: 0;
}

/* 5. Chromatic Aberration - ROZWARSTWIENIE W RUCHU */
.uzf-effect-chromatic.uzf-active::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300px;
    backdrop-filter: hue-rotate(90deg) contrast(1.5);
    animation: uzf-scan 5s linear forwards;
}

/* 6. CRT Scanlines - PRZESUWAJĄCA SIĘ LINIA VINTAGE */
.uzf-effect-crt.uzf-active::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px white;
    animation: uzf-scan 6s linear forwards;
}

/* 7. Cyber-Wave - FALA UDERZENIOWA */
.uzf-effect-wave.uzf-active::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 400px;
    backdrop-filter: url(#uzf-wave-filter);
    animation: uzf-scan 4s ease-in-out forwards;
}

/* 8. Alien Hologram - ZASZUMIONY PAS */
.uzf-effect-alien.uzf-active::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(to bottom, transparent, rgba(0, 255, 65, 0.3), transparent);
    border-top: 1px solid rgba(0, 255, 65, 0.5);
    border-bottom: 1px solid rgba(0, 255, 65, 0.5);
    animation: uzf-scan 5s linear forwards;
}

/* 9. Hologram PC & Laptop - STAR WARS STYLE */
[class*="uzf-effect-hologram_"] {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Wyświetlanie u dołu */
    padding-bottom: 5vh;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

[class*="uzf-effect-hologram_"].uzf-active {
    opacity: 1;
}

[class*="uzf-effect-hologram_"] .uzf-hologram-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 15px rgba(0, 242, 255, 0.8));
    animation: uzf-hologram-flicker 0.1s infinite alternate;
}

[class*="uzf-effect-hologram_"] svg {
    width: 100%;
    height: auto;
    fill: #00f2ff;
    opacity: 0.8;
}

/* Promień projektora (Beam) */
.uzf-hologram-beam {
    position: absolute;
    bottom: -5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 15vh;
    background: conic-gradient(from 150deg at 50% 100%, transparent, rgba(0, 242, 255, 0.3), rgba(0, 242, 255, 0.1), transparent 60deg);
    filter: blur(10px);
    z-index: -1;
    pointer-events: none;
}

/* Skanlinie na samym hologramie */
.uzf-hologram-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.2) 0px,
        rgba(0, 0, 0, 0.2) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
}

/* Tekst nad hologramem */
.uzf-hologram-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    color: #00f2ff;
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-shadow: 0 0 5px #00f2ff;
    opacity: 0.8;
    animation: uzf-text-flicker 2s infinite;
}

@keyframes uzf-text-flicker {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.4; }
    55% { opacity: 1; }
}

@keyframes uzf-hologram-flicker {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0.75; transform: scale(1.002); }
    /* Dodatkowe losowe skoki jasności w JS lub bardziej złożona animacja */
}

/* 10. Cyber-Glitch Overlay */
.uzf-effect-cyber_glitch.uzf-active {
    background: transparent;
    animation: uzf-glitch-shake 0.2s linear infinite;
}
.uzf-effect-cyber_glitch.uzf-active::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, rgba(255,0,255,0.05) 0px, rgba(0,242,255,0.05) 1px, transparent 2px);
    mix-blend-mode: overlay;
}

/* 11. Terminal Boot Sequence */
.uzf-effect-terminal_boot .uzf-boot-wrap {
    position: absolute;
    bottom: 40px;
    left: 40px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: #00f2ff;
    text-shadow: 0 0 5px #00f2ff;
    line-height: 1.4;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-left: 3px solid #00f2ff;
    opacity: 0;
    transition: opacity 0.3s;
}

.uzf-effect-terminal_boot.uzf-active .uzf-boot-wrap {
    opacity: 1;
}

/* 12. HUD Tactical Overlay */
.uzf-effect-hud_tactical {
    border: 20px solid transparent;
    border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0 20 L0 0 L20 0 M80 0 L100 0 L100 20 M100 80 L100 100 L80 100 M20 100 L0 100 L0 80" fill="none" stroke="%2300f2ff" stroke-width="2"/></svg>') 20 stretch;
    opacity: 0;
    transition: opacity 0.5s;
}

.uzf-effect-hud_tactical.uzf-active {
    opacity: 0.5;
}

/* 13. Data Hex Pulse */
.uzf-effect-hex_pulse.uzf-active::after {
    content: "0x45 0xFA 0x21 0x09 0x88 0xCC";
    position: absolute;
    top: 50%;
    left: -100%;
    font-family: monospace;
    color: rgba(0, 242, 255, 0.4);
    font-size: 80px;
    white-space: nowrap;
    animation: uzf-hex-slide 4s linear infinite;
}

/* 14. Neural Connectivity (handled mostly in JS/Canvas) */

/* 15. Terminator Vision */
.uzf-effect-terminator_vision {
    background: rgba(255, 0, 0, 0);
    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0);
    transition: all 0.5s ease-in-out;
}
.uzf-effect-terminator_vision.uzf-active {
    background: rgba(255, 0, 0, 0.1);
    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.3);
}
.uzf-effect-terminator_vision.uzf-active::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, rgba(255, 0, 0, 0.1) 0px, transparent 2px);
    animation: uzf-crt-scroll 10s linear infinite;
}

.uzf-terminator-hud {
    position: absolute;
    top: 0; left: 0; 
    width: 100vw !important; 
    height: 100vh !important;
    color: #ff0000;
    font-family: 'Courier New', Courier, monospace;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s;
}

.uzf-effect-terminator_vision.uzf-active .uzf-terminator-hud {
    opacity: 1;
}

.uzf-terminator-target {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 1px solid #ff0000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uzf-terminator-target::before {
    content: "TARGETING...";
    font-size: 10px;
    margin-bottom: 240px;
}

@keyframes uzf-glitch-shake {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); filter: hue-rotate(90deg); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

@keyframes uzf-hex-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes uzf-crt-scroll {
    from { background-position: 0 0; }
    to { background-position: 0 100%; }
}

@keyframes uzf-scan {
    0% { top: -100%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}

/* Intensywność */
.uzf-int-low { opacity: 0.4; }
.uzf-int-medium { opacity: 0.7; }
.uzf-int-high { opacity: 1; }