/*
 * -----------------------------------------------------------------------------
 * HEADER.CSS
 * -----------------------------------------------------------------------------
 */

/* Desktop Dropdown Animations */
@keyframes enterFromRight {
    from { opacity: 0; transform: translateX(200px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes enterFromLeft {
    from { opacity: 0; transform: translateX(-200px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes exitToRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(200px); }
}
@keyframes exitToLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-200px); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* The Menu Content Container */
.navigation-menu-content {
    display: none;
    transform-origin: top center;
    animation-duration: 0.2s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Show on hover (Desktop) */
.group:hover .navigation-menu-content {
    display: block;
    animation-name: scaleIn;
}

/* Mobile Drawer Transitions */
.mobile-menu-overlay {
    transition: opacity 0.3s ease;
    pointer-events: none;
    opacity: 0;
}
.mobile-menu-overlay.open {
    pointer-events: auto;
    opacity: 1;
}

.mobile-menu-drawer {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu-drawer.open {
    transform: translateX(0);
}