/* =========================
   INTRO & VIDEO
========================= */

#intro-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: #000; 
    z-index: 9999; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    transition: opacity 1s ease;
}

#intro-video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

#intro-video-mobile {
    display: none; /* Skryté na PC */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ZÁKLADNÍ SKIP TLAČÍTKO (PC verze) */
#skip-btn {
    position: absolute; 
    bottom: 30px; 
    right: 30px; 
    padding: 12px 24px;
    background: rgba(0,0,0,0.7); 
    border: 2px solid var(--primary);
    color: var(--primary); 
    cursor: pointer; 
    text-transform: uppercase; 
    z-index: 10000;
    font-weight: bold;
    touch-action: manipulation;
    min-height: 44px;
    transition: all 0.3s;
}

#skip-btn:hover {
    background: var(--primary);
    color: #000;
}

/* =========================
   ROTACE A EKVALIZÉR
========================= */

@keyframes rotate { 
    from { transform: rotateY(0deg); } 
    to { transform: rotateY(360deg); } 
}

.carousel { 
    animation: rotate 20s infinite linear; 
}

.carousel:hover { 
    animation-play-state: paused; 
}

.equalizer { 
    display: flex; 
    gap: 2px; 
    height: 15px; 
    align-items: flex-end; 
}

.bar { 
    width: 3px; 
    background-color: var(--primary); 
    animation: bounce 1s infinite ease-in-out; 
}

.bar:nth-child(2) { animation-delay: 0.1s; }
.bar:nth-child(3) { animation-delay: 0.2s; }
.bar:nth-child(4) { animation-delay: 0.3s; }

@keyframes bounce { 
    0%, 100% { height: 20%; } 
    50% { height: 100%; } 
}

.audio-paused .bar { 
    animation-play-state: paused !important; 
    height: 20% !important; 
}

/* =========================
   📱 MOBILNÍ OPRAVA
========================= */

@media screen and (max-width: 768px) {
    /* Video - mobilní verze viditelná */
    #intro-video {
        display: none;
    }
    
    #intro-video-mobile {
        display: block;
        width: 100vw;
        height: 100dvh;
        object-fit: cover;
    }

    /* Skip tlačítko - viditelné a na dobrém místě */
    #skip-btn {
        position: fixed;
        bottom: 15%;
        left: 50%;
        right: auto;
        top: auto;
        transform: translateX(-50%);
        padding: 16px 32px;
        background: var(--primary);
        color: #000;
        font-weight: bold;
        font-size: 1rem;
        border: 2px solid white;
        box-shadow: 0 0 20px var(--primary-glow);
        white-space: nowrap;
    }

    /* Pomalejší rotace na mobilu */
    .carousel {
        animation: rotate 30s infinite linear;
    }

    /* Větší equalizer na mobilu */
    .equalizer {
        height: 20px;
        gap: 3px;
    }

    .bar {
        width: 4px;
    }

    /* Vypnout pause on hover na mobilu (nemá smysl) */
    .carousel:hover {
        animation-play-state: running;
    }
}

/* =========================
   ♿ PŘÍSTUPNOST - prefers-reduced-motion
========================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .carousel {
        animation: none;
    }
    
    .bar {
        animation: none;
        height: 60%;
    }
    
    #intro-overlay {
        transition: none;
    }
}