/* ========== GSAP ANIMATION STATES ========== */

/* Initial hidden state for animated elements */
.gsap-hidden {
    visibility: hidden;
}

/* Smooth will-change for performance */
.will-animate {
    will-change: transform, opacity;
}

/* ========== KEY FIGURES : GROWTH CURVE ========== */
#key-figures {
    position: relative;
}

.growth-curve-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.growth-curve-container .curve-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Dot lumineux - cercle parfait */
#curve-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 6px 2px rgba(255, 255, 255, 0.8),
        0 0 12px 4px rgba(255, 255, 255, 0.5),
        0 0 20px 8px rgba(255, 255, 255, 0.3);
    opacity: 0;
    z-index: 5;
}

/* Key figures content above curve */
#key-figures > .container {
    position: relative;
    z-index: 2;
}

/* ========== LOCATIONS : GRADIENT ========== */
#locations {
    position: relative;
    overflow: hidden;
}

#locations::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 1;
}

#locations > .container {
    position: relative;
    z-index: 2;
}

/* ========== SMALL CAP : ORANGE SEPARATOR LINE ========== */
#small-cap-buyouts::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background-color: #E07020;
    z-index: 10;
}

/* ========== SMALL CAP & INFRASTRUCTURE : IMAGE MASK ========== */
#small-cap-buyouts,
#infrastructure {
    position: relative;
    z-index: 1;
}

#small-cap-buyouts .my-body,
#infrastructure .my-body {
    position: relative;
    z-index: 2;
    padding-bottom: 2rem;
}

#small-cap-buyouts .my-image,
#infrastructure .my-image {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#small-cap-buyouts .my-image > div,
#infrastructure .my-image > div {
    will-change: clip-path;
    position: relative;
}

/* Optimisation pour les éléments texte animés */
#small-cap-buyouts .section-label,
#small-cap-buyouts .section-title,
#small-cap-buyouts .section-intro,
#small-cap-buyouts .section-body,
#small-cap-buyouts .btn-primary,
#infrastructure .section-label,
#infrastructure .section-title,
#infrastructure .section-intro,
#infrastructure .section-body,
#infrastructure .btn-primary {
    will-change: transform, opacity;
}

/* ========== ESG : PARALLAX BACKGROUND ========== */
#esg-commitments {
    overflow: hidden;
    min-height: 400px;
    background-size: 100% 140% !important;
    background-position-x: center !important;
    background-position-y: 100%;
}

#esg-commitments > .mx-auto {
    position: relative;
    z-index: 2;
}

/* Content box plus grande avec marge */
#esg-commitments .content-box {
    padding: 2.5rem !important;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* ========== REDUCED MOTION SUPPORT ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .gsap-hidden {
        visibility: visible;
    }
}

/* ========== MOBILE ADJUSTMENTS ========== */
@media (max-width: 768px) {
    #curve-dot {
        width: 6px;
        height: 6px;
    }

    #esg-commitments {
        background-size: auto 120% !important;
    }
}

/* ========== FOCUS SECTIONS - OVERLAPPING LAYOUT ========== */
.focus-section {
    position: relative;
    margin: 40px auto; /* Réduit de 80px à 40px - rapproche du titre "Our Focus" */
    overflow: visible;
    background: white;
}

.focus-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    min-height: 400px;
}

/* Zone média (image + numéro) - à GAUCHE */
.focus-media-area {
    position: relative;
    z-index: 10;
    padding-top: 100px; /* Espace au-dessus de l'image */
}

