/* Apply the Inter font family */
body {
    font-family: 'Inter', sans-serif;
}

/* Custom style for the active navigation link */
.nav-link-active {
    color: #4B9AFF;
    font-weight: 600;
}

/* --- Animation Keyframes --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

@keyframes loadBar {
    from {
        width: 0%;
    }

}

@keyframes blinking-cursor {

    0%,
    100% {
        border-color: transparent;
    }

    50% {
        border-color: #4B9AFF;
    }

}

/* --- Animation Utility Classes --- */
/* Class to apply to elements to be animated */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
    transform: translateY(15px);
}

/* Class added by JS when element is in view */
.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Skill bar animation */
.skill-bar-inner {
    width: 0;

}

.is-visible .skill-bar-inner {
    animation: loadBar 1.8s ease-out forwards;
}

/* --- Typing Animation Cursor --- */
#typing-text::after {
    content: '';
    display: inline-block;
    margin-left: 8px;
    width: 3px;
    height: 2.25rem;
    background-color: #4B9AFF;
    animation: blinking-cursor 1s infinite;
    vertical-align: bottom;
}

/* Adjust cursor height for smaller screens */
@media (max-width: 640px) {
    #typing-text::after {
        height: 1.75rem;
    }
}