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

.header{
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: variables.$cGreyLighter;
    overflow: hidden;

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

    &.pSection{
        @include mixins.respondTo('xs'){
            min-height: 100vh;
            min-height: calc(var(--vh, 1vh) * 100);
        }
    }

    &_action{
        position: absolute;
        z-index: 4;
        top: 0; left: 0; right: 0; bottom: 0;

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

    .container{
        position: relative;
        z-index: 5;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 25vh;
        padding-bottom: 12vh;
        pointer-events: none;

        @include mixins.respondTo('xs'){
            justify-content: flex-end;
            pointer-events: all;
            padding-bottom: 60px;
        }
    }

    .sectionTitle{
        max-width: mixins.vwCol(8);
        margin-left: math.div(variables.$containerWidth, variables.$gridColsNb);
        pointer-events: none;

        @include mixins.respondTo('md'){
            max-width: mixins.vwCol(9);
        }

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

        @include mixins.respondTo('xs'){
            max-width: none;
            margin-left: 0;
            pointer-events: all;
        }
        
        .sectionTitle_footer{
            min-height: auto;
        }

        a{
            position: relative;
            z-index: 10;
            pointer-events: all;
        }
    }

    &_download{
        position: relative;
        z-index: 5;
        pointer-events: all;
        margin-top: 2vh;

        &--withQuote{
            margin-left: 8.2vw;
        
            @include mixins.respondTo('md'){
                margin-right: 0;
            }
            
            @include mixins.respondTo('xs'){
                margin-left: 0;
                margin-right: 0;
            }
        }
    }

    .sectionQuote{
        opacity: 0;

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

    &_cover{
        position: absolute;
        z-index: 1;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: variables.$cPrimary;

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

        &_background{
            position: absolute;
            z-index: 0;
            top: 0; left: 0; right: 0; bottom: 0;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            filter: grayscale(100%);
        }

        &_logo{
            position: absolute;
            top: -300px;
            left: 65vw;
            color: variables.$cPrimary;
            mix-blend-mode: lighten;
            z-index: 1;
            transition: top 0.8s variables.$Power4EaseInOut;
        }
    }

    &_behind{
        position: absolute;
        z-index: 0;
        top: 0; left: 0; right: 0; bottom: 0;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        filter: grayscale(100%);

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

            @include mixins.respondTo('xs'){
                background-color: variables.$cDark;
                opacity: 0.5;
            }
        }
    }
    
    &--withCover{
        &.animated{
            .header_cover{
                clip-path: inset(0 0 0 0);
                animation: animated 0.8s forwards;
                animation-timing-function: variables.$Power4EaseInOut;

                @include mixins.respondTo('md'){
                    animation: animatedMd 0.8s forwards;
                    animation-timing-function: variables.$Power4EaseInOut;
                }

                &_logo{
                    top: 45%;
                }
            }
        }
    }

    &_empty{
        position: absolute;
        width: mixins.vwCol(10);
        bottom: 10%; left: 32%;
        border: 2px solid color.adjust(#FFF, $alpha: -0.4);

        &::before{
            content: "";
            display: block;
            padding-top: 67%;
        }

        span{
            &::before, &::after{
                content: "";
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
            }

            &::before{
                background: linear-gradient(to top right, transparent calc(50% - 2px), color.adjust(#FFF, $alpha: -0.4), transparent calc(50% + 2px) )
            }
    
            &::after{
                background: linear-gradient(to bottom right, transparent calc(50% - 2px), color.adjust(#FFF, $alpha: -0.4), transparent calc(50% + 2px) )
            }
        }

    }

    .mobileHeaderButton{
        display: none;
        margin-top: 60px;

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

            svg{
                width: 30px;
                height: 69px;
                stroke: #FFF;
                stroke-width: 4px;
            }
        }
    }
}


@keyframes animated {
    100% {
        clip-path: inset(15% 11.9% 15% 55.6%);
    }
}
@keyframes animatedMd {
    100% {
        clip-path: inset(15% 7% 15% 60.5%);
    }
}