/* ---------- Language Menu ---------- */
main {
    --button-size: calc(1.7*var(--unit-vertical));
}


.smallButton {
    display: flex;
    width: var(--button-size);
    height: var(--button-size);
    font-size: calc(var(--button-size)/2.8);
    border-radius: 49%;

    justify-content: center;
    align-items: center;
    background-color: transparent;

    corner-shape: bevel;

    font-weight: 600;
    font-family: "Maligne", sans-serif;

    /* border: solid 2px var(--color-accent-1) ;
        color: var(--color-dark-blue); */
    img {
        height: 100%;
        filter: drop-shadow(var(--shadow-default));

    }

}

.navContainer {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
}

#languageSelectionContainer {
    grid-column: 2/6;
    grid-row: 2/4;
    z-index: 15;
}

#languageSelectionId {
    input[type="radio"] {
        /* Add if not using autoprefixer */
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }

    label {
        border: solid 5px var(--color-whitish);
        color: var(--color-whitish);
        background-color: var(--color-dark-blue-transparent);
        box-sizing: border-box;
        margin-right: calc(var(--unit-vertical)/2);
    }


    input[type="radio"]:not(:checked)+label {
        animation: languages-background-deactivate var(--animation-duration) ease-out;
    }

    input[type="radio"]:checked+label {
        animation: languages-background-activate var(--animation-duration) ease-out;
        background-color: var(--color-whitish);
        color: var(--color-dark-blue);
    }
}

@keyframes languages-background-activate {
    from {
        background-color: var(--color-dark-blue-transparent);
    }

    to {
        background-color: var(--color-whitish);
    }
}

@keyframes languages-background-deactivate {
    from {
        background-color: var(--color-whitish);
    }

    to {
        background-color: var(--color-dark-blue-transparent);
    }
}

#helpAndOtherPagesContainer {
    grid-column: 20/-2;
    grid-row: 2/4;
    display: grid;
    justify-self: right;
    color: var(--color-dark-blue);

    svg {
        height: 85%;
        width: 85%;
    }


    button {
        z-index: 15;
        padding: 0;
        font-size: calc(var(--button-size)/2);
        margin-left: calc(var(--unit-vertical)/2);

    }

    #mainMenuButtonId {
        z-index: 15;
    }

    .smallButton {
        box-shadow: none;
    }

    #skipVideoButtonId {
        grid-column: 1/3;
        grid-row: 1;
        border: none;
        border-radius: calc(var(--button-size)/2);
        width: 100%;
        font-size: var(--font-size-3);
        border-radius: 0;
        height: 75%;
        padding-left: calc(var(--unit-horizontal) / 2);
        border: solid 3px;
        z-index: 20
    }
}



/* ---------- main Menu Section  ---------- */

#logoNouveauChapitreId {
    grid-column: 8/18;
    grid-row: 3/12;
    max-width: 100%;
    z-index: 12;
    user-select: none;
}

#NouveauChapitreIllustrationId {
    grid-column: 13/-1;
    grid-row: 9/-1;
    z-index: 12;
    user-select: none;
    position: relative;

    img {
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        bottom: -1vh;
        right: -0.5vh;
    }
}

#logoId {
    grid-row: 2 / 4;
    grid-column: 22 / 23;
    z-index: 12;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin-inline-end: calc(0.25*var(--button-size));

    .logo {
        height: var(--button-size);
        filter: invert(100%) brightness(2);
    }
}

#backdropId {
    grid-row: 1/-1;
    grid-column: 1/-1;
    background-color: var(--color-dark-blue);
    z-index: 1;
}

.currentmainMenuPage #backdropId {
    z-index: 10;
}

.mainMenuNav {
    grid-column: 2/12;
    grid-row: 14/25;
    z-index: 15;
    background-color: transparent;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--unit-vertical));
    color: var(--color-whitish);
    font-family: 'Maligne', sans-serif;

    button {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin: 0;
        padding: 0;

        div {
            text-align: left;
            margin: 0;
            width: 74%;
        }

        h3 {
            margin: 0;
            padding: 0;
            font-size: var(--font-size-6);
            line-height: var(--line-height-6);
            letter-spacing: var(--letter-space-6);
            font-weight: 500;
        }

        svg {
            transform: scale(4.4);
        }

        &:first-of-type {
            background-color: var(--color-whitish);
            color: var(--color-dark-blue);
            height: calc(var(--unit-vertical)*2);
        }

        &:nth-of-type(2) {
            height: calc(var(--unit-vertical)*3);
        }
    }

}

