/* Fade In Animations */
.animate-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-fade-in-active {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll Indicator Animation */
.animate-subtle-bounce {
    animation: subtle-bounce 2s infinite;
}

@keyframes subtle-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-2px);
    }
}

/* Parallax background for mouse tracking */
.mouse-parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.2), transparent),
                      radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.1), transparent),
                      radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.15), transparent),
                      radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.1), transparent);
    background-size: 50px 50px, 80px 80px, 30px 30px, 40px 40px;
    transition: transform 0.1s ease-out;
}

/* Video overlay transition */
.video-overlay {
    transition: opacity 300ms ease-out;
}

/* Scroll section snap */
.section-snap {
    scroll-snap-type: y mandatory;
}

.section-snap > section {
    scroll-snap-align: start;
}

/* Section indicators */
.section-nav-dot {
    transition: transform 300ms ease-out, 
                opacity 300ms ease-out, 
                background-color 300ms ease-out;
}

.section-nav-dot.active {
    transform: scale(1.2);
    opacity: 1;
}

/* FAQ Accordion Animation */
.faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 300ms ease-out, opacity 300ms ease-out;
}

.faq-answer.open {
    max-height: 500px;
    opacity: 1;
}

/* Waitlist Modal */
.waitlist-modal {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: opacity 300ms ease-out, 
                visibility 300ms ease-out, 
                transform 300ms ease-out;
}

.waitlist-modal.open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Utility classes */
.h-full { height: 100%; }
.w-full { width: 100%; }
.flex { display: flex; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Custom height variables */
:root {
    --full-height: 100vh;
}

/* Mobile adjustments */
@media (max-height: 600px) {
    :root {
        --full-height: calc(100vh - 60px);
    }
}