/* Naqvix Custom Animations & Interactive Styles */

/* 1. Scroll Animations */
.animate-on-scroll {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.animate-on-scroll.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 2. Sticky Header active state */
.header-scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(12px);
}

.dark .header-scrolled {
    background-color: rgba(15, 14, 14, 0.95) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* 3. Mobile Accordion Toggle */
.mobile-accordion-content {
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.mobile-accordion-content.open {
    max-height: 500px !important;
    opacity: 1 !important;
}

/* 4. Fix for Mobile Menu sliding */
/* Override the Tailwind default if needed so our JS toggle works */
.mobile-menu-open {
    transform: translateX(0) !important;
}