:root {
    --blur-val: 15px;
}

body, html { margin: 0; padding: 0; background: #000; overflow-x: hidden; color: white; font-family: 'Courier New', monospace; }
.scroll-container { height: 1400vh; } 

/* LOADER */
#loader { position: fixed; inset: 0; background: #000; z-index: 9999; display: flex; justify-content: center; align-items: center; color: #00f2ff; }
.sonar-container { position: relative; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; }
.sonar-ring { position: absolute; border: 1px solid rgba(0, 242, 255, 0.2); border-radius: 50%; inset: 0; animation: sonar-pulse 3s infinite linear; }
@keyframes sonar-pulse { 0% { transform: scale(0.5); opacity: 0; } 50% { opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } }
.sonar-line { position: absolute; width: 50%; height: 2px; background: linear-gradient(to right, transparent, #00f2ff); top: 50%; left: 50%; transform-origin: left center; animation: sonar-rotate 2s infinite linear; }
@keyframes sonar-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.pct { font-size: 3rem; font-weight: bold; text-shadow: 0 0 20px #00f2ff; }
.bar-fill { width: 0%; height: 100%; background: #00f2ff; box-shadow: 0 0 10px #00f2ff; }

/* START LAYER */
#start-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 900; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(20px); }
.start-content h1 { font-size: 8vw; letter-spacing: 10px; margin-bottom: 50px; color: #fff; text-shadow: 0 0 30px #00f2ff; text-transform: none; }
#start-btn { background: rgba(0, 242, 255, 0.05); border: 2px solid #00f2ff; color: #00f2ff; padding: 25px 80px; font-size: 1.5rem; cursor: pointer; letter-spacing: 10px; transition: 0.4s; }

/* VIEWPORT */
#cinematic-viewport { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60vw; height: 10vw; max-height: 80vh; overflow: hidden; z-index: 100; }

/* FX POST-PROCESS (FIREFOX COMPATIBLE) */
#fx-post-process {
    position: absolute; inset: 0; z-index: 80; pointer-events: none;
    /* Firefox potrzebuje minimalnego tła, by backdrop-filter zadziałał */
    background: rgba(0, 0, 0, 0.01); 
    backdrop-filter: blur(var(--blur-val));
    -webkit-backdrop-filter: blur(var(--blur-val));
    will-change: backdrop-filter;
}

#noise-overlay {
    position: absolute; inset: -200%; z-index: 81; opacity: 0;
    background-image: url('../img/noise.png'); 
    background-size: 256px; background-repeat: repeat;
    mix-blend-mode: screen; 
    animation: noise-jitter 0.1s steps(2) infinite;
}
@keyframes noise-jitter {
    0% { transform: translate(0,0); }
    50% { transform: translate(-1%, 2%); }
    100% { transform: translate(2%, -1%); }
}

/* MAPA */
#image-wrapper { position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; line-height: 0; }
.slice { width: 100%; height: auto; display: block; margin: 0; padding: 0; }
.slice-container { position: relative; width: 100%; display: flex; line-height: 0; }
.glow-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: plus-lighter; pointer-events: none; opacity: 0; z-index: 5; animation: glow-pulse-brightness 4s infinite ease-in-out; }
@keyframes glow-pulse-brightness { 0%, 100% { filter: brightness(1) blur(2px); } 50% { filter: brightness(1.6) blur(6px); } }

/* SCROLL HINT */
#scroll-hint-icon {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    display: none; flex-direction: column; align-items: center; gap: 10px; z-index: 150; opacity: 0;
}
#scroll-hint-icon p { font-size: 0.7rem; letter-spacing: 3px; color: #00f2ff; margin: 0; }
.mouse { width: 18px; height: 30px; border: 2px solid #00f2ff; border-radius: 10px; position: relative; }
.wheel { width: 2px; height: 5px; background: #00f2ff; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); animation: mouse-scroll 1.2s infinite; }
@keyframes mouse-scroll { 0% { top: 5px; opacity: 1; } 100% { top: 15px; opacity: 0; } }

/* RESZTA INTERFEJSU */
#radiation-warning { position: absolute; top: 30px; left: 30px; z-index: 70; color: #ff3333; font-weight: bold; font-size: 1.2vw; display: none; align-items: center; gap: 10px; }
.blink-icon { background: #ff3333; color: #000; padding: 2px 10px; animation: blink 0.4s infinite alternate; }
#depth-gauge { position: absolute; bottom: 30px; right: 30px; z-index: 60; color: #00f2ff; font-size: 1.5vw; background: rgba(0, 0, 0, 0.4); padding: 10px 20px; border-left: 2px solid #00f2ff; opacity: 0; transition: opacity 0.5s ease; }
#marine-snow { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; filter: blur(1.5px); }
#final-layer { position: absolute; inset: 0; z-index: 500; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); opacity: 0; }
#launch-btn { background: #00f2ff; border: none; color: #000; padding: 30px 100px; font-size: 2rem; font-weight: bold; cursor: pointer; letter-spacing: 15px; box-shadow: 0 0 50px #00f2ff; }