@charset "UTF-8";

@font-face {
    font-family: "RFP Icons";
    src: url("../fonts/rfp-icons/RFP-Icons-Round.woff2") format("woff2");
}

:root {
    --font-sans: "InterVariable", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
    --font-features-inter: "calt", "cv05", "cv06", "cv11", "liga", "ss03";
    --font-icons: "RFP Icons";

    --color-bg-root: #000;
    --color-bg-grid: #000;
    --color-bg-video-entry: #131317;
    --color-text-default: #f7f6f9;
    --color-text-info-en: #b2caae;
    --color-text-info-entry: hsl(from var(--color-text-default) h s l / 0.7);
    --color-controls-text: #646368;
    --color-controls-text-hover: var(--color-text-default);
    --color-controls-bg: #1b1a21;
    --color-controls-bg-hover: #444348;
    --color-controls-bg-active: var(--color-text-default);

    --num-columns: 5;
    --num-rows: 4;
    --gap-grid: 2px;
    --gap-control-bar: 2px;
    --gap-controls: 2px;
    --num-columns-info: 2;
    --height-control-bar: max(32px, 2.5rem);
    --height-video-grid: calc(100svh - var(--height-control-bar) - var(--gap-control-bar));

    --f-s-buttons: 0.85rem;
    --f-s-icons: 1.1rem;
    --f-s-video-overlay-default: 0.9rem;
    --f-s-info-overlay-default: 0.9rem;
    --f-s-info-entry: max(8.5px, calc(var(--height-video-grid-cell) * 0.08));
    --p-info-overlay: 2rem;
    --border-width-thin: 0.075rem;

    --time-hover: 0.3s;
}

html {
    width: 100%;
    min-height: 100%;
    font-size: clamp(9px, min(1.2vw, 1.6vh), 20px);
    background-color: var(--color-bg-root);
    overscroll-behavior: none;
}

body {
    width: 100%;
    height: 100svh;
    font-family: var(--font-sans);
    font-feature-settings: var(--font-features-inter);
    color: var(--color-text-default);
    display: grid;
    grid-template-rows: minmax(0, 1fr) var(--height-control-bar);
    gap: var(--gap-control-bar);
    line-height: 1.3;

    --height-video-grid-cell: calc((var(--height-video-grid) - (var(--num-rows) - 1) * var(--gap-grid)) / var(--num-rows));
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(var(--num-columns), minmax(0, 1fr));
    grid-template-rows: repeat(var(--num-rows), minmax(0, 1fr));
    gap: var(--gap-grid);
    min-height: 0;
    grid-area: 1 / 1;
}

.entry {
    display: grid;

    & > div {
        grid-area: 1 / 1;
    }
}

.video-entry {
    background-color: var(--color-bg-video-entry);
    display: grid;
    align-content: center;
    overflow: hidden;

    & .entry-content {
        height: var(--height-video-grid-cell);
        width: 100%;
        transition: filter var(--time-hover), opacity var(--time-hover);
        opacity: 0;

        & video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    &.has-loaded {
        & .entry-content {
            opacity: 1;
        }
    }

    body.show-info & {
        & .entry-content {
            opacity: 0.1;
            filter: blur(0.85rem);
        }

        &.hover {
            box-shadow: 0 0 2rem rgba(0, 0, 0, 0.75);
            z-index: 1;
            opacity: 1;

            & .entry-content {
                opacity: 1;
                filter: blur(0px);
            }
        }
    }

    /*&.is-seeking {
        border-top: 2px solid orange;
    }

    &.is-waiting {
        border-bottom: 2px solid red;
    }*/
}

.info-entry {
    grid-column-start: var(--num-columns);
    grid-row-start: var(--num-rows);
    background-color: #000;
    font-size: var(--f-s-info-entry);
    color: var(--color-text-info-entry);
    transition: opacity var(--time-hover);
    --_gap: calc(var(--height-video-grid-cell) * 0.075);
    --_offset: calc(0.5 * var(--_gap));

    & .entry-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        & .e-ec {
            border: var(--border-width-thin) solid currentColor;
            border-radius: 0.35em;
            padding: 0.4em 0.5em;
            margin-bottom: 0.5em;
            line-height: 1;
            margin-top: var(--_offset);
        }

        & .toggle {
            margin-top: var(--_gap);
            display: flex;
            gap: 0.5rem;

            & .toggle-button {
                display: block;
                text-decoration: none;
                font-size: 85%;
                border: var(--border-width-thin) solid currentColor;
                border-radius: 0.35em;
                padding: 0.55em 1.25em;
                line-height: 1;
                font-variant-numeric: tabular-nums;
                letter-spacing: 0.075em;
                font-weight: 500;
                opacity: 0.5;
                user-select: none;
                -webkit-user-select: none;

                &.current {
                    cursor: default;
                    color: var(--color-bg-root);
                    background-color: var(--color-text-info-entry);
                    opacity: 1;
                }

                &:hover {
                    opacity: 1;
                }
            }
        }
    }

    body.show-info & {
        opacity: 0.15;
    }
}

