/* Intro Screen Styles */

#intro-container {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

#intro-container.hidden {
    pointer-events: none !important;
}

.intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Fade out animation for intro */
#intro-container.fade-out {
    animation: fadeOut 1s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Responsive - ensure video works on mobile */
@media (max-width: 768px) {
    .intro-video {
        object-fit: cover;
        min-width: 100%;
        min-height: 100%;
    }
}

/* Portrait orientation on mobile */
@media (max-width: 768px) and (orientation: portrait) {
    .intro-video {
        width: auto;
        height: 100%;
        min-width: 100%;
    }
}