#main-header {
    position: relative;

    & .background-header {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 430px;
        z-index: 0;
    }

    & .content {
        position: relative;

        & .antifaz {
            width: 100px;
            padding-top: 30px;
            filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
            animation: tilt-in-top-1 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }

        & .page-title {
            font-weight: 600;
            margin-bottom: 10px;
            animation: tilt-in-top-1 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }

        & .page-subtitle {
            font-size: 4rem;
            line-height: 1;
            margin-bottom: 30px;
        }

        & .separator {
            width: 100%;
            max-width: 430px;
            height: auto;
            margin-inline: auto;
            filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
            mix-blend-mode: multiply;
        }

        & .text-intro {
            padding-top: 20px;
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            opacity: 0;
            transform: translateX(-20px);
        }

        & .text-intro.animate-in {
            opacity: 1;
            transform: translateX(0);
        }

        & .zapatillas {
            padding-top: 30px;
            width: 100px;
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            opacity: 0;
            transform: translateX(-20px);
        }

        & .zapatillas.animate-in {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

@keyframes tilt-in-top-1 {
    0% {
        transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
        opacity: 0;
    }

    100% {
        transform: rotateY(0deg) translateY(0) skewY(0deg);
        opacity: 1;
    }
}