/* --- Scroll-Driven Text Animations --- */
.animate-text {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.animate-text.active {
    opacity: 1;
    transform: translateY(0);
}

/* تأثير خاص للكلمات الملونة */
.animate-text span {
    display: inline-block;
    position: relative;
}

.animate-text span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--primary-dim);
    z-index: -1;
    transition: width 1s ease 0.5s;
}

.animate-text.active span::after {
    width: 100%;
}