/* ----------- OVERLAY ARTICLES -----------*/
/* For credits, help*/
#overlayArticleBlur {
    grid-column: 1/25;
    grid-row: 1 /25;
    z-index: 18;
    backdrop-filter: blur(5px);
    background-color: var(--color-dark-blue-very-transparent);
}

.closeArticleButton {
    --height-close-button: 3em;
    position: sticky;
    z-index: 7;
    top: 0;
    left: 100%;
    height: var(--height-close-button);
    width: var(--height-close-button);
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(var(--shadow-default));

    svg {
        width: inherit;
        height: inherit;
        fill: #a0a0a0;
    }
}

.overlayArticle {
    grid-column: 6/20;
    grid-row: 4/22;
    z-index: 19;
    display: block;
    padding-top: 0.5em;


    .closeArticleButton {
        padding-right: 0.5em;
    }

    h1{
        font-size: var(--font-size-5);
        line-height: var(--line-height-5);
        letter-spacing: var(--letter-space-5);
    }
    h2{
        font-size: var(--font-size-3);
        line-height: var(--line-height-3);
        letter-spacing: var(--letter-space-3);
    }
}

.articleContainer {

    .article {
        margin: 0 10em 2em 10em;
    }

    background-color: var(--color-dark-blue);
    scrollbar-color: var(--color-whitish) transparent;
    /* 
    h1:before {
        background-color: var(--color-accent);
    } */


    overflow-y: auto;
    color: var(--color-whitish);
    /* 
    h1 {
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 75px;
            height: 5px;
            /*background-color: var(--color-accent-1);*/
    /*}

        margin: 0.3em 0;
        padding-top: 0.3em;
        /*font-family: "Amiri",
        serif;*/
    /*
        font-size: 2.3em;
        font-weight: normal;
        position: relative;
        /*For positionning before pseudo-element*/
    /*} */

    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 1.3em;
        margin: 1.2em 0 0.8em 0;
    }

    .article>p {
        font-size: 1.2em;
        margin: 0.8em 0;
        line-height: 1.55em;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    scrollbar-width: thin;
}



/* -------- Side article ------------------*/

#toursArticleContainerId {
    grid-column: 19/25;
    grid-row: 5 / 24;
    z-index: 4;
}

/* -------- Voyager Fade between scenes ------------------*/

.fadeOutVoyagerSceneChange {
    background: var(--scene-backdrop);
    animation: fade-in var(--animation-duration) ease-in;
}

.fadeInVoyagerSceneChange {
    background: var(--scene-backdrop);
    animation: fade-out var(--animation-duration) ease-in;
    opacity: 1;
}

/* ------------ History Page --------------*/

#timeline {
    z-index: 9;
    grid-row: 21/23;
    grid-column: 2/19;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    margin: 0;
    padding: 0;
    position: relative;
    filter: drop-shadow(2px 2px var(--color-very-dark-blue));


    button {
        z-index: 1;
        position: relative;
        display: flex;
        text-align: center;
        margin-block: auto;
        flex-grow: 1;
        flex-direction: column;
        align-items: center;
        justify-content: stretch;
        font-size: var(--font-size-4);
        line-height: var(--line-height-4);
        letter-spacing: var(--letter-space-4);
        border-radius: 0;
        border-style: inherit;
        background-color: transparent;
        -webkit-text-stroke: var(--color-very-dark-blue) 1px;
        paint-order: stroke;

        .smallButton {
            --button-size: calc(var(--unit-vertical));
            border: solid 4px;
            position: fixed;
            bottom: calc(var(--unit-vertical)*-1 - 2px);
            background-color: var(--color-very-dark-blue);
            transition: background-color 0.75s,
        }


        &:last-of-type {
            /* font-size: var(--font-size-2);
            line-height: var(--line-height-2);
            letter-spacing: var(--letter-space-2); */
        }
    }

    button.current_step {
        /* border-image-source: url(../assets/border-images/brique_vertical_borders_4_selected.png); */
        color: white;

        .smallButton {
            background-color: white;
        }
    }
}

