@import url('../utils.css');
@font-face {
    font-family: Icons;
    src: url('../-assets/icons.woff');
}
*{
    margin: 0;
}
body{
    scroll-behavior: smooth;
}
body::after{
    display: none;
    content: 
    url('../-assets/icons/icon_pause.svg')
    url('../-assets/icons/icon_play.svg')
    ;
}
main{
    --colAccent: grey;
    --bgCover: "none";

    color: white;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;

    scroll-behavior: smooth;
}
section{
    background-size: cover;
    padding-bottom: 5rem;
    display: grid;
    place-items: center;
}

/* =========================================================== */
@keyframes logo {
    from{
        scale: .8;
        rotate: 0deg;
    }
    50%{
        scale: .825;
    }
    to{
        scale: .8;
        rotate: 2deg;
    }
}
#top{
    --bgFade: linear-gradient(transparent, var(--black-75));
    height: 100vh;
    height: 100dvh;
    display: grid;
    position: relative;
    place-items: center;
    background-image: var(--bgFade), var(--bgCover);
    background-attachment: scroll, fixed;
    background-position: center;
    padding-bottom: 0;

    & #cover-logo{
        width: 100%;
        scale: .8;
        user-select: none;
        pointer-events: none;
        /* animation-name: logo; */
        animation-duration: 30s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    & #cover-logo[contrast=true]{
        filter: contrast(0) brightness(2) drop-shadow(0 0 2rem black);
    }
    & #cover-logo-backup{
        font-family: DIN;
        font-size: 5rem;
        font-weight: 100;
        text-transform: uppercase;
        background: var(--cornerBG);
        background-size: var(--corner-size) var(--corner-size);
        background-repeat: no-repeat;
        background-color: var(--black-50);
        padding: var(--corner-size);
        padding-top: calc(var(--corner-size) + .5rem);
    }

    /* scroll icon */
    & #cover-scroll-container{
        display: grid;
        place-items: start center;
        height: 100px;
        aspect-ratio: 1;
        position: absolute;
        top: 75%;
        background-size: cover;
        scale: 1;

        & #cover-scroll-mouse{
            --width: 4px;

            margin-top: 9px;
            height: 46px;
            width: 30px;
            border-radius: 50px;
            border-color: white;
            border-width: var(--width);
            border-style: solid;
            display: grid;
            place-items: start center;
            position: relative;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            filter: drop-shadow(0 0 1rem black);

            & #cover-scroll-wheel{
                height: 10px;
                width: var(--width);
                margin-top: 7px;
                border-radius: var(--width);
                background-color: var(--colAccent);

                animation-name: scroll-flash;
                animation-duration: 1s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                animation-timing-function: linear;
            }
        }
        & #cover-scroll-mouse::before, #cover-scroll-mouse::after{
            content: '';
            position: absolute;
            height: 11px;
            aspect-ratio: 1;
            border-left-style: solid;
            border-bottom-style: solid;
            translate: 0 50px;
            rotate: -45deg;
        }
        & #cover-scroll-mouse::after{
            animation-name: scroll-arrow;
            animation-duration: 1.5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }
    }
    & #cover-scroll-container::before{
        content: 'Scroll down to see more';
        position: absolute;
        bottom: 100%;
        width: max-content;
        background-color: black;
        padding: .3rem;
        border-radius: 3px;
        opacity: 0;
        transition: .2s;
    }
    #cover-scroll-container:hover::before{
        opacity: 1;
        transition-delay: 2s;
    }
    
    /* swipe icon */
    & #cover-swipe-container{
        --width: 4px;
        display: grid;
        place-items: start center;
        height: 100px;
        aspect-ratio: 1;
        position: absolute;
        top: 75%;
        background-size: cover;
        scale: 1;

        & #cover-swipe-phone{
            margin-top: 10px;
            width: 30px;
            height: 50px;
            border-radius: 8px;
            border: solid;
            border-color: white;
            border-width: 3px;
            position: relative;
            filter: drop-shadow(0 0 1rem black);

            & #cover-swipe-text{
                opacity: .5;
                border-radius: 2px;
                position: absolute;
                z-index: 1;
                left: calc(var(--width) / 2);
                right: calc(var(--width) / 2);
                top: calc(var(--width) / 2);
                bottom: calc(var(--width) * 3);
                overflow: hidden;
            }
            & #cover-swipe-text::before{
                content: '';
                display: block;
                height: 200%;
                left: 100%;
                z-index: 2;
                background-image: 
                    linear-gradient(180deg,
                        white 0%, 
                        white 40%, 
                        transparent 40%, 
                        transparent 100%
                    ),
                    linear-gradient(180deg,
                        transparent 0%, 
                        transparent 10%, 
                        white 10%, 
                        white 60%, 
                        transparent 60%, 
                        transparent 100% 
                    ) 
                ;
                background-size: 4px 6px, 100% 50%;
                animation-name: swipe-text;
                animation-duration: 2s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
            }
            & #cover-swipe-btn{
                position: absolute;
                background-color: white;
                width: calc(var(--width) * 2);
                aspect-ratio: 1;
                bottom: 2px;
                left: calc(50% - var(--width));
                border-radius: 50%;
            }
        }
        & #cover-swipe-phone::before, #cover-swipe-phone::after{
            content: '';
            position: absolute;
            height: 11px;
            aspect-ratio: 1;
            border-left-style: solid;
            border-bottom-style: solid;
            translate: 60% 55px;
            rotate: -45deg;
        }
        & #cover-swipe-phone::after{
            animation-name: scroll-arrow;
            animation-duration: 1.5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }
        & #cover-swipe-finger{
            z-index: 2;
            position: absolute;
            height: 40px;
            width: calc(var(--width) * 3);
            background-color: var(--colAccent);
            border-radius: 60% 60% 0 0;
            rotate: -45deg;
            left: 60%;
            top: 35%;

            animation-name: swipe-finger;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
    }
    & #cover-swipe-container::before{
        content: 'Scroll down to see more';
        position: absolute;
        bottom: 100%;
        width: max-content;
        background-color: black;
        padding: .3rem;
        border-radius: 3px;
        opacity: 0;
        transition: .2s;
    }
    #cover-swipe-container:hover::before{
        opacity: 1;
        transition-delay: 2s;
    }
}
@keyframes swipe-text {
    0%{
        translate: 0 0%;
    }
    20%{
        translate: 0 0%;
    }
    80%{
        translate: 0 -50%;
    }
    100%{
        translate: 0 -50%;
    }
}
@keyframes swipe-finger {
    0%{
        translate: 0 0%;
    }
    20%{
        translate: 0 0%;
    }
    80%{
        translate: 0 -70%;
    }
    100%{
        translate: 0 0%;
    }
}
@keyframes scroll-arrow {
    from{
        transform: translate(0, 0);
        opacity: 0;
    }
    30%{
        opacity: 1;
    }
    70%{
        transform: translate(-8px, 8px);
        opacity: 0;
    }
    to{
        transform: translate(-8px, 8px);
        opacity: 0;
        scale: .9;
    }
}
@keyframes scroll-flash {
    from{
        /* background-color: white; */
    }
    to{
        translate: 0 5px;
        /* background-color: var(--colAccent);
        filter: drop-shadow(0 0 5px var(--colAccent)); */
    }
}
#download-logo{
    position: absolute;
    right: 2rem;
    top: calc(2rem + var(--navbarSize));
    width: 40px;
    aspect-ratio: 1;
    background-color: black;
    background-image: url('../-assets/icons/icon_saveimage.svg');
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: 80% 60%;
    opacity: 0.15;
    border-radius: 4px;
}
#download-logo::after{
    content: 'Download Full-Size Logo';
    position: absolute;
    color: white;
    right: 110%;
    top: 50%;
    translate: 0 -50%;
    background-color: black;
    padding: .2rem;
    width: max-content;
    transition: .2s;
    opacity: 0;
    user-select: none;
    pointer-events: none;
}
#download-logo:hover{
    opacity: 0.4;
}
& #download-logo:hover::after{
    opacity: 1;
}
#back-to-maps{
    position: fixed;
    top: calc(var(--navbarSize) * 1);
    left: 0rem;
    background-color: var(--black-50);
    padding: .2rem;
    color: white;
    z-index: 2;
    opacity: .25;
    text-transform: uppercase;
    transition: opacity .2s;
}
#back-to-maps::before{
    /* content: url('../-assets/icons/icon_arrow.svg'); */
    display: inline-block;
    content: '';
    height: 1rem;
    aspect-ratio: 1;
    font-size: 1rem;
    line-height: 1rem;
    background-image: url('../-assets/icons/icon_arrow.svg');
    background-size: cover;
    translate: 0 2px;
}
#back-to-maps:hover{
    opacity: .75;
}

