/* components/nav.css */

/* Navigation slide animation (for desktop nav slide on scroll) */
.nav-hidden {
    transform: translateY(-100%);
}

.nav-visible {
    transform: translateY(0);
}

/* Mobile menu animations (updated to slide from right) */
.mobile-menu-open {
    animation: slideInFromRight 0.3s ease-in-out forwards;
}

.mobile-menu-close {
    animation: slideOutToRight 0.3s ease-in-out forwards;
}

@keyframes slideInFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideOutToRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

/* Dropdown animations (unchanged) */
.animate-bounce-in {
    animation: bounceIn 0.3s ease-in-out forwards;
}

@keyframes bounceIn {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.dropdown-open {
    animation: dropdownIn 0.3s ease-in-out forwards;
}

.dropdown-close {
    animation: dropdownOut 0.3s ease-in-out forwards;
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dropdownOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

/* Mobile menu item fade-in animation (updated to slide from right for consistency) */
.mobile-menu-item {
    opacity: 0;
    transform: translateX(20px); /* Start slightly off to the right */
    animation: fadeInFromRight 0.3s ease-in-out forwards;
    animation-delay: var(--delay);
}

@keyframes fadeInFromRight {
    to { opacity: 1; transform: translateX(0); }
}

/* Custom colors and hover scale (used by Donate button) */
.bg-custom-yellow {
    background-color: #f3c846;
}

.bg-custom-yellow-dark {
    background-color: #e0b73e;
}

.hover\:scale-custom:hover {
    transform: scale(1.05);
}

/* Get Involved banner styles (unchanged) */
.get-involved-banner {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.get-involved-banner-cta {
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}