/* === INDEX PAGE SPECIFIC === */

.hero-section {
    position: relative;
    z-index: 2;
}

.hero-image {
    width: 12rem;
    height: 12rem;
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 4px solid var(--turquesa);
}

/* Typing Effect */
.typing-effect {
    overflow: hidden;
    border-right: 3px solid var(--verde-medio);
    white-space: nowrap;
    margin: 0 auto;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: var(--verde-medio);
    }
}

/* Hero Gradient */
.hero-animated-gradient {
    background: linear-gradient(135deg,
            rgba(13, 17, 23, 0.95) 0%,
            rgba(23, 162, 184, 0.1) 25%,
            rgba(32, 201, 151, 0.1) 50%,
            rgba(111, 66, 193, 0.1) 75%,
            rgba(13, 17, 23, 0.95) 100%);
    background-size: 400% 400%;
    animation: heroGradientShift 8s ease infinite;
}

@keyframes heroGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}