@charset "UTF-8";

@font-face {
    font-family: "Google Sans Code RF";
    src: url("../assets/fonts/google-sans-code-rf/GoogleSansCode[wght]-RF.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Google Sans Code RF";
    font-style: italic;
    src: url("../assets/fonts/google-sans-code-rf/GoogleSansCode-Italic[wght]-RF.woff2") format("woff2-variations");
}

@keyframes page-title-opacity {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 0.8;
    }

    30% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.8;
    }

    60% {
        opacity: 0.75;
    }

    70% {
        opacity: 0.7;
    }

    80% {
        opacity: 0.85;
    }

    85% {
        opacity: 0.7;
    }

    100% {
        opacity: 0.9;
    }
}

@keyframes page-title-blur {
    0% {
        filter: blur(0) contrast(500%);
    }

    30% {
        filter: blur(0.05em) contrast(500%);
    }

    45% {
        filter: blur(0.01em) contrast(500%);
    }

    55% {
        filter: blur(0) contrast(500%);
    }

    65% {
        filter: blur(0.02em) contrast(500%);
    }

    70% {
        filter: blur(0.015em) contrast(500%);
    }

    80% {
        filter: blur(0) contrast(500%);
    }

    90% {
        filter: blur(0.04em) contrast(500%);
    }

    100% {
        filter: blur(0.01em) contrast(500%);
    }
}

@keyframes page-title-spacing {
    0% {
        letter-spacing: 0;
    }

    100% {
        letter-spacing: 0.035em;
    }
}

:root {
    --color-bg: #2D2C26;
    --color-text: #EEEEED;

    --p-main-inline: 2.5rem;
    --width-content: 45rem;
    /*47.5rem;*/

    --font-sans: "Mona Sans", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
    --font-mono: "Google Sans Code RF", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-page-title: "Mona Sans", var(--font-sans);
    --font-project-title: var(--font-sans);

    --text-inset: 1rem;

    --f-s-page-title: 11rem;
    --f-s-cover-links: 1.25rem;
    --f-s-text-main: 1rem;
    --f-s-section-title: 3.2rem;
    --f-s-project-title: 3.2rem;
    --f-s-project-subtitle: 1.45rem;
    --f-s-mono-text: 0.8rem;
}

html {
    font-size: clamp(12px, 1vw, 20px);
    width: 100%;
    min-height: 100%;
    background-color: var(--color-bg);
    interpolate-size: allow-keywords;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100%;
    line-height: 1.2;
    color: var(--color-text);
    font-family: var(--font-sans);
}

a {
    color: inherit;

    &:hover {
        text-decoration: none;
    }
}

p + p {
    margin-top: 1em;
}

ul + p {
    margin-top: 1em;
}

ul {
    font-size: inherit;
    margin: 0;
    padding: 0;
    list-style-type: none;
    --_list-indent: 1.25em;

    & li {
        padding-left: var(--_list-indent);
        font-style: italic;

        &::before {
            content: "—";
            display: inline-block;
            margin-left: calc(-1 * var(--_list-indent));
            width: var(--_list-indent);
        }

        & + li {
            margin-top: 0.65em;
        }
    }
}

p + ul {
    margin-top: 0.65em;
}

.page-bg {
    position: fixed;
    width: 100vw;
    height: 100vh;

    background-image: url("../assets/research-film-bg02.gif");
    background-size: cover;
    background-position: left center;
    /*background-attachment: fixed;*/
    background-color: var(--color-bg);
}

.page-content {
    padding-bottom: 3rem;
}

.section-cover {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 2.5rem var(--p-main-inline);

    & .cover-contents {
        display: grid;
        grid-template-columns: 1fr max-content;
        align-items: flex-end;
        mix-blend-mode: exclusion;
        width: var(--width-content);
    }

    & .menu {
        & .menu-items {
            font-size: var(--f-s-cover-links);
            line-height: 1.4;
            font-weight: 500;
            white-space: nowrap;

            & a {
                text-underline-offset: 0.125em;
                font-weight: 700;
                font-stretch: 150%;
                margin-left: 0.35em;
            }
        }
    }

    & .authors {
        & .header {
            font-family: var(--font-mono);
            font-size: var(--f-s-mono-text);
            margin-bottom: 0.65em;
            opacity: 0.75;
        }

        & .names {
            font-size: var(--f-s-cover-links);
            line-height: 1.4;
            font-weight: 500;

            & a {
                text-underline-offset: 0.125em;
            }
        }
    }
}