#timeLineId {
    border-bottom: solid 4px white;
    position: fixed;
    bottom: calc(var(--unit-vertical) * -0.5);
    width: calc(16.5 * var(--unit-horizontal));
}

.timelineEnd {
    box-sizing: border-box;
    border-image-repeat: repeat round;
}

#timelineLeftEnd {
    /* border-image-source: url(../assets/border-images/brique_vertical_borders_4_left_end.png); */
    width: calc(48px * 3);
}

#timelineRightEnd {
    /* border-image-source: url(../assets/border-images/brique_vertical_borders_4_right_end.png); */
    width: calc(48px * 3);
}


#stepsButtonsContainerId {
    grid-row: 5 / 21;
    grid-column: 2/5;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(2 * var(--unit-vertical));
    justify-content: center;


    button {
        width: 100%;
        min-height: calc(var(--unit-vertical)*2);
        text-align: left;
        padding-left: calc(var(--unit-horizontal)/4);

        span {
            width: 90%;
        }

        svg {
            transform: scale(2.6);
            /* height: 33%; */
            width: 33%;
        }
    }
}


button.current_step {
    background-color: var(--color-whitish);
    color: var(--color-dark-blue);
}

#historyPageTitle {
    grid-row: 2/4;
    grid-column: 6/18;
    z-index: 6;
    display: flex;
    align-content: center;
    justify-content: center;
    font-family: "Maligne", sans-serif;
    font-size: var(--font-size-6);
    line-height: var(--line-height-6);
    letter-spacing: var(--letter-space-6);
    margin: 0;
    color: var(--color-whitish);
    font-weight: 500;
    text-align: center;
    -webkit-text-stroke: var(--color-very-dark-blue) 1px;
    paint-order: stroke;
    text-shadow: 2px 2px var(--color-very-dark-blue);
}


/* ----------------- Clickable objects ----------*/
main {
    --text-click-3D-model: "Cliquer pour voir l'objet !"
}

.toursArticleContainer {

    figure[data-scene] {
        &::before {
            content: var(--text-click-3D-model);
            color: var(--color-accent);
            font-family: "Kalam";
            position: fixed;
            position-anchor: --clickable-object;
            bottom: calc(anchor(bottom) + 0.3rem);
            left: calc(anchor(left) + 1rem);
            font-size: var(--font-size-1);
            line-height: var(--line-height-1);
            letter-spacing: var(--letter-space-1);
        }

        >img {
            border-width: 0.33rem;
            anchor-name: --clickable-object;
        }
    }
}

/*-------- History introduction -----------*/
/*
#introGoButton {
    grid-row: 21/23;
    grid-column: 10/14;
    background-color: var(--color-accent);
    color: var(--color-dark-blue);
}

.captionBloc {
    z-index: 5;
    grid-row: 19/24;
    grid-column: 2/5;

    background-color: var(--color-dark-blue);
    border: var(--color-whitish);
    border-width: 0.33rem;
    corner-shape: scoop;
    border-radius: 1.33rem;
    border-style: solid;
    color: var(--color-whitish);

    h2 {
        width: 100%;
        text-align: center;
        font-family: 'Cinzel';
    }

    .captionItem {
        margin-inline: 1rem;
        display: flex;
        gap: 1rem;
        margin-block: 1rem;
    }

    .legendText {
        font-size: var(--font-size-1);
        line-height: var(--line-height-1);
        letter-spacing: var(--letter-space-1);
    }

    .colorBloc {
        background-color: var(--bloc-color);
        width: 3rem;
        height: 1.5rem;
    }
}
*/
/* ----------- Pop up scene --------------*/

#popupSceneContainer {
    grid-column: 3/23;
    grid-row: 3/23;
    position: relative;

    iframe {
        width: 100%;
        height: 100%;
        border: none;
        position: absolute;
        top: 0;
        left: 0;
    }
}