/* =========================================================== */
.content-section{
    min-height: 50vh;
    padding-top: calc(var(--navbarSize) * 1.5);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;

    background-image: url(../-assets/backgrounds/grid.svg), var(--grad_bluegrey);
    background-size: 64px, 100%;
    background-position: center;
    background-attachment: fixed;
}
.section-header, .section-subheader{
    font-size: 4rem;
    font-family: DIN;
    place-self: start;
    margin-left: 2rem;
    text-transform: uppercase;
    z-index: 1;
    font-weight: 100;
}
.section-subheader{
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* =========================================================== */
#desc{
    & .section-header, .section-subheader{
        filter: drop-shadow(0 0 5px var(--black-50));
    }
}
#desc-bg{
    position: absolute;
    transform-origin: left;
    inset: 0;
    scale: 2;
    z-index: 0;
    user-select: none;
    pointer-events: none;

    animation: descBG 180s ease infinite alternate;
    animation-play-state: paused;
}
#desc-bg[anim]{
    /* transform-origin: left; */
    animation-play-state: running;
}
@keyframes descBG {
    100%{
        transform-origin: right;
    }
}
#desc-container{
    display: grid;
    max-width: 60rem;
    place-items: start center;
    backdrop-filter: blur(3px) saturate(0) brightness(0.3);
    margin-inline: 2rem;
}
p.text, div.text{
    font-size: 1.1rem;
    width: 100%;
    margin-bottom: 1rem;

    & .desc-link{
        text-decoration: underline;
        color: var(--colAccent);
        position: relative;
        display: inline-block;
        transition: .2s;
    }
    & .desc-link::after{
        content: '';
        display: inline-block;
        height: 1rem;
        aspect-ratio: 1;
        background-image: url('../-assets/icons/icon_open.svg');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding-left: .2rem;
    }
    & .desc-link:hover{
        opacity: .7;
    }
}
p.text:last-of-type{
    margin-bottom: 0;
}
#desc-days{
    font-size: 1.2rem;
}
iframe{
    max-width: 100%;
    margin-bottom: 1rem;
    min-width: 256px;
}
#desc-pause_btn{
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    aspect-ratio: 1;
    border: none;
    background: none;
    background-image: url('../-assets/icons/icon_pause.svg');
    background-size: cover;
    opacity: .75;
    border-radius: 50%;
    transition: .2s;
    background-color: var(--black-25);
}
#desc-pause_btn:hover{
    opacity: 1;
    cursor: pointer;
}
#desc-pause_btn[pause]{
    background-image: url('../-assets/icons/icon_play.svg');
}
#banner-note{
    z-index: 1;
    background-color: var(--colAccent);
    background-image: linear-gradient(var(--black-50), var(--black-50));
    width: 100%;
    place-self: start;
    margin-top: 8rem;
    padding-block: 2rem;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;

    & p{
        z-index: 1;
        font-size: 1.1rem;
        color: white;
        max-width: 55rem;
        padding-inline: 4rem;

        & a{
            display: block;
            width: 2rem;
            height: 2rem;
            margin-top: .5rem;
            background-image: url('../-assets/icons/icon_open.svg');
            background-size: cover;
            scale: .9;
        }
        & a:hover{
            scale: 1;
        }
    }
}
#banner-note::before{
    content: '';
    display: block;
    background-color: var(--colAccent);
    height: 100%;
    aspect-ratio: 1;
    position: absolute;
    left: 0;
    top: 50%;
    translate: -71% -50%;
    rotate: 45deg;
    opacity: .5;
    box-shadow: 0 0 2rem var(--black-50);
}
#desc:has(#banner-note){
    margin-bottom: 0;
    padding-bottom: 0;
}

/* =========================================================== */
#screenshots-container{
    margin: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.screenshot-thumb{
    --a: rgba(0, 0, 0, 1);
    --b: rgba(0, 0, 0, .8);
    --scanlines: 32;
    mask-image: linear-gradient(0deg, var(--a) 0%, var(--a) 25%, var(--b) 25%, var(--b) 75%, var(--a) 75%, var(--a) 100%);
    mask-size: 100% calc(100% / var(--scanlines));
    width: 100%;
    filter: brightness(.8) sepia(1) hue-rotate(155deg) saturate(1.5);
    transition: .1s;
}
.screenshot-thumb:hover{
    filter: brightness(1.1);
    cursor: pointer;
    --b: rgba(0, 0, 0, .95);
}

