/* ==============================================
   SPACE BACKGROUND - Centralizované vesmírné pozadí
   WeBuildBrands
   ============================================== */

/* Container pro hvězdy */
.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    transition: transform 0.3s ease-out;
    transform-origin: center center;
}

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Vrstva hvězd 1 - základní bílé hvězdy */
.stars-layer-1 {
    background-image:
        radial-gradient(2px 2px at 20px 30px, white, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, white, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 160px 120px, white, transparent),
        radial-gradient(1.5px 1.5px at 200px 50px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 250px 150px, white, transparent),
        radial-gradient(1px 1px at 300px 100px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 350px 180px, white, transparent),
        radial-gradient(2px 2px at 400px 60px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 450px 200px, white, transparent),
        radial-gradient(1.5px 1.5px at 500px 90px, rgba(255,255,255,0.7), transparent);
    background-size: 550px 250px;
    animation: twinkle 4s ease-in-out infinite;
}

/* Vrstva hvězd 2 - doplňkové hvězdy */
.stars-layer-2 {
    background-image:
        radial-gradient(1px 1px at 50px 100px, white, transparent),
        radial-gradient(1.5px 1.5px at 100px 180px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 180px 20px, white, transparent),
        radial-gradient(2px 2px at 220px 140px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 280px 200px, white, transparent),
        radial-gradient(1px 1px at 320px 70px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 380px 160px, white, transparent),
        radial-gradient(1px 1px at 420px 30px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 480px 120px, white, transparent);
    background-size: 500px 220px;
    animation: twinkle 5s ease-in-out infinite 1s;
}

/* Vrstva hvězd 3 - bílé hvězdy */
.stars-layer-3 {
    background-image:
        radial-gradient(1.5px 1.5px at 30px 150px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 70px 50px, white, transparent),
        radial-gradient(2px 2px at 120px 200px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 170px 80px, white, transparent),
        radial-gradient(1.5px 1.5px at 230px 170px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 270px 40px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 340px 130px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.5px 1.5px at 390px 90px, white, transparent),
        radial-gradient(1px 1px at 440px 180px, rgba(255,255,255,0.8), transparent);
    background-size: 480px 230px;
    animation: twinkle 6s ease-in-out infinite 2s;
}

/* Liquid blob efekt za kurzorem */
.liquid-blob {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 40%,
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.liquid-blob.active {
    opacity: 1;
    animation: liquidBlobPulse 3s ease-in-out infinite;
}

@keyframes liquidBlobPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    25% {
        transform: translate(-50%, -50%) scale(1.05) rotate(90deg);
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    50% {
        transform: translate(-50%, -50%) scale(0.95) rotate(180deg);
        border-radius: 40% 60% 60% 40% / 70% 30% 60% 40%;
    }
    75% {
        transform: translate(-50%, -50%) scale(1.02) rotate(270deg);
        border-radius: 50% 40% 30% 60% / 40% 50% 60% 50%;
    }
}

/* Bílé hvězdy které se objevují za kurzorem a mizí */
.cursor-star {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8),
                0 0 12px rgba(255, 255, 255, 0.4);
    animation: starFadeOut 1.5s ease-out forwards;
}

@keyframes starFadeOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    30% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
}

/* Kapalinová vlna */
.liquid-wave {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: waveExpand 1.2s ease-out forwards;
}

@keyframes waveExpand {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.5;
        transform: translate(-50%, -50%);
        border-width: 2px;
    }
    100% {
        width: 120px;
        height: 120px;
        opacity: 0;
        transform: translate(-50%, -50%);
        border-width: 1px;
    }
}

/* Animace blikání hvězd */
@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mlhoviny */
.nebula {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
}

.nebula-1 {
    top: 10%;
    left: 5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 70%);
    animation: nebulaPulse 8s ease-in-out infinite;
}

.nebula-2 {
    top: 60%;
    right: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.12) 0%, transparent 70%);
    animation: nebulaPulse 10s ease-in-out infinite 2s;
}

.nebula-3 {
    top: 40%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, rgba(167, 139, 250, 0.08) 50%, transparent 70%);
    animation: nebulaPulse 12s ease-in-out infinite 4s;
}

/* Animace pulzování mlhovin */
@keyframes nebulaPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

/* Efekt záře u kurzoru myši */
.mouse-glow {
    position: fixed;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    opacity: 0;
}