/* ============================================================
   ENHANCEMENTS — افزودنی‌های بصری
============================================================ */

/* ------------------------------------------------------------
   1) گرید بلوپرینت پشت هیرو
   الان .hero-grid-overlay توی HTML هست ولی هیچ پس‌زمینه‌ای نداره.
   اینجا یه گرید نازک شبیه کاغذ نقشه‌کشی + یه اسکن‌لاین ملایم که
   رد می‌شه بهش اضافه می‌کنیم.
------------------------------------------------------------ */
.hero-grid-overlay {
        background-image:
                linear-gradient(var(--line) 1px, transparent 1px),
                linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 42px 42px;
        -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 25%, #000 35%, transparent 88%);
        mask-image: radial-gradient(ellipse 75% 55% at 50% 25%, #000 35%, transparent 88%);
}

.hero-grid-overlay::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 42%, rgba(var(--blue-bright-rgb), .16) 50%, transparent 58%);
        background-size: 260% 260%;
        animation: heroScan 10s linear infinite;
}

@keyframes heroScan {
        0% {
                background-position: 130% 0%;
        }

        100% {
                background-position: -30% 0%;
        }
}

/* ------------------------------------------------------------
   2) خط عمودی «about-pillars» موقع اسکرول رسم بشه
   این المان همین الان کلاس reveal داره، پس همون IntersectionObserver
   موجود کلاس .in رو بهش اضافه می‌کنه؛ ما فقط رفتار CSS‌ـش رو عوض
   می‌کنیم تا به‌جای این‌که همیشه باشه، از بالا به پایین "رسم" بشه.
------------------------------------------------------------ */
.about-pillars::before {
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 1.1s var(--ease) .15s;
}

.about-pillars.in::before {
        transform: scaleY(1);
}

/* ------------------------------------------------------------
   3) گوشه‌های شماتیک (bracket) روی کارت‌های تیم، نظرات و گواهینامه
   الان این افکت فقط روی service-card هست (کلاس bracket). چون این
   کارت‌ها ::before/::after آزاد دارن (درگیر افکت دیگه‌ای نیستن)،
   می‌تونیم بدون تغییر HTML همون افکت رو روشون پیاده کنیم.
   (روی stat-cell پیاده نشده چون ::before/::after آن از قبل برای
   افکت گلو و خط بالایی اشغاله و اضافه‌کردن باعث تداخل می‌شد)
------------------------------------------------------------ */
.testi-card,
.certificate {
        position: relative;
}

.testi-card::before,
.certificate::before,
.testi-card::after,
.certificate::after {
        content: "";
        position: absolute;
        width: 13px;
        height: 13px;
        border: 1.5px solid var(--blue-bright);
        opacity: .4;
        transition: opacity .3s var(--ease);
        pointer-events: none;
        z-index: 2;
}

.certificate::before {
        top: -1px;
        left: -1px;
        border-right: none;
        border-bottom: none;
}

.testi-card::after,
.certificate::after {
        bottom: -1px;
        right: -1px;
        border-left: none;
        border-top: none;
}


.testi-card:hover::before,
.testi-card:hover::after,
.certificate:hover::before,
.certificate:hover::after {
        opacity: 1;
}

/* ------------------------------------------------------------
   4) زیرخط انیمیت‌شده روی لینک‌های نوبار
   جهت رشدش با راست چیده شده که با dir="rtl" هماهنگ باشه.
------------------------------------------------------------ */
.nav-links a {
        padding-bottom: 2px;
}

.nav-links a::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -2px;
        width: 100%;
        height: 1px;
        background: var(--blue-bright);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .35s var(--ease);
}

.nav-links a:hover::after {
        transform: scaleX(1);
}

/* ------------------------------------------------------------
   5) بج فوتر به‌جای ایموجی موشک
   ایموجی 🚀 توی HTML باقی می‌مونه (برای اسکرین‌ریدرها) ولی با
   font-size:0 بصری مخفی می‌شه و یه نشان هندسی/مهندسی جاش می‌شینه:
   یه حلقه‌ی نقطه‌چین در حال چرخش + یه لوزی داخلش.
------------------------------------------------------------ */
.footer-badge {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 84px;
        height: 84px;
        border-radius: 50%;
        border: 1.5px solid var(--blue-bright);
        background: radial-gradient(circle, rgba(var(--blue-bright-rgb), .14), transparent 70%);
}



.footer-badge::after {
        content: "";
        position: absolute;
        inset: -9px;
        border-radius: 50%;
        border: 1px dashed var(--line-strong);
        animation: badgeSpin 16s linear infinite;
}

@keyframes badgeSpin {
        to {
                transform: rotate(360deg);
        }
}

/* ------------------------------------------------------------
   6) یکدست‌کردن گرادیانت خط بالای stat-cell با service-card
   الان خط بالای stat-cell فقط آبی‌ـه؛ این‌جا بنفش برند رو هم
   بهش اضافه می‌کنیم تا با کارت‌های سرویس هم‌خونی کامل داشته باشه.
------------------------------------------------------------ */
.stat-cell::after {
        background:
                linear-gradient(90deg,
                        transparent,
                        var(--blue-bright),
                        var(--purple),
                        transparent);
}

/* ------------------------------------------------------------
   7) خط‌های کوچیک اندازه‌گیری (tick) بالای سکشن‌های alt
   یه حس کاغذ نقشه‌کشی خیلی ملایم، فقط تزئینیه و زیر محتوا می‌مونه.
------------------------------------------------------------ */
.section-alt::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background-image: repeating-linear-gradient(90deg,
                        var(--line-strong) 0 1px,
                        transparent 1px 26px);
        opacity: .7;
        pointer-events: none;
}