@import url(//fonts.googleapis.com/css?family=Lato:300:400);

/* JS style - some particles in the background */
    body {
      font-family: 'Lato', sans-serif;
      margin: 0;
      overflow: hidden;
      background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    }

.unvpn {
    margin: 50px auto; 
    max-width: 360px; 
    padding: 15px; 
    background: rgba(0, 171, 9, 0.25); 
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #00ff41;
    letter-spacing: 3px;
    text-shadow: 
        0 0 5px #00ff41,
        0 0 20px #00ff41,
        0 0 40px #00ff41;
    opacity: 0.9;
    border: 1px solid #0f0; 
    border-radius: 8px;
}

#ip-list {
    margin: 10px 0 0 20px; 
    padding: 0; 
    list-style: none;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #00ff41;
    letter-spacing: 2px;
    text-shadow: 
        0 0 5px #00ff41,
        0 0 20px #00ff41,
        0 0 40px #00ff41;
    opacity: 0.9;
    animation: glitch 3s infinite;
}

.space-time {
    display: block;
    position: fixed ;
    top: 72px;
    left: 20px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #00ff41;
    letter-spacing: 3px;
    text-shadow: 
        0 0 5px #00ff41,
        0 0 20px #00ff41,
        0 0 40px #00ff41;
    opacity: 0.9;
    background: rgba(0, 171, 9, 0.25);
    animation: glitch 3s infinite;
    z-index: 20;
}

@keyframes glitch {
    0%,100% { text-shadow: 0 0 5px #00ff41, 0 0 20px #00ff41; }
    2%      { text-shadow: 2px 2px #ff00ff, -2px -2px #00ffff; }
    4%      { text-shadow: -2px -2px #ff00ff, 2px 2px #00ffff; }
    6%,100% { text-shadow: 0 0 5px #00ff41, 0 0 20px #00ff41; }
}

#star-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    /* pointer-events: none; */
    z-index: 1;
  }

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0.9;

    animation: twinkle linear infinite;
    animation-delay: calc(-1s * var(--delay));     /* każda z innym delay */
    animation-duration: calc(2s + 2s * var(--speed)); /* od 2 do 4 sekund */
  }

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
  }

  /* PASEK */
.mission-progress {
    display: block;
    position: relative;
    top: 25px;
    left: 5px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #00ff41;
    letter-spacing: 3px;
    text-shadow: 
        0 0 5px #00ff41,
        0 0 20px #00ff41,
        0 0 40px #00ff41;
    opacity: 0.9;
    z-index: 20;
    width: 300px;
}

.mission-progress .label {
    letter-spacing: 3px;
    margin-bottom: 6px;
    animation: glitch 4s infinite;
}

.mission-progress .bar {
    width: 100%;
    height: 14px;
    background: rgba(0, 255, 65, 0.1);
    border: 1px solid #00ff41;
    box-shadow: 0 0 10px #00ff41;
    overflow: hidden;
}

.mission-progress .fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #00ff41, #44ff44);
    box-shadow: 0 0 15px #00ff41;
    transition: width 0.4s ease;
}

.mission-progress .percent {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    text-shadow: 0 0 10px #00ff41;
}

.download-line {
    display: block;
    margin-top: 12px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #00ff41;
    /* letter-spacing: 3px; */
    text-shadow: 
        0 0 5px #00ff41,
        0 0 20px #00ff41,
        0 0 40px #00ff41;
    opacity: 0.9;
    animation: glitch2 3s infinite alternate-reverse;
}

.download-link {
    color: #44ff44;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 0 12px #00ff41;
    transition: all 0.3s ease;
    position: relative;
}

.download-link:hover {
    color: #ffffff;
    text-shadow: 
        0 0 10px #00ff41,
        0 0 20px #00ff41,
        0 0 30px #00ff41;
    transform: translateY(-1px);
}

/* Efekt glitch taki sam jak przy labelu */
@keyframes glitch2 {
    0%, 100% { text-shadow: 0 0 10px #00ff41; }
    2% { text-shadow: 2px 2px 0 #ff00ff, -2px -2px 0 #00ffff; }
    4% { text-shadow: -2px -2px 0 #ff00ff, 2px 2px 0 #00ffff; }
    6% { text-shadow: 0 0 10px #00ff41; }
    8% { text-shadow: 3px -3px 0 #ff00ff, -3px 3px 0 #00ffff; }
    10%, 100% { text-shadow: 0 0 10px #00ff41; }
}

#creepy-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;     /* nie blokuje kliknięć w stronę */
    z-index: -1;
    overflow: hidden;
}

/* SINGLE JUMPSCARE EFFEKT */
.creepy-image {
    position: absolute;
    width: 30vw;  
    height: 25vw;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    filter: brightness(0.8) contrast(1.2) saturate(1.4);
    transition: opacity 0.5s ease-out;
    mix-blend-mode: screen;
    user-select: none;
    border: 2px solid #f00;
    box-shadow: 0 0 20px #ff000033, inset 0 0 20px #000000aa;
}

/* GLITCH + SHAKE */
.creepy-image.active {
    opacity: 1;
    animation: softGlitch 1.2s infinite alternate, creepyPulse 3s infinite;
}

@keyframes softGlitch {
    0%, 100% { transform: translate(0, 0) rotate(2deg); }
    25%  { transform: translate(-3px, 2px) rotate(-0.8deg); }
    50%  { transform: translate(3px, -2px) rotate(0.8deg); }
    75%  { transform: translate(-2px, -3px) rotate(-2deg); }
}

@keyframes creepyPulse {
    0%,100% { filter: brightness(1.1) contrast(1.3) saturate(1.4) hue-rotate(0deg); }
    50%     { filter: brightness(1.3) contrast(2) saturate(2.3) hue-rotate(35deg); }
}

/* AGRESYWNE SCANLINES */
.creepy-image.active::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 0, 0, 0.0),
        rgba(255, 0, 0, 0.25) 2px,  
        rgba(255, 0, 0, 0.0) 4px
    );
    background-size: 100% 4px;      
    animation: scanlines 0.35s linear infinite; 
    mix-blend-mode: multiply;  
    opacity: 0.9;
    pointer-events: none;
    box-shadow: 0 0 15px #ff0000 inset;
}

@keyframes scanlines {
    0%   { transform: translateY(0); }
    100% { transform: translateY(8px); } 
}