/* =========================================================== */
#achiev-container{
    margin: 2rem;

    & #achiev-list-container{
        counter-reset: achiev-item;
        margin-top: 1.5rem;
        display: grid;
        gap: 1.5rem;

        & .achiev-item{
            --iconFileResolution: 128px;
            --iconScale: 1.5;
            --iconSize: calc(var(--iconFileResolution) / var(--iconScale));
            --iconImg: none;
            display: grid;
            grid-template-columns: var(--iconSize) 1fr;
            grid-template-rows: min-content 1fr;
            grid-template-areas: 
            "icon header"
            "icon desc"
            ;
            position: relative;
            font-size: 1.1rem;

            background: 
            /* conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--c)) 0    0, */
            conic-gradient(from 180deg at top    var(--b) right var(--b),var(--c)) 100% 0,
            /* conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--c)) 0    100%, */
            conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--c)) 100% 100%
            ;
            background-size: var(--corner-size) var(--corner-size);
            background-repeat: no-repeat;
            padding-right: var(--corner-size);
    
            & .achiev-item-icon{
                grid-area: icon;
                height: var(--iconSize);
                aspect-ratio: 1;
                background-color: var(--colAccent);
                /* background-image: var(--iconImg), url('../-assets/misc/ach_bg.webp'); */
                background-image: url('../-assets/misc/ach_bg.webp');
                background-size: cover;
                transition: .2s;
                position: relative;
                scale: 1;
                filter: drop-shadow(10px 10px 10px var(--black-25));

                & .achiev-item-icon-img{
                    width: 100%;
                }
            }
            
            & .achiev-item-header{
                margin-left: 1rem;
                grid-area: header;
            }
            & .achiev-item-header::after{
                counter-increment: achiev-item;
                content: '# ' counter(achiev-item);
                position: absolute;
                right: .6rem;
                top: .4rem;
                opacity: .25;
                font-size: 1rem;
                font-weight: normal;
            }
            & .achiev-item-desc{
                margin-left: 1rem;
                margin-bottom: var(--corner-size);
                margin-top: .5rem;
                grid-area: desc;
            }
        }
        /* & .achiev-item:hover{
            & .achiev-item-icon{
                scale: 1.2;
                rotate: -2.5deg;
                filter: drop-shadow(10px 10px 10px var(--black-50));
            }
        } */
    }
    & #achiev-ribbon{
        display: inline-block;
        width: 1.5rem;
        aspect-ratio: 1;
        background-image: url('../-assets/icons/achievement_trophy_white.webp');
        background-size: cover;
        scale: 1.25;
        translate: 0 .3rem;
    }

}

