/* ============================================================
   لایه حرکت — کارت سه‌بعدی و انیمیشن‌های نسل جدید
   ------------------------------------------------------------
   چرا فایل جدا: این لایه کاملاً تزئینی است. اگر روزی خواستید
   سایت آرام‌تر باشد، فقط همین یک <link> را بردارید؛ چیدمان و
   رنگ‌ها دست‌نخورده می‌مانند.

   اصول:
   • فقط transform و opacity انیمیت می‌شوند تا روی کامپوزیتور
     اجرا شوند و layout دوباره محاسبه نشود.
   • هرچه CSS بتواند انجام دهد به JS سپرده نمی‌شود.
   • هر افکت زیر prefers-reduced-motion خاموش می‌شود.
   ============================================================ */

/* --- @property: بدون این، مرورگر مقدار سفارشی را «رشته» می‌بیند و
       بین دو حالت درون‌یابی نمی‌کند؛ با آن، حرکت کاملاً نرم می‌شود. --- */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* توجه: --px و --py عمداً با @property ثبت نمی‌شوند.
   ثبت‌کردنشان باعث می‌شد کل اعلان transform در زمان محاسبه باطل شود
   (transform: none). چون این دو را هر فریم از JS می‌نویسیم، به
   درون‌یابی نرمِ @property هم نیازی نیست. فقط --angle که واقعاً
   باید بین دو زاویه انیمیت شود ثبت شده است. */


/* ============================================================
   ۱) کارت سه‌بعدی
   ============================================================ */

/* چرا نام صفت سه بار تکرار شده:
   style.css قانون‌هایی مثل `.service-card:hover { transform: translateY(-8px) }`
   دارد. وزن آن (۰،۲،۰) از `[data-tilt]` (۰،۱،۰) بیشتر است، پس دقیقاً در
   لحظه‌ای که نشانگر روی کارت می‌آمد، همان بالا-پریدن ساده جای چرخش
   سه‌بعدی را می‌گرفت و افکت هرگز دیده نمی‌شد. تکرار صفت وزن را به
   (۰،۳،۰) می‌رساند و مسئله را بدون !important حل می‌کند.
   خودِ بالا-آمدن از دست نرفته؛ داخل --lift آمده است. */
[data-tilt][data-tilt][data-tilt] {
    --px: 0;
    --py: 0;
    --mx: 50%;
    --my: 50%;
    --tilt: 9deg;
    --lift: 0px;

    transform:
        perspective(900px)
        rotateX(calc(var(--py) * var(--tilt) * -1))
        rotateY(calc(var(--px) * var(--tilt)))
        translate3d(0, var(--lift), 0);

    /* برگشت نرم و کش‌دار وقتی نشانگر بیرون می‌رود */
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

/* وقتی نشانگر روی کارت است، چرخش باید بی‌درنگ دنبالش بیاید.
   همین یک خط بود که قبلاً نبود و افکت را مرده نشان می‌داد. */
[data-tilt][data-tilt][data-tilt].is-tilting {
    --lift: -10px;
    transition: transform 0.09s linear, box-shadow 0.3s ease, border-color 0.3s ease;
    z-index: 2;
    will-change: transform;
}

/* --- بازتاب نور که دنبال نشانگر می‌آید --- */
.card-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(340px circle at var(--mx) var(--my),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.1) 32%,
        transparent 58%);
    mix-blend-mode: overlay;
    z-index: 3;
}

[data-tilt].is-tilting .card-glare {
    opacity: 1;
}

/* روی پس‌زمینه تیره، بازتاب سفید دیده نمی‌شود — سبز صدری می‌گذاریم */
.section-navy [data-tilt] .card-glare,
.hero [data-tilt] .card-glare {
    background: radial-gradient(340px circle at var(--mx) var(--my),
        rgba(0, 155, 155, 0.32), transparent 55%);
    mix-blend-mode: screen;
}

/* --- عمق ---
   overflow:hidden روی کارت‌ها، preserve-3d را خنثی می‌کند؛ پس
   به‌جای translateZ، پارالاکس را با همان دو متغیر می‌سازیم.
   نتیجه از نظر بصری همان است و روی همه مرورگرها کار می‌کند. */
