/* اضافه: لایه تاریک نرم روی سکشن برای خوانایی بهتر */
.hero-section {
    position: relative;
    z-index: 2;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.35)
    );
    backdrop-filter: blur(4px);
    z-index: -1;
    border-radius:50px;
}


/* ================================
   Hero Right Text
================================= */
.hero-right {
    text-align: right;
    color: #fff;
    padding: 25px;
    direction: rtl;
}




/* ---- Title Neon + Typing ---- */
.hero-title {
    font-family: "Vazirmatn", sans-serif;
    font-size: 54px;
    font-weight: 900;
    color: #00eaff;

    text-shadow: 
        0 0 10px #00eaff,
        0 0 20px #00eaff,
        0 0 45px rgba(0,234,255,0.8);

    margin-bottom: 25px;

    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid #00eaff;
    width: 0;

    animation: typing 2s steps(20) forwards,
               blink .7s 0s 3,
               flicker 5s 2.05s infinite;
}


/* Typing effect */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* caret blinking during typing */
@keyframes blink {
    0%, 50% { border-color: #00eaff; }
    51%, 100% { border-color: transparent; }
}


/* ---- Description ---- */
.hero-description {
    font-family: "Vazirmatn", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 2;
    color: #fff;

    text-shadow:
        0 0 8px rgba(0,0,0,0.8),
        0 0 15px rgba(0,0,0,0.6);

    transform: translateY(25px);
    animation: fadeUp 1.2s ease forwards;
    animation-delay: 2.1s;
}


/* Highlight neon */
.neon-highlight {
    color: #ff4df6;
    font-weight: 900;
    font-size: 20px;
    text-align:center;
    text-shadow:
        0 0 8px #ff4df6,
        0 0 18px #ff4df6,
        0 0 32px rgba(255,77,246,0.7);
}


/* Fade Up Animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Flicker neon effect */
@keyframes flicker {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 12px #00eaff,
                     0 0 22px #00eaff,
                     0 0 42px #00eaff,
                     0 0 62px #00eaff;
    }

    45% {
        opacity: 0.5;
        text-shadow: 0 0 6px #00eaff,
                     0 0 12px #00eaff;
    }

    50% {
        opacity: 0.2;
        text-shadow: 0 0 2px #00eaff;
    }

    55% {
        opacity: 0.7;
    }
}