/* Styles: Luis Alonso */

html, body {
    scroll-behavior: smooth;
}

h1 {
    display: none;
}

/* ==================== ANIMATION ==================== */
.index-animation {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* SE OCULTA TEMPORALMENTE PARA PODER HACER LA PRESENTACIÓN */
    /* animation: disappear 6s ease 8s both; */ 
}

/* SE OCULTA TEMPORALMENTE PARA PODER HACER LA PRESENTACIÓN */
/*
@keyframes disappear {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    95% {
        opacity: 0;
        height: 100%;
    }

    100% {
        opacity: 0;
        height: 0;
    }
}
*/

/* =============== Logo =============== */
.logo-container {
    position: absolute;
    animation: logo 5s ease 0s both;

    img {
        width: 10rem;
        height: 10rem;
    }
}

@keyframes logo {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(0deg);
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1) rotate(1080deg);
    }
}

/* =============== Phrase =============== */

.phrase-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
        margin: 0;
        text-transform: uppercase;
        line-height: 2.3rem;

        &:nth-of-type(1),
        &:nth-of-type(2) {
            color: var(--primary-color);
            animation: phrase1 5.2s ease 5s both;
        }

        &:nth-of-type(3),
        &:nth-of-type(4) {
            color: var(--secondary-color);
            animation: phrase2 3.7s ease 7s both;
        }

        &:nth-of-type(1),
        &:nth-of-type(3) {
            font-size: 1.6rem;
            font-family: var(--secondary-font-medium);
        }

        &:nth-of-type(2),
        &:nth-of-type(4) {
            font-size: 2.6rem;
            font-family: var(--secondary-font-bold);
        }
    }
}

@keyframes phrase1 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes phrase2 {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* =============== LAGUNAPP ============== */
.lagunapp-container {
    position: absolute;
    font-size: clamp(3rem, 9vw, 6rem);
    animation: lagunappnimation 2.5s ease 9s both;

    span {
        &:first-child {
            color: var(--secondary-color);
            font-family: var(--secondary-font-medium);
            font-weight: 500;
        }

        &:last-child {
            color: var(--primary-color);
            font-family: var(--secondary-font-bold);
        }
    } 
}

@keyframes lagunappnimation {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========= Decorative Line ========== */
.lagunapp-container::after {
    content: '';
    display: block;
    margin: 0.6rem auto 0;
    width: 0;
    height: 0.15rem;
    background: linear-gradient(90deg, transparent, var(--secondary-color), var(--primary-color), transparent);
    animation: linedecoration 3s ease 9.4s both;
}

@keyframes linedecoration {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* ========== Tagline ========== */
.tagline {
    position: absolute;
    top: calc(50% + clamp(3rem, 7vw, 5.5rem));
    font-size: clamp(0.75rem, 1.8vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.20rem;
    text-transform: uppercase;
    color: var(--secondary-font-bold);
    animation: taganimation 1s ease 9.4s both;
}

@keyframes taganimation {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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