:root {
    --anim_one_duration: 500ms; /* texte HURIA zoom + fadein */
    --anim_one_wait: 500ms;

    --anim_two_wait: 1000ms;
    --anim_two_duration: 1000ms; /* logo fadein + barres texte HURIA */

    --anim_three_wait: 2000ms;
    --anim_three_duration: 2000ms; /* soustexte fadein + transition background */

    --anim_four_wait: 4000ms;
    --anim_four_duration: 1000ms; /* soustexte fadein + transition background */
}
@keyframes opacity-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes width-grow {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}
@keyframes width-grow-color {
    0% {
        background-color: var(--lof-COLORS-dark_blue);
    }
    100% {
        background-color: var(--lof-COLORS-primary);
    }
}
@keyframes transform-scale-to-one {
    0% {
        transform: scale(0.75);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes outerglow {
    0% {
        filter: drop-shadow(0px 0px 0px var(--lof-COLORS-primary));
    }
    100% {
        filter: drop-shadow(0px 0px 5px var(--lof-COLORS-primary));
    }
}
@keyframes slide-from-bottom {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}
#page.home .homepage_zone:nth-of-type(odd) {
        background-color: var(--lof-COLORS-dark_blue);
        color: white;
    }
:is(#page.home .homepage_zone:nth-of-type(odd)) .header-with-hr:after {
            background-color: var(--lof-COLORS-primary);
        }
#page.home .homepage_zone:nth-of-type(even) {
        background-color: var(--lof-COLORS-primary);
        color: var(--lof-COLORS-dark_blue);
    }
:is(#page.home .homepage_zone:nth-of-type(even)) .header-with-hr:after {
            background-color: var(--lof-COLORS-dark_blue);
        }
#page.home .homepage_zone:not(#zone-landing) {
        padding-top: 3vh;
        padding-bottom: 3vh;
        padding-left: 3vw;
        padding-right: 3vw;
    }
#page.home #zone-landing {
        overflow: hidden;
        width: 100%;
        height: 100svh;
        background-color: var(--lof-COLORS-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }
:is(#page.home #zone-landing) .bg_overlay {
            overflow: hidden;
            z-index: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--lof-COLORS-dark_blue);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            opacity: 0;
            animation: opacity-fade-in var(--anim_three_duration) ease var(--anim_three_wait);
            animation-fill-mode: forwards;
        }
:is(:is(#page.home #zone-landing) .bg_overlay) .spotlight {
                position: absolute;
                display: block;
                width: 10vw;
                height: 25vw;
                border-radius: 50%;
            }
:is(:is(#page.home #zone-landing) .bg_overlay) .spotlight.bottom {
                bottom: -25vw;
                margin-left: auto;
                margin-right: auto;
                left: 0;
                right: 0;
                box-shadow: 0px 0px 50vw 30vw #00000078;
            }
:is(:is(#page.home #zone-landing) .bg_overlay) .spotlight.topleft,:is(:is(#page.home #zone-landing) .bg_overlay) .spotlight.topright {
                box-shadow: 0px 0px 35vw 35vw #ffffff1a;
                top: 0;
            }
:is(:is(#page.home #zone-landing) .bg_overlay) .spotlight.topleft {
                left: -10vw;
            }
:is(:is(#page.home #zone-landing) .bg_overlay) .spotlight.topright {
                right: -10vw;
            }
:is(#page.home #zone-landing)  > .wrapper {
            margin-left: 5vw;
            margin-right: 5vw;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
:is(:is(#page.home #zone-landing) > .wrapper) .logo {
                height: 8vh;
                filter: drop-shadow(0px 0px 0px var(--lof-COLORS-primary));
                opacity: 0;
                animation: opacity-fade-in var(--anim_two_duration) ease var(--anim_two_wait), outerglow var(--anim_four_duration) ease var(--anim_four_wait);
                animation-fill-mode: forwards;
                margin-bottom: 2vh;
            }
:is(:is(#page.home #zone-landing) > .wrapper) .title {
                position: relative;
                font-size: 1.75em;
                font-weight: 800;
                padding: 1.5vh 2vw;
                letter-spacing: 0.25em;
                transform: scale(0.75);
                opacity: 0;
                animation: transform-scale-to-one var(--anim_one_duration) ease var(--anim_one_wait), opacity-fade-in var(--anim_one_duration) ease var(--anim_one_wait);
                animation-fill-mode: forwards;
                margin-bottom: 2vh;
            }
:is(:is(#page.home #zone-landing) > .wrapper) .title::before,:is(:is(#page.home #zone-landing) > .wrapper) .title::after {
                position: absolute;
                content: '';
                background-color: var(--lof-COLORS-dark_blue);
                height: 2px;
                display: block;
                width: 0%;
                animation: width-grow var(--anim_two_duration) ease var(--anim_two_wait), width-grow-color var(--anim_three_duration) ease var(--anim_three_wait);
                animation-fill-mode: forwards;
            }
:is(:is(#page.home #zone-landing) > .wrapper) .title::before {
                transform: rotate(180deg);
                top: 0;
                left: 0;
            }
:is(:is(#page.home #zone-landing) > .wrapper) .title::after {
                bottom: 0;
                right: 0;
            }
:is(:is(#page.home #zone-landing) > .wrapper) .subtitle {
                opacity: 0;
                animation: opacity-fade-in var(--anim_three_duration) ease var(--anim_three_wait);
                animation-fill-mode: forwards;
                text-align: center;
                letter-spacing: 0.075em;
            }
:is(#page.home #zone-landing) .more {
            position: absolute;
            overflow: hidden;
            bottom: 0;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: center;        
            padding-bottom: 1vh;
            gap: 1vh;
            transform: translateY(100%);
            animation: slide-from-bottom var(--anim_four_duration) ease var(--anim_four_wait);
            animation-fill-mode: forwards;
        }
#page.home #who-we-are {
        position: absolute;
        /*3vh == .zone{ margin top}*/
        top: calc(-1 * var(--menu-height) - 3vh);
        visibility: hidden;
    }
#huria_cest_quoi {
    margin-top: 2vh;
}
#huria_cest_quoi .svg_wrapper {
        top: 4em;
        left: 3em;
        width: 25px;
    }
@media (max-width: 900px) {
        #huria_cest_quoi .svg_wrapper {
            top: 2.3em;
            left: 1em;
            width: 20px;
        }
}