/* dmhouse-circle-path.css — سکشن «مسیر دایره‌ای» (شورت‌کد).
   ⚠ همهٔ قاعده‌ها زیر ریشهٔ dmcp محدودند؛ این شیوه‌نامه ممکن است در هر برگه‌ای بار شود.
   رنگ‌ها از توکن‌های theme-light / theme-dark خودِ قالب می‌آیند. */

.dmcp-section {
    position: relative;
    height: 380vh;
    background-color: var(--bg-primary);
    z-index: 5;

    /* این سه عدد را جاوااسکریپت بر پایهٔ پیشرفت اسکرول می‌نویسد. */
    --dmcp-split: 0;
    --dmcp-circle: 0;
    --dmcp-text: 0;
}

.dmcp-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.dmcp-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* لایهٔ تیره با یک دایرهٔ در حال بزرگ‌شدن از مرکز باز می‌شود.
   ⚠ عدد لایه باید از z-index ستون مرکزی (۱۰) بزرگ‌تر باشد. با عدد کوچک‌تر، ستون مرکزیِ
   لایهٔ روشن روی لایهٔ تیره می‌نشست و متن‌ها سرمه‌ای می‌ماندند — همان چیزی که به‌نظر
   «سفید نشدن رنگ» می‌آمد ولی در واقع اصلاً متنِ لایهٔ تیره نبود. */
.dmcp-layer--dark {
    z-index: 20;
    pointer-events: none;
    clip-path: circle(calc(var(--dmcp-circle, 0) * 150%) at 50% 50%);
    -webkit-clip-path: circle(calc(var(--dmcp-circle, 0) * 150%) at 50% 50%);
    will-change: clip-path;
    /* سرمه‌ای یک‌دست، دقیقاً مثل نسخهٔ ایستا. */
    background-color: var(--color-navy);
}

/* ⚠ رنگ‌های لایهٔ تیره صریح اعلام می‌شوند: این سکشن ممکن است داخل هر صفحه‌ای بار شود و
   توکن‌های تم از جای دیگری بازنویسی شوند؛ نتیجه‌اش متنِ سرمه‌ای روی زمینهٔ سرمه‌ای بود. */
.dmcp-layer--dark .dmcp-heading,
.dmcp-layer--dark .dmcp-word,
.dmcp-layer--dark .dmcp-step__title {
    color: #fff;
}

.dmcp-layer--dark .dmcp-tagline,
.dmcp-layer--dark .dmcp-step__desc {
    color: #cbd5e0;
}

/* نسخهٔ روشن‌ترِ طلاییِ برند برای خط بالای لوگو و شماره‌ها روی زمینهٔ تیره. */
.dmcp-layer--dark .dmcp-subtitle,
.dmcp-layer--dark .dmcp-step__num {
    color: var(--color-gold);
}

.dmcp-layer--dark .dmcp-arch {
    border-color: rgba(255, 255, 255, .5);
}

/* ⚠ کل محتوای سکشن (ستون مرکزی و مرحله‌ها) با هم پایین می‌آید، نه فقط یک مرحله: هدر سایت
   ثابت است و مرحلهٔ بالایی زیر آن می‌رفت. جابه‌جایی روی همین ظرف انجام می‌شود، نه روی
   لایه‌ها، وگرنه پس‌زمینهٔ تیره بالای صفحه یک نوار روشن باقی می‌گذاشت.
   ارتفاع هم به همان اندازه کم می‌شود تا مرحله‌های پایینی از کادر بیرون نزنند. */
.dmcp-inner {
    --dmcp-top: clamp(70px, 9vh, 120px);
    position: relative;
    width: 100%;
    margin-block-start: var(--dmcp-top);
    height: calc(100% - var(--dmcp-top));
}

/* طاق خط‌چین پشت مرکز — همان چیزی که در نسخهٔ ایستای صفحهٔ اصلی هست. */
.dmcp-arch {
    position: absolute;
    top: 67%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 47vw;
    height: 25vw;
    border: 1px dashed var(--text-secondary);
    border-bottom: none;
    border-radius: 30vw 30vw 0 0;
    opacity: calc(var(--dmcp-split, 0) * .2);
    pointer-events: none;
    z-index: 1;
}

/* ⚠ وسط‌چینی با موقعیت مطلق انجام می‌شود، نه با کشیدن ستون روی کل عرض: ظرف صفحه در
   راست‌به‌چپ پدینگ نامتقارن می‌گیرد و متن‌ها را کمی به راست می‌کشاند. */
.dmcp-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: max-content;
    max-width: 92vw;
}

.dmcp-subtitle {
    display: block;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--accent-primary);
    margin-block-end: 24px;
    opacity: var(--dmcp-text, 0);
    transform: translateY(calc((1 - var(--dmcp-text, 0)) * 20px));
    will-change: opacity, transform;
}

.dmcp-tagline {
    display: block;
    font-size: 18px;
    color: var(--text-secondary);
    margin-block-start: 24px;
    opacity: var(--dmcp-text, 0);
    transform: translateY(calc((1 - var(--dmcp-text, 0)) * -20px));
    will-change: opacity, transform;
}

.dmcp-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0;
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1.4;
    color: var(--text-primary);
}

