#valve-intro-overlay {
    position: fixed;
    background: black;
    z-index: 99999;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#valve-intro-overlay img {
    max-width: 60vw;
    max-height: 60vh;
    opacity: 0;
}

#valve-intro-content {
    position: relative;
    inset: 0;
    height: 100vh;
    width: auto;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#valve-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 1;
    position: relative;
}

#valve-logo {
    position: absolute;
    z-index: 2;
    width: 25%;
    right: 12%;
    bottom: 30%;
    opacity: 0;
    transition: opacity 3s;
}

#black-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    z-index: 3;
}

#valve-intro-overlay.show-bg #valve-bg {
    opacity: 1;
    transition: opacity 3s;
}

#valve-intro-overlay.show-logo #valve-logo {
    opacity: 60%;
    transition: opacity 3s;
}

#valve-intro-overlay.hide #black-screen {
    opacity: 1;
    transition: opacity 4s;
}

body.intro-active {
    overflow: hidden !important;
}