/* =========================================================== */
#soundtrack{
    & .section-subheader{
        text-transform: initial;
    }
}
.composer-note{
    font-size: 2rem;
    margin-left: .5rem;
}
.composer-link{
    font-size: 3rem;
    margin-left: .5rem;
    text-decoration: none;
    color: var(--colAccent);
    transition: filter .2s;
    position: relative;
}
.composer-link::after{
    display: inline-block;
    content: '';
    margin-left: .2rem;
    width: 1rem;
    aspect-ratio: 1;
    background-image: url('../-assets/icons/icon_open.svg');
    background-size: cover;
    filter: brightness(.5);
}
.composer-link:hover{
    filter: brightness(1.5);
}
.ost-container{
    --w: 256px;
    
    width: 90%;
    background: none;
    max-width: 60rem;
    margin-inline: auto;
    display: grid;
    place-items: center;
    gap: calc(var(--corner-size) * 4);
    padding: calc(var(--corner-size) * 2);
    padding-top: 3rem;
    padding-bottom: 4rem;
}
.ost-demo-container{
    width: var(--w);
    aspect-ratio: 1;
    background: var(--cornerBG);
    background-size: var(--corner-size) var(--corner-size);
    background-repeat: no-repeat;
    background-color: var(--black-50);
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: "a";
    position: relative;
    outline: solid;
    outline-width: 1px;
    outline-color: var(--white-10);

    & .ost-demo-bg-wrapper{
        width: 100%;
        user-select: none;
        pointer-events: none;
        grid-area: a;
        overflow: hidden;

        & .ost-demo-bg{
            width: 100%;
            opacity: .5;
            user-select: none;
            pointer-events: none;
            transition: .4s;
        }
    }
    & .ost-demo-eventname{
        position: absolute;
        bottom: 100%;

        font-family: DIN;
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    & .ost-demo-play{
        grid-area: a;
        height: 50%;
        aspect-ratio: 1;
        place-self: center;
        z-index: 1;
        border-radius: 50%;
        background-image: url('../-assets/icons/icon_play.svg');
        background-size: 125%;
        background-position: center;
        background-repeat: no-repeat;
        filter: drop-shadow(0 0 10px var(--black-75));
        scale: .5;
        transition: .1s;
        backdrop-filter: brightness(1.1) blur(2px) contrast(.75);
    }
    & .ost-demo-play:hover{
        cursor: pointer;
    }
    & .ost-demo-progress-bg{
        --cubesize: 4px;

        height: var(--cubesize);
        position: absolute;
        bottom: calc(var(--corner-size) - calc(var(--cubesize) * 3));
        left: calc(var(--corner-size) - var(--cubesize));
        right: calc(var(--corner-size) - var(--cubesize));
        background-color: rgba(128, 128, 128, 0.5);

        & .ost-demo-progress-bar{
            --progress: 100%;
            background-color: var(--colAccent);
            height: 100%;
            width: var(--progress);
            filter: brightness(1.25) drop-shadow(0 0 3px var(--colAccent));
            color: white;
            text-align: center;
        }
    }
    & .ost-demo-visualizer{
        --animSpeed: .2s;
        --cubesize: 4px;

        --pad: calc(var(--corner-size) - var(--cubesize));
        position: absolute;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(8, min-content);
        grid-auto-flow: column;
        gap: var(--cubesize);
        padding-inline: var(--pad);
        padding-bottom: var(--pad);

        visibility: hidden;

        animation-name: flipX;
        animation-duration: calc(var(--animSpeed) * 4);
        animation-iteration-count: infinite;
        animation-timing-function: linear;

        animation-play-state: paused;

        & .ost-demo-visualizer-bar{
            --cubes: 7;
            --addgap: calc(var(--cubes) * 2);
            height: calc(var(--cubesize) * var(--addgap));
            width: var(--cubesize);
            background-image: linear-gradient(0deg, var(--colAccent) 0%, var(--colAccent) 50%, transparent 50%, transparent 100%);
            background-size: var(--cubesize) calc(var(--cubesize) * 2);
            background-position: bottom;
            place-self: end;
            filter: brightness(1.25) drop-shadow(0 0 3px var(--colAccent));

            animation-duration: calc(var(--animSpeed) * 1);
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: ease-in-out;

            animation-play-state: paused;

        }
        & .ost-demo-visualizer-bar:nth-of-type(1){
            animation-name: visBar3;
        }
        & .ost-demo-visualizer-bar:nth-of-type(2){
            animation-name: visBar4;
        }
        & .ost-demo-visualizer-bar:nth-of-type(3){
            animation-name: visBar5;
        }
        & .ost-demo-visualizer-bar:nth-of-type(4){
            animation-name: visBar3;
        }
        & .ost-demo-visualizer-bar:nth-of-type(5){
            animation-name: visBar4;
        }
        & .ost-demo-visualizer-bar:nth-of-type(6){
            animation-name: visBar3;
        }
        & .ost-demo-visualizer-bar:nth-of-type(7){
            animation-name: visBar2;
        }
        & .ost-demo-visualizer-bar:nth-of-type(8){
            animation-name: visBar3;
        }
    }
}
.ost-demo-container[playing]{
    & .ost-demo-play{
        background-image: url('../-assets/icons/icon_pause.svg');
        border-radius: 5%;
    }
    & .ost-demo-visualizer{
        animation-play-state: running;
        visibility: visible;
    }
    & .ost-demo-visualizer-bar{
        animation-play-state: running;
    }
}
.ost-demo-container:has(.ost-demo-play:hover){
    & .ost-demo-bg-wrapper{
        & .ost-demo-bg{
            scale: 1.1;
        }
    }
}
@keyframes visBar8 {
    0%{
        --cubes: 1;
    }
    12.5%{
        --cubes: 1;
    }
    25%{
        --cubes: 1;
    }
    37.5%{
        --cubes: 2;
    }
    50%{
        --cubes: 3;
    }
    62.5%{
        --cubes: 4;
    }
    75%{
        --cubes: 5;
    }
    87.6%{
        --cubes: 6;
    }
    100%{
        --cubes: 7;
    }
}
@keyframes visBar5 {
    0%{
        --cubes: 1;
    }
    12.5%{
        --cubes: 1;
    }
    25%{
        --cubes: 1;
    }
    37.5%{
        --cubes: 2;
    }
    50%{
        --cubes: 3;
    }
    62.5%{
        --cubes: 4;
    }
    75%{
        --cubes: 5;
    }
    87.6%{
        --cubes: 5;
    }
    100%{
        --cubes: 5;
    }
}
@keyframes visBar4 {
    0%{
        --cubes: 1;
    }
    12.5%{
        --cubes: 1;
    }
    25%{
        --cubes: 1;
    }
    37.5%{
        --cubes: 2;
    }
    50%{
        --cubes: 3;
    }
    62.5%{
        --cubes: 4;
    }
    75%{
        --cubes: 4;
    }
    87.6%{
        --cubes: 4;
    }
    100%{
        --cubes: 4;
    }
}
@keyframes visBar3 {
    0%{
        --cubes: 1;
    }
    12.5%{
        --cubes: 1;
    }
    25%{
        --cubes: 1;
    }
    37.5%{
        --cubes: 2;
    }
    50%{
        --cubes: 3;
    }
    62.5%{
        --cubes: 3;
    }
    75%{
        --cubes: 3;
    }
    87.6%{
        --cubes: 3;
    }
    100%{
        --cubes: 3;
    }
}
@keyframes visBar2 {
    0%{
        --cubes: 1;
    }
    12.5%{
        --cubes: 1;
    }
    25%{
        --cubes: 1;
    }
    37.5%{
        --cubes: 2;
    }
    50%{
        --cubes: 2;
    }
    62.5%{
        --cubes: 2;
    }
    75%{
        --cubes: 2;
    }
    87.6%{
        --cubes: 2;
    }
    100%{
        --cubes: 2;
    }
}
@keyframes visBar1 {
    0%{
        --cubes: 1;
    }
    100%{
        --cubes: 1;
    }
}
@keyframes flipX {
    0%{
        scale: 1 1;
    }
    50%{
        scale: 1 1;
    }
    51%{
        scale: -1 1;
    }
    100%{
        scale: -1 1;
    }
}
/* 
    - icon flashes 8 times and stays on the 9th flash
    - text container starts appearing between 3rd and 4th icon flash
    - full width at 5th icon flash
    - text appears right before full width
*/
#assault-wrapper{
    --iconS: 32px;
    --containerH_mult: 1.5;
    --containerW_mult: 6.3;
    --containerH: calc(var(--iconS) * var(--containerH_mult)); /* 48px */
    --containerW: calc(var(--containerH) * var(--containerW_mult)); /* (ca. 300px ingame) */
    --colAss_h: 60deg;
    --colAss_s: 100%;
    --colAss_l: 58%;
    --colAss_a: 100%;
    --colAssault: hsla(var(--colAss_h), var(--colAss_s), var(--colAss_l), var(--colAss_a));

    position: fixed;
    top: calc(var(--navbarSize) + calc(var(--iconS) * 1));
    right: calc(var(--iconS) * 2);
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, min-content);
    gap: calc(var(--iconS) / 8);
    transform-origin: top right;
    z-index: 1;
    scale: 300%;

    & #assault-container{
        --corner-size: 10px;
        --b: calc(var(--corner-size) / 5);
        --c: #0000 25%, var(--colAssault) 0;

        background: conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--c)) 0    0,
        conic-gradient(from 180deg at top    var(--b) right var(--b),var(--c)) 100% 0,
        conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--c)) 0    100%,
        conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--c)) 100% 100%;
        background-size: var(--corner-size) var(--corner-size);
        background-repeat: no-repeat;
        
        height: var(--containerH);
        Width: var(--containerW);
        position: relative;
    }
    & #assault-container::before{
        --pulseSpeed: 600ms;
        --animEase: ease-in-out;
        --colAss_a: 25%;
        --colAssault: hsla(var(--colAss_h), var(--colAss_s), var(--colAss_l), var(--colAss_a));
        content: '';
        z-index: -1;
        position: absolute;
        inset: 0;
        background-color: var(--colAssault);
        animation: assPulse var(--pulseSpeed) var(--animEase) infinite alternate;
    }
    & #assault-icon{
        --iconFlashTime: 2s;
        --iconFlashes: 9;
        --iconFlashDuration: calc(var(--iconFlashTime) / var(--iconFlashes));

        animation: assIconFlash var(--iconFlashDuration) linear var(--iconFlashes);
        animation-play-state: paused;

        transform-origin: unset;
        height: var(--iconS);
        aspect-ratio: 1;

        background-color: var(--colAssault);
        mask-composite: intersect;
        mask-image: url(../-assets/misc/assault_corner.webp);
    }
}
@keyframes assPulse {
    to{
        filter: brightness(0);
    }
}
@keyframes assIconFlash {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;
    }
    50.1%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
#catvibe{
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1;
    width: 128px;
}

