/* ===== Vertical Burger Navigation ===== */

/* Main container - right side, vertically centered */
.burger-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual burger layer - hidden by default */
.burger-layer {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    opacity: 0;
    transform: translateX(150px);
    visibility: hidden;
}

/* After animation starts, make visible */
.burger-layer.animating {
    visibility: visible;
}

/* Animation keyframes */
@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(150px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(75px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Staggered animation for each layer */
.burger-nav.loaded .burger-layer:nth-child(1) {
    animation: slideInFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0s;
}
.burger-nav.loaded .burger-layer:nth-child(2) {
    animation: slideInFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.15s;
}
.burger-nav.loaded .burger-layer:nth-child(3) {
    animation: slideInFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.3s;
}
.burger-nav.loaded .burger-layer:nth-child(4) {
    animation: slideInFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.45s;
}
.burger-nav.loaded .burger-layer:nth-child(5) {
    animation: slideInFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.6s;
}
.burger-nav.loaded .burger-layer:nth-child(6) {
    animation: slideInFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.75s;
}
.burger-nav.loaded .burger-layer:nth-child(7) {
    animation: slideInFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.9s;
}

/* Label for each layer (hidden by default, shown on hover) */
.burger-label {
    font-family: 'Russo One', sans-serif;
    font-size: 0.75rem;
    color: var(--beef-text);
    background: linear-gradient(135deg,
        rgba(42, 26, 26, 0.95),
        rgba(26, 15, 10, 0.95)
    );
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(139, 21, 21, 0.4);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.burger-layer:hover .burger-label {
    opacity: 1;
    transform: translateX(0);
}

/* Active layer label always visible */
.burger-layer.active .burger-label {
    opacity: 1;
    transform: translateX(0);
    background: linear-gradient(135deg,
        rgba(139, 21, 21, 0.95),
        rgba(92, 14, 14, 0.95)
    );
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.4);
}

/* Burger piece styling - ДЕСКТОП (оригинальный размер) */
.burger-piece {
    width: 50px;
    height: 20px;
    border-radius: 25px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Top Bun - Доставка */
.burger-piece.top-bun {
    height: 25px;
    background: linear-gradient(135deg,
        #f4a460 0%,
        #d2691e 50%,
        #c86c3c 100%
    );
    border-radius: 25px 25px 8px 8px;
    position: relative;
}

/* Sesame seeds on top bun */
.burger-piece.top-bun::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 8px;
    background:
        radial-gradient(circle at 20% 30%, #fff 1px, transparent 1px),
        radial-gradient(circle at 50% 60%, #fff 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, #fff 1px, transparent 1px),
        radial-gradient(circle at 35% 80%, #fff 1px, transparent 1px),
        radial-gradient(circle at 65% 40%, #fff 1px, transparent 1px);
    opacity: 0.8;
}

/* Cheese - Задача */
.burger-piece.cheese {
    height: 18px;
    background: linear-gradient(135deg,
        #ffd700 0%,
        #ffb347 50%,
        #ffa500 100%
    );
    border-radius: 4px;
    margin-top: -3px;
    width: 55px;
    margin-left: -2.5px;
    box-shadow:
        0 4px 12px rgba(255, 165, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Patty - Платформы */
.burger-piece.patty {
    height: 22px;
    background: linear-gradient(135deg,
        #654321 0%,
        #4a2511 50%,
        #3d1f0f 100%
    );
    border-radius: 8px;
    margin-top: -2px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Grill marks on patty */
.burger-piece.patty::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.4) 0px,
        rgba(0, 0, 0, 0.4) 2px,
        transparent 2px,
        transparent 6px
    );
}

/* Tomato - Telegram */
.burger-piece.tomato {
    height: 16px;
    background: linear-gradient(135deg,
        #ff6347 0%,
        #e53935 50%,
        #c62828 100%
    );
    border-radius: 4px;
    margin-top: -2px;
    width: 52px;
    margin-left: -1px;
    box-shadow:
        0 4px 12px rgba(255, 99, 71, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Lettuce - Фишки */
.burger-piece.lettuce {
    height: 18px;
    background: linear-gradient(135deg,
        #90ee90 0%,
        #7cb342 50%,
        #558b2f 100%
    );
    border-radius: 6px;
    margin-top: -2px;
    width: 54px;
    margin-left: -2px;
    box-shadow:
        0 4px 12px rgba(124, 179, 66, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Wavy lettuce effect */
.burger-piece.lettuce::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px 6px 0 0;
}

/* Bacon - Технологии */
.burger-piece.bacon {
    height: 16px;
    background: linear-gradient(135deg,
        #d2691e 0%,
        #a0522d 50%,
        #8b4513 100%
    );
    border-radius: 4px;
    margin-top: -2px;
    width: 53px;
    margin-left: -1.5px;
    box-shadow:
        0 4px 12px rgba(139, 69, 19, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Bacon stripes */
.burger-piece.bacon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 8px,
        rgba(255, 255, 255, 0.15) 8px,
        rgba(255, 255, 255, 0.15) 10px
    );
    border-radius: 4px;
}

/* Bottom Bun - Контакт */
.burger-piece.bottom-bun {
    height: 20px;
    background: linear-gradient(135deg,
        #d2691e 0%,
        #cd853f 50%,
        #daa520 100%
    );
    border-radius: 8px 8px 25px 25px;
    margin-top: -2px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Hover effects */
.burger-layer:hover .burger-piece {
    transform: scale(1.1) translateX(-5px);
    filter: brightness(1.2);
}

/* Active layer glow */
.burger-layer.active .burger-piece {
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 69, 0, 0.6));
    transform: scale(1.15) translateX(-8px);
}

/* Mobile adjustments - УВЕЛИЧЕНО В 2 РАЗА */
@media (max-width: 768px) {
    .burger-nav {
        right: 15px;
        transform: translateY(-50%);
    }

    .burger-label {
        font-size: 0.75rem;
        padding: 8px 16px;
    }

    .burger-piece {
        width: 100px; /* 50px * 2 */
        height: 40px; /* 20px * 2 */
        border-radius: 50px; /* 25px * 2 */
    }

    .burger-piece.top-bun {
        height: 50px; /* 25px * 2 */
        border-radius: 50px 50px 16px 16px;
    }

    .burger-piece.top-bun::before {
        top: 12px;
        width: 60px;
        height: 16px;
        background:
            radial-gradient(circle at 20% 30%, #fff 2px, transparent 2px),
            radial-gradient(circle at 50% 60%, #fff 2px, transparent 2px),
            radial-gradient(circle at 80% 20%, #fff 2px, transparent 2px),
            radial-gradient(circle at 35% 80%, #fff 2px, transparent 2px),
            radial-gradient(circle at 65% 40%, #fff 2px, transparent 2px);
    }

    .burger-piece.cheese {
        height: 36px; /* 18px * 2 */
        width: 110px; /* 55px * 2 */
        margin-left: -5px;
        border-radius: 8px;
        margin-top: -6px;
    }

    .burger-piece.patty {
        height: 44px; /* 22px * 2 */
        border-radius: 16px;
        margin-top: -4px;
    }

    .burger-piece.patty::before {
        width: 80px; /* 40px * 2 */
        height: 4px; /* 2px * 2 */
        background: repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.4) 0px,
            rgba(0, 0, 0, 0.4) 4px,
            transparent 4px,
            transparent 12px
        );
    }

    .burger-piece.tomato {
        height: 32px; /* 16px * 2 */
        width: 104px; /* 52px * 2 */
        margin-left: -2px;
        border-radius: 8px;
        margin-top: -4px;
    }

    .burger-piece.lettuce {
        height: 36px; /* 18px * 2 */
        width: 108px; /* 54px * 2 */
        margin-left: -4px;
        border-radius: 12px;
        margin-top: -4px;
    }

    .burger-piece.lettuce::before {
        height: 8px; /* 4px * 2 */
        border-radius: 12px 12px 0 0;
    }

    .burger-piece.bacon {
        height: 32px; /* 16px * 2 */
        width: 106px; /* 53px * 2 */
        margin-left: -3px;
        border-radius: 8px;
        margin-top: -4px;
    }

    .burger-piece.bacon::before {
        background: repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 16px,
            rgba(255, 255, 255, 0.15) 16px,
            rgba(255, 255, 255, 0.15) 20px
        );
        border-radius: 8px;
    }

    .burger-piece.bottom-bun {
        height: 40px; /* 20px * 2 */
        border-radius: 16px 16px 50px 50px;
        margin-top: -4px;
    }
}

/* Hide on very small screens */
@media (max-width: 480px) {
    .burger-nav {
        display: none;
    }
}

/* Smooth animations */
@keyframes burgerFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.burger-layer.active .burger-piece {
    animation: burgerFloat 2s ease-in-out infinite;
}