/**
 * Animated Side Menu Styles
 * 
 * CSS styles for the animated side menu with warrior pose arm
 * that extends and holds a cosmic icon.
 */

.yoga-side-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--side-menu-width-collapsed, 60px);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: width 0.4s ease;
    overflow: hidden;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.yoga-side-menu.expanded {
    width: var(--side-menu-width-expanded, 250px);
}

.yoga-menu-toggle {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    margin-top: 15px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.yoga-menu-toggle:hover {
    transform: scale(1.1);
}

.yoga-arm-container {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease;
    opacity: 0;
    transform: scale(0.8);
}

.yoga-side-menu.expanded .yoga-arm-container {
    opacity: 1;
    transform: scale(1);
}

.yoga-arm-container.arm-extended {
    transform: translateX(70%);
}

.yoga-arm-svg {
    width: 100px;
    height: 100px;
    transform-origin: center;
    transition: transform 0.5s ease;
}

.yoga-arm-svg.pose-changing {
    transform: scale(1.1);
    opacity: 0.7;
}

.cosmic-icon-container {
    position: absolute;
    top: 140px;
    left: 45px; /* menuWidth - 15px */
    width: 40px;
    height: 40px;
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    transform: scale(0.5);
    z-index: 1001;
}

.cosmic-icon-container.cosmic-icon-visible {
    opacity: 1;
    transform: scale(1);
}

.cosmic-icon-fallback {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #9f6bff 0%, rgba(159, 107, 255, 0) 70%);
    border-radius: 50%;
    box-shadow: 0 0 10px 5px rgba(159, 107, 255, 0.5);
    animation: pulse 2s infinite alternate;
}

@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(1.2); opacity: 1; }
}

.yoga-menu-items {
    width: 100%;
    margin-top: 30px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 230px);
    padding: 0 5px;
}

.yoga-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: background-color 0.3s ease;
}

.yoga-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.yoga-menu-item.active {
    background-color: rgba(159, 107, 255, 0.3);
    border-left: 3px solid #9f6bff;
}

.yoga-menu-item i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    margin-right: 15px;
}

.yoga-menu-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(-10px);
    opacity: 0;
}

.yoga-side-menu.expanded .yoga-menu-label {
    transform: translateX(0);
    opacity: 1;
}

/* Center icons when collapsed */
.yoga-side-menu:not(.expanded) .yoga-menu-item {
    justify-content: center;
    padding: 12px 0;
}

.yoga-side-menu:not(.expanded) .yoga-menu-item i {
    margin-right: 0;
    font-size: 1.4rem;
}

/* Position adjustments for mobile */
@media (max-width: 768px) {
    .yoga-side-menu {
        width: var(--side-menu-width-collapsed, 50px);
    }
    
    .yoga-side-menu.expanded {
        width: var(--side-menu-width-expanded, 220px);
    }
    
    .cosmic-icon-container {
        left: 35px;
    }
    
    .yoga-arm-svg {
        width: 80px;
        height: 80px;
    }
    
    .yoga-menu-item i {
        font-size: 1.3rem;
    }
}

/* Special animation for pose transitions */
@keyframes poseFade {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* Icon glow effect */
.cosmic-icon-container svg {
    filter: drop-shadow(0 0 5px rgba(159, 107, 255, 0.8));
}

/* Main content offset for side menu */
.main-content-offset {
    margin-left: var(--side-menu-width-collapsed, 60px);
    width: calc(100% - var(--side-menu-width-collapsed, 60px));
    transition: margin-left 0.4s ease, width 0.4s ease;
}

.main-content-offset.menu-expanded {
    margin-left: var(--side-menu-width-expanded, 250px);
    width: calc(100% - var(--side-menu-width-expanded, 250px));
}

/* Orientation-specific adjustments */
@media screen and (orientation: portrait) {
    .yoga-side-menu {
        top: var(--top-nav-height, 56px);
        height: calc(100vh - var(--top-nav-height, 56px));
    }
    
    .yoga-arm-container {
        height: 120px;
    }
    
    .cosmic-icon-container {
        top: 110px;
    }
}