@font-face {
    font-family: 'Maligne';
    src: url("../assets/fonts/Maxitype Maligne/MaligneUnlicensedTrial-Variable.woff2");
}

/* ------------- FONT : PPKyoto ----------------*/

@font-face {
    font-family: 'PPKyoto';
    src: url(../assets/fonts/PPKyoto/PPKyoto-Thin.otf);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'PPKyoto';
    src: url(../assets/fonts/PPKyoto/PPKyoto-ThinItalic.otf);
    font-style: italic;
    font-weight: 100;
}

@font-face {
    font-family: 'PPKyoto';
    src: url(../assets/fonts/PPKyoto/PPKyoto-Light.otf);
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'PPKyoto';
    src: url(../assets/fonts/PPKyoto/PPKyoto-LightItalic.otf);
    font-style: italic;
    font-weight: 300;
}

@font-face {
    font-family: 'PPKyoto';
    src: url(../assets/fonts/PPKyoto/PPKyoto-Medium.otf);
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'PPKyoto';
    src: url(../assets/fonts/PPKyoto/PPKyoto-MediumItalic.otf);
    font-style: italic;
    font-weight: 500;
}

@font-face {
    font-family: 'PPKyoto';
    src: url(../assets/fonts/PPKyoto/PPKyoto-Extrabold.otf);
    font-style: normal;
    font-weight: 800;
}

@font-face {
    font-family: 'PPKyoto';
    src: url(../assets/fonts/PPKyoto/PPKyoto-ExtraboldItalic.otf);
    font-style: italic;
    font-weight: 800;
}

/* ------------- FONT : KALAM ----------------*/
@font-face {
    font-family: 'Kalam';
    src: url(../assets/fonts/Kalam/Kalam-Light.ttf);
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Kalam';
    src: url(../assets/fonts/Kalam/Kalam-Regular.ttf);
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Kalam';
    src: url(../assets/fonts/Kalam/Kalam-Bold.ttf);
    font-style: normal;
    font-weight: 700;
}

:root {

    --color-dark-blue: #2d304f;
    --color-very-dark-blue: #111c27;
    --color-dark-blue-transparent: color-mix(in oklab, var(--color-dark-blue) 90%, transparent);
    --color-dark-blue-very-transparent: color-mix(in oklab, var(--color-dark-blue) 60%, transparent);


    /* opaque cover shown over the voyager viewport during scene transitions */
    --scene-backdrop: radial-gradient(#333f4c, #02070c);

    --color-whitish: white;
    --color-grey: #dbe9ea;
    --color-dark-grey: #39465a;

    --color-accent: #9e4a2d;
    /*#c5512a;*/
    --color-brown-orange: #9e4a2d;
    --color-orange: #ff7c38;

    --color-text-light: white;

    --shadow-default: 2px 4px 6px #0000006d;

    --button-corner-radius: 3px;

    --animation-duration: 0.25s;
    animation-duration: var(--animation-duration);

    font-family: "PPKyoto", sans-serif;
}

body {
    /*otherwise height:100vw causes an overflow*/
    margin: 0;
    padding: 0;
    background-color: var(--color-dark-blue);
}

main {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(24, 1fr);
    height: 100vh;
    background-color: var(--color-dark-blue);
    overflow: hidden;

    --unit-vertical: calc(100vh/24);
    --unit-horizontal: calc(100vw/24);

}

#ecorpusContainerId {
    z-index: 0;
    grid-column: 1/-1;
    grid-row: 1/-1;
}

#backdropBlurId {
    grid-column: 1/-1;
    grid-row: 1 /-1;
    z-index: 8;
    /*backdrop-filter: blur(5px);*/
}


button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    border: solid 5px var(--color-whitish);
    border-radius: var(--button-corner-radius);

    color: var(--color-whitish);
    background-color: var(--color-dark-blue);

    font-family: "Maligne", sans-serif;
    font-size: var(--font-size-2);
    line-height: var(--line-height-2);
    letter-spacing: var(--letter-space-2);
    font-weight: 500;
    text-wrap: balance;
    text-wrap: pretty;
}

.simpleButton {
    z-index: 11;
    justify-content: center;
    overflow: hidden;
}

svg {
    stroke-linecap: square;
    stroke-linejoin: round;
}

