/**
 * ============================================
 * LAYOUT.CSS - ELSO.FR
 * ============================================
 * Styles du layout 2 panneaux (gauche/droite) avec mode expansion
 */

/* ========================================
   Mobile Container
======================================== */

.mobile-container {
    width: 200vw;
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.mobile-panel {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    /* Optimisations scroll fluide */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

/* ========================================
   Desktop Layout (2 panneaux 50/50)
======================================== */

@media (min-width: 1024px) {
    .mobile-container {
        width: 100%;
        height: 100%;
        transform: translateX(0);
        position: relative;
        display: flex;
        overflow: hidden;
        transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .mobile-panel {
        width: 50%;
        height: 100%;
        flex: none;
        will-change: width, margin-left, transform;
        /* Éliminer l'espace d'1px entre les panneaux */
        margin-right: -1px;
    }

    #left-panel {
        z-index: 10;
        position: relative;
        transform: translateX(0);
        /* Transition gérée par GSAP en JS */
        /* Force le panneau à toujours coller à la barre */
        border-right-width: 0;
    }

    #right-panel {
        width: 50%;
        z-index: 20;
        position: relative;
        transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        /* Colle à gauche contre la barre */
        margin-left: 0;
    }

    /* ========================================
       Expansion System (bouton central)
    ======================================== */

    #desktop-expand-btn {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-100%);
        height: 100vh;
        width: 2.5rem;
        z-index: 60;
        cursor: pointer;
        transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    }

    #expand-bar {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 50;
        left: 50%;
        width: 0.063rem;
        transform: translateX(-100%);
        transform-origin: right center;
        background-color: rgb(31 41 55);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        /* Transition gérée par GSAP en JS */
        will-change: width;
    }

    /* Hover effects - Gérés par JavaScript/GSAP pour synchronisation parfaite */

    body:not(.expanded-mode) #desktop-expand-btn:hover ~ #expand-bar .expand-text {
        opacity: 1;
        transition: opacity 0.3s ease;
        transition-delay: 0.3s;
    }

    /* Expanded mode (80/20) */
    body.expanded-mode #left-panel {
        width: 50%;
        margin-left: -25%;
        transform: translateX(-3rem);
    }

    body.expanded-mode #right-panel {
        width: 75%;
    }

    body.expanded-mode #expand-bar {
        width: 3rem;
        left: 25%;
        background-color: white;
    }

    body.expanded-mode #desktop-expand-btn {
        left: 25%;
        width: 3rem;
    }

    .expand-text, .collapse-text {
        transition: opacity 0.3s ease;
    }

    .expand-text {
        opacity: 0;
    }

    body.expanded-mode .expand-text {
        opacity: 0;
    }

    .collapse-text {
        opacity: 0;
    }

    body.expanded-mode .collapse-text {
        opacity: 1;
        transition-delay: 0.2s;
    }
}

/* ========================================
   Scroll Animation (logos clients, etc.)
======================================== */

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-scroll {
    animation: scroll 30s linear infinite;
}

.animate-scroll:hover {
    animation-play-state: paused;
}

/* ========================================
   Optimisations Performance Panneau Gauche
======================================== */

#left-panel {
    /* Hardware acceleration GPU - Supprimé car conflit avec animation JS */
    /* transform: translateZ(0) écrase le translateX() appliqué par GSAP */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Optimisation images lazy loading */
#left-panel img {
    /* Removed content-visibility to prevent scroll blocking */
}

/* Optimisation articles projets (render uniquement si visible) */
#left-panel article {
    /* Removed content-visibility to prevent scroll blocking */
}