* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    height: 100vh;
    background: #181818;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}


/* LOGO */

header {
    position: absolute;
    top: 25px;
    left: 30px;
}


.logo {
    width: 70px;
    height: auto;
}


/* TEXTO CENTRAL */

main {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.coming {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 8vw;

    font-size: clamp(36px, 10vw, 100px);
    font-weight: 700;
    letter-spacing: clamp(1px, 0.8vw, 8px);

    white-space: nowrap;
    text-align: center;

    animation: glow 3s infinite alternate;
}
.coming span {
    opacity: 0;
    transform: translateY(40px);
    animation: appear 0.7s forwards;
}


/* aparición letra por letra */

.coming span:nth-child(1){animation-delay:.1s}
.coming span:nth-child(2){animation-delay:.2s}
.coming span:nth-child(3){animation-delay:.3s}
.coming span:nth-child(4){animation-delay:.4s}
.coming span:nth-child(5){animation-delay:.5s}
.coming span:nth-child(6){animation-delay:.6s}
.coming span:nth-child(7){animation-delay:.7s}
.coming span:nth-child(8){animation-delay:.8s}
.coming span:nth-child(9){animation-delay:.9s}
.coming span:nth-child(10){animation-delay:1s}
.coming span:nth-child(11){animation-delay:1.1s}



@keyframes appear {

    to {
        opacity:1;
        transform:translateY(0);
    }

}



/* brillo infinito */

.coming {
    animation: glow 3s infinite alternate;
}


@keyframes glow {

    from {
        text-shadow:
        0 0 10px rgba(255,255,255,.2);
    }


    to {
        text-shadow:
        0 0 25px rgba(255,255,255,.8),
        0 0 50px rgba(255,255,255,.4);
    }

}

@media (max-width: 480px) {

    .coming {
        font-size: 38px;
        letter-spacing: 2px;
        padding: 0 20px;
    }

    header {
        top: 20px;
        left: 20px;
    }

    .logo {
        width: 55px;
    }

}

@media (max-width: 390px) {

    .coming {
        font-size: 32px;
        letter-spacing: 1px;
        padding: 0 15px;
    }

}