/* ----------- Scroll page --------------*/
/*
#scrollPageSideBar {
    z-index: 4;
    grid-row: 1/25;
    grid-column: 19/25;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: 1fr;
    padding-block: 0;
    padding-right: 0;
}

#tourTextContainer {

    overflow-y: auto;
    grid-row: 5/25;
    mask-image: linear-gradient(to bottom, transparent, white 1%);

    &>*+* {
        margin-block-start: var(--prose-flow, 1em);
        /*1em depend on the font size. At the top to group the titles with related content */
/*}

    >div {
        min-height: 30vh;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-inline: 1rem;
        border-left: 0.25rem solid transparent;
        border-bottom: 0.25rem solid transparent;
        box-sizing: border-box;

        /* h1 {
            margin-top: 1rem;
            margin-bottom: 1rem;
            position: relative;

            &::before {
                content: "";
                background-color: transparent;
                margin-left: -1rem;
                margin-top: -3px;
                margin-bottom: -3px;
                height: calc(100% + 6px);
                border-width: 0;
                display: block;
                position: absolute;
                width: calc(1rem - 3px);
            }

            span {
                outline: 3px transparent solid;
            } */


/*
        h1 {
            margin-top: 1rem;
            margin-bottom: 1rem;
            position: relative;

            &::before {
                content: "";
                background-color: transparent;
                margin-left: -1rem;
                margin-top: -3px;
                margin-bottom: -3px;
                height: calc(100% + 6px);
                border-width: 0;
                display: block;
                position: absolute;
                width: calc(1rem - 3px);
            }

            span {
                outline: 3px transparent solid;
            }
        }

        /* border: 2px var(--color-ochre) solid; */
/*
        &::after {
            content: '';
            display: block;
            align-self: center;
            border: var(--color-whitish) 3px solid;
            flex-grow: 1;
            corner-shape: bevel;
            border-radius: 48%;
            width: 1rem;
            height: 1rem;
        }

        /* &:nth-last-child(2) {
            &::after {
                content: none;
            }
        } */
/*

        &.current {
            border-color: var(--color-whitish);
            transition: border 0.75s;

            /* size of the corners */
/*
            mask: conic-gradient(#e51313 0 0) padding-box,
                conic-gradient(at top calc(1rem - 3px) left 0.25rem, transparent 180deg, black 180deg, black 270deg, transparent 270deg);

            h1 {
                span {
                    background-color: var(--color-whitish);
                    color: contrast-color(var(--color-whitish));
                    outline: 3px var(--color-whitish) solid;
                    transition: background-color 0.75s,
                        outline-color 0.75s;
                    padding-block: 2px;
                    position: relative;
                    top: 1px;
                }

                &::before {
                    transition: background-color 0.75s;
                    background-color: var(--color-whitish);
                }
            }

        }


        &#scrollMarginDiv {
            height: 50%;

            &::after {
                content: none;
            }
        }
    }

}
*/

/* --------- VIDEO PAGES -------------*/

.videoPage {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    z-index: 16;
    background-color: black;
    overflow: hidden;

    video {
        height: 100%;
        width: 100%;
    }
}


/* --------------   HELP ANIMATIONS  ----------*/

:root {
    /*All animation should be in ms to be parsed properly js side for reset */
    --help-animation-duration: 1000ms;
    --animation-initial-delay: 10000ms;
    /*Used JS side to delay the first animation*/
    --animation-loop: 5000ms;
    /*Used JS side to determine when to reset the application*/
    --step-index: 0;
    --animation-step-interval: 350ms;
}

.help-animation {
    --animation-duration: var(--help-animation-duration);

    &.mainMenuNav {
        --animation-initial-delay: 0;

        button svg {
            --animation-translation: 15px;
            animation-name: jiggle;
            animation-timing-function: linear(0, 0.739 6.1%, 0.912 8.8%, 0.954 10.1%, 0.967 11.4%, 0.954 12.7%, 0.916 14%, 0.751 16.9%, -0.304 29%, -0.446 31.8%, -0.511 34.5%, -0.517 35.7%, -0.509 37%, -0.455 39.6%, 0.035 51.2%, 0.126 54.4%, 0.171 57.5%, 0.178 59.9%, 0.164 62.5%, 0.025 72.8%, -0.017 78.2%, -0.023 82.8%, -0.004 93%, 0);
            animation-duration: var(--animation-duration);
            animation-delay: calc(var(--step-index, 0) * var(--animation-step-interval));
        }
    }
}