[data-tilt] .service-icon,
[data-tilt] .tool-card-icon,
[data-tilt] .case-icon,
[data-tilt] h3 {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-tilt].is-tilting .service-icon,
[data-tilt].is-tilting .tool-card-icon {
    transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 10px), 0) scale(1.08);
    transition: transform 0.09s linear;
}

[data-tilt].is-tilting .case-icon {
    transform: translate3d(calc(var(--px) * 7px), calc(var(--py) * 7px), 0);
    transition: transform 0.09s linear;
}

[data-tilt].is-tilting h3 {
    transform: translate3d(calc(var(--px) * 4px), calc(var(--py) * 4px), 0);
    transition: transform 0.12s linear;
}


/* ============================================================
   ۲) حاشیه گردانِ متحرک روی کارت هاورشده
   ============================================================ */

@keyframes border-spin {
    to { --angle: 360deg; }
}

.service-card.is-tilting,
.tool-card.is-tilting {
    border-color: transparent;
    background-image:
        linear-gradient(var(--white), var(--white)),
        conic-gradient(from var(--angle),
            var(--teal) 0deg,
            var(--teal-light) 70deg,
            var(--gold) 150deg,
            var(--teal) 260deg,
            var(--teal) 360deg);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: border-spin 4s linear infinite;
}


/* ============================================================
   ۳) ظاهر شدن با اسکرول — بومی CSS، بدون جاوااسکریپت
   animation-timeline روی کامپوزیتور اجرا می‌شود، پس حتی روی
   گوشی ضعیف هم فریم نمی‌اندازد.
   ============================================================ */

/* چرا translate و scale جدا، نه transform:
   این انیمیشن با animation-fill-mode: both همیشه فعال است. هر چیزی که
   یک انیمیشن روی خودش بنویسد، در آبشار CSS بالاتر از تمام قانون‌های
   عادی می‌نشیند. تا وقتی این کادرها transform را می‌نوشتند، کارت
   بعد از دیده‌شدن روی `transform: none` قفل می‌ماند و چرخش سه‌بعدیِ
   هاور اصلاً فرصت اجرا پیدا نمی‌کرد — دقیقاً همان «ترند نیست» که
   دیده می‌شد.
   translate و scale خصوصیت‌های مستقل‌اند: مرورگر اول آن‌ها را اعمال
   می‌کند و بعد transform را رویشان سوار می‌کند. پس ورود نرم و چرخش
   هاور هم‌زمان و بدون درگیری کار می‌کنند. */
@keyframes reveal-rise {
    from { opacity: 0; translate: 0 34px; scale: 0.97; }
    to   { opacity: 1; translate: 0 0;    scale: 1; }
}