/* دو واژه با اسکرول از هم باز می‌شوند. */
.dmcp-word {
    display: inline-block;
    will-change: transform;
    transform: translateZ(0);
}

.dmcp-word--right {
    transform: translateX(calc(var(--dmcp-split, 0) * 140px));
}

.dmcp-word--left {
    transform: translateX(calc(var(--dmcp-split, 0) * -140px));
}

/* ⚠ لوگو مطلق است، نه عضو عادی ردیف: عنصر درون‌خطی حتی با مقیاس صفر جای خودش را
   اشغال می‌کند و همان باعث می‌شد دو واژه از همان ابتدا از هم فاصله داشته باشند. */
.dmcp-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: var(--dmcp-split, 0);
    transform: scale(var(--dmcp-split, 0)) rotate(calc(var(--dmcp-split, 0) * 360deg));
    will-change: transform, opacity;
}

.dmcp-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ---------- مراحل ---------- */

.dmcp-steps {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 2;
    pointer-events: none;
}

/* ⚠ جای هر مرحله را پی‌اچ‌پی روی همین دو متغیر می‌نویسد (زاویه از تعداد مراحل ساخته
   می‌شود)، پس چیدمان با هر تعدادی متوازن می‌ماند و هیچ کلاس شماره‌داری لازم نیست. */
.dmcp-step {
    position: absolute;
    inset-block-start: var(--dmcp-y, 50%);
    inset-inline-start: var(--dmcp-x, 50%);
    transform: translate(50%, -50%) translateY(calc((1 - var(--dmcp-s, 0)) * 30px));
    width: min(260px, 30vw);
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: start;
    opacity: var(--dmcp-s, 0);
    transition: opacity .25s ease-out, transform .25s ease-out;
}

/* ⚠ جابه‌جایی ریزِ چند مرحله به سمت چپ، بدون دست‌زدن به محاسبهٔ موقعیت‌ها.
   مقدار روی مارجینِ سمت شروع می‌نشیند؛ در صفحهٔ راست‌به‌چپ، بیشترشدن آن یعنی حرکت به چپ. */
.dmcp-step:nth-child(3) {
    margin-inline-start: 2.5%;
}

.dmcp-step:nth-child(4),
.dmcp-step:nth-child(5) {
    margin-inline-start: 3%;
}

/* اندازه‌ها عیناً از نسخهٔ ایستای صفحهٔ اصلی. */
.dmcp-step__num {
    font-family: 'gofteh', 'dana', sans-serif;
    font-size: 32px;
    line-height: 1;
    color: var(--accent-secondary);
}

.dmcp-step__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.6;
    color: var(--text-primary);
    text-align: start;
}

.dmcp-step__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.dmcp-missing {
    padding: 14px 18px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
}

/* ---------- موبایل و ارتفاع کم ---------- */

@media (max-width: 992px) {
    /* روی موبایل هیچ سنجاق و انیمیشنی نیست: عنوان بالا و مراحل زیر هم، ساده و خوانا. */
    .dmcp-section {
        height: auto;
        padding-block: 60px;
    }

    .dmcp-sticky {
        position: static;
        height: auto;
        overflow: visible;
    }

    .dmcp-layer--dark {
        display: none;
    }

    .dmcp-layer {
        position: static;
        height: auto;
    }

    .dmcp-inner {
        height: auto;
        /* در موبایل سکشن دیگر چسبان نیست، پس فاصلهٔ زیرِ هدر هم لازم نیست. */
        margin-block-start: 0;
    }

    .dmcp-arch {
        display: none;
    }

    .dmcp-stage {
        position: static;
        transform: none;
        width: auto;
        max-width: none;
        margin-block-end: 32px;
    }

    .dmcp-subtitle,
    .dmcp-tagline {
        opacity: 1;
        transform: none;
    }

    /* در موبایل لوگو دیگر مطلق نیست تا زیر عنوان نیفتد. */
    .dmcp-logo {
        position: static;
        margin: 0;
        opacity: 1;
        transform: none;
    }

    .dmcp-heading {
        font-size: clamp(30px, 8vw, 44px);
        flex-wrap: wrap;
        gap: 10px;
    }

    .dmcp-word--right,
    .dmcp-word--left {
        transform: none;
    }

    .dmcp-steps {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 22px;
    }

    /* ⚠ خنثی‌سازی جابه‌جایی دسکتاپ باید هم‌وزنِ خودِ آن قاعده‌ها نوشته شود؛ با انتخابگر
       تک‌کلاسه، قاعدهٔ nth-child حتی داخل همین رسانه هم برنده می‌شد. */
    .dmcp-step,
    .dmcp-step:nth-child(3),
    .dmcp-step:nth-child(4),
    .dmcp-step:nth-child(5) {
        position: static;
        width: auto;
        margin-inline-start: 0;
        transform: none;
        opacity: 1;
        padding: 20px;
        border: 1px solid var(--border-color);
        border-radius: 18px;
        background-color: var(--bg-secondary);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dmcp-word,
    .dmcp-logo,
    .dmcp-step,
    .dmcp-subtitle,
    .dmcp-tagline {
        transition: none;
    }
}