body:not(.hasClickedOnSteps) {

    /* #stepsButtonsContainerId.help-animation button {
        animation: scaleOut 1000ms ease-in-out alternate 2;
        animation-delay: calc(var(--step-index, 0) * 500ms);
    } */
    #stepsButtonsContainerId.help-animation button>svg {
        --animation-duration: 600ms;
        --animation-loop: 7000ms;
        /*Used JS side to determine when to reset the application*/
        animation-duration: var(--animation-duration);
        animation-delay: calc(var(--step-index, 0) * var(--animation-step-interval));
        animation-name: jiggle;
        animation-timing-function: linear(0, 0.739 6.1%, 0.912 8.8%, 0.954 10.1%, 0.967 11.4%, 0.954 12.7%, 0.916 14%, 0.751 16.9%, -0.304 29%, -0.446 31.8%, -0.511 34.5%, -0.517 35.7%, -0.509 37%, -0.455 39.6%, 0.035 51.2%, 0.126 54.4%, 0.171 57.5%, 0.178 59.9%, 0.164 62.5%, 0.025 72.8%, -0.017 78.2%, -0.023 82.8%, -0.004 93%, 0);
    }
}



body.hasClickedOnLastStep:not(.hasClickedOnTimeline) {
    #timeline.help-animation .smallButton {
        /* --scale-animation-factor: 1.15; */
        /* animation: scaleOut 300ms cubic-bezier(0.96, 0.02, 0.63, 1) alternate 2; */
        /* animation-name: scaleOut; */
        /* animation-duration: 600ms; */
        /* animation-timing-function: linear(0, 0.409 5.7%, 0.68 10.7%, 0.838 15.5%, 0.877 17.9%, 0.89 20.3%, 0.883 22.1%, 0.862 24%, 0.775 28.1%, 0.103 46.8%, -0.03 51.9%, -0.11 56.9%, -0.142 61.2%, -0.143 65.9%, -0.124 70.2%, -0.021 86%, -0.004 92.1%, 0); */
        /* animation: scaleOut 600ms linear(0, 0.409 5.7%, 0.68 10.7%, 0.838 15.5%, 0.877 17.9%, 0.89 20.3%, 0.883 22.1%, 0.862 24%, 0.775 28.1%, 0.103 46.8%, -0.03 51.9%, -0.11 56.9%, -0.142 61.2%, -0.143 65.9%, -0.124 70.2%, -0.021 86%, -0.004 92.1%, 0); */
        animation-duration: var(--animation-duration);
        animation-delay: calc(var(--step-index, 0) * var(--animation-step-interval));
        animation-name: quaterTurn;

        /* animation-duration: 1400ms; */
        /* animation-timing-function: linear(0, 0.01 0.7%, 0.046 1.5%, 0.192 3.2%, 0.391 4.8%, 0.954 8.8%, 1.201 11%, 1.347 13%, 1.388 14%, 1.41 15.1%, 1.411 15.9%, 1.4 16.8%, 1.342 18.6%, 1.256 20.3%, 1.013 24.5%, 0.913 26.7%, 0.857 28.6%, 0.831 30.6%, 0.833 32.1%, 0.851 33.7%, 1.024 41.6%, 1.055 43.8%, 1.069 46%, 1.061 49.3%, 0.991 57.1%, 0.972 61.4%, 0.974 64.8%, 1.011 76.7%, 0.996 91.2%, 1); */
        --animation-duration: 1200ms;
        animation-timing-function: linear(0, 0.01 0.8%, 0.044 1.7%, 0.17 3.5%, 0.861 9.9%, 1.092 12.5%, 1.236 15%, 1.275 16.2%, 1.298 17.5%, 1.301 19.2%, 1.274 21%, 1.222 23%, 1.056 27.9%, 0.988 30.3%, 0.935 33%, 0.91 35.8%, 0.917 39.5%, 1.003 48.7%, 1.027 54%, 1.025 57.9%, 0.992 72%, 1);
    }
}


@keyframes quaterTurn {
    from {
        rotate: 0;
    }

    to {
        rotate: 90deg;
    }
}

@keyframes jiggle {
    to {
        translate: var(--animation-translation, 10px);
    }
}