/* Image container */
.focus-image {
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.focus-image img {
    width: 100%;
    height: auto;
    display: block;
    transform-origin: center;
    will-change: transform, clip-path;
}

/* Gros numéro NOIR par-dessus l'image */
.focus-number {
    position: absolute;
    bottom: -40px;
    right: 60px; /* Plus à l'intérieur de l'image */
    font-size: 14rem;
    font-weight: 700;
    color: #000;
    z-index: 20;
    line-height: 0.8;
    will-change: transform;
    pointer-events: none;
}

/* Zone texte - positionnement à droite, débordant sous l'image */
.focus-text-area {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-left: 4rem;
    margin-top: 50px;
    margin-left: -50px; /* Valeur originale - le débordement est géré par focus-text-content */
    z-index: 1; /* Inférieur à l'image (z-index: 10) pour effet de superposition */
}

/* Bloc gris avec le texte - étendu à gauche pour passer sous la photo */
.focus-text-content {
    background: var(--warm-gray);
    padding: 3rem;
    padding-left: calc(3rem + 100px); /* Extension 100px à gauche */
    margin-left: -100px; /* Décalage pour passer sous la photo */
    max-width: 600px; /* Ajusté pour compenser l'extension */
    will-change: transform, opacity;
}

/* Contenu additionnel */
.focus-additional {
    margin-top: -100px;
    position: relative;
    z-index: 5;
}

.focus-additional .btgrid {
    position: relative;
    z-index: 2;
}

/* GSAP animation states */
.focus-media-area {
    will-change: transform;
}

/* ========== FOCUS SECTION INVERSÉE (texte à gauche, image à droite) ========== */
.focus-section--reversed .focus-text-area {
    padding-left: 0;
    padding-right: 0;
    margin-left: -50px; /* Décalage de 50px vers la gauche */
    margin-right: -150px; /* Décalage pour passer sous l'image */
    justify-content: flex-end; /* Aligner le contenu à droite */
}

.focus-section--reversed .focus-text-content {
    padding-left: 3rem;
    padding-right: calc(3rem + 100px); /* Extension à droite sous l'image */
    margin-left: -50px; /* Décalage de 50px vers la gauche */
    margin-right: 0;
}

.focus-section--reversed .focus-number {
    right: auto;
    left: 60px; /* Numéro à gauche de l'image */
}

/* Mobile responsive */
@media (max-width: 768px) {
    .focus-layout {
        grid-template-columns: 1fr;
    }

    .focus-media-area {
        padding-top: 0;
    }

    .focus-text-area {
        margin-top: 0;
        margin-left: 0;
        padding: 2rem 1rem;
        min-height: auto;
    }

    .focus-text-content {
        max-width: 100%;
    }

    .focus-number {
        font-size: 8rem;
        bottom: -20px;
        right: 10px;
    }

    /* Reset reversed layout on mobile */
    .focus-section--reversed .focus-text-area {
        padding-right: 0;
        margin-right: 0;
    }

    .focus-section--reversed .focus-text-content {
        padding-right: 3rem;
        margin-right: 0;
    }

    .focus-section--reversed .focus-number {
        left: auto;
        right: 10px;
    }
}

/* ========== SUPPRIMER TRAITS NOIRS ========== */
/* The case for small cap buy-outs - pas de traits */
#investment-thesis .btgrid .col::before,
#investment-thesis .btgrid .col::after,
#investment-thesis .btgrid .row::before,
#investment-thesis .btgrid .row::after,
#investment-thesis .btgrid p::before,
#investment-thesis .btgrid p::after {
    display: none !important;
    content: none !important;
}

#investment-thesis .btgrid .col,
#investment-thesis .btgrid p {
    border: none !important;
    border-top: none !important;
}

/* How do we invest? - pas de traits */
#how-invest .btgrid .col::before,
#how-invest .btgrid .col::after,
#how-invest .btgrid .row::before,
#how-invest .btgrid .row::after,
#how-invest .btgrid p::before,
#how-invest .btgrid p::after {
    display: none !important;
    content: none !important;
}

#how-invest .btgrid .col,
#how-invest .btgrid p {
    border: none !important;
    border-top: none !important;
}

/* Focus additional sections - pas de traits */
.focus-additional .content::before,
.focus-additional .content::after,
.focus-additional .col::before,
.focus-additional .col::after,
.focus-additional .section-body::before,
.focus-additional .section-body::after {
    display: none !important;
    content: none !important;
}

.focus-additional .content,
.focus-additional .section-body {
    border: none !important;
    border-top: none !important;
}