.dar-home-hero-projects {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;

    min-height: clamp(570px, 78vh, 820px);

    background: #171223;
}

.dar-home-hero-projects
> :not(.dar-hero-projects-bg) {
    position: relative;
    z-index: 4;
}

.dar-hero-projects-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;

    background: #171223;

    pointer-events: none;
}

.dar-hero-projects-slides,
.dar-hero-projects-slide {
    position: absolute;
    inset: 0;
}

.dar-hero-projects-slide {
    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transform: scale(1);

    transition:
        opacity 1.15s ease,
        visibility 1.15s ease;

    will-change: opacity;
}

/*
 * خلفية ضبابية خفيفة تمنع ظهور فراغات
 * لو كانت أبعاد صورة المشروع غير مناسبة.
 */
.dar-hero-projects-slide::before {
    content: "";

    position: absolute;
    inset: -24px;

    background-image: var(--dar-hero-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    filter: blur(18px);
    opacity: 0.42;

    transform: scale(1.08);
}

.dar-hero-projects-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.dar-hero-projects-slide img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 48%;

    transform: scale(1.015);

    filter:
        saturate(1.04)
        contrast(1.02)
        brightness(0.98);

    transition:
        transform 8s ease-out,
        filter 0.5s ease;

    image-rendering: auto;

    backface-visibility: hidden;
    transform-origin: center center;
}

.dar-hero-projects-slide.is-active img {
    transform: scale(1.055);
}

/*
 * طبقة التعتيم الأساسية:
 * الجزء الذي يحتوي النص أغمق،
 * بينما الجانب الآخر يحافظ على وضوح المشروع.
 */
.dar-hero-projects-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(17, 12, 33, 0.80) 0%,
            rgba(17, 12, 33, 0.62) 34%,
            rgba(17, 12, 33, 0.33) 70%,
            rgba(17, 12, 33, 0.22) 100%
        ),
        linear-gradient(
            180deg,
            rgba(10, 8, 20, 0.13) 0%,
            rgba(10, 8, 20, 0.07) 55%,
            rgba(10, 8, 20, 0.47) 100%
        );
}

/*
 * إضاءة بسيطة أعلى الصورة،
 * تعطي عمقًا بدون التأثير على تفاصيل المبنى.
 */
.dar-hero-projects-bg::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 3;

    background:
        radial-gradient(
            circle at 74% 30%,
            rgba(255, 255, 255, 0.09),
            transparent 36%
        );

    pointer-events: none;
}

.dar-hero-projects-dots {
    position: absolute;
    right: 50%;
    bottom: 20px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;

    background: rgba(15, 11, 28, 0.23);
    backdrop-filter: blur(8px);

    transform: translateX(50%);
}

.dar-hero-projects-dot {
    width: 8px;
    height: 8px;

    display: block;

    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.3);

    transition:
        width 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease;
}

.dar-hero-projects-dot.is-active {
    width: 28px;

    background: #ffffff;

    transform: scaleY(1.08);
}

/*
 * حماية من الخلفيات القديمة الموجودة
 * على عنصر الهيرو نفسه.
 */
.dar-home-hero-projects::before,
.dar-home-hero-projects::after {
    z-index: 1 !important;
}

@media (min-width: 1500px) {
    .dar-home-hero-projects {
        min-height: 780px;
    }

    .dar-hero-projects-slide img {
        object-position: center 46%;
    }
}

@media (max-width: 900px) {
    .dar-home-hero-projects {
        min-height: clamp(540px, 76svh, 720px);
    }

    .dar-hero-projects-slide img {
        object-position: center center;
    }

    .dar-hero-projects-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(17, 12, 33, 0.30) 0%,
                rgba(17, 12, 33, 0.48) 48%,
                rgba(17, 12, 33, 0.83) 100%
            );
    }
}

@media (max-width: 600px) {
    .dar-home-hero-projects {
        min-height: clamp(520px, 74svh, 660px);
    }

    .dar-hero-projects-slide img {
        object-position: center 48%;

        transform: scale(1);
    }

    .dar-hero-projects-slide.is-active img {
        transform: scale(1.035);
    }

    .dar-hero-projects-dots {
        bottom: 12px;

        gap: 6px;

        padding: 6px 9px;
    }

    .dar-hero-projects-dot {
        width: 7px;
        height: 7px;
    }

    .dar-hero-projects-dot.is-active {
        width: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dar-hero-projects-slide,
    .dar-hero-projects-slide img {
        transition-duration: 0.5s;
        transform: none !important;
    }
}