/* =========================================================== */
section#download{
    grid-template-rows: min-content 1fr;
    background: black;

    & #download-bg{
        position: absolute;
        filter: saturate(0) contrast(1) brightness(.5);
        transform: scale(1.5);
        height: 100%;

        user-select: none;
        pointer-events: none;
        z-index: 0;

        --a: rgba(0, 0, 0, 1);
        --b: rgba(0, 0, 0, .8);
        --scanlines: 100;
        mask-image: linear-gradient(0deg, var(--a) 0%, var(--a) 25%, var(--b) 25%, var(--b) 75%, var(--a) 75%, var(--a) 100%);
        mask-size: 100% calc(100% / var(--scanlines));
        
    }

    & #download-content{
        z-index: 1;
        /* min-width: 80%; */
        display: grid;
        place-items: center;
        gap: 4rem;
        margin-inline: calc(48px + 1rem);

        & .download-btn{
            position: relative;
            backdrop-filter: blur(5px);
            width: 100%;
            box-shadow: 0 0 15px black;
            
            & .download-btn-content{
                padding: var(--corner-size);
                display: grid;

                font-family: Arial, Helvetica, sans-serif;
                font-size: 1.2rem;
                color: white;

                & .download-btn-text{
                    display: block;
                    margin-top: .5rem;

                    & .download-btn-link{
                        color: var(--colAccent);
                        position: relative;
                        text-decoration: underline;
                    }
                    & .download-btn-link[offsite]::after{
                        display: inline-block;
                        content: '';
                        margin-left: .2rem;
                        width: 1rem;
                        aspect-ratio: 1;
                        background-image: url('../-assets/icons/icon_open.svg');
                        background-size: cover;
                        filter: brightness(.5);
                    }
                    & .download-btn-link[data-tooltip]::before{
                        --x: 0%;
                        content: attr(data-tooltip);
                        bottom: 150%;
                        left: -2rem;
                        z-index: 2;
                        position: absolute;
                        display: block;
                        width: max-content;
                        color: rgba(255, 255, 255, 0.75);
                        overflow: hidden;
                        visibility: hidden;
                        transform: scaleY(var(--x)) scaleX(var(--x));
                        transform-origin: bottom left;

                        --corner-size: 8px;
                        --b: calc(var(--corner-size) / 5);
                        background: conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--c)) 0    0,
                        conic-gradient(from 180deg at top    var(--b) right var(--b),var(--c)) 100% 0,
                        conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--c)) 0    100%,
                        conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--c)) 100% 100%;
                        background-size: var(--corner-size) var(--corner-size);
                        background-repeat: no-repeat;
                        background-color: black;
                        padding: calc(var(--corner-size) * 1);
                    }
                    & .download-btn-link[data-tooltip]:hover::before{
                        visibility: visible;
                        user-select: none;
                        pointer-events: none;
                        --x: 100%;
                        transition: .2s;
                        transition-delay: 1s;
                        
                    }
                    & .download-btn-link:hover{
                        filter: brightness(1.5);
                    }
                }
                & li.download-btn-text::before{
                    content: 'l ';
                    font-family: Icons;
                }
                & hr{
                    margin-block: var(--corner-size);
                }
                & .download-btn-list{
                    margin-top: .5rem;
                    margin-left: calc(var(--corner-size) * 1.5);

                    & .download-btn-list-item{
                        margin-bottom: .5rem;
                    }
                }
                & .code{
                    background-color: #303030;
                    padding: .2rem;
                    padding-inline: .4rem;
                    border-radius: 1px;
                    font-size: 1rem;
                }
            }
            & .download-btn-button-link{
                place-self: center;
            }
            & .download-btn-button-link[offsite]::after{
                display: inline-block;
                content: '';
                margin-left: .2rem;
                width: 1rem;
                aspect-ratio: 1;
                background-image: url('../-assets/icons/icon_open.svg');
                background-size: cover;
                filter: brightness(.5);
                transform: translateY(100%);
                opacity: .5;
            }
            & .download-btn-button{
                font-size: 1.5rem;
                background: none;
                color: var(--colAccent);
                border: none;
                text-transform: uppercase;
                position: relative;
                
                --corner-size: 8px;
                --b: calc(var(--corner-size) / 5);
                --c: #0000 25%,var(--colAccent) 0;
                background: 
                conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--c)) 0    0,
                conic-gradient(from 180deg at top    var(--b) right var(--b),var(--c)) 100% 0,
                conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--c)) 0    100%,
                conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--c)) 100% 100%;
                background-size: var(--corner-size) var(--corner-size);
                background-repeat: no-repeat;
                padding-inline: calc(var(--corner-size) * 1.5);
                padding-top: calc(var(--corner-size) * 1.5);
                padding-bottom: calc(var(--corner-size) * 1.5);

                transition-property: padding-top, padding-bottom, margin-top, margin-bottom;
                transition-duration: .2s;
                transition-delay: .2s, 0s, .2s, 0s;
                transition-timing-function: cubic-bezier(0.25, 0, 1, 0.25);
            }
            & .download-btn-button::before{
                content: '';
                position: absolute;
                inset: 0;
                background-color: var(--colAccent);
                opacity: .1;
            }
            & .download-btn-button:hover{
                cursor: pointer;
            }
            & .download-btn-button-link:hover{
                & .download-btn-button{
                    padding-top: calc(var(--corner-size) * 0.5);
                    padding-bottom: calc(var(--corner-size) * 0.5);
                    margin-top: calc(var(--corner-size) * 1);
                    margin-bottom: calc(var(--corner-size) * 1);
                    filter: brightness(1.5);
                    transition-delay: .2s, 0s, .2s, 0s;
                    transition-timing-function: cubic-bezier(0.25, 0, 1, 0.25);
                }
            }
        }
        & #download-btn-download{
            box-shadow: 0 0 1px var(--colAccent), 0 0 15px black;
        }
        & .download-btn::before{
            content: '';
            position: absolute;
            height: 48px;
            aspect-ratio: 1;
            background-color: rgb(0, 0, 0);
            right: calc(100% + .5rem);
            background-size: 80%;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 2px;
            filter: invert(1);
        }
        & #download-btn-download::before{
            background-image: url('../-assets/icons/icon_download.svg');
        }
        & #download-btn-guide::before{
            background-image: url('../-assets/icons/icon_wiki.svg');
        }
        & .download-btn-bg-cont{
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: -1;

            & .download-btn-bg{
                position: absolute;
                bottom: 0;
                left: 100%;
                transform: translate(-75%, 25%);
                width: 256px;
                aspect-ratio: 1;
                user-select: none;
                pointer-events: none;
                filter: contrast(0) brightness(2);
                opacity: 0.1;
                transition: scale 20s, rotate 10s;
                /* transform-origin: bottom right; */
            }
        }
    }
}
.download-btn:hover{
    & .download-btn-bg{
        scale: 1.1;
        rotate: 2.5deg;
    }
}

