/* Cognitio Nexus - Minimal Styles (Tailwind handles most styling) */

/* Page loader hidden state */
#page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Body loaded state - ensures smooth reveal */
body {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

body.loaded {
    opacity: 1;
}

/* Services Carousel - Essential 3D setup */
.services-carousel-container {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 480px;
    margin: 2rem auto;
    perspective: 1200px;
}

.service-card {
    position: absolute;
    width: 100%;
    min-height: 360px;
    left: 0;
    top: 0;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.5s ease;
    backface-visibility: hidden;
}

/* Active card hover effect */
.service-card.is-active {
    cursor: default;
}

.service-card.is-active:hover {
    transform: scale(1.03) !important;
}

/* Mobile Navigation - Open state */
@media (max-width: 767px) {
    #main-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10, 10, 11, 0.98);
        backdrop-filter: blur(20px);
        display: flex !important;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 40;
    }

    #main-nav.is-active {
        opacity: 1;
        visibility: visible;
    }

    #main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    #main-nav ul li a {
        font-size: 1.25rem;
        padding: 0.75rem 1.5rem;
    }

    /* Mobile hamburger X animation */
    #mobile-nav-toggle.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    #mobile-nav-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    #mobile-nav-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* Carousel responsive adjustments */
@media (max-width: 768px) {
    .services-carousel-container {
        max-width: 320px;
        height: 420px;
    }

    .service-card {
        min-height: 320px;
    }
}

@media (max-width: 480px) {
    .services-carousel-container {
        max-width: 280px;
        height: 400px;
    }

    .service-card {
        min-height: 300px;
    }
}

/* Smooth scroll offset for anchor links */
section[id] {
    scroll-margin-top: 5rem;
}