.page-title {
    font-size: var(--f-s-page-title);
    mix-blend-mode: exclusion;
    margin-bottom: 2rem;

    & h1 {
        border-top: 3px solid currentColor;
        border-bottom: 3px solid currentColor;
        padding: 0.1em 0;
        font-family: var(--font-page-title);
        line-height: 1;
        font-weight: 900;
        font-stretch: 150%;
        cursor: default;
        width: var(--width-content);
        filter: blur(0) contrast(500%);

        animation-name: page-title-opacity, page-title-blur, page-title-spacing;
        animation-duration: 9s, 24s, 12s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: linear, linear, ease-in-out;
        animation-delay: 2s, 0s, 0s;
        animation-fill-mode: both;
    }
}

.section-intro {
    margin-bottom: 9rem;
    scroll-margin-top: 2.5rem;

    .text {
        position: relative;
        padding-inline: var(--p-main-inline);
        font-family: var(--font-mono);
        font-size: var(--f-s-text-main);
        width: var(--width-content);
        box-sizing: content-box;
        line-height: 1.5;
        font-weight: 400;
        mix-blend-mode: normal;
        opacity: 0.85;
    }

    & span.rf {
        font-weight: 400;
        font-style: italic;
    }
}

.section-title {
    mix-blend-mode: exclusion;
    padding: 0 var(--p-main-inline);

    & h2 {
        font-size: var(--f-s-section-title);
        font-weight: 700;
        font-stretch: 150%;
        width: var(--width-content);
        margin-bottom: 1.75rem;
        /*letter-spacing: -0.02em;*/
    }

    &.small h2 {
        font-family: var(--font-mono);
        font-size: var(--f-s-mono-text);
        line-height: 1.5;
        font-weight: 500;
        letter-spacing: 0;
        border-top: 1px solid currentColor;
        padding-top: 0.65rem;
        margin-bottom: 0.5rem;
    }

    * + & {
        margin-top: 1.5rem;
    }
}

.section-projects {
    margin-bottom: 3rem;
    scroll-margin-top: 2.5rem;
}

.project {
    --project-color: #999;
    --bg-position: 50%;

    text-decoration: none;
    position: relative;
    width: 100%;
    height: 36rem;
    display: grid;

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

    & .bg {
        width: 100%;
        overflow: hidden;
        background-color: var(--project-color);
        background-image: url("../assets/noise_b.jpg");
        background-size: cover;
        background-blend-mode: screen;

        & video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 0 var(--bg-position);
            transition: all 0.3s;
            mix-blend-mode: overlay;
            mask-image: linear-gradient(120deg, transparent 20%, black);
        }
    }

    & .content {
        padding: 2rem var(--p-main-inline);
        mix-blend-mode: overlay;
        width: var(--width-content);
        box-sizing: content-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        & h3 {
            font-size: var(--f-s-project-title);
            font-weight: 500;
            line-height: 1.1;
            letter-spacing: -0.02em;
            padding: 0.15em 0;
            width: 100%;
            border-top: 1.5px solid currentColor;
        }

        & .info {}

        & .meta {
            opacity: 0.5;
            transition: opacity 0.3s;
            margin-top: 1rem;

            border-top: 1px solid hsl(from currentColor h s l / 0.6);
            padding-top: 0.65rem;

            & .header {
                font-family: var(--font-mono);
                font-size: var(--f-s-mono-text);
                margin-bottom: 0.5em;
                font-weight: 500;
                opacity: 0.75;
            }

            & h4 {
                font-family: var(--font-sans);
                font-size: var(--f-s-project-subtitle);
                line-height: 1.3;
                font-weight: 500;
                padding-left: var(--text-inset);
            }


            & .details {
                font-family: var(--font-mono);
                font-size: var(--f-s-mono-text);
                line-height: 1.5;
                font-weight: 400;
                padding-left: var(--text-inset);
                opacity: 0;
                margin-top: 0rem;
                transition: opacity 0.3s, height 0.3s, margin 0.3s;
                height: 0;
                overflow-y: clip;
            }
        }

        & .open-button {
            font-family: var(--font-mono);
            font-size: var(--f-s-mono-text);
            padding: 0.7rem 1rem;
            line-height: 1;
            width: fit-content;
            border-radius: 0.3em;
            background-color: var(--color-text);
            color: var(--project-color);
            opacity: 0;
            transition: opacity 0.3s;
        }
    }

    &:hover {
        & .bg {
            video {
                scale: 1.03;
                opacity: 0.4;
            }
        }

        & .content {
            & .info {
                & .meta {
                    opacity: 1;

                    & .details {
                        opacity: 0.75;
                        margin-top: 0.5rem;
                        height: var(--height, auto);
                    }
                }

                & .open-button {
                    opacity: 1;
                }
            }
        }
    }
}

