/* =====================================
   SCROLL INDICATOR
===================================== */

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* نکته: قبلاً اینجا padding-right روی خودِ body بود. مشکلش
   این بود که سکشن‌های تمام‌عرضِ این سایت (کلاس‌های e-con-full/
   100vw-style) طوری طراحی شدن که عمداً padding والدشون رو نادیده
   می‌گیرن (برای پس‌زمینه‌ی لبه‌به‌لبه) - یعنی با پدینگِ روی body،
   بین لبه‌ی واقعیِ محتوا و اسکرول‌بار یه نوار خالیِ بی‌رنگ
   می‌موند. رزرو فضای واقعی الان مستقیم روی خودِ هر سکشن (و
   هدر) با جاوااسکریپت (arta-scroll-core.js) انجام می‌شه، نه اینجا. */

.arta-scroll-indicator {

    position: fixed;

    /* نکته (برگشت به نسخه‌ی ساده‌تر): تلاش قبلی (تمام‌ارتفاع +
       پنهان‌شدن پشت هدر با z-index کمتر) بصری گیج‌کننده بود -
       "رفته زیر هدر". برگشتیم به نسخه‌ای که دقیقاً از زیر هدر
       شروع می‌شه و تمام فضای زیر هدر تا پایین صفحه رو کامل پر
       می‌کنه - یعنی هیچ فضای مرده‌ای نه بالا نه پایین نداره،
       و هیچ‌وقت هم زیر هدر نمی‌ره. */
    top: var(--arta-header-height, 80px);
    bottom: 0;
    right: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    /* گپ خیلی کم، تا قطعه‌ها به‌جای بلوک‌های جدا، بیشتر شبیه
       یک خط پیوسته با چندتا بریدگیِ مایل به‌نظر برسن - دقیقاً
       طرحی که کشیدی. */
    gap: 0;

    padding: 0;

    box-sizing: border-box;

    /* نکته: قبلاً ۱۰-۱۴px بود که برای دیدنِ زاویه‌ی برش مایل
       خیلی باریک بود (تقریباً مثل یه خط صاف دیده می‌شد، نه
       ذوزنقه/متوازی‌الاضلاعِ واضح). پهن‌ترش کردیم. */
    width: 10px;

    /* دیگه نیازی به کمتربودن از z-index هدر نیست چون اصلاً
       زیرِ هدر نمی‌ره. */
    z-index: 9999;

    pointer-events: none;

}

.arta-scroll-indicator__item {

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    padding: 0;
    margin: 0;

    cursor: pointer;

    pointer-events: auto;

    /* نکته‌ی مهم: این المنت یه <button> واقعیه، پس مرورگر با
       کلیک/فوکوس یه استایل پیش‌فرض (outline آبی، یا رنگ
       فشرده‌شدنِ داخلی) روش می‌ذاره که اصلاً دست ما نبود -
       همون "رنگ دیگه‌ای که نمی‌دونم چیه". کامل خاموشش می‌کنیم. */
    outline: none;
    -webkit-tap-highlight-color: transparent;

    width: 100%;

    flex: 1 1 0;

    /* برای حسِ واقعیِ «چفت‌شدن» (نه فقط برش‌های هم‌راستا)،
       هر قطعه کمی روی قطعه‌ی قبلی سوار می‌شه؛ z-index از
       جاوااسکریپت (indicator-widget.js) ترتیب روی‌هم‌بودن رو
       مشخص می‌کنه. */
    margin-top: -6px;

    /* نکته‌ی مهم: قبلاً رنگ غیرفعال rgba(255,255,255,0.22) بود -
       روی پس‌زمینه‌های روشنِ سایت عملاً نامرئی می‌شد و فقط
       قطعه‌ی فعال دیده می‌شد (انگار یه خط شناور چسبیده به هدره،
       نه یه اسکرول‌بار کامل و پیوسته). الان یه رنگ خنثی با
       سایه‌ی ریز دور خودش داره که هم روی پس‌زمینه‌ی روشن هم
       تیره واضح دیده بشه. */
    background: rgba(120, 110, 150, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);

    /* نکته‌ی مهم درباره‌ی شکل: قبلاً همه‌ی قطعه‌ها یک متوازی‌الاضلاعِ
       یکسان بودن (برش مایل روی عرض، لبه‌ی بالا/پایین صاف) - یعنی
       اصلاً شبیه طرحی که کشیدی نبود. طرح واقعی: برش‌های مایل باید
       روی محل اتصال قطعه‌ها به‌هم باشه (لبه‌ی بالا/پایین هر قطعه)،
       طوری که انگار یک خط پیوسته با بریدگی‌های زیگزاگی‌ست. قطعه‌ی
       اول (چسبیده به بالا) و قطعه‌ی آخر ذوزنقه‌ن (یک لبه‌شون صافه)،
       قطعه‌های وسط متوازی‌الاضلاع (هر دو لبه مایل، هم‌جهت). این
       سه حالت رو با :first-child/:last-child پایین مشخص کردیم.
       با فقط ۲ سکشن، خودکار می‌شه «۲ ذوزنقه که به‌هم نگاه می‌کنن»،
       چون یکی هم‌زمان first-child هم آخریه. */
    clip-path: polygon(
        0 16px,
        100% 0,
        100% calc(100% - 16px),
        0 100%
    );

    transition:
        flex-grow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.arta-scroll-indicator__item:first-child {

    margin-top: 0;

    /* ذوزنقه: لبه‌ی بالا صاف (چسبیده به شروع نوار)، لبه‌ی پایین مایل */
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 16px),
        0 100%
    );

}

.arta-scroll-indicator__item:last-child {

    /* ذوزنقه: لبه‌ی بالا مایل (ادامه‌ی قطعه‌ی قبلی)، لبه‌ی پایین صاف */
    clip-path: polygon(
        0 16px,
        100% 0,
        100% 100%,
        0 100%
    );

}

.arta-scroll-indicator__item:focus,
.arta-scroll-indicator__item:active {

    /* رفع همون "رنگ ناشناخته‌ی موقع کلیک" - استایل پیش‌فرض
       مرورگر برای فوکوس/فشرده‌شدنِ دکمه رو کامل خنثی می‌کنیم؛
       رنگش رو فقط از کلاس‌های .active/.passed پایین می‌گیره. */
    outline: none;
    box-shadow: none;
    background: inherit;

}

.arta-scroll-indicator__item:hover {

    background: rgba(120, 110, 150, 0.6);

}

/* نکته‌ی مهم (فیچر جدید): به‌جای این‌که فقط سکشن فعلی رنگی
   باشه، هر چقدر کاربر پایین‌تر میاد، از بالا تا سکشن فعلی همه
   پر می‌شن - مثل یه نوار پیشرفت، تا واضح باشه چقدر پایین اومده. */
.arta-scroll-indicator__item.passed {

    background: var(--arta-indicator-color, #18001D);

}

.arta-scroll-indicator__item.active {

    /* نکته: بزرگ‌شدنِ قطعه‌ی فعال الان توسط جاوااسکریپت
       (arta-scroll-indicator-widget.js) با inline style انجام
       می‌شه، چون هر قطعه یه وزن پایه‌ی متناسب با ارتفاع واقعی
       سکشنش داره و باید همون وزن رو ضرب کنه، نه یه مقدار ثابت. */

    background: var(--arta-indicator-color, #18001D);

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.6),
        0 0 14px var(--arta-indicator-glow, rgba(24, 0, 29, 0.65));

}


@media (max-width: 992px) {

    .arta-scroll-indicator {
        display: none;
    }

}