/* /assets/css/front-page-hero.css */

/* === بخش دوم: گرادیان متحرک برای متن === */
.animated-text-gradient {
    background-image: linear-gradient(-45deg, #3b82f6, #a855f7, #6366f1, #3b82f6);
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: text-gradient-animation 8s ease infinite;
    z-index: 2; /* روی حباب‌ها قرار می‌گیرد */
    position: relative;
}

@keyframes text-gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* === بخش سوم: انیمیشن برای المان‌های برنامه‌نویسی در پس‌زمینه هیرو سکشن === */
.floating-code-symbol {
    position: absolute;
    color: var(--fallback-bc, oklch(var(--bc) / 0.1));
    font-family: monospace;
    font-weight: bold;
    user-select: none;
    z-index: 0;
    animation: float-up 10s linear infinite;
}

/* تعریف انیمیشن حرکت به سمت بالا */
@keyframes float-up {
    0% {
        transform: translateY(120vh);
        opacity: 0;
    }
    10%, 90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10vh);
        opacity: 0;
    }
}

/* استایل برای کرسر (مکان‌نمای) تایپ */
.typed-cursor {
    opacity: 1;
    animation: typed-blink 0.7s infinite;
}
@keyframes typed-blink {
    50% { opacity: 0.0; }
}

/* استایل برای نگهدارنده متن تایپی برای جلوگیری از پرش صفحه */
#typed-text-container {
    height: 3rem; /* یک ارتفاع ثابت برای جلوگیری از تغییر چیدمان */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* استایل برای فلش چشمک‌زن */
#scroll-indicator {
    opacity: 0;
    animation: flash-down 2s infinite ease-in-out;
}
@keyframes flash-down {
    0%, 100% {
        opacity: 0;
        transform: translateY(-10px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
}