/*
 * نظام الطبقات البصرية
 * هذا الملف مسؤول عن الخلفيات والزخارف فقط، ولا يغيّر تخطيط المحتوى أو وظائفه.
 */

/* لوحة عامة خفيفة خلف المسار العام من الهيدر إلى نهاية المحتوى */
body {
    background: var(--surface);
}

main#main-content {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, #f8fbf8 0%, #ffffff 38%, #f2f8f3 100%);
}

main#main-content::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        repeating-linear-gradient(135deg, transparent 0 88px, rgba(47, 111, 78, .025) 89px 90px),
        radial-gradient(circle at 8% 22%, rgba(197, 139, 42, .055), transparent 19rem),
        radial-gradient(circle at 94% 68%, rgba(47, 111, 78, .055), transparent 21rem);
    content: '';
    pointer-events: none;
}

main#main-content > * {
    position: relative;
    z-index: 1;
}

/* هيدر هادئ مع خط هوية واحد */
.site-header {
    position: sticky;
    isolation: isolate;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 4px 24px rgba(23, 69, 50, .055);
}

.site-header::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    opacity: .7;
    background: linear-gradient(90deg, transparent 0 8%, var(--teal) 8% 48%, var(--gold) 48% 51%, var(--teal) 51% 92%, transparent 92%);
    content: '';
    pointer-events: none;
}

.site-header .nav-wrap {
    position: relative;
    z-index: 1;
}

/* طبقة واحدة خفيفة لكل قسم في الصفحة الرئيسية */
.home-layer,
.page-hero,
.auth-section,
.dashboard-hero,
main#main-content > .section:not(.home-layer) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.home-layer::before,
.home-layer::after,
.page-hero::before,
.page-hero::after,
.auth-section::before,
.auth-section::after,
.dashboard-hero::before,
.dashboard-hero::after {
    position: absolute;
    z-index: 0;
    content: '';
    pointer-events: none;
}

.home-layer > .container,
.page-hero > .container,
.section > .container,
.auth-section > .auth-card,
.dashboard-hero > .container {
    position: relative;
    z-index: 1;
}

/* الصفحة الرئيسية */
.home-layer-stats::before {
    top: -230px;
    right: -145px;
    width: 510px;
    height: 510px;
    border: 1px solid rgba(198, 230, 204, .23);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(198, 230, 204, .045), 0 0 0 66px rgba(197, 139, 42, .045);
}

.home-layer-stats::after {
    inset: 0;
    opacity: .16;
    background: repeating-linear-gradient(151deg, transparent 0 42px, rgba(222, 241, 225, .16) 43px 44px);
}

.home-layer-features::before {
    top: -110px;
    left: -170px;
    width: 430px;
    height: 280px;
    border: 1px solid rgba(47, 111, 78, .105);
    border-radius: 50%;
    transform: rotate(-18deg);
}

.home-layer-features::after {
    right: -160px;
    bottom: -190px;
    width: 470px;
    height: 350px;
    border: 1px solid rgba(197, 139, 42, .11);
    border-radius: 50%;
    background: repeating-linear-gradient(132deg, transparent 0 31px, rgba(47, 111, 78, .035) 32px 33px);
    transform: rotate(10deg);
}

.home-layer-projects::before {
    inset: 0;
    opacity: .18;
    background-image: radial-gradient(rgba(47, 111, 78, .16) 1px, transparent 1px);
    background-size: 28px 28px;
}

