/* Custom Styles & Animations */

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Base Typography */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

/* Scroll Reveal Utility Classes */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 1; /* Default visible for no-JS */
}

/* When JS is active, we add a class to hide initially, but since we want progressive enhancement, 
   we handle the transition purely via JS adding classes. 
   For safety, we ensure the default state is visible or handled by the JS below. */
.reveal-up {
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-left {
    transform: translateX(-30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-right {
    transform: translateX(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.revealed {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* Navbar Transition */
#navbar.scrolled {
    background-color: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Mobile Menu Transitions */
#mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
}

#mobile-menu.closed {
    opacity: 0;
    pointer-events: none;
}

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

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

::-webkit-scrollbar-thumb {
    background: #1d7a7d;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #165a5c;
}