@import url("./common.css");


:root {
    --main-color-bg: black;
    --main-color-text: #ccc;
}

html {
    height: unset;
}

@keyframes background-swirls {
    0% {
        transform: rotate(0deg) scale(1, 1);
    }

    25% {
        transform: rotate(90deg) scale(1, -1) translateY(25%);
    }

    50% {
        transform: rotate(180deg) scale(1, 1) translateY(50%);
    }

    75% {
        transform: rotate(270deg) scale(1, -1) translateY(25%);
    }

    100% {
        transform: rotate(360deg) scale(1, 1);
    }
}

body {
    --bg-alpha: 0;

    padding: 0;
    margin: 0;
    width: 100%;
    height: fit-content;
    overflow: hidden auto;
    scrollbar-gutter: stable both-edges;
    transition: background,filter 500ms;
    background: linear-gradient(45deg,
        hsl(241deg 84% 23% / var(--bg-alpha)) 0%,
        hsl(244deg 100% 63% / var(--bg-alpha)) 100%);

    &[loaded] {
        --bg-alpha: 100%;
    }

    &.backgrounded, &.paused {
        --bg-alpha: 50%;

        filter: brightness(0.75);
    }
}

bg-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;

    & bganims {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        display: block;

        &::before {
            content: '';
            user-select: none;
            z-index: 0;
            border-radius: 20%;
            box-shadow:     0 0 15px 8px #4db7b6,
                    inset   0 0 15px 8px #4db7b6;
            position: absolute;
            overflow: hidden;
            top: 25%;
            left: 0;
            width: 125%;
            height: 125%;
            transform: rotate(45deg) scale(1, 1);
            filter: blur(40px);
            animation: background-swirls 60s infinite ease;
        }

        &::after {
            content: '';
            user-select: none;
            z-index: 0;
            border-radius: 20%;
            box-shadow:     0 0 15px 8px #76617b,
                    inset   0 0 15px 8px #76617b;
            position: absolute;
            overflow: hidden;
            top: 25%;
            left: 0%;
            width: 125%;
            height: 125%;
            transform: rotate(45deg) scale(1, 1);
            filter: blur(40px);
            animation: background-swirls 30s infinite ease;
        }
    }
}

a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
[tabindex],
[contentEditable="true"]
{
    &:not([tabindex='-1'])
    {
        /* focusable elements */
        border-radius: 4px;
        background-color: rgb(0 0 0 / 5%);
        color: inherit;
        padding-left: 1ex;
        padding-right: 1ex;
        transition: text-shadow 300ms,
                    color 300ms,
                    background-size 300ms;

        &:focus {
            background-color: rgb(207 180 146 / 25%);
        }
    }
}

a {
    text-decoration: none;
    color: inherit;
    text-shadow: 0 0 4px black;
    transition: text-shadow 300ms,
                color 300ms,
                background-size 300ms;

    &:focus {
        text-shadow: 0 4px 6px black;
    }
}

body[loaded] #main {
    transition: filter 800ms ease-in 0ms;
    filter: blur(0);
}

#main {
    --main-padding: 3em;

    position: relative; /* override common's "static" so we can use z-index */
    z-index: 2;
    height: fit-content;
    width: calc(100% - calc(2 * var(--main-padding)));
    overflow-x: visible;
    padding: var(--main-padding);
    margin: 0;
    filter: blur(40px);
    scroll-snap-type: y mandatory;
    display: grid;
    grid-template-columns: 1fr auto;
    font-size: 2dvw;

    & > * {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        position: relative;
        margin-bottom: 1em;

        & h2 {
            position: fixed;
            margin: 0;
            padding: 0;
            font-size: 1.2em;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            color:rgb(255 255 255 / 50%);
        }

        & ul {
            margin: 0;
            margin-top: 1.5em;
        }
    }

    & header {
        grid-row: 1;

        & h1 {
            margin-top: 0;
            font-size: 2em;
        }

        &.left {
            grid-column: 1;
        }

        &.right {
            grid-column: 2;
            align-content: end;

            & > * {
                background-color: rgb(0 0 0 / 30%);
                border-radius: 50%;
            }

            & > span, & > img.gamepad {
                display: inline-block;
                padding: 2px 4px;
            }

            & > img.gamepad {
                vertical-align: top;
                height: 1.4em
            }
        }
    }

    & main {
        grid-row: 2;
        grid-column: 1 / 3;
    }

    & nav {
        grid-row: 3;
        grid-column: 1 / 3;
        width: 100%;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;

        &::-webkit-scrollbar {
            width: 0;
        }

        & > ul {
            display: flex;
            width: fit-content;

            & > li {
                display: block;
                position: relative;
                scroll-snap-align: start;
                scroll-snap-stop: always;
                width: 40dvw;
                aspect-ratio: 4/3;

                & > a {
                    position: absolute;
                    inset: 1em;
                    background-position: 75% center;
                    background-size: 130%;
                    background-repeat: no-repeat;
                    filter: grayscale(0.5);

                    &:focus {
                        background-size: 160%;
                    }
                }
            }
        }
    }

    & secondary {
        grid-row: 4;
        grid-column: 1 / 3;
        width: 100%;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;

        &::-webkit-scrollbar {
            width: 0;
        }

        & > ul {
            display: flex;
            width: fit-content;

            & > li {
                display: block;
                position: relative;
                scroll-snap-align: start;
                scroll-snap-stop: always;
                width: 25dvw;
                aspect-ratio: 4/3;

                & > a {
                    position: absolute;
                    inset: 1em;
                    background-position: center 75%;
                    background-size: 125%;
                    background-repeat: no-repeat;
                    filter: grayscale(0.5);

                    &:focus {
                        background-size: 150%;
                    }
                }
            }
        }
    }

    & tertiary {
        grid-row: 5;
        grid-column: 1 / 3;
        width: 100%;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;

        &::-webkit-scrollbar {
            width: 0;
        }

        & > ul {
            display: flex;
            width: fit-content;

            & > li {
                display: block;
                position: relative;
                scroll-snap-align: start;
                scroll-snap-stop: always;
                width: 25dvw;
                aspect-ratio: 4/3;

                & > a {
                    position: absolute;
                    inset: 1em;
                    background-position: center 75%;
                    background-size: 50%;
                    background-repeat: no-repeat;
                    filter: grayscale(0.5);

                    &:focus {
                        background-size: 75%;
                    }
                }
            }
        }
    }
}

footer {
    padding-bottom: 1em;
    width: 100%;
    text-align: center;
}

#mute-btn {
    &.on > .off {
        display: none;
    }

    &:not(.on) > .on {
        display: none;
    }
}