/* =========================================================== */
section#credits{
    background: none;
    background-color: black;
}
#credits-background{
    --bgImg: url('../-assets/heists/pd2/hardware_store/1.jpg');
    position: absolute;
    inset: 0;
    background-image: var(--bgImg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: blur(5px) grayscale(1) contrast(.5) brightness(.8);
}
#credits-content{
    z-index: 1;
    padding-inline: 2rem;
}
#credits-table{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--corner-size);
    gap: .5rem 2rem;
    font-size: 1.2rem;
    box-shadow: 0 0 1rem var(--black-25) inset;
}
.credits-item{
    display: grid;
    grid-column: 1 / span 2;
    grid-template-columns: subgrid;
    border-bottom: dotted;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.25);
    padding-bottom: .5rem;

    & .credits-item-name{
        grid-column: 1;
        color: var(--colAccent);
    }
    & .credits-item-name[href]::after{
        content: ' o';
        font-size: 1rem;
        font-family: Icons;
        color: grey;
        opacity: .75;
    }
    & .credits-item-name[href]:hover{
        filter: brightness(1.5);
    }
    & .credits-item-list{
        grid-column: 2;
        list-style: none;
        text-transform: capitalize;
        
        & .credits-item-list-item:not(:last-of-type){
            padding-bottom: .5rem;
        }
        & .credits-item-list-item:not(:last-of-type)::after{
            content: ',';
        }
    }
}
.credits-item:last-of-type{
    border: none;
}

#beardlib-wrapper{
    margin-top: 2rem;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    place-items: end;
    gap: 2rem;
}
.beardlib-logo{
    height: 192px;
    transition: .2s;
}
#beardlib-wrapper > a:last-child{
    place-self: start;
}
#beardlib-wrapper > a:first-child{
    scale: .8;
}
.beardlib-logo:hover{
    transform: translateY(-10px);
    filter: drop-shadow(0 10px 3px var(--black-50));
}

/* =========================================================== */
#pagenav-container{
    --iconSize: 56px;
    
    position: relative;
    width: 100%;
    padding-top: calc(var(--iconSize) / 1.25);
    height: calc(auto + 1rem);
    z-index: 2;
    background-image: linear-gradient(transparent, var(--black-75));
    position: fixed;
    top: 100%;
    text-align: center;
    translate: 0 -30%;
    transition: translate .2s;
}
#pagenav-container:hover, #pagenav-container:hover:focus, #pagenav-container[slideout]{
    translate: 0 -100%;
}
#pagenav-container::after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(var(--iconSize) / 1.5);
    
    aspect-ratio: 2/1;
    background-image: radial-gradient(circle, rgba(255,255,255,1) 30%, rgba(0,0,0,0) 35%);
    background-repeat: repeat-x;
    background-size: 33%;
    translate: -50% -50%;
    transition: .2s;
}
#pagenav-phonebtn{
    position: absolute;
    width: var(--iconSize);
    aspect-ratio: 1;
    /* background-color: red; */
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
}

.pagenav-btn{
    display: inline-block;
    width: var(--iconSize);
    aspect-ratio: 1;

    background-image: url('../-assets/icons/pagenav__empty.webp');
    background-size: cover;
    margin: .25rem;
    transition: translate .2s;
    filter: drop-shadow(0 0 5px var(--black-50));
}
.pagenav-btn::after{
    content: attr(data-icon);
    color: white;
    position: absolute;
    background-color: black;
    translate: -50% -125%;
    font-family: arial;
    padding: .7rem;
    padding-block: .3rem;
    border-radius: 1rem;
    user-select: none;
    pointer-events: none;
    opacity: 0;
    transition: .2s;
    text-transform: capitalize;
    width: max-content;
}
.pagenav-btn:hover{
    translate: 0 -5px;
}
.pagenav-btn:hover::after{
    translate: -50;
    opacity: 1;
    transition-delay: 1s;
    z-index: 100;
}
/* icons */
.pagenav-btn[data-icon=top]{
    background-image: url('../-assets/icons/pagenav_home.webp');
}
.pagenav-btn[data-icon=desc]{
    background-image: url('../-assets/icons/pagenav_heist.webp');
}
.pagenav-btn[data-icon=screenshots]{
    background-image: url('../-assets/icons/pagenav_image.webp');
}
.pagenav-btn[data-icon=achievements]{
    background-image: url('../-assets/icons/pagenav_achievement.webp');
}
.pagenav-btn[data-icon=soundtrack]{
    background-image: url('../-assets/icons/pagenav_music.webp');
}
.pagenav-btn[data-icon=skins]{
    background-image: url('../-assets/icons/pagenav_skin.webp');
}
.pagenav-btn[data-icon=mask]{
    background-image: url('../-assets/icons/pagenav_mask.webp');
}
.pagenav-btn[data-icon=mask-materials]{
    background-image: url('../-assets/icons/pagenav_mask_material.webp');
}
.pagenav-btn[data-icon=mask-patterns]{
    background-image: url('../-assets/icons/pagenav_mask_pattern.webp');
}
.pagenav-btn[data-icon=download]{
    background-image: url('../-assets/icons/pagenav_download.webp');
}
.pagenav-btn[data-icon=credits]{
    background-image: url('../-assets/icons/pagenav_person.webp');
}
/* tooltip tweaks */
.pagenav-btn[data-icon=desc]::after{
    content: 'Description';
}
.pagenav-btn[data-icon=skins]::after{
    content: 'Weapon Skins';
}

