html {
    user-select: none;
}

body {
    width: 100vw;
    height: 100vh;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    background-color: #000;
    position: relative;
}

::selection {
    background: rgba(0,0,0,0);
}

ul {
    margin: 0.5em 0.25em;
    padding: 0.5em 1.5em;
}

#vp-container {
    position: absolute;
    inset: 0;
    aspect-ratio: calc(16/9);
    max-width: 100%;
    max-height: 100%;
    background-color: #000;
    overflow: hidden;
    margin: auto;
}

#vp-container video.hero {
    width: 100%;
    height: 100%;
}

#vp-container video.hero.fade-video {
    animation: fade-video 0.75s ease-in forwards;
}

#vp-container .click-catcher {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#vp-container .click-catcher.has-flash {
    background-color: #fff;
    opacity: 0;
    animation: main-flash 1s ease-out;
}

#vp-container #path-layer,
#vp-container #vehicle-layer,
#vp-container #info-box-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}
#info-box-container {
    pointer-events: none;
}
#vp-container #path-layer {
    opacity: 0;
    pointer-events: none;
}

#path-layer svg {
    width: 100%;
    height: auto;
}

#vid-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

div.vehicle {
    top: 0;
    left: 0;
    position: absolute;
    height: 55px;
    aspect-ratio: calc(2);
    z-index: 10;
}

div.vehicle > img {
    width: 100% !important;
    height: auto;
    object-fit: cover;
}

div.vehicle_animated {
    top: 0;
    left: 0;
    position: absolute;
    height: 100px;
    aspect-ratio: calc(543/200);
    background-size: 100% auto;
    background-position: 0 0;
}

div.vehicle_animated .sprite {
    background-size: 100% auto;
    background-position: 0 0;
    height: 100%;
}

.fadeIn {
    animation: fade-scene-in 1.5s ease-out forwards;
}

.fadeOut {
    animation: fade-video 1s ease-in forwards;
}

#overlay-bg-layer {
    position: absolute;
    animation: overlay-window-open 1s ease-out forwards;
    z-index: 20;
    pointer-events: none;
}

#overlay-frame {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
}

@keyframes overlay-window-open {
    0% {
        height: 0;
        width: 0;
        top:50%;
        left:50%;
        transform: translateX(-50%) translateY(-50%);
        opacity: 0;
        background-color: #3a3;
        filter: blur(20px);
    }

    20% {
        width: 100%;
        height: 5%;
        filter: blur(5px);
    }

    30% {
        height: 100%;
        width: 100%;
        opacity: 1;
        background-color: #fff;
        filter: blur(0);
    }

    100% {
        height: 100%;
        width: 100%;
        opacity: 1; /* 0.2; */
        top:50%;
        left:50%;
        transform: translateX(-50%) translateY(-50%);
    }
}

@keyframes main-flash {
    0% {
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}

@keyframes fade-video {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-scene-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}