/* BXC Visual Effects - Versión Simplificada */
[class*="bxc-efx-"] {
    --bxc-dur: 0.8s;
    --bxc-delay: 0s;
    --bxc-dist: 30px;
    --bxc-steps: 20;

    animation-duration: var(--bxc-dur);
    animation-delay: var(--bxc-delay);
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

/* Estado inicial para onDisplay */
.bxc-efx-onDisplay {
    opacity: 0 !important;
    animation-play-state: paused !important;
}

.bxc-efx-onDisplay.is-visible {
    opacity: 1 !important;
    animation-play-state: running !important;
}

/* --- Animaciones Consolidadas --- */
@keyframes bxc-fadeIn { from { opacity: 0; } to { opacity: 1; } }
.bxc-efx-FadeIn { animation-name: bxc-fadeIn; }

/* Direccionales: Usan la misma lógica de opacidad + movimiento */
@keyframes fInT { from { opacity: 0; transform: translateY(calc(-1 * var(--bxc-dist))); } to { opacity: 1; transform: translateY(0); } }
@keyframes fInB { from { opacity: 0; transform: translateY(var(--bxc-dist)); } to { opacity: 1; transform: translateY(0); } }
@keyframes fInL { from { opacity: 0; transform: translateX(calc(-1 * var(--bxc-dist))); } to { opacity: 1; transform: translateX(0); } }
@keyframes fInR { from { opacity: 0; transform: translateX(var(--bxc-dist)); } to { opacity: 1; transform: translateX(0); } }

.bxc-efx-FadeInFromTop { animation-name: fInT; }
.bxc-efx-FadeInFromBottom { animation-name: fInB; }
.bxc-efx-FadeInFromLeft { animation-name: fInL; }
.bxc-efx-FadeInFromRight { animation-name: fInR; }

/* --- Typewriter Corregido --- */
.bxc-efx-Typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    border-right: 3px solid;
    max-width: 0;
    /* Forzamos timing linear para que cada letra tarde lo mismo */
    animation: 
        bxc-type var(--bxc-dur) steps(var(--bxc-steps)) forwards,
        bxc-blink 0.75s step-end infinite;
    animation-delay: var(--bxc-delay);
}

@keyframes bxc-type { from { max-width: 0; } to { max-width: 1000px; } } /* 1000px es más seguro que 100% en inline-block */
@keyframes bxc-blink { from, to { border-color: transparent; } 50% { border-color: currentColor; } }