@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500&family=Inter:wght@300;400;500&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #050505;
    cursor: default;
}

img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

h1, h2, h3, .font-display {
    font-family: 'Unbounded', sans-serif;
}

/* Screen-reader only (safety in case Tailwind config changes) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Used to prevent navbar/footer enter animation after in-site navigation */
.no-enter-transition {
    transition: none !important;
}

/* Navbar scroll hide/show */
#navbar {
    transition:
        transform 700ms cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 520ms ease;
}

/* Ensure the "steady" reveal truly disables transitions (beats #navbar specificity) */
#navbar.no-enter-transition {
    transition: none !important;
}

#navbar.nav-hidden {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* Mobile dropdown menu: match the smoother navbar motion */
#mobile-menu {
    transition:
        transform 420ms cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 300ms ease;
}

/* Navbar logo hover glow (lime) */
.nav-logo-img {
    filter: drop-shadow(0 0 0 rgba(163, 230, 53, 0));
    transition: filter 420ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.nav-logo:hover .nav-logo-img {
    filter:
        drop-shadow(0 0 22px rgba(163, 230, 53, 0.75))
        drop-shadow(0 0 42px rgba(163, 230, 53, 0.25));
}

/* Custom Noise Overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #333;
}

::-webkit-scrollbar-thumb:hover {
    background: #a3e635; /* lime-400 */
}

/* Show quick links on hover */
#logo-container:hover #quick-links {
    opacity: 1;
    --tw-translate-y: 2rem;
    pointer-events: auto;
}

/* Keep quick links visible after first reveal (home latch) */
#logo-container.is-open #quick-links {
    opacity: 1;
    --tw-translate-y: 2rem;
    pointer-events: auto;
}

#logo-container.is-open #tagline {
    opacity: 0;
}

#logo-container.is-open #main-logo {
    --tw-translate-y: -1rem;
}

/* Mobile hamburger icon animation (menu <-> x) */
#mobile-menu-button .mobile-icon {
    position: absolute;
    inset: 0;
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
    transform-origin: 50% 50%;
}

#mobile-menu-button .mobile-icon.menu {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

#mobile-menu-button .mobile-icon.close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.9);
}

#mobile-menu-button.is-open .mobile-icon.menu {
    opacity: 0;
    transform: rotate(90deg) scale(0.9);
}

#mobile-menu-button.is-open .mobile-icon.close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* FAQ accordion */
.faq-item {
    border-radius: 0.75rem;
}

.faq-question {
    border-radius: 0.75rem;
}

.faq-panel {
    display: none;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        height 420ms cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 320ms ease,
        transform 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
    will-change: height, opacity, transform;
}

.faq-item.is-open .faq-panel {
    opacity: 1;
    transform: translateY(0);
}

.faq-icon {
    transition: transform 360ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.faq-item.is-open .faq-icon {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .faq-panel {
        transition: none;
    }
    .faq-icon {
        transition: none;
    }
}