*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI', sans-serif;
}

body{
    overflow:hidden;
    background:#fff;
}

/* INTRO */
#intro{
    position:fixed;
    inset:0;
    z-index:9999;
    overflow:hidden;
}

.curtain{
    position:absolute;
    top:0;
    width:50%;
    height:100%;
    transition:transform 2s ease-in-out;
    background:
        linear-gradient(
            135deg,
            #ff003c,
            #001f5c,
            #00a859
        );
}

.left{
    left:0;
    border-right:4px solid rgba(255,255,255,.2);
}

.right{
    right:0;
    border-left:4px solid rgba(255,255,255,.2);
}

.open .left{
    transform:translateX(-100%);
}

.open .right{
    transform:translateX(100%);
}

/* Contenido central */
.intro-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:white;
    z-index:10;
}

.ball{
    font-size:90px;
    animation:spin 3s linear infinite;
}

.intro-content h1{
    font-size:4rem;
    letter-spacing:4px;
    text-shadow:0 0 20px rgba(255,255,255,.8);
}

.intro-content p{
    font-size:1.3rem;
    margin-top:10px;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* Destellos */
#intro::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.4), transparent 15%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.3), transparent 15%),
        radial-gradient(circle at 50% 70%, rgba(255,255,255,.3), transparent 15%);
    animation:lights 3s infinite alternate;
}

@keyframes lights{
    from{
        opacity:.4;
    }
    to{
        opacity:1;
    }
}