:root {
    --map-gap: 8px;

    --map-item-width: 290px;
    --animation-timing: cubic-bezier(0.196, 0.198, 0.007, 0.933)
}


body {
    overflow: hidden;
    margin: 0;
    padding: 0;

}

main {
    transition: none;

    opacity: 1;
}


img {
    transition: all 0.3s var(--animation-timing);
}


img,
video {
    border-radius: 2px;
}

header:hover+.map-wrapper>.map figure img {
    opacity: 0.3;
    scale: .9;
}


.fullscreen {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 9999;
}

.fullscreen.open {
    opacity: 1;
    pointer-events: auto;
}

.fullscreen picture {
    transform: none !important;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fullscreen picture img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fullscreen picture figcaption {

    margin-top: 0.5rem;
    text-align: center;
}


.map-wrapper {
    animation: starting 1s 1.5s var(--animation-timing) forwards;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    position: relative;
    cursor: grab;
    opacity: 0;


    transition: opacity 0.3s var(--animation-timing), scale 0.3s var(--animation-timing);



    button.list {
        position: relative;
        top: 1rem;
        left: 1rem;
        z-index: 6000;
        color: inherit;
        background: transparent;
        border: none;
        font-size: 1rem;


        box-sizing: border-box;
        display: flex;
        justify-content: center;

        width: calc(100vw - var(--map-gap) * 2 - 1rem);

        &:hover {
            cursor: pointer;
            text-decoration: underline;

        }
    }


    button.close {
        cursor: none !important;

    }

    section.list {
        --color: rgba(255, 255, 255, 0.74);
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        padding: 4rem;
        align-items: center;
        justify-content: flex-start;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5000;
        overflow: scroll;
        outline: 30px solid var(--color);
        background-color: var(--color);
        flex-wrap: nowrap;
        opacity: 1;
        transition: all 0.1s ease-in-out;
        transition-behavior: allow-discrete;

        font-family: "Futura";
        line-height: 1.5;



        /* cursor: none !important; */

        a {

            transition: all 0.3s var(--animation-timing);
        }



        a.active {
            font-variation-settings:
                "wght" 600;
        }

        .custom-cursor {
            position: fixed;
            width: 10px;
            height: 10px;
            z-index: 9999;
            pointer-events: none;
            transform: translate(-50%, -50%);
            transform-origin: center;
            transition: transform 0.2s ease;


        }

        .custom-cursor svg {
            width: 100%;
            height: 100%;
        }

        .cursor-grow {
            transform: translate(-50%, -50%) scale(1.4);
        }

        .custom-cursor.hidden {
            transform: translate(-50%, -50%) scale(0);
        }

        /* cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 5.12 5.11'%3E%3Cpath fill='black' d='M.55 5.11l-.55-.54 2.01-2.02L0 .55l.55-.55 2 2.02L4.57 0l.54.55-2 2 2.01 2.02-.55.54-2.01-2.02L.55 5.11Z'/%3E%3C/svg%3E") 8 8,
        auto;

        img {
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 5.12 5.11'%3E%3Cpath fill='black' d='M.55 5.11l-.55-.54 2.01-2.02L0 .55l.55-.55 2 2.02L4.57 0l.54.55-2 2 2.01 2.02-.55.54-2.01-2.02L.55 5.11Z'/%3E%3C/svg%3E") 8 8, auto;

        } */

        a {
            cursor: pointer;
        }

        @starting-style {
            opacity: 0;

        }

        &.hidden {

            display: none;
            opacity: 0;

            .custom-cursor {
                transform: translate(-50%, -50%) scale(.3);
            }


        }

        &:active .custom-cursor {

            transform: translate(-50%, -50%) scale(1.9);

        }


    }


    model-viewer.journal-3d {
        z-index: 3000000000;
        pointer-events: all;
    }
}

@keyframes starting {
    from {
        opacity: 0;
        scale: 0.8;
    }

    to {
        scale: 1;
        opacity: 1;

    }

}

.map-wrapper:active {
    cursor: grabbing;
}

.map {

    position: absolute;

}

.map figure {
    position: absolute;
    width: var(--map-item-width);
    padding: var(--map-gap);
    margin: var(--map-gap);
    box-sizing: border-box;
    display: flex;
    height: fit-content;

}

.map figure.landscape {
    width: calc(var(--map-item-width) * 1.2 + var(--map-gap));

    picture {

        width: calc(var(--map-item-width) * 1.2 + var(--map-gap));

    }
}

.map figure {
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.map figure {



    picture {
        position: relative;
        width: var(--map-item-width);
        padding: var(--map-gap);
        box-sizing: border-box;
        height: auto;



        img {
            position: relative;

            width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
        }
    }

}

.journal-3d {
    position: absolute;
    height: var(--map-item-width);
    padding: var(--map-gap);
    box-sizing: border-box;

}

.map .journal-video {
    position: absolute;
    width: var(--map-item-width);
    padding: var(--map-gap);
    box-sizing: border-box;
    height: auto;

    video {
        position: relative;

        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }
}

.journal-image {}



picture.front {
    /* image ciblée */

    img {
        transform: scale(1.2);
        /* zoom léger */
        z-index: 9000;
    }

}

figure:hover img {
    transform: scale(1.1);


}

.map:has(img:hover) img:not(:hover) {
    transform: scale(0.96);
    opacity: 0.3;
    z-index: -1;

}


.indicators {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.indicators .dot {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
}

figure:hover figcaption,
figure.front figcaption {
    opacity: 1;
    pointer-events: all;
}

main.map>figure:not(:hover) figcaption {
    opacity: 0;
    pointer-events: none;
    margin-top: 1rem;
}

figcaption {
    margin-block: .5rem;
    transition: all 0.3s var(--animation-timing);
    z-index: 9999999999;
    display: block;
    position: relative;
    text-align: center;
    margin-top: 2rem;
}

figure.active {

    transform: scale(1.05);
}

.map figure.in-view {


    img {
        opacity: 1;
        scale: 1;
        transition: all .4s var(--animation-timing);
        transition-behavior: allow-discrete;

        @starting-style {
            opacity: 0;
            scale: 0.95;
        }
    }
}





.map figure:not(.in-view) {

    /* opacity: 1;*/
    pointer-events: none;
    height: auto;


    img {
        display: none;


        opacity: 0;
        scale: 0.95;

    }
}

.list-images {


    figure,
    video {

        position: fixed;
        width: calc(var(--map-item-width) * 2);
        padding: var(--map-gap);
        box-sizing: border-box;
        display: flex;
        transform: translate(-50%, -50%);
        height: fit-content;
        top: 50%;
        left: 50%;
        display: none;
        /* pointer-events: none; */
        transform-origin: top left;
        transition: all 0.3s var(--animation-timing) allow-discrete;
        scale: .9;
        opacity: 0;




        &:hover img {
            transform: scale(1);
        }

        img {
            position: relative;

            width: 100%;
            height: auto;
            display: block;
            object-fit: contain;





        }

        &:active {
            scale: .95 !important;
        }


    }

    figure.landscape,
    video {
        width: calc(var(--map-item-width) * 3);
    }

    video {}

    figure.front {
        opacity: 1 !important;
        display: block;
        scale: 1;

        @starting-style {
            opacity: 0;
            ;
            scale: .9;
        }

        video {
            display: block;
            opacity: 1;
        }
    }
}

@media (width < 960px) {

    :root {
        --map-item-width: 200px;
    }

    .custom-cursor {
        display: none;
    }

    .list {

        figure,
        video {
            width: 90vw !important;
            max-width: 90vw !important;
        }
    }
}