/* Base Character Styling */
.elkifah-anim-char {
    display: inline-block;
    opacity: 0;
    white-space: pre;
    /* Preserves spaces */
    will-change: transform, opacity, filter;
}

/* 1. Fade Up */
@keyframes elkifahFadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

.elkifah-anim-fade-up.elkifah-anim-play .elkifah-anim-char {
    animation-name: elkifahFadeUp;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    animation-fill-mode: forwards;
}

/* 2. Blur In */
@keyframes elkifahBlurIn {
    0% {
        opacity: 0;
        filter: blur(15px);
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

.elkifah-anim-blur-in.elkifah-anim-play .elkifah-anim-char {
    animation-name: elkifahBlurIn;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* 3. Elastic Scale */
@keyframes elkifahElasticScale {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.elkifah-anim-elastic-scale.elkifah-anim-play .elkifah-anim-char {
    animation-name: elkifahElasticScale;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
}