#ucp-intro-overlay {

    position: fixed;
    inset: 0;

    background: #000;

    z-index: 999999;

    overflow: hidden;

}

#ucp-intro-overlay::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,0) 40%,
            rgba(0,0,0,.45) 100%
        );
}

#ucp-roots {

    position:absolute;

    top:50%;
    left:50%;

    width:30%;
    height:auto;

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

    object-fit:contain;

    opacity:0;

    z-index:5;

    pointer-events:none;

}

#ucp-logo-container {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 30;

}

#ucp-logo {

    width: 380px;

    max-width: 70vw;

    opacity: 0;

    filter: drop-shadow(0 0 15px rgba(255,255,255,.35));

}

#ucp-tagline {

    margin-top: 25px;

    text-align: center;

    color: #fff;

    opacity: 0;

    line-height: 1.8;

}

.ucp-line-1 {

    font-size: 14px;

    letter-spacing: 10px;

}

.ucp-line-2 {

    font-size: 24px;

    letter-spacing: 5px;

}

#ucp-slides {

    position:absolute;
    inset:0;

    z-index:15;

}

.ucp-slide {

    position:absolute;
    inset:0;

    z-index:20;

    opacity:0;

    background-size:cover;
    background-position:center;
}

#ucp-skip {

    position: absolute;

    bottom: 30px;

    right: 40px;

    z-index: 100;

    color: white;

    text-decoration: none;

    letter-spacing: 3px;

    font-size: 12px;

}

#ucp-skip:hover {

    opacity: .8;

}

@media (max-width:768px) {

    #ucp-logo {

        width: 260px;

    }

    .ucp-line-2 {

        font-size: 16px;

        letter-spacing: 3px;

    }

}

.ucp-fade-out {

    opacity: 0 !important;

    transition: opacity 1s ease !important;

}