/* ===== DESKTOP ANIMATED MENU ===== */

/* Desktop Burger Button - Hidden by default, shown on desktop */
.desktop-burger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    gap: 4px;
    margin-right: var(--space-4);
    appearance: none;
    z-index: 1001;
}

/* Show on desktop only */
@media (width >= 768px) {
    .desktop-burger-btn {
        display: flex;
    }
}

.desktop-burger-btn span {
    width: 100%;
    height: 2px;
    background: var(--white);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1px;
    transform-origin: center;
}

/* Burger to Cross Animation */
.desktop-burger-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.desktop-burger-btn.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.desktop-burger-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Animated Desktop Menu Container */
.animated-desktop-menu {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    pointer-events: none;

    /* Center the menu between logo final position and language switcher */
    left: calc(50% - 100px);
}

.animated-desktop-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.animated-nav-list {
    display: flex;
    list-style: none;
    gap: var(--space-6);
    align-items: center;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.animated-nav-link {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    padding: var(--space-2) var(--space-1);
    border-radius: var(--radius);
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(20px);
}

@media (hover: hover) {
    .animated-nav-link:hover {
        color: var(--secondary);
        transform: translateY(-2px);
    }
}

/* Sequential Animation for Menu Items */
.animated-desktop-menu.active .animated-nav-list li:nth-child(1) .animated-nav-link {
    animation: slide-in-up 0.4s ease 0.1s forwards;
}

.animated-desktop-menu.active .animated-nav-list li:nth-child(2) .animated-nav-link {
    animation: slide-in-up 0.4s ease 0.2s forwards;
}

.animated-desktop-menu.active .animated-nav-list li:nth-child(3) .animated-nav-link {
    animation: slide-in-up 0.4s ease 0.3s forwards;
}

.animated-desktop-menu.active .animated-nav-list li:nth-child(4) .animated-nav-link {
    animation: slide-in-up 0.4s ease 0.4s forwards;
}

.animated-desktop-menu.active .animated-nav-list li:nth-child(5) .animated-nav-link {
    animation: slide-in-up 0.4s ease 0.5s forwards;
}

/* Logo Animation Keyframes */
@keyframes logo-slide-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-750px);
    }
}

@keyframes logo-slide-right {
    from {
        transform: translateX(-750px);
    }

    to {
        transform: translateX(0);
    }
}

/* Large Desktop Optimizations */
@media (width >= 1200px) {
    .animated-desktop-menu {
        left: calc(50% - 30px);
    }

    @keyframes logo-slide-left {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-1000px);
        }
    }

    @keyframes logo-slide-right {
        from {
            transform: translateX(-1000px);
        }

        to {
            transform: translateX(0);
        }
    }
}

/* Menu Items Animation */
@keyframes slide-in-up {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Logo Animation Classes */
.logo.moving-right {
    animation: logo-slide-right 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 1002;
    position: relative;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.logo.moving-left {
    animation: logo-slide-left 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 1002;
    position: relative;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Performance Optimizations */
.animated-desktop-menu,
.animated-nav-link,
.desktop-burger-btn {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .logo.moving-right,
    .logo.moving-left,
    .animated-nav-link,
    .desktop-burger-btn span {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }

    .animated-desktop-menu.active .animated-nav-list li .animated-nav-link {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Additional Desktop Menu Enhancements */
@media (width >= 768px) {
    .header-content {
        position: relative;
        overflow: visible;
    }

    .logo {
        position: relative;
        z-index: 1002;
        transition: transform 0.6s ease-out;
    }

    .nav {
        visibility: hidden;
        opacity: 0;
    }
}