/* Modular Text Animation Effects with Upward Rising Text Shadows */

/* Base class for animated text containers */
.text-animator {
    display: inline-block;
    position: relative;
}

/* Make h1 text larger when using text-animator */
h1.text-animator {
    font-size: 3.5rem;
    line-height: 1.2;
}

@media screen and (max-width: 736px) {
    h1.text-animator {
        font-size: 2.5rem;
        line-height: 1.3;
    }
}

.text-animator .char {
    display: inline-block;
    position: relative;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    will-change: text-shadow;
    z-index: 2;
}

/* Rising single shadow effect that moves up and fades */
.char.shadow-fade {
    animation: rising-single-shadow 6s ease-out forwards;
}

@keyframes rising-single-shadow {
    0% {
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
    }

    10% {
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 -10px 8px rgba(255, 255, 255, 0.6);
    }

    20% {
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 -25px 12px rgba(255, 255, 255, 0.45);
    }

    30% {
        color: rgba(255, 255, 255, 0.6);
        text-shadow: 0 -45px 16px rgba(255, 255, 255, 0.35);
    }

    40% {
        text-shadow: 0 -70px 20px rgba(255, 255, 255, 0.25);
    }

    50% {
        text-shadow: 0 -100px 25px rgba(255, 255, 255, 0.18);
    }

    60% {
        text-shadow: 0 -135px 30px rgba(255, 255, 255, 0.12);
    }

    70% {
        text-shadow: 0 -175px 35px rgba(255, 255, 255, 0.08);
    }

    80% {
        text-shadow: 0 -220px 40px rgba(255, 255, 255, 0.05);
    }

    90% {
        color: rgba(255, 255, 255, 0.15);
        text-shadow: 0 -270px 45px rgba(255, 255, 255, 0.03);
    }

    100% {
        color: rgba(255, 255, 255, 0.5);
        text-shadow: 0 -325px 50px rgba(255, 255, 255, 0.01);
    }
}/* Responsive adjustments */
@media (max-width: 768px) {
    .text-animator .char {
        font-size: 0.9em;
    }

    @keyframes shadow-fade-effect {
        0% {
            color: rgba(255, 255, 255, 0.8);
            text-shadow:
                0 0 4px rgba(255, 255, 255, 0.4),
                0 0 8px rgba(255, 255, 255, 0.2);
        }
        50% {
            color: rgba(255, 255, 255, 0.6);
            text-shadow:
                0 15px 35px rgba(255, 255, 255, 0.6),
                0 25px 55px rgba(255, 255, 255, 0.3),
                0 35px 75px rgba(255, 255, 255, 0.1);
        }
        100% {
            color: rgba(255, 255, 255, 0.2);
            text-shadow:
                0 40px 60px rgba(255, 255, 255, 0.2),
                0 70px 90px rgba(255, 255, 255, 0.1),
                0 100px 120px rgba(255, 255, 255, 0.05);
        }
    }
}

/* Performance optimizations */
.char {
    backface-visibility: hidden;
}

/* Accessibility - Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .char.shadow-fade {
        animation: none;
    }

    .text-animator:hover .char {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
        transition: text-shadow 0.3s ease;
    }
}