.info-overlay {
    grid-template-columns: repeat(var(--num-columns), minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: var(--gap-grid);
    min-height: 0;
    grid-area: 1 / 1;
    display: none;
    overflow-y: scroll;
    padding-bottom: var(--height-video-grid-cell);
    z-index: 1;
    mask-image: linear-gradient(to bottom, transparent, #000 var(--p-info-overlay), #000 calc(100% - var(--p-info-overlay)), transparent);

    body.show-info & {
        display: grid;
    }

    & .content {
        grid-column-start: span min(var(--num-columns), 4);
        display: flex;
        flex-direction: column;
        padding: var(--p-info-overlay) 0;
        line-height: 1.4;
        font-size: 1.2rem;
        gap: 1.75rem;

        & .info,
        & .film-list,
        & .credits {
            display: grid;
            grid-template-columns: repeat(var(--num-columns-info), 1fr);
            gap: var(--gap-grid);
        }

        & .de,
        & .en {
            padding-inline: var(--p-info-overlay);
        }

        & .en {
            color: var(--color-text-info-en);
        }

        & a {
            text-underline-offset: 0.175em;
            text-decoration-color: hsl(from currentColor h s l / 0.35);

            &:hover {
                text-decoration-color: currentColor;
            }

            & + span {
                opacity: 0.5;
            }
        }
    }

    & .lang-toggle {
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-controls);
        padding-inline: var(--p-info-overlay);
        display: none;

        & .button {
            font-size: var(--f-s-buttons);
            background-color: var(--color-bg-root);
            color: var(--color-controls-text);
            height: var(--height-control-bar);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            cursor: pointer;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.085em;
            user-select: none;
            -webkit-user-select: none;

            &:hover {
                color: var(--color-controls-text-hover);
                background-color: var(--color-controls-bg-hover);
            }

            body[data-lang="de"] &[data-lang="de"],
            body[data-lang="en"] &[data-lang="en"] {
                color: var(--color-bg-root);
                background-color: var(--color-controls-bg-active);
            }
        }
    }

    & .info {
        transition: opacity var(--time-hover);

        & p + p {
            margin-top: 0.75em;
        }
    }

    & .credits {
        margin-top: 3.25rem;
        transition: opacity var(--time-hover);

        & > div > div {
            background-color: hsl(from currentColor h s l / 0.1);
            padding: 1rem;
            border-radius: 0.35em;
        }

        & p + p {
            margin-top: 0.5em;
        }
    }

    & .film-list {
        & .film-info {
            width: fit-content;
            padding: 0.75rem 0;
            transition: opacity var(--time-hover);

            & .film-header {
                display: flex;
                gap: 1em;
                align-items: baseline;
                font-size: 80%;
                font-variant-numeric: tabular-nums;
                margin-bottom: 0.3em;
                line-height: 1;
            }

            & .e-nr {
                border: var(--border-width-thin) solid currentColor;
                width: fit-content;
                border-radius: 0.3em;
                padding: 0.35em 0.35em;
            }

            & .year,
            & .length {
                opacity: 0.5;

                &:empty {
                    display: none;
                }
            }

            & .subtitle {
                opacity: 0.5;
            }

            & .extratitle {
                margin-top: 0.5em;

                &:empty {
                    display: none;
                }
            }
        }
    }

    &:has(.hover) {
        & .info {
            opacity: 0.3;
        }

        & .credits {
            opacity: 0.3;
        }

        & .film-info {
            opacity: 0.3;

            &.hover {
                opacity: 1;
            }
        }
    }
}

.control-bar {
    display: grid;
    grid-template-columns: repeat(var(--num-columns), 1fr);
    gap: var(--gap-controls);
    color: var(--color-controls-text);
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    font-size: var(--f-s-buttons);
    text-transform: uppercase;
    letter-spacing: 0.085em;
    font-weight: 500;

    & .button {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
        background-color: var(--color-controls-bg);

        &:hover {
            background-color: var(--color-controls-bg-hover);
            color: var(--color-controls-text-hover);
        }
    }

    & .icon {
        font-weight: normal;
        font-family: var(--font-icons);
        font-size: var(--f-s-icons);
    }

    & .loading-counter {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 0.5em;
        width: 100%;
        height: 100%;
        background-color: var(--color-controls-bg);

        &::before {
            content: "\F252";
            font-weight: normal;
            font-family: var(--font-icons);
            font-size: var(--f-s-icons);
        }

        body.has-loaded & {
            display: none;
        }
    }

    & .loading-bar {
        grid-column: 2 / var(--num-columns);
        background-color: var(--color-controls-bg);

        body.has-loaded & {
            display: none;
        }

        & .bar {
            background-color: var(--color-controls-text);
            height: 100%;
            width: 0%;
        }
    }

    & .controls {
        display: none;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-controls);

        body.has-loaded & {
            display: grid;
        }

        & .restart-button::after {
            content: "\21BA";
        }

        & .play-button::after {
            content: "\25B6";
        }

        body.is-playing & .play-button::after {
            content: "\23F8";
        }
    }

    & .scenes {
        grid-column: 2 / var(--num-columns);

        display: none;
        gap: var(--gap-controls);

        body.has-loaded & {
            display: flex;
        }

        & .button {
            flex-grow: 1;
            flex-basis: 0;
            gap: 0.5em;
            opacity: 0.7;

            &:hover {
                opacity: 1;
            }

            &::before {
                content: "\E369";
                font-weight: normal;
                font-family: var(--font-icons);
                font-size: var(--f-s-icons);
            }
        }
    }

    & .info {
        body.show-info & .info-button {
            background-color: var(--color-controls-bg-active);
            color: var(--color-bg-root);
        }
    }
}

