/*
 * Impressions: two nested slideshows built on native CSS scroll-snap.
 *
 *   #slideshow-vertical          vertical scroller, one .slide-vertical per project
 *     .slide-vertical
 *       .slideshow-horizontal    horizontal scroller, one .slide-horizontal per slide
 *         .slide-horizontal
 *
 * Below 768px there is no slideshow at all: projects and slides are simply
 * stacked and the page scrolls normally. Above 768px the browser does the
 * sliding (touch, trackpad, wheel); impressions.js only adds buttons, keys
 * and reacts to the active slide.
 */

@layer components {

    /* ---------------------------------------------------------------- mobile */

    body.impression {
        background: white;
        color: black;

        a {
            color: black;
        }

        nav li.overview a {
            opacity: 0.3;

            &:hover {
                opacity: 1;
            }
        }
    }

    .slide-vertical {
        margin: 0 0 3em;
    }

    .pager-horizontal,
    .pager-vertical,
    #prev-vertical,
    #next-vertical {
        display: none;
    }

    .slide-horizontal {
        figure {
            margin: 0;
        }

        &.text {
            padding: 0 16px;
        }
    }

    .video-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: var(--ratio, 16 / 9);
        background: black;
        overflow: hidden;

        iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    }

    .video_xl .overlay {
        position: relative;
        margin-top: 2.4em;
    }

    button.sound {
        position: absolute;
        top: -2em;
        right: 16px;
        z-index: 9999;
        padding: 0;
        color: black;
        background: none;
        border: none;
        border-radius: 0;
        font-size: 1em;
        text-decoration: line-through;
        opacity: 0.3;
        -webkit-font-smoothing: antialiased;
        cursor: pointer;
    }

    .sound-playing button.sound {
        text-decoration: none;
        opacity: 1;
    }

    figcaption,
    .caption {
        font-size: 1rem;
        padding: 0 16px;
        -webkit-font-smoothing: antialiased;

        h1 {
            font-size: 1em;
            font-weight: normal;
            font-style: italic;
            margin: 0;
        }

        p {
            margin: 0;
        }

        a {
            text-decoration: underline;
        }

        &.large p {
            margin-bottom: 1em;
        }
    }

    /* ------------------------------------------------------- 768px and wider */

    @media (min-width: 768px) {

        body.impression {
            overflow: hidden;
            -webkit-font-smoothing: antialiased;

            .site-header {
                position: fixed;
                z-index: 8999;
                top: 40px;
                left: 0;
            }

            .content.container {
                width: 100%;
                height: 100dvh;
            }

            .overlay,
            .overlay a {
                color: black;
            }
        }

        /* Colour switch for dark slides (body.dark is set by menu-color.js). */
        body.impression,
        body.impression :is(a, button, figcaption, .caption, .pagination-horizontal) {
            transition: color 300ms ease-in-out;
        }

        body.impression.dark {
            color: white;

            :is(button, .site-header a, .pager-vertical a, .pagination-horizontal, figcaption, .caption, .overlay, .overlay a) {
                color: white;
            }
        }

        /* --- Outer, vertical slideshow ------------------------------------ */

        #slideshow-vertical {
            position: absolute;
            inset: 0;
            height: 100dvh;
            overflow-y: auto;
            overscroll-behavior: contain;
            scroll-snap-type: y mandatory;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none;
            }
        }

        .slide-vertical {
            position: relative;
            height: 100dvh;
            margin: 0;
            overflow: hidden;
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

        /* --- Inner, horizontal slideshow ---------------------------------- */

        .slideshow-horizontal {
            display: flex;
            width: 100%;
            height: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            overscroll-behavior-x: contain; /* no browser "back" on trackpad swipes */
            scroll-snap-type: x mandatory;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none;
            }
        }

        .slide-horizontal {
            position: relative;
            flex: 0 0 100%;
            height: 100%;
            overflow: hidden;
            background: white;
            scroll-snap-align: start;
            scroll-snap-stop: always;

            &.dark {
                background: black;
                color: white;
            }

            .slide-wrapper {
                height: 100%;
            }

            &.text {
                padding: 0 16px 0 32px;
            }
        }

        /* --- Navigation ---------------------------------------------------- */

        .pager-horizontal {
            display: block;
            position: absolute;
            bottom: 40px;
            left: 50%;
            width: 240px;
            margin-left: -120px;
            line-height: 20px;
            z-index: 8999;
            text-align: center;

            button {
                display: inline-block;
                vertical-align: middle;
                position: relative;
                top: -7px;
                height: 20px;
                padding: 0;
                color: black;
                background: transparent;
                border: none;
                font-family: Arial, sans-serif;
                font-size: 2.8rem;
                line-height: 20px;
                cursor: pointer;

                &.disabled {
                    opacity: 0.2;
                    cursor: default;
                }
            }

            .pagination-horizontal {
                display: inline-block;
                margin: 0 16px;
                color: black;
                font-size: 1.2rem;
            }
        }

        .pager-vertical {
            display: block;
            position: fixed;
            top: 40px;
            right: 40px;
            z-index: 8999;
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 1rem;

            li {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                height: 1.5rem;
                width: 2.5rem;
                margin: 0;
                line-height: 1;
                text-align: right;
            }

            a {
                opacity: 0.3;
                cursor: pointer;
            }

            li.active a,
            a:hover {
                opacity: 1;
            }
        }

        #prev-vertical,
        #next-vertical {
            display: block;
            position: fixed;
            top: 40px;
            margin-top: -2px;
            z-index: 8999;
            padding: 0;
            background: none;
            border: none;
            border-radius: 0;
            font-family: Arial, sans-serif;
            font-size: 2.8rem;
            line-height: normal;
            opacity: 0.3;
            cursor: pointer;

            &:hover {
                opacity: 1;
            }
        }

        #prev-vertical {
            right: 132px;
        }

        #next-vertical {
            right: 94px;
        }

        /* --- Captions -------------------------------------------------------- */

        figcaption,
        .caption {
            padding: 0;

            &.large {
                font-size: 1.4rem;
            }
        }

        .single_image_xl figcaption,
        .video_xl .caption {
            position: absolute;
            bottom: 62px;
            left: 50%;
            width: 500px;
            margin-left: -250px;
            padding: 0;
            text-align: center;
            z-index: 8999;

            &.large {
                inset: 0;
                width: 100%;
                height: 100%;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;

                .centered {
                    text-align: left;
                    max-width: 900px;
                    padding-left: 40px;
                }
            }
        }

        .video_xl .caption.large .centered {
            max-width: 600px;
        }

        .one-slide-only :is(.single_image_xl figcaption, .video_xl .caption) {
            bottom: 40px;
        }

        /* --- Image slides: cover the whole screen ------------------------ */

        .single_image_xl figure {
            position: absolute;
            inset: 0;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        /* --- Video slides: cover the whole screen ------------------------ */

        .video_xl .slide-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            width: max(100vw, 100dvh * (var(--ratio, 16 / 9)));
            height: max(100dvh, 100vw / (var(--ratio, 16 / 9)));
            transform: translate(-50%, -50%);
            background: black;
        }

        .video-wrapper {
            position: absolute;
            inset: 0;
            aspect-ratio: auto;

            &::after {
                content: "Loading";
                position: absolute;
                inset: 0;
                z-index: 8999;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.4em;
                color: white;
            }

            &.loaded::after {
                display: none;
            }
        }

        .video_xl .overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100vw;
            height: 100dvh;
            margin: 0;
            transform: translate(-50%, -50%);
            z-index: 8999;
        }

        button.sound {
            top: auto;
            bottom: 40px;
            right: 80px;
            color: white;
            font-size: 1.4rem;
        }

        /* --- Text slides ----------------------------------------------------- */

        .text .slide-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
        }

        .text-table {
            max-width: 800px;
            font-size: 1.4em;
        }
    }

    /* ------------------------------------------------------ 1200px and wider */

    @media (min-width: 1200px) {
        .pager-vertical {
            right: 80px;
        }

        #prev-vertical {
            right: 168px;
        }

        #next-vertical {
            right: 130px;
        }

        .video_xl .caption.large .centered {
            max-width: 900px;
        }
    }
}