/* --------------- About Section --------------- */
.about {
    display: flex;
    flex-direction: column;
    align-items: start;    
    justify-content: end;
    min-height: 100vh;
    background-image: url(../img/about/about1.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    padding: 2rem;
    gap: 2rem;

    p {
        max-width: 600px;
        margin: 0;
        padding-left: 1rem;
    }
    .normal {
        color: #fff;
        mix-blend-mode: difference;
    }
    h1 {
        font-size: clamp(3rem, 10vw, 8rem);
        font-weight: 800;
        margin: 0;
    }
}
.red{
    color: #D1001C;
}

@media (max-width: 768px) {
    .about {
        margin-top: 5rem;
        justify-content: space-between;
        align-items: center;
        padding: 2rem;
        h1 {
            color: #fff;
            margin-bottom: 5rem;
            font-size: clamp(3rem, 15vw, 8rem);
            .normal {
                mix-blend-mode: difference;
            }
        }
    }
}


/* --------------- Team Section --------------- */

.team {
    position: relative;
    height: 100vh;
    overflow: hidden;

    .person {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        text-align: center;
        gap: 5rem;
        opacity: 0;
        pointer-events: none;

        &.active {
            opacity: 1;
            pointer-events: auto;
        }

        &.fade-out {
            animation: fadeOut 0.4s ease-out forwards;
        }

        &.fade-in {
            animation: fadeIn 0.4s ease-out 0.2s forwards;
        }

        /* Even indices: image left, text right */
        &[data-index="0"],
        &[data-index="2"] {
            flex-direction: row;
        }

        /* Odd indices: image right, text left */
        &[data-index="1"] {
            flex-direction: row-reverse;
        }

        img {
           max-height: 100vh;
        }
        .bigpic {
            width: 50vw;
            min-height: 100vh;
            object-fit: cover;
        }

        figure {
            position: relative;
            margin: 0;
        }

        .highlight {
            margin-right: 5rem;
            align-self: flex-end;
            display: flex;
            flex-direction: column;
            align-items: end;
            img{
                align-self: center;
                max-width: 200px;
            }
            h1{
                font-size: 100px;
                font-weight: 800;
                margin: 0;
            }
            figcaption{
                margin-left: -2rem;
                align-self: flex-start;
                font-size: 42px;
                font-weight: 800;
                .lastname{
                    position: relative;
                    top: -10px;
                    margin-left: 2rem;
                }
            }
        }

        figure:first-child {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
        }

        figure .role {
            position: absolute;
            top: 50%;
            color: white;
            font-size: 42px;
            font-weight: 300;
            z-index: 10;
        }

        /* Even indices: role on left */
        &[data-index="0"],
        &[data-index="2"] {
            figure .role {
                left: 2rem;
            }
        }

        /* Odd indices: role on right */
        &[data-index="1"] {
            figure .role {
                right: 2rem;
            }
        }

        img.sliding {
            animation: slideImage 1.2s ease-in-out forwards;
        }

        .text {
            max-width: 700px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 5rem;
            margin-left: 2rem;
            text-align: start;
            flex: 1;

            p{
                max-width: 450px;
                font-size: 22px;
                margin-bottom: -2rem;
            }
        }

        h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 800;
        }

        h1 {
            color: #ff0000;
            font-weight: 300;
        }

        p {
            margin: 0;
            font-size: 16px;
            font-weight: 300;
        }
    }

    .person[data-index="0"] img.sliding {
        animation: slideLeft 0.8s ease-out forwards;
    }

    .person[data-index="1"] img.sliding {
        animation: slideRight 0.8s ease-out forwards;
    }

    .person[data-index="2"] img.sliding {
        animation: slideLeft 0.8s ease-out forwards;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        transform: translateX(100vw);
        opacity: 1;
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        transform: translateX(-100vw);
        opacity: 1;
    }
}


@media (max-width: 768px) {
    .team {
        position: relative;
        height: auto;
        overflow: visible;
    }

    .person {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end;
        gap: 2rem;
        margin-bottom: 4rem;
        animation: none !important;
    }

    .person.fade-out,
    .person.fade-in {
        animation: none !important;
        opacity: 1 !important;
    }

    .person img.sliding {
        animation: none !important;
    }

    .person .main-pic {
        position: relative !important;
        z-index: auto !important;
        width: 100% !important;
        .bigpic {
            width: 100%;
            min-height: 300px;
        }
    }

    .person .text {
        margin: 0 !important;
        padding: 2rem;
    }
}