/* =========================
   TITLE SCREEN
========================= */

.title-screen{

    position:fixed;
    inset:0;

    z-index:999999999;

    background:black;
}

.title-background{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

.title-logo{

    position:absolute;

    left:50%;
    top:50%;

    width:78%;
    max-width:420px;

    transform:translate(-50%,-50%) scale(0);

    z-index:5;

    pointer-events:none;
}

.tap-text{

    position:absolute;

    left:50%;

    bottom:13%;

    transform:translateX(-50%);

    color:white;

    font-size:18px;

    font-weight:500;

    letter-spacing:1px;

    z-index:5;
}

.credits{

    position:absolute;

    left:50%;

    bottom:4%;

    transform:translateX(-50%);

    color:white;

    opacity:.55;

    font-size:11px;

    font-weight:300;

    letter-spacing:.6px;

    z-index:5;
}

.title-top-gradient{

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:14%;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.95),
        rgba(0,0,0,0)
    );

    z-index:2;
}

.title-bottom-gradient{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:32%;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.95),
        rgba(0,0,0,0)
    );

    z-index:2;
}

.fade-screen{

    position:fixed;

    inset:0;

    background:black;

    opacity:0;

    pointer-events:none;

    transition:opacity 1s;

    z-index:999999;
}

.fade-screen.visible{

    opacity:1;
}