.home-layer-projects::after {
    top: 40px;
    right: -120px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(197, 139, 42, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(197, 139, 42, .03), 0 0 0 60px rgba(47, 111, 78, .025);
}

.home-layer-events::before {
    top: -150px;
    right: 7%;
    width: 570px;
    height: 250px;
    border: 1px solid rgba(47, 111, 78, .1);
    border-radius: 50%;
    transform: rotate(-7deg);
}

.home-layer-events::after {
    inset: 0;
    opacity: .13;
    background: repeating-linear-gradient(-27deg, transparent 0 52px, rgba(47, 111, 78, .07) 53px 54px);
}

.home-layer-workshops::before {
    top: 34px;
    left: 11%;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(197, 139, 42, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(197, 139, 42, .035), 0 0 0 45px rgba(47, 111, 78, .025);
}

.home-layer-workshops::after {
    right: 13%;
    bottom: -80px;
    width: 340px;
    height: 160px;
    opacity: .22;
    background: repeating-linear-gradient(168deg, transparent 0 23px, rgba(47, 111, 78, .095) 24px 25px);
    transform: rotate(-7deg);
}

.home-layer-news::before {
    bottom: -210px;
    left: -125px;
    width: 490px;
    height: 490px;
    border: 1px solid rgba(197, 139, 42, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(197, 139, 42, .035), 0 0 0 70px rgba(47, 111, 78, .03);
}

.home-layer-news::after {
    inset: 0;
    opacity: .1;
    background: repeating-linear-gradient(148deg, transparent 0 36px, rgba(47, 111, 78, .08) 37px 38px);
}

/* صفحات العرض والمشاركة: زخرفة في الحاوية وليس خلف كل بطاقة */
.page-hero::before {
    top: -185px;
    left: -145px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(47, 111, 78, .115);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(47, 111, 78, .035), 0 0 0 58px rgba(197, 139, 42, .035);
}

.page-hero::after {
    right: -115px;
    bottom: -95px;
    width: 460px;
    height: 210px;
    opacity: .2;
    background: repeating-linear-gradient(156deg, transparent 0 28px, rgba(47, 111, 78, .1) 29px 30px);
    transform: rotate(-8deg);
}

.page-hero.page-hero-competition::before {
    border-color: rgba(197, 139, 42, .28);
    box-shadow: 0 0 0 24px rgba(197, 139, 42, .06), 0 0 0 66px rgba(255, 255, 255, .035);
}

.page-hero.page-hero-competition::after {
    background: repeating-linear-gradient(151deg, transparent 0 30px, rgba(255, 255, 255, .075) 31px 32px);
}

main#main-content > .section:not(.home-layer)::before {
    inset: 0;
    opacity: .12;
    background-image: radial-gradient(rgba(47, 111, 78, .17) 1px, transparent 1px);
    background-position: 8px 8px;
    background-size: 30px 30px;
    content: '';
    pointer-events: none;
}

.auth-section::before,
.dashboard-hero::before {
    top: -170px;
    right: -170px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(47, 111, 78, .105);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(47, 111, 78, .035), 0 0 0 65px rgba(197, 139, 42, .035);
}

.auth-section::after,
.dashboard-hero::after {
    bottom: -80px;
    left: 6%;
    width: 350px;
    height: 180px;
    opacity: .16;
    background: repeating-linear-gradient(165deg, transparent 0 25px, rgba(47, 111, 78, .1) 26px 27px);
    transform: rotate(6deg);
}

/* التذييل امتداد بصري للون الإحصائيات */
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image: repeating-linear-gradient(143deg, transparent 0 36px, rgba(198, 226, 201, .045) 37px 38px);
}

.site-footer > .container {
    position: relative;
    z-index: 1;
}

/* تقليل حجم الزخارف على الجوال مع إبقاء التدرج العام */
@media (max-width: 700px) {
    main#main-content {
        background: linear-gradient(180deg, #f8fbf8 0%, #ffffff 34%, #f3f9f4 100%);
    }

    .home-layer-stats::before { right: -250px; }
    .home-layer-features::after { right: -285px; }
    .home-layer-projects::after { right: -205px; }
    .home-layer-events::before { right: -250px; }
    .home-layer-workshops::before { left: -145px; }
    .home-layer-workshops::after { right: -160px; }
    .home-layer-news::before { left: -290px; }
    .page-hero::before { left: -245px; }
    .page-hero::after { right: -245px; }
    .auth-section::before,
    .dashboard-hero::before { right: -315px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}