/* Custom styles that complement Tailwind */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Fade In Up Animation for Hero */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Scroll Reveal Styles (Progressive Enhancement) */
.scroll-reveal {
    opacity: 1; /* Default visible for no-JS */
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Only apply hidden state if JS is enabled (handled by adding class via JS) 
   However, to ensure no flash of unstyled content if JS is blocked, we keep default visible.
   If JS runs, we add .is-hidden to start, then remove to animate.
*/
.no-js .scroll-reveal {
    opacity: 1;
    transform: none;
}

/* Active state for scroll reveal */
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Initial hidden state for JS-triggered reveal */
.scroll-reveal.hidden {
    opacity: 0;
    transform: translateY(30px);
}

/* Navbar Glass Effect */
.navbar-scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}