@media (min-aspect-ratio: 2/1) {
    :root {
        --num-columns: 6;
        --num-rows: 4;
    }

    body[data-series="2"] {
        --num-columns: 6;
        --num-rows: 3;
    }
}

@media (min-aspect-ratio: 2.5/1) {
    :root {
        --num-columns: 7;
        --num-rows: 3;
    }
}

@media (min-aspect-ratio: 3.5/1) {
    :root {
        --num-columns: 8;
        --num-rows: 3;
    }

    body[data-series="2"] {
        --num-columns: 7;
        --num-rows: 3;
    }
}

@media (min-aspect-ratio: 4.5/1) {
    :root {
        --num-columns: 10;
        --num-rows: 2;
    }
}

@media (max-aspect-ratio: 1.35/1) {
    :root {
        --num-columns: 4;
        --num-rows: 5;
    }
}

@media (max-aspect-ratio: 4.2/5) {
    :root {
        --num-columns: 3;
        --num-rows: 7;
        --num-columns-info: 1;
        --color-text-info-en: var(--color-text-default);
    }

    body[data-series="2"] {
        --num-columns: 3;
        --num-rows: 6;
    }

    .info-entry {
        --_offset: 0em;
    }

    .info-overlay {
        .lang-toggle {
            display: grid;
        }

        & .lang {
            display: none;
        }

        body[data-lang="de"] & .en {
            display: none;
        }

        body[data-lang="en"] & .de {
            display: none;
        }
    }

    .control-bar {
        & .scenes {
            & .button {
                opacity: 1;

                &::before {
                    content: none;
                }
            }
        }
    }
}

@media only screen and (max-width: 768px) {}