@use "sass:color";
@use "sass:math";
@use "../abstracts/mixins";
@use "../abstracts/variables";

.hp_intro{
    min-height: 300vh;
    background-color: variables.$cGreyLighter;
    z-index: 3;

    @include mixins.respondTo('xs'){
        min-height: auto;
        z-index: 0;
    }

    .intro{
        &_action{
            position: absolute;
            z-index: 4;
            top: 0; left: 0; right: 0; bottom: 0;
    
            @include mixins.respondTo('xs'){
                display: none;
            }
        }

        &_progress{
            position: absolute;
            top: 30vh; bottom: 30vh;
            pointer-events: none;
        }

        &_setUi{
            position: absolute;
            pointer-events: none;
            z-index: 22;

            &--1{
                top: 0; height: 55vh;
            }

            &--2{
                top: 55vh; bottom: 0;
            }
        }

        &_cover{
            position: absolute;
            top: -1vh; left: -1vw; width: 102vw; height: 102vh;
            pointer-events: none;
            
            @include mixins.respondTo('xs'){
                position: fixed;
                height: calc(var(--vh, 1vh) * 102);
                height: 102vh;

                &.playing{
                    .intro_cover_inner{
                        &::after{
                            opacity: 0;
                        }
                    }
                    .intro_cover_mobile{
                        img{
                            opacity: 0;
                        }
                    }
                }
            }

            &_inner{
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                transform-origin: 72.5% calc(75vh - 0px);
                background: #000;
                overflow: hidden;

                &::after{
                    content: "";
                    position: absolute;
                    top: 0; left: 0; right: 0; bottom: 0;
                    z-index: 2;
                    background: rgba(0, 0, 0, 0.5);
                    transition: opacity 0.2s linear;
                }
            }

            &_mobile{
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;

                img{
                    position: absolute;
                    z-index: 1;
                    top: 0; left: 0;
                    width: 100%; height: 100%;
                    object-fit: cover;
                    transition: opacity 0.2s linear;
                }
                video{
                    position: absolute;
                    top: 0; left: 0;
                    width: 100%; height: 100%;
                    object-fit: cover;
                }
            }

            video{
                position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;
                object-fit: cover;
            }
        }

        &_mobile_play{
            position: relative;
            display: inline-block;
            width: 50px;
            height: 50px;
            outline: 2px solid #FFF;
            border-radius: 40px;
            margin-top: 20px;
            transition: opacity 0.2s linear;
            mix-blend-mode: difference;

            svg{
                position: absolute;
                top: 50%; left: 50%;
                margin-top: -12px;
                margin-left: -8px;
                transform: scale(0.65);
                transform-origin: center center;

                &:first-child{
                    margin-top: -12px;
                    margin-left: -8px;
                }

                &:last-child{
                    margin-top: -10px;
                    margin-left: -8px;
                    transform: scale(0.85);
                    opacity: 0;
                }
            }
        }

        &_titleWrap{
            position: absolute;
            top: 0; left: 0; width: 100vw;
            height: calc(var(--vh, 1vh) * 100);
            height: 100vh;
            z-index: 8;
            pointer-events: none;

            @include mixins.respondTo('xs'){
                position: fixed;
                pointer-events: all;

                &.playing{
                    mix-blend-mode: difference;

                    .intro_titleBorder{
                        opacity: 0;
                    }
                    .intro_title{
                        opacity: 0;
                    }

                    .intro_mobile_play{
                        svg{
                            &:first-child{
                                opacity: 0;
                            }
                            &:last-child{
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }

        &_titleContainer{
            position: absolute;
            left: 0; right: 0; bottom: 45vh;

            @include mixins.respondTo('xs'){
                bottom: calc(var(--vh, 1vh) * 12);
                bottom: 12vh;
            }
        }

        &_titleBorder{
            position: absolute;
            top: 120%; left: 20.5vw;
            height: 2px; width: 30vw;
            background-color: variables.$cLight;
            transition: transform 0.6s variables.$easeOutExpo;
            transform-origin: top right;
            transform: scaleX(0);

            @include mixins.respondTo('sm'){
                left: 16vw;
            }

            @include mixins.respondTo('xs'){
                left: 55px;
                width: calc(100% - 110px);
                top: 0;
            }

            &.visible{
                transform: scaleX(1);
            }
        }

        &_title{
            display: inline-block;
            margin-left: mixins.vwCol(3);
            text-align: left;
            @include mixins.fontSize(150,135);
            font-size: clamp(90px, 8vmax, 150px);
            line-height: 0.9;
            color: variables.$cDark;
            font-weight: 200;
            transform-origin: 0% 220%;
            transform: scale(0.4);
            transition: color 0.2s linear;
            will-change: transform;

            @include mixins.respondTo('sm'){
                margin-left: mixins.vwCol(2);
            }

            @include mixins.respondTo('xs'){
                @include mixins.fontSize(30,32,variables.$baseFontSizeXs);
                transform: none !important;
                margin-left: 0;
                padding-top: 25px;
                // padding-right: 45px;
                font-weight: 300;
                display: block;
            }

            &--light{
                color: variables.$cLight;
            }

            strong{
                color: variables.$cPrimary;
                font-weight: 700;
            }
        }

        &_content{
            position: absolute;
            z-index: 10;
            height: 100vh;
            left: 31.3vw;
            // background-color: tomato;
            width: mixins.vwCol(4);
            @include mixins.fontSize(18);
            padding-top: 66.5vh;
            color: variables.$cDark;
            pointer-events: none;

            @include mixins.respondTo('sm'){
                left: 17vw;
                width: mixins.vwCol(7);
                padding-top: 62vh;
            }

            @include mixins.respondTo('xs'){
                position: relative;
                height: auto;
                width: 100%;
                left: auto;
                padding-left: 55px;
                padding-right: 55px;
                padding-top: calc(var(--vh, 1vh) * 25);
                padding-top: 25vh;
                padding-bottom: calc(var(--vh, 1vh) * 25);
                padding-bottom: 25vh;
                margin-top: calc(var(--vh, 1vh) * 100);
                margin-top: 100vh;
                background-color: variables.$cGreyLighter;
            }

            &_inner{
                position: relative;
                padding-top: 40px;
                pointer-events: all;

                @include mixins.respondTo('sm'){
                    padding-top: 30px;
                }

                @include mixins.respondTo('xs'){
                    padding-top: 10px;
                }

                &::before{
                    content: "";
                    position: absolute;
                    top: 0; left: 0;
                    width: 70%;
                    height: 2px;
                    border-radius: 2px;
                    background: currentColor;
                    transition: transform 1s variables.$ExpoEaseOut;
                    transform-origin: top left;
                    transform: scaleX(0);
                }

                > div{
                    transform: translateY(-40px);
                    visibility: hidden;
                    opacity: 0;
                    will-change: transform, opacity;
                    transition: visibility 0s linear 0.3s, opacity 0.4s linear, transform 0.8s variables.$ExpoEaseOut;

                    @include mixins.respondTo('xs'){
                        opacity: 1;
                        visibility: visible;
                        transform: none;
                    }

                    & + div{
                        margin-top: 20px;

                        @include mixins.respondTo('xs'){
                            margin-top: 40px;
                        }
                    }

                    &.intro_popinOpenWrap{
                        margin-top: 0 !important;
                    }
                }
            }

            &.visible{
                .intro_content_inner{
                    &::before{
                        transform: scaleX(1);
                    }

                    > div{
                        visibility: visible;
                        opacity: 1;
                        transform: translateY(0);
                        transition-delay: 0s;
                    }
                }
            }
        }

        &_contentStart{
            position: absolute;
            bottom: 0;
            height: 130vh;
        }

        &_popinOpen{
            position: absolute;
            z-index: 11;
            white-space: nowrap;
            // top: calc(100% + 0px);
            bottom: 10px;
            left: calc(100% + 11vw);
            pointer-events: all;
            cursor: pointer;

            @include mixins.respondTo('sm'){
                position: relative;
                left: auto;
                bottom: auto;
                margin-top: 20px;
            }
        }

        // &_debug{
        //     position: absolute;
        //     z-index: 20;
        //     top: 72vh; left: 69vw;
        //     width: 20px; height: 20px;
        //     border-radius: 20px;
        //     background: #000;
        //     margin-top: -10px;
        //     margin-left: -10px;
        // }
    }
}

.hp_popin{
    position: fixed;
    z-index: 10000;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: color.adjust(variables.$cPrimary, $alpha: -0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    padding: 5vw;
    transition: opacity 0.2s linear;
    
    @include mixins.respondTo('xs'){
        padding-top: 10vh;
    }

    &.visible{
        opacity: 1;
        pointer-events: all;
    }

    &_inner{
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
    }

    &_mask{
        position: absolute;
        z-index: 1;
        top: 0; left: 0; right: 0; bottom: 0;
        cursor: pointer;
    }

    .plyr{
        position: relative;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        aspect-ratio: math.div(16,9);
    }

    &_close{
        position: absolute;
        z-index: 20;
        left: 50%;
        top: 2.5vw;
        transform: translate(-50%, -50%);

        @include mixins.respondTo('xs'){
            top: 5vh;
        }
    }
}

.hp_header{
    z-index: 10;
    
    .container{
        position: relative;
        justify-content: flex-end;
        padding-top: 12vh;
        mix-blend-mode: exclusion;
    }

    .sectionTitle{
        color: #FFF;
    }

    .sectionTitle_footer_link{
        color: #FFF;

        &::after{
            background-color: #FFF;
        }

        @include mixins.hover{
            color: #000;
        }
    }
}

.hp_news{
    z-index: 2;
    background-color: #fff;

    .contentBg{
        position: absolute;
        top: 0; right: 0; bottom: 0;
        transform: translateX(101%);
        width: 36.2vw;
        z-index: 0;
        background-color: #fff;

        @include mixins.respondTo('md'){
            width: 41vw;
        }

        @include mixins.respondTo('sm'){
            width: 45vw;
        }

        @include mixins.respondTo('xs'){
            display: none;
        }
    }
    
    .pSection_header_cover{
        right: auto;
        left: -7vw;
        width: 100vw; // 63.8vw

        &:after{
            display: none;
        }

        .carousel{
            opacity: 0;

            &:after{
                content: "";
                position: absolute;
                z-index: 10;
                top: 0; left: 0; right: 0; bottom: 0;
                background-color: #000;
                opacity: 0.15;
            }
        }
    }

    .pSection_content{
        min-height: 100vh;
        padding-bottom: 15vh;
    }

    &_list{
        &--active{
            &:hover{
                .newsBloc{
                    opacity: 0.2 !important;
                }
            }

            .newsBloc{
                transition: opacity 0.25s linear;

                &:hover{
                    opacity: 1 !important;
                }
            }
        }
    }

    .newsBloc{
        opacity: 0;
        
        @include mixins.respondTo('xs'){
            opacity: 1;
        }
    }

    &_logo{
        position: absolute;
        z-index: 2;
        bottom: calc(12vh + 70px + 9.5vh + 3.5rem);
        left: 25vw;
        opacity: 0;
        color: variables.$cPrimary;
        mix-blend-mode: lighten;
        width: 956px;
        pointer-events: none;

        @include mixins.respondTo('xs'){
            display: none;
        }
    
        svg{
            display: block;
        }
    }

    &_mobileTitle{
        display: none;
        color: variables.$cDark;
        text-transform: lowercase;
        font-family: variables.$ffC;
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        margin-bottom: 6vh;

        &::before{
            content: "";
            display: inline-block;
            vertical-align: middle;
            width: 8px; height: 8px;
            border-radius: 8px;
            background-color: variables.$cDark;
            margin-right: 10px;
        }

        @include mixins.respondTo('xs'){
            display: block;
        }
    }
}

.hp_webi{
    @include mixins.respondTo('xs'){
        min-height: 100vh;
        background: #fff;
    }

    .hp_webi_contentTarget{
        top: 100lvh;
        bottom: 0;
    }
    
    &_progress{
        position: absolute;
        z-index: 10000;
        top: 0; left: 0;
        height: 140lvh;
        // width: 20px;
        // background-color: pink;
    }
    
    &_cover{
        position: relative;
        z-index: -1;
        height: 100lvh;

        @include mixins.respondTo('xs'){
            z-index: 0;
        }

        &::after{
            content: "";
            position: absolute;
            z-index: 0;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: #000;
            opacity: 0.5;
        }

        &_img{
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
        }

        video{
            position: absolute;
            z-index: 0;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &_media{
            filter: grayscale(1);
        }
    }

    .pSection_header{
        .sectionTitle--light{
            @include mixins.respondTo('xs'){
                color: #000;
            }
        }
    }

    .contentBg{
        position: absolute;
        z-index: -1;
        top: 100lvh; right: 0; bottom: 0;
        width: 36.2vw;
        background-color: #fff;

        @include mixins.respondTo('md'){
            width: 41vw;
        }

        @include mixins.respondTo('sm'){
            width: 45vw;
        }

        @include mixins.respondTo('xs'){
            display: none;
        }
    }
    
    &_content{
        .pSection_content{
            margin-top: 100lvh;
            padding-bottom: 12vh;

            @include mixins.respondTo('xs'){
                margin-top: 0;
            }
        }
        
        .st2{
            margin-bottom: 25px;
        }

        .webi_media{
            margin: 60px 0;
            width: calc(100% + 70px);
            margin-left: -35px;

            @include mixins.respondTo('sm'){
                width: 100%;
                margin-left: 0;
                margin: 40px 0;
            }

            &_render{
                position: relative;
                aspect-ratio: math.div(480,324);
                margin-bottom: 5px;
            }
        }

        .webi_iframe{
            width: 100%;
            aspect-ratio: 1;
            min-height: 550px;
            width: calc(100% + 70px);
            margin-left: -35px;

            @include mixins.respondTo('sm'){
                width: calc(100% + 60px);
                margin-left: -30px;
            }
        }
    }

    .pSection_header_inner{
        max-width: 100%;
    }
}

.hp_cabinet{
    z-index: 1;

    @include mixins.respondTo('xs'){
        overflow: hidden;
    }

    &_intro{
        min-height: 140vh;
        background-color: variables.$cDark;
        color: variables.$cLight;
        padding-top: 25vh;
        padding-bottom: 15vh;
        
        @include mixins.respondTo('xs'){
            min-height: auto;
            padding-top: 100px;
            padding-bottom: 300px;
        }
    }

    &_quote{
        position: relative;
        @include mixins.fontSize(60,70);
        font-weight: 300;

        @include mixins.respondTo('md'){
            @include mixins.fontSize(44,50,variables.$baseFontSizeMd);
        }

        @include mixins.respondTo('xs'){
            @include mixins.fontSize(24,30,variables.$baseFontSizeXs);
            margin-left: 20px;

            br{
                &, &::after{
                    content: ' ';
                }
            }
        }

        &_icon{
            position: absolute;
            top: 0; right: calc(100% + 40px);
            color: variables.$cPrimary;
            
            @include mixins.respondTo('xs'){
                transform: scale(0.85);
                top: -20px;
                right: calc(100% + 10px);
            }
        }
    }
    
    &_quoteSource{
        margin-top: 3vh;
        @include mixins.fontSize(24,24);
        opacity: 0.5;

        @include mixins.respondTo('xs'){
            margin-left: 20px;
        }
    }

    &_presentation{
        position: relative;
        margin-top: -30vh;
        background-color: #FFF;

        @include mixins.respondTo('xs'){
            margin-top: 0;
        }

        &::before{
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 30vh;
            background: variables.$cDark;
        }

        .pSection_content{
            padding-top: 52vh;
            min-height: 140vh;
            padding-bottom: 20vh;
        }
    }

    &_logo{
        position: absolute;
        top: -5vh; left: 36.5%;
        z-index: 2;
        color: variables.$cPrimary;
        mix-blend-mode: lighten;
        pointer-events: none;

        @include mixins.respondTo('xs'){
            transform: scale(0.6);
            left: 20%;
            top: -200px;
            transform-origin: top left;
        }
    }

    &_arrow{
        display: block;
        margin: 5vh auto 0 auto;
    }
}

.hp_expertise{
    padding-bottom: 12vh;
    
    @include mixins.respondTo('xs'){
        padding-bottom: 0;
        min-height: 100vh;
        background: #fff;
    }

    &_video{
        z-index: 0;
        height: 100vh;
        
        @include mixins.respondTo('sm'){
            display: none;
        }
    }

    &_videoMobile{
        display: none;
        position: absolute;
        top: 20vh;
        left: 20vw;
        max-width: none;

        @include mixins.respondTo('sm'){
            display: block;
        }

        @include mixins.respondTo('xs'){
            display: none;
        }
    }

    &_content{
        position: relative;
        z-index: 1;

        @include mixins.respondTo('xs'){
            padding-top: 10vh;
        }
    }

    .pSection_header_inner{
        max-width: 100%;
    }

    .pSection_content{
        position: relative;
        margin-top: 100vh;
        padding-top: 0;
        padding-bottom: 25vh;

        @include mixins.respondTo('xs'){
            margin-top: 0;

            .firstLetter{
                padding-left: 40px;

                svg{
                    display: none;
                }

                &_letter{
                    left: -14px;
                }

                &_content{
                    &::first-letter{
                        margin-left: -10px;
                    }
                }
            }
        }
    }

    &_quote{
        position: absolute;
        top: -10px; right: calc(100% + 35px);
        color: variables.$cPrimary;
    }

    .prestaCovers{
        position: absolute;
        z-index: 0;
        opacity: 0;
        pointer-events: none;
        width: 400px;
        height: 300px;
        margin-left: -200px;
        margin-top: -150px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        transition: transform 1s variables.$easeOutCirc;
    }

    .prestaList{
        margin-top: 6vh;
        margin-bottom: 0;

        .prestaItem{
            > a{
                @include mixins.fontSize(40,40);
                padding-top: 4vh;
                padding-bottom: 4vh;
                
                @include mixins.respondTo('md'){
                    @include mixins.fontSize(30,30,variables.$baseFontSizeMd);
                }

                &_title{
                    position: relative;
                    z-index: 1;
                }
            }
        }
    }
}

.videoPlayTrigger{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}
.videoMaskTrigger{
    position: absolute;
    top: 100vh; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}
.videoGreyscaleTrigger{
    position: absolute;
    top: 150vh; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}


.video{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    will-change: opacity;
    transition: opacity 0.2s linear;

    &.hidden{
        opacity: 0.2;
    }

    video{
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: grayscale(100%);
        transition: filter 0.6s linear;
    }

    &_overlay{
        position: absolute;
        z-index: 2;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #FFF;
        opacity: 0;
        transition: opacity 0.3s linear;
    }

    &_mask{
        position: absolute;
        z-index: 2;
        top: 0; left: 0; right: 0; bottom: -1px;
        background-image: url(../svg/videoMask.svg);
        background-position: center center;
        background-size: cover;
        transform: scale(7);
        transition: transform 1s variables.$easeInOutExpo;
    }

    &--masked{
        .video_mask{
            transform: scale(1);
        }
    }
    &--greyscale{
        // video{
        //     filter: grayscale(100%);
        // }
        .video_overlay{
            opacity: 0.6;
        }
    }
}
