:root {
        color-scheme: light dark;
        --dark: black;
        --light: #ddd;
        --dark2: #555;
        --light2: white;
}

* {
        padding: 0;
        margin: 0;
        -webkit-tap-highlight-color: transparent;
}

@font-face nb {
        font-family: nb;
        src: url(nb_international_pro_bold-webfont.ttf);
}

html {
        overscroll-behavior: none;
}

html:has(.snap) {
        scroll-snap-type: y proximity;
        main > header {
                scroll-snap-align: end;
        }
        figure#art,
        form.grid {
                scroll-snap-align: start;
        }
}

/*
#art {
        container-type: scroll-state;
        container-name: snap-container;
}

        #frame{
                transform: scale(0.8);
                transition: transform 0.5s ease;
        }
@container snap-container scroll-state(snapped: y) {
        #frame{
                transform: scale(1)
        }
}
*/

body {
        font-family: nb, sans-serif;
        line-height: 1.4;
        color: light-dark(var(--dark2), var(--light));
        background-color: light-dark(var(--light2), var(--dark));
}

a {
        color: inherit;
}

h1,
h2,
h3,
h4 {
        font-weight: normal;
        font-size: 1em;
        padding: 0;
}

#heklogo {
        max-width: 10em;
        display: block;
        margin: 2em 0 1em;
        path {
                fill: currentColor;
        }
}

summary,
ul {
        list-style: none;
}

*::selection {
        background-color: light-dark(var(--dark2), var(--light));
        color: light-dark(var(--light2), var(--dark));
}

summary::-webkit-details-marker {
        display: none;
}

button#fullscreen {
        font-family: inherit;
        font-size: inherit;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: underline;
}

footer {
        grid-column: 1 / -1;
}
form.grid {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        padding: 3em 0 1em 0;
        input {
                display: none;
        }
        input:checked + label span:before {
                animation: blink 0.2s ease 0s both infinite;
        }

        label:not(.active):not(:hover).fade {
                opacity: 0.3;
        }

        input:checked + label:not(.active):not(:hover).fade {
                opacity: 1;
        }

        label {
                font-style: italic;
                transition: opacity 0.3s ease 0s;
                padding: 1em 0;
                @media not (prefers-reduced-motion) {
                        animation: hello;
                        animation-timeline: view();
                        animation-range: 0% 20%;
                }
                &:before {
                        font-style: normal;
                        content: attr(data-time);
                        display: block;
                        text-transform: uppercase;
                        font-size: 0.6em;
                        letter-spacing: 0.5px;
                }

                &:hover span:before,
                &.visited span:before {
                        background: currentColor;
                }
        }
}

main {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
        padding: 1em 0 1em 1em;

        label,
        button {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                background: none;
                border: none;
                color: currentColor;
                text-align: left;
                font-family: inherit;
                font-size: inherit;
                line-height: inherit;
                cursor: pointer;
                &:focus {
                        outline: 0;
                }
        }

        p em:after,
        p em:before {
                content: "'";
        }

        .faq details summary {
                &:after {
                        display: inline-block;
                        content: "→";
                        margin-left: 0.5em;
                        transition:
                                transform 0.3s ease 0s,
                                opacity 0.3s ease 0s;
                        opacity: 0;
                }
        }

        .faq details:not([open]) summary {
                &:after {
                        opacity: 1;
                }
                &:hover:after {
                        transform: translateX(0.5em);
                }
        }

        & > header {
                grid-column: 1;
                padding: 1em;
                margin-left: -1em;
                grid-column: 1 / -1;
                transition: opacity 0.2s ease;
        }

        header.hide {
                opacity: 0;
        }

        p,
        li,
        h4 {
                padding: 0 0.5em 1em 0;
                hyphens: auto;
                text-wrap: pretty;
                max-width: 60ch;
        }

        section {
                padding: 7em 0 4em;
                grid-column: 1 / -1;
                .content {
                        padding-top: 2em;
                        grid-column: 2 / -1;
                        ul {
                                padding: 5em 0;
                        }
                }
                & > header {
                        grid-column: 1;
                        align-self: start;
                        padding-top: 2em;
                        padding-bottom: 1em;
                }
        }

        details {
                cursor: pointer;
                padding-bottom: 1em;
                p:not(.source) {
                        font-style: italic;
                }
                & > p {
                        animation: fadein 0.3s ease 0s both;
                }

                summary {
                        padding-bottom: 0;
                        &:focus-visible,
                        &:focus {
                                outline: none;
                                box-shadow: none;
                        }
                        p:after {
                                font-style: italic;
                                content: "…";
                        }
                }
                summary::-webkit-details-marker {
                        display: none;
                }
                &:not([open]) summary {
                        padding-bottom: 1em;
                }

                &[open] summary:before {
                        background: currentColor;
                }
                &:not([open]) summary span {
                        background-image: linear-gradient(
                                90deg,
                                light-dark(var(--dark), var(--light)),
                                light-dark(var(--light), var(--dark))
                        );
                        -webkit-text-fill-color: transparent;
                        -webkit-background-clip: text;
                }
                ::marker {
                        display: none;
                        content: "";
                }
                &[open] summary span {
                        background: none;
                }
                &[open] {
                        cursor: initial;
                }

                &[open] summary p:after {
                        display: none;
                }
        }
}

