/* Split text character styling */
.split-char {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity, filter;

    /* Fix for text-fill gradient - ensure individual chars are visible */
    color: white !important;
    -webkit-text-fill-color: white !important;
    background: linear-gradient(to right bottom, rgb(255, 255, 255) 30%, rgba(255, 255, 255, .5)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.split-char.animate {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Split text word styling */
.split-word {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity, filter;
    margin-right: 0;
    /* Remove default margin */
}

.split-word.animate {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* When parent has text-fill class, ensure split chars inherit the gradient */
.text-fill .split-char {
    background: linear-gradient(to right bottom, rgb(255, 255, 255) 30%, rgba(255, 255, 255, .5)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: unset !important;
}

/* Preserve whitespace and ensure visibility */
.blur-text-element {
    white-space: normal;
    word-wrap: break-word;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    min-height: 1em;
    /* Ensure it has some height even when empty */
}

/* Style the description text */
.intro-description.blur-text-element {
    color: #a8afba !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    line-break: strict !important;
}

.intro-description .split-char {
    color: #a8afba !important;
    -webkit-text-fill-color: #a8afba !important;
    word-break: keep-all !important;
}

.intro-description .split-word {
    color: #a8afba !important;
    -webkit-text-fill-color: #a8afba !important;
}

/* Fallback: if no split-char elements, show the text */
.blur-text-element:not(:has(.split-char)) {
    opacity: 1 !important;
}

/* If animation fails, show text after 2 seconds */
.blur-text-element.animation-timeout {
    opacity: 1 !important;
}

.blur-text-element.animation-timeout .split-char {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}