.section-tools {
    margin-bottom: 8rem;
    scroll-margin-top: 2.5rem;

    & .text {
        position: relative;
        width: var(--width-content);
        padding: 0 var(--p-main-inline);
        box-sizing: content-box;
        opacity: 0.85;
        mix-blend-mode: normal;
        font-family: var(--font-mono);
        font-size: 0.8rem;
        line-height: 1.5;
        font-weight: 400;
    }

    .tool {
        width: var(--width-content);
        padding: 0 var(--p-main-inline);
        box-sizing: content-box;
        mix-blend-mode: normal;
        position: relative;
        opacity: 0.85;
        margin-top: 1.5rem;

        & > * {
            margin-left: var(--text-inset);
        }

        & h4 {
            font-family: var(--font-sans);
            font-size: var(--f-s-project-subtitle);
            line-height: 1.3;
            font-weight: 500;
            border-top: 1px solid hsl(from currentColor h s l / 0.6);
            padding-top: 0.5em;
            margin-bottom: 0.5rem;
        }

        & .details {
            font-family: var(--font-mono);
            font-size: var(--f-s-mono-text);
            line-height: 1.5;
            font-weight: 400;
        }

        .buttons {
            font-family: var(--font-mono);
            font-size: var(--f-s-mono-text);
            line-height: 1.5;
            font-weight: 400;
            display: flex;
            gap: 0.65rem;
            margin-top: 0.75rem;

            & a {
                text-decoration: none;
                border: 1px solid currentColor;
                line-height: 1;
                padding: 0.5rem 1rem;
                border-radius: 0.3em;
                opacity: 0.7;

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

.section-credits {
    & .text {
        position: relative;
        width: var(--width-content);
        padding: 0 var(--p-main-inline);
        box-sizing: content-box;
        opacity: 0.85;
        font-family: var(--font-mono);
        font-size: var(--f-s-mono-text);
        line-height: 1.5;
        font-weight: 400;

        & p {
            padding-left: var(--text-inset);
        }

        & a {
            white-space: nowrap;
        }

        & span {
            opacity: 0.6;
        }
    }

    & .logos {
        position: relative;
        mix-blend-mode: exclusion;
        display: flex;
        justify-content: space-between;
        padding: 0 var(--p-main-inline);
        width: var(--width-content);
        box-sizing: content-box;
        opacity: 0.8;
        margin-top: 1.5rem;

        & div {
            height: 2.2rem;
            display: flex;
            align-items: flex-end;

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

            &.unilu img {
                height: 68%;
            }

            &.hermes img {
                height: 80%;
            }

            &.tinguely img {
                height: 85%;
            }
        }
    }
}

@media (max-width: 768px) {
    :root {
        --p-main-inline: 1.5rem;
        --width-content: auto;
        --text-inset: 0.5rem;

        --f-s-page-title: 4.7rem;
        --f-s-cover-links: 1.15rem;
        --f-s-section-title: 2.2rem;
        --f-s-project-title: 2.2rem;
        --f-s-project-subtitle: 1.3rem;
        --f-s-text-main: 1rem;
        --f-s-mono-text: 0.85rem;
    }

    html {
        font-size: 3.5vw;
        /*2.6vmin*/
    }

    .page-bg {
        background-size: cover;
        background-position: left top;
    }

    .page-title {
        & h1 {
            animation-name: page-title-opacity, page-title-blur;
        }
    }

    .section-cover {
        & .cover-contents {
            grid-template-columns: 1fr 1fr;
            gap: var(--p-main-inline);
        }

        & .authors {
            & .header {
                max-width: 25ch;
                line-height: 1.3;
            }
        }
    }

    .project {
        --bg-position: 50%;
        height: auto;
        min-height: 36rem;

        & .bg {
            & video {
                object-fit: cover;
                object-position: 0 var(--bg-position);
                mask-image: linear-gradient(120deg, transparent 50%, black);
                opacity: 0.4;
            }
        }

        & .content {
            & h3 {
                margin-bottom: 2rem;
            }

            & .info {}

            & .meta {
                opacity: 1;

                & .details {
                    opacity: 0.85;
                    height: auto !important;
                    overflow: auto;
                    margin-top: 0.5rem;
                }
            }

            & .open-button {
                opacity: 1;
            }
        }
    }

    .section-credits {
        & .logos {
            /*position: relative;
                mix-blend-mode: exclusion;
                display: flex;
                justify-content: space-between;
                padding: 0 var(--p-main-inline);
                width: var(--width-content);
                box-sizing: content-box;
                opacity: 0.8;
                margin-top: 1.5rem;*/

            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1.25rem 2rem;
            align-items: flex-end;

            & div {
                height: 2rem;
            }
        }
    }
}