@keyframes reveal-fade {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes progress-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@supports (animation-timeline: view()) {

    .service-card, .article-card, .case-card, .tool-card,
    .ruling-card, .ruling-page-card, .law-card, .stat-box,
    .timeline-item, .skill-item, .qa-card, .service-process-step,
    .authored-list li {
        animation: reveal-rise linear both;
        animation-timeline: view();
        animation-range: entry 2% cover 20%;
    }

    .section-header,
    .cases-disclaimer,
    .tools-disclaimer,
    .legal-disclaimer,
    .author-box,
    .article-toc {
        animation: reveal-fade linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 16%;
    }

    /* نوار پیشرفت اسکرول: دیگر هیچ کدی در JS برایش اجرا نمی‌شود */
    .scroll-progress {
        width: 100%;
        transform-origin: right center;   /* RTL */
        animation: progress-grow linear both;
        animation-timeline: scroll(root);
    }

    /* ظاهر شدن پلکانی داخل هر شبکه */
    .services-grid > *:nth-child(3n+2),
    .cases-grid > *:nth-child(3n+2),
    .articles-grid > *:nth-child(3n+2),
    .tools-grid > *:nth-child(3n+2),
    .qa-grid > *:nth-child(3n+2) { animation-delay: 0.06s; }

    .services-grid > *:nth-child(3n+3),
    .cases-grid > *:nth-child(3n+3),
    .articles-grid > *:nth-child(3n+3),
    .tools-grid > *:nth-child(3n+3),
    .qa-grid > *:nth-child(3n+3) { animation-delay: 0.12s; }
}

/* جایگزین برای مرورگرهایی که هنوز تایم‌لاین اسکرول ندارند */
/* همان دلیل بالا: اینجا هم translate جداست تا transform برای چرخش
   هاور دست‌نخورده بماند. */
.js-reveal {
    opacity: 0;
    translate: 0 30px;
    transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
}


/* ============================================================
   ۴) دکمه مغناطیسی و درخشش عبوری
   ============================================================ */

.btn-primary,
.form-submit,
.quick-contact-btn {
    --magnet-x: 0px;
    --magnet-y: 0px;
}

@media (hover: hover) and (pointer: fine) {

    .btn-primary,
    .form-submit {
        transition:
            transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.3s ease,
            filter 0.25s ease;
    }

    .btn-primary:hover,
    .form-submit:hover {
        transform: translate3d(var(--magnet-x), calc(var(--magnet-y) - 3px), 0);
    }

    .quick-contact-btn:hover,
    .quick-contact-btn:focus-visible {
        transform: translate3d(var(--magnet-x), var(--magnet-y), 0) scale(1.08);
    }

    .btn-primary:hover::after {
        animation: btn-sheen 0.75s ease-out;
    }
}

.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: -140%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: -1;
}

@keyframes btn-sheen {
    to { inset-inline-start: 140%; }
}


/* ============================================================
   ۵) زیرخط کشیده‌شونده روی لینک‌های داخل متن
   ============================================================ */

.article-content a,
.law-note a,
.faq-answer a,
.qa-card-back a {
    background-image: linear-gradient(var(--teal), var(--teal));
    background-size: 0% 2px;
    background-position: 100% 100%;   /* RTL: از راست باز می‌شود */
    background-repeat: no-repeat;
    padding-bottom: 2px;
    text-decoration: none;
    color: var(--teal-dark);
    font-weight: 600;
    transition: background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.article-content a:hover,
.law-note a:hover,
.faq-answer a:hover,
.qa-card-back a:hover {
    background-size: 100% 2px;
}


/* ============================================================
   ۶) ورود صفحه اصلی
   ============================================================ */

@keyframes hero-in {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes credential-in {
    from { opacity: 0; transform: perspective(900px) rotateY(-9deg) translate3d(24px, 18px, 0); }
    to   { opacity: 1; transform: none; }
}

.hero-content > * {
    animation: hero-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content > *:nth-child(2) { animation-delay: 0.14s; }
.hero-content > *:nth-child(3) { animation-delay: 0.23s; }
.hero-content > *:nth-child(4) { animation-delay: 0.32s; }
.hero-content > *:nth-child(5) { animation-delay: 0.40s; }

.credential-card {
    animation: credential-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}


/* ============================================================
   ۷) گذار بین صفحات (View Transitions)
   ============================================================ */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: vt-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
    animation: vt-in 0.32s cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes vt-out {
    to { opacity: 0; transform: translate3d(0, -8px, 0); }
}

@keyframes vt-in {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
}


/* ============================================================
   ۸) احترام به «کاهش حرکت» — همه‌چیز خاموش
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    [data-tilt],
    [data-tilt].is-tilting,
    [data-tilt].is-tilting .service-icon,
    [data-tilt].is-tilting .tool-card-icon,
    [data-tilt].is-tilting .case-icon,
    [data-tilt].is-tilting h3,
    .btn-primary:hover,
    .form-submit:hover,
    .quick-contact-btn:hover {
        transform: none !important;
        animation: none !important;
    }

    .card-glare { display: none; }

    .hero-content > *,
    .credential-card,
    .service-card, .article-card, .case-card, .tool-card,
    .qa-card, .skill-item, .timeline-item, .stat-box,
    .law-card, .ruling-page-card, .ruling-card,
    .section-header, .service-process-step, .authored-list li {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .js-reveal {
        opacity: 1;
        transform: none;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}