figure#art {
        user-select: none;
        touch-action: manipulation;
        position: relative;
        grid-column: 1 / -1;
        margin: 0 0 0 -1em;
        /*
        position: sticky;
        top: 0;
        z-index: -1;
        */
        #frame {
                width: 100%;
                height: 100vh;
                border: none;
        }

        button.btn {
                background: none;
                border: none;
                cursor: pointer;
                animation: fadein 0.5s ease 2s both;
                padding: 1em;
                position: absolute;
                top: calc(50vh - 4em);
                &.prev {
                        left: 0;
                        transform: rotate(180deg);
                        display: none;
                }
                &.next {
                        right: 0;
                }
                &:after {
                        content: "";
                        display: inline-block;
                        clip-path: polygon(20% 0%, 70% 50%, 20% 100%);
                        background-color: light-dark(var(--light), var(--dark));

                        width: 2em;
                        height: 2em;
                        border-radius: 2em;
                }
                &:hover {
                        opacity: 1;
                }
                &:hover:after {
                        background-color: light-dark(var(--dark), var(--light));
                }
        }
}

@media (min-width: 50em) {
        .faq summary::before,
        form.grid label > span::before {
                content: "";
                display: inline-block;
                width: 0.7em;
                height: 0.7em;
                margin: 0 0.5em 0 -1.2em;
                border-radius: 2em;
                transition: background-color 0.5s ease 0s;
        }
        main {
                font-size: 1.1em;
                grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
                padding: 0 0 3em 3em;
                & > section:first-child {
                        padding-top: 37vh;
                }
                form.grid {
                        label {
                                padding: 1em 0;
                        }
                }

                p {
                        padding: 0 1em 1em 0;
                }
                & > form.grid,
                & > header {
                        grid-column: 1 / -1;
                        display: grid;
                        grid-template-columns: subgrid;
                }

                section {
                        padding: 10em 0;
                        display: grid;
                        grid-template-columns: subgrid;
                        > header {
                                position: sticky;
                                top: 0em;
                                grid-column: 1/2;
                        }
                }

                footer,
                details {
                        grid-column: 2 / -1;
                }

                figure#art {
                        grid-column: 1 / -1;
                        margin: 0 0 0 -3em;
                }

                & > header {
                        align-content: baseline;
                        background-color: light-dark(
                                var(--light2),
                                var(--dark)
                        );
                        margin-left: -3em;
                        padding: 1em 0 3em 3em;
                        p {
                                grid-column: 2;
                                grid-column-end: span 3;
                        }
                }
        }
}

@media (orientation: portrait) and (max-width: 800px) {
        figure#art #frame {
                height: calc(100vh - 8em);
        }
}

@keyframes fadein {
        from {
                opacity: 0;
        }
}

@keyframes hello {
        from {
                transform: translateY(7em);
        }
}

@keyframes blink {
        from {
                opacity: 0;
        }
}