/* TÍTULO DAS PÁGINAS */

.page-title {
    position: absolute;

    /* Ajuste livremente */
    top: 60px;
    left: 70px;

   font-family: "Syne",sans-serif;
   font-size: clamp(2rem);
   letter-spacing: .2em;
   color: #fff;
   margin: 0 0 1rem;

    display: inline-block;
    overflow: hidden;
    padding-bottom: 10px;
}


/* Linha */

.page-title::after {
    content: '';
    position: absolute;

    bottom: 0;
    left: 50%;

    width: 40%;
    height: 2px;

    background-color: #ffffff;

    transform: translateX(-50%) scaleX(0);
    transform-origin: center;

    animation: linha 2.1s ease-in-out forwards;
}


/* Letras */

.page-title span {
    display: inline-block;
    opacity: 0;

    animation: subirLetra 0.2s ease-out forwards;

    /* começa após 1s + atraso individual de cada letra */
    animation-delay: calc(1s + (var(--i) * 0.05s));
}

@keyframes subirLetra {
    from {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(9px);
    }

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

}
/* Mesmas animações do ZEMUT */

@keyframes linha {
    0% {
        transform: translateX(-50%) scaleX(0);
    }

    12% {
        transform: translateX(-50%) scaleX(1);
    }

    88% {
        transform: translateX(-50%) scaleX(1);
    }

    100% {
        transform: translateX(-50%) scaleX(0);
    }
}