/* =========================================================== */
#settings-wrapper{
    --btn: 32px;
    position: fixed;
    bottom: var(--btn);
    left: 0;
    z-index: 5;
    
    display: grid;
    grid-template-columns: 1fr var(--btn);
    transition: translate .3s;
}
#settings-background{
    position: fixed;
    inset: 0;
    z-index: 4;
}
.hide-settings{
    translate: calc(-100% + var(--btn));
}
#settings-button{
    width: 100%;
    aspect-ratio: 1;
    border: none;
    border-radius: 0 48px 48px 0;
    background-color: var(--black-75);
    background-image: url('../-assets/icons/icon_gear.svg');
    background-size: cover;
    opacity: .15;
    transition: opacity .2s;
    place-self: end;
}
#settings-button:hover{
    opacity: .5;
    cursor: pointer;
}
#settings-wrapper:not(.hide-settings){
    & #settings-button{
        opacity: .5;
    }
}
#settings-container{
    display: grid;
    gap: .5rem;
    padding: 1rem;

    background-color: var(--black-75);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    backdrop-filter: blur(5px);
}
.settings-item{
    --icon: 24px;
    display: grid;
    grid-template-columns: var(--icon) 1fr;
    gap: 1rem;
}
.settings-item:last-of-type{
    margin-top: 1rem;
    margin-bottom: -4rem;
    border-top: dotted;
    padding-top: 1.5rem;
    border-width: 1px;
}
.settings-item-input{
    cursor: pointer;
}
.settings-item-input[type=range]{
    appearance: slider-vertical;
    height: 50%;
}
.settings-item-input[type=checkbox]{
    appearance: none;
    display: block;
    aspect-ratio: 1;
    /* background-color: red; */
    --c: rgb(180, 180, 180);
    --x: 2px;
    --y: calc(var(--x) * 3);
    --t: transparent;
    --b: black;
    background-image: 
        linear-gradient(90deg,
            var(--c), 
            var(--c) var(--x),
            var(--t) var(--x),
            var(--t) calc(var(--icon) - var(--x)),
            var(--c) calc(var(--icon) - var(--x)),
            var(--c)
        ),
        linear-gradient(
            var(--c), 
            var(--c) var(--x),
            var(--t) var(--x),
            var(--t) calc(var(--icon) - var(--x)),
            var(--c) calc(var(--icon) - var(--x)),
            var(--c)
        );
    mask-image:
        
        linear-gradient(
            var(--b), 
            var(--b) var(--y), 
            var(--t) var(--y), 
            var(--t), 
            var(--t) calc(var(--icon) - var(--y)),
            var(--b) calc(var(--icon) - var(--y))
        ),
        linear-gradient(90deg,
            var(--b), 
            var(--b) var(--y), 
            var(--t) var(--y), 
            var(--t), 
            var(--t) calc(var(--icon) - var(--y)),
            var(--b) calc(var(--icon) - var(--y))
        )
    ;
    mask-composite: intersect;
    mask-size: cover;
}
.settings-item-input[type=checkbox]:checked{
    --y: 0;
    background-image: 
        linear-gradient(90deg,
            var(--c), 
            var(--c) var(--x),
            var(--t) var(--x),
            var(--t) calc(var(--icon) - var(--x)),
            var(--c) calc(var(--icon) - var(--x)),
            var(--c)
        ),
        linear-gradient(
            var(--c), 
            var(--c) var(--x),
            var(--t) var(--x),
            var(--t) calc(var(--icon) - var(--x)),
            var(--c) calc(var(--icon) - var(--x)),
            var(--c)
        ),
        conic-gradient(
            var(--t), 
            var(--t) 270deg, 
            var(--c) 270deg, 
            var(--c))
    ;
    background-position: center, center, calc( var(--icon) / 4) calc( var(--icon) / 4);
    background-repeat: no-repeat;

}
.settigns-item-label{
    /* display: block; */
    place-self: center start;
}


/* =========================================================== */
.item-showcase-container{
    --itemWidth: 256px; 

    max-width: calc(100% - 4rem);
    margin-inline: 2rem;
    background-color: var(--black-50);
    overflow-x: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--white-50) transparent;
    padding-block: 2rem;
    margin-top: 2rem;
    position: relative;

    & .item-showcase-list{
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--itemWidth);
        padding-inline: 2rem;
        gap: 1rem;
    }
}
.showcase-list-item{
    width: var(--itemWidth);
    aspect-ratio: 2/1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "a";
    place-items: center;

    & .showcase-item-icon{
        user-select: none;
        grid-area: a;
        z-index: 1;
        filter: drop-shadow(0 0 5px var(--black-50));
        transition: .2s;
    }
    & .showcase-item-name{
        --colText: white;

        grid-area: a;
        place-self: end center;
        opacity: 0;
        translate: 0 -50%;
        transition: .2s;
        user-select: none;
        z-index: 2;

        & span{
            color: var(--colText);
        }
    }
}
.showcase-list-item:hover{
    & .showcase-item-icon{
        translate: 0 -5px;
    }
    & .showcase-item-name{
        translate: 0 1rem;
        opacity: .75;
    }

}

/* ----------------------------- */
& .skins-item{

    & .skins-item-rarity{
        --colBG: white;

        background-image: 
        linear-gradient(19deg, var(--colBG), transparent, var(--colBG)),
        radial-gradient(ellipse at 35% 60%, transparent, var(--colBG))
        ;
        width: var(--itemWidth);
        aspect-ratio: 2/1;
        grid-area: a;
        transform: scaleY(.48) scaleX(.48) skewY(-19deg);
        position: relative;
        mask-image: 
        linear-gradient(10deg, rgba(0, 0, 0, 0.7), transparent 45%, rgba(0, 0, 0, 0.7)),
        repeating-linear-gradient(233deg, rgba(255,255,255, 0.4), rgba(255,255,255, 0.5) 1px, transparent -19px, transparent 2px)
        ;
        overflow: hidden;
        
        & .skins-item-rarity-addon{
            user-select: none;
            position: absolute;
            top: 0;
            right: 0;
            aspect-ratio: 1;
            transform: skewY(19deg);
            filter: invert(1);
            opacity: .8;
            scale: 1.2;
            rotate: -10deg;
        }
    }

    & .skins-item-rarity::after{
        --offset: -200%;
        content: '';
        position: absolute;
        inset: 2rem;
        background-image: linear-gradient(transparent, white, transparent);
        transform: skewY(19deg) rotate(-180deg) scaleY(2) scaleX(4);
        rotate: -45deg;
        translate: var(--offset) var(--offset);
    }
}
& .skins-item:hover{
    cursor: zoom-in;

    & .skins-item-icon{
        translate: 0 -5px;
    }
    & .skins-item-name{
        translate: 0 .5rem;
        opacity: .75;
    }
    & .skins-item-rarity::after{
        transition: .5s;
        --offset: 200%;
    }
}