/* --------- LOGOS -------------*/
/* 
#logosId {
    pointer-events: none;
    grid-column: 11/13;
    grid-row: 11/13;
    z-index: 7;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    opacity: 80%;

    .logo {
        filter: brightness(0) invert(1) drop-shadow(2px 4px 6px #00000098);
        height: 7vh;
    }

    .logo_lille {
        height: 9vh;
    }
} */

/* ---------- TOOLTIPS ---------- */
.tooltip {
    color: var(--color-dark-blue);
    position: absolute;
    background-color: var(--color-whitish);
    font-size: 1.3rem;
    padding: 6px 12px;
    max-width: 30em;
    border: var(--color-dark-blue) solid 2px;
    width: fit-content;
    z-index: 20;
    position-area: end;
    animation: fade-in var(--animation-duration) ease-in;
    min-width: 15rem;
}

.tooltip-text {
    border-bottom: 2px dotted var(--color-accent);
    cursor: help;
}

/* tool tip shrink wrap - ideas comming from https://kizu.dev/shrinkwrap-problem/*/
@supports (anchor-name: --tooltip-text) {
    .tooltip {
        background: none;
        border: none;

        &>span {
            anchor-name: --tooltip-text;
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0px calc(anchor(inside) - 12px);
            border: var(--color-dark-blue) solid 2px;
            position-anchor: --tooltip-text;
            background: var(--color-whitish);
            z-index: -1;
        }
    }
}


/*----------------- TRANSITION ANIMATION ---------------*/
.fade-in-delayed {
    animation: fade-in-delayed calc(var(--animation-duration) *2) ease-in;
    opacity: 1;

    &#historyPage,
    &#zodiacRangeContainer {
        animation: '';
        opacity: 1;
    }
}

.fade-in {
    animation: fade-in var(--animation-duration) ease-in;
    opacity: 1;


    &#historyPage,
    &#zodiacRangeContainer {
        animation: '';
        opacity: 1;
    }
}


.fade-out {
    animation: fade-out var(--animation-duration) ease-out;
    opacity: 0;

    &#zodiacRangeContainer {
        animation: '';
        opacity: 1;
    }
}

@keyframes fade-in-delayed {
    0% {
        opacity: 0;
        display: none;
    }

    50% {
        opacity: 0;
        display: none;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        display: none;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        display: none;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    /* from {
        opacity: 1;
    } */

    to {
        opacity: 0;
    }
}



/*----------------- SCENE LOADING INDICATOR ---------------*/
/*
 * Three breathing dots, shown while a scene is being loaded.
 *
 * Both surfaces drive it the same way: the `sceneLoading` class on <body>. The main page
 * toggles it alongside the transition backdrop (raiseBackdrop / clearBackdrop in main.js);
 * the object pop-up, which has no backdrop, toggles it by hand in object.js.
 *
 * Either way `loader-timeout` fades the dots out for good after a while, so a missed
 * "scene loaded" event can never leave them pulsing forever in front of a visitor.
 */
#sceneLoaderId {
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 9;

    /* not merely transparent: while idle the dots hold no animation at all,
       so each new scene change restarts them from their first frame */
    display: none;
    gap: 1.5vh;
    pointer-events: none;
}

body.sceneLoading #sceneLoaderId {
    display: flex;
}

#sceneLoaderId span {
    width: 1.6vh;
    height: 1.6vh;
    border-radius: 50%;
    corner-shape: bevel;
    background-color: var(--color-whitish);

    /* hidden until the delay of the first animation has elapsed: quick scene
       switches never get the chance to flash it */
    opacity: 0;
    animation:
        loader-pulse 1s ease-in-out 0.5s infinite,
        loader-timeout 1s ease-out 10s forwards;
}

/* the offsets are what makes it read as a wave rather than a blink */
#sceneLoaderId span:nth-child(2) {
    animation-delay: 0.65s, 10s;
}

#sceneLoaderId span:nth-child(3) {
    animation-delay: 0.8s, 10s;
}

@keyframes loader-pulse {

    0%,
    100% {
        opacity: 0.5;
        scale: 0.7;
    }

    50% {
        opacity: 0.75;
        scale: 1.1;
    }
}

/* last one wins over loader-pulse for the properties it sets */
@keyframes loader-timeout {
    to {
        opacity: 0;
        visibility: hidden;
    }
}



/* --------- FULL SCREEN IMAGES -------------*/

#fullScreenImageId {
    z-index: 25;
    background-color: transparent;
    grid-column: 3/23;
    grid-row: 3/23;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;

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

#overlayArticleBlur {
    &.overEverythingBlur {
        z-index: 21;
    }
}


/* ------------ Tour article common ------------ */

.toursArticleContainer {
    background-color: var(--color-dark-blue-transparent);
    padding: calc(100vw/96);
    color: var(--color-whitish);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-whitish) transparent;
    z-index: 4;
    .closeArticleButton {
        position: fixed;
        top: calc(200vh / 12 + 0.2rem);
        left: auto;
        right: 0.2rem;
    }
}

.articleContainer{

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

    figure[data-scene] {
        img {
            border: 3px solid var(--color-accent);
        }
    }

    figcaption {
        font-size: 1rem;
    }

    h1 {
        max-width: calc(100% - 100vw/96);
        /*To not overlap with the close button*/
        font-family: "Maligne", sans-serif;
        font-size: var(--font-size-3);
        line-height: var(--line-height-3);
        letter-spacing: var(--letter-space-3);
        font-weight: 575;
    }

    h2 {
        font-family: 'Maligne';
        font-weight: 550;
        font-size: var(--font-size-2);
    }

    font-size: var(--font-size-1);
    line-height: var(--line-height-1);
    letter-spacing: var(--letter-space-1);
    user-select: none;

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

/* 
.borderVerticalImage {
    border-image-slice: 15 24 15 24;
    border-image-width: 15px 24px 15px 24px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round round;
    border-image-source: url(../assets/border-images/brique_vertical_borders_4.png);
    border-style: solid;
    width: calc(15px * 3 + 24px * 2);
    height: calc(24px * 3 + 30px);
} */


/* ------------------------------
 | METRIC TYPE SCALE
 | ------------------------------
 | Lets you create font sizes as precise multiples of a chosen unit,
 | making it ideal for projects that need a structured, consistent approach.
 |
 | BASE VALUES:
 | - Font Size: 16px / 1rem
 | - Line Height: 24px / 1.5
 | - Letter Spacing: 3.5% / 0.035em
 |
 | SCALE:
 | - Module Size: 2px / 0.125rem
 | - Step Unit: 2px / 0.125rem
 |
 | LINE GRID:
 | - Grid Unit: 4px / 0.25rem
 |
 |
 | Created with Precise Type / https://precise-type.com
 | Tools & Models by Adonis Raul Raduca
 */

/* --- Font Sizes --- */

:root {
    /* below the base */
    --font-size-2b: 0.75rem;
    --font-size-1b: 0.875rem;

    /* the base */
    --font-size: 1rem;

    /* above the base */
    --font-size-1: 1.125rem;
    --font-size-2: 1.375rem;
    --font-size-3: 1.625rem;
    --font-size-4: 2rem;
    --font-size-5: 2.375rem;
    --font-size-6: 2.875rem;
    --font-size-7: 3.375rem;
    --font-size-8: 4rem;
    --font-size-9: 4.625rem;
}

/* --- Line Heights --- */

:root {
    /* below the base */
    --line-height-2b: 1.6667;
    --line-height-1b: 1.7143;

    /* the base */
    --line-height: 1.5;

    /* above the base */
    --line-height-1: 1.5556;
    --line-height-2: 1.4545;
    --line-height-3: 1.3846;
    --line-height-4: 1.25;
    --line-height-5: 1.2632;
    --line-height-6: 1.2174;
    --line-height-7: 1.1852;
    --line-height-8: 1.125;
    --line-height-9: 1.1351;
}

/* --- Letter Spacings --- */

:root {
    /* below the base */
    --letter-space-2b: 0.0567em;
    --letter-space-1b: 0.0443em;

    /* the base */
    --letter-space: 0.035em;

    /* above the base */
    --letter-space-1: 0.0278em;
    --letter-space-2: 0.0173em;
    --letter-space-3: 0.01em;
    --letter-space-4: 0.0025em;
    --letter-space-5: -0.0026em;
    --letter-space-6: -0.0074em;
    --letter-space-7: -0.0107em;
    --letter-space-8: -0.0137em;
    --letter-space-9: -0.0159em;
}