/* SCREENSHOT PREVIEW */
#screenshot-preview-wrapper{
    z-index: 10;
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;

    & #screenshot-preview-bg{
        background-color: var(--black-25);
        position: absolute;
        inset: 0;
        backdrop-filter: blur(10px);
    }
    & #screenshot-preview-bg:hover{
        cursor: pointer;
    }
    & #screenshot-preview-container{
        z-index: 1;
        display: grid;
        place-items: center;
        grid-template-rows: 1fr min-content;
        width: calc(100% - calc(var(--corner-size) * 2));
        height: 80%;
        max-height: 80%;
        position: relative;
        padding: var(--corner-size);

        & #screenshot-preview-img{
            --img: url('../-assets/misc/kitteh.svg');
            width: 100%;
            height: 100%;
            background-image: var(--img);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
        & #screenshot-preview-close, #screenshot-preview-hotkeys-btn{
            --h: 32px;
            height: var(--h);
            aspect-ratio: 1;
            background-color: black;
            background-image: url('../-assets/icons/icon_close.svg');
            background-size: cover;
            position: absolute;
            top: var(--corner-size);
            right: var(--corner-size);
            transition: scale .2s;
            border: none;
        }
        & #screenshot-preview-hotkeys-btn{
            --x: 1.5;
            --p: calc(var(--corner-size) + calc(var(--h) * var(--x)));
            top: var(--p);

            background-image: url('../-assets/icons/icon_info.svg');
        }
        & #screenshot-preview-close:hover, #screenshot-preview-hotkeys-btn:hover{
            scale: 1.1;
            cursor: pointer;
        }
        & #screenshot-preview-hotkeys-list{
            --h: 32px;
            --x: 1.5;
            --p: calc(var(--corner-size) + calc(var(--h) * var(--x)));
            top: var(--p);
            right: calc(var(--corner-size) + var(--h));
            position: absolute;

            background-color: black;
            color: white;
            padding: 1rem;
            padding-top: .5rem;
            display: grid;
            gap: .5rem;
            font-family: Arial, Helvetica, sans-serif;
            grid-template-columns: min-content 1fr;
            user-select: none;

            & .hotkey-list-item-text{
                place-self: center start;
            }
            & .hotkey-list-item-key-container{
                display: grid;
                grid-auto-flow: column;
                gap: .5rem;
                width: 100%;
                place-items: end;
                font-weight: 600;

                & .hotkey-list-item-key{
                    width: 1.5rem;
                    height: 1.5rem;
                    text-align: center;
                    font-size: .9rem;
                    line-height: 1.5rem;
                    display: block;
                    padding: .2rem;
                    background-color: var(--white-25);
                    border-radius: 5px;
                }
                & .hotkey-list-item-key:not(:last-of-type){
                    opacity: .5;
                }
            }
        }

        & #screenshot-preview-btn-container{
            color: rgba(255, 255, 255, 0.5);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1.2rem;
            margin-block: 1rem;
            display: grid;
            place-items: center;
            grid-template-columns: min-content 1fr min-content;
            width: 100%;

            & #screenshot-preview-btn-count::before{
                content: attr(data-current);
            }
            & #screenshot-preview-btn-count::after{
                content: attr(data-total);
            }
            & #screenshot-preview-btn-count{
                user-select: none;
            }
            & .screenshot-preview-btn{
                width: 64px;
                aspect-ratio: 1;
                position: relative;
                background: none;
                border: none;
            }
            & .screenshot-preview-btn:hover{
                cursor: pointer;
            }
            & .screenshot-preview-btn:hover::before{
                opacity: 1;
            }
            & .screenshot-preview-btn::after{
                content: '';
                position: absolute;
                inset: 0;
                scale: .5;
                border-top: solid;
                border-left: solid;
                border-color: var(--white-50);
                border-width: 12px;
                rotate: -45deg;
                translate: 10% 0;
            }
            & .screenshot-preview-btn::before{
                content: '';
                position: absolute;
                inset: 0;
                background-color: rgba(255, 255, 255, 0.1);
                opacity: 0;
                transition: .2s;
            }
            & #screenshot-preview-btn-r::after{
                scale: -.5;
                translate: -10% 0;
            }
        }
    }
}
.hotkey-list-item-key-container:nth-of-type(-n + 2){
    & .hotkey-list-item-key:last-of-type{
        font-family: Icons;
        font-size: 1.5rem!important;
    }
}

/* =========================================================== */
#item-showcase-preview{
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;

    & #item-showcase-bg{
        position: absolute;
        inset: 0;
        backdrop-filter: blur(10px);
        z-index: -1;
    }
    & #item-showcase-bg:hover{
        cursor: pointer;
    }

    & #item-showcase-container{
        width: 100%;
        height: 60vh;
        display: grid;
        place-items: center;
        padding-block: 2rem;
        background-image: 
        linear-gradient(calc(150deg - 180deg),
        rgba(11,20,36, 0.2),
        rgba(20,30,42, 0.2),
        rgba(25,25,25, 0.2),
        rgba(19,19,19, 0.2)
        );
        backdrop-filter: blur(25px) saturate(0) contrast(.9);
        box-shadow: 0 0 10px var(--black-50);
        position: relative;
        overflow-y: hidden;

        & #item-showcase-img{
            --img: url("../-assets/misc/kitteh.svg");

            width: 100%;
            height: 100%;
            background-image: var(--img);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
        }
        & #item-showcase-img::before{
            content: '';
            position: absolute;
            inset: 0;
            width: 50%;
            background-image: radial-gradient(var(--black-75), var(--black-50), transparent, transparent);
            transform: translateX(50%) translateY(50%) scaleY(.1);
            filter: blur(20px);
            opacity: .75;
            user-select: none;
            pointer-events: none;
        }

        & #item-showcase-header, #item-showcase-footer{
            position: absolute;
            top: .5rem;
            left: 2rem;
            font-family: DIN;
            font-size: 2rem;
            color: white;
            text-shadow: 0 0 5px black;
            user-select: none;
        }
        & #item-showcase-footer{
            --color: white;
            top: unset;
            bottom: .5rem;
            color: var(--color);
        }

        & #item-showcase-btn{
            position: absolute;
            top: 2rem;
            right: 2rem;
            width: 2rem;
            aspect-ratio: 1;
            border: none;
            background-color: var(--black-25);
            background-image: url('../-assets/icons/icon_close.svg');
            background-size: cover;
            transition: scale .2s;
            z-index: 1;
        }
        & #item-showcase-btn:hover{
            scale: 1.1;
            cursor: pointer;
        }
    }
}

/* =========================================================== */
.col-accent{
    color: var(--colAccent);
}
.corner-box{
    background: var(--cornerBG);
    background-size: var(--corner-size) var(--corner-size);
    background-repeat: no-repeat;
    background-color: var(--black-50);
    padding: calc(var(--corner-size) * 2);

    outline: solid;
    outline-width: 1px;
    outline-color: var(--white-10);
}
.corner-box-nopad{
    background: var(--cornerBG);
    background-size: var(--corner-size) var(--corner-size);
    background-repeat: no-repeat;
    background-color: var(--black-50);

    outline: solid;
    outline-width: 1px;
    outline-color: var(--white-10);
}
.hide{
    visibility: hidden;
}
.icn{
    font-family: Icons;
    user-select: none;
}

/* =========================================================== */
@media (orientation: landscape){
    #desc-container{
        grid-template-columns: repeat(2, 1fr);
        gap: 0 2rem;
    }
    #desc-container[no-trailer]{
        grid-template-columns: 1fr;
    }
    #desc-briefing, #desc-days{
        grid-column: 2;
    }
    #desc-trailer{
        grid-column: 1;
        grid-row: 1/3;
    }
    #screenshots-container{
        grid-template-columns: repeat(4, 1fr);
    }
    #screenshot-preview-container{
        display: grid;
        grid-template-rows: repeat(2, min-content);
        max-width: 90%;
    }
    #screenshot-preview-btn-container{
        width: 50%;
        max-width: 50%;

        background: var(--cornerBG);
        background-size: var(--corner-size) var(--corner-size);
        background-repeat: no-repeat;
        padding: var(--corner-size);

    }
    .ost-container{
        grid-auto-flow: column;
    }
    #download-content{
        min-width: unset !important;
        width: 50vw;
    }
}

@media (width > 2200px){
    #screenshots-container{
        grid-template-columns: repeat(6, 1fr);
    }
}