/* =========================================
   bg-sections.css
   نظام خلفيات سكشنات نادي الفرسان
   السيناريوهات:
   01) سكشنات كاملة بألوان صافية
   02) شكل رئيسي مائل (Main V) - هندسة فقط
   03) تعبئة الشكل الرئيسي (لون / صورة)
   04) شكل داكن صغير (Corner) - هندسة + تعبئة
   05) شكل فاتح علوي (Light Overlay)
   06) صورة كاملة كخلفية اختيارية
   07) حركة ظهور + تجاوب
   ========================================= */

/* لو لم تُعرّف في style.css */
:root {
  --color-main: #0f6b63;
  --color-main-dark: #262626;
  --color-light: #dde3ec;
  --color-white: #ffffff;

  /* قيم افتراضية للتحكم في حجم وموقع الشكل الرئيسي */
  --shape-main-size: 120vmin;
  --shape-main-top: -80vmin;
  --shape-main-inline: -25vmin;
}

/* -----------------------------------------
   01) سكشنات كاملة بألوان صافية (بدون أشكال)
   ----------------------------------------- */

.bg-solid-white {
  background-color: var(--color-white);
}

.bg-solid-main {
  background-color: var(--color-main);
  color: #ffffff;
}

.bg-solid-dark {
  background-color: var(--color-main-dark);
  color: #ffffff;
}

.bg-solid-light {
  background-color: var(--color-light);
}

/* قاعدة عامة للسكشنات ذات الأشكال */
.section-shape {
  position: relative;
  overflow: hidden;
}

/* -----------------------------------------
   02) الشكل الرئيسي المائل (Main V)
   - هذا الكلاس يضبط الهندسة فقط (مربع + دوران)
   - التعبئة (لون / صورة) تُضاف بكلاسات أخرى
   ----------------------------------------- */

.shape-main-v {
  position: relative;
  overflow: hidden;
}

/* الهندسة الأساسية للشكل الرئيسي */
.shape-main-v::before {
  content: "";
  position: absolute;
  width: var(--shape-main-size);
  height: var(--shape-main-size);           /* مربع حقيقي */
  top: var(--shape-main-top);
  inset-inline-start: var(--shape-main-inline);
  border-radius: 10%;
  transform: rotate(45deg);
  z-index: -1;
  background: transparent;                  /* التعبئة تأتي من كلاس آخر */
}

/* نسخة أعلى قليلاً */
.shape-main-v-high {
  --shape-main-top: -90vmin;
}

/* نسخة أقل نزولاً للأسفل (تُظهر رأس المثلث أكثر) */
.shape-main-v-shallow {
  --shape-main-top: -70vmin;
}

/* على الشاشات الصغيرة نكبر الشكل قليلاً ونحرّكه */
@media (max-width: 768px) {
  .shape-main-v,
  .shape-main-v-high,
  .shape-main-v-shallow {
    --shape-main-size: 140vmin;
    --shape-main-inline: -35vmin;
  }
}

/* -----------------------------------------
   03) تعبئة الشكل الرئيسي
   - لون ثابت: shape-fill-main
   - صورة داخل الشكل: shape-fill-image + متغير --shape-image
   ----------------------------------------- */

/* تعبئة بلون أخضر */
.shape-fill-main::before {
  background-color: var(--color-main);
}

/* تعبئة بصورة داخل الشكل الرئيسي */
.shape-fill-image::before {
  background-image: var(--shape-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* يمكن جمعهما لو أردت لوناً أساسياً تحت الصورة:
   .shape-main-v.shape-fill-main.shape-fill-image */

/* -----------------------------------------
   04) الشكل الداكن الصغير (Corner)
   - ماسة داكنة في الزاوية المقابلة
   - يمكن أن تكون لونًا أو صورة بنفس الفكرة
   ----------------------------------------- */

.shape-corner {
  position: relative;
  overflow: hidden;
}

/* هندسة الماسة */
.shape-corner::after {
  content: "";
  position: absolute;
  width: 55vmin;
  height: 55vmin;           /* مربع */
  bottom: -35vmin;
  inset-inline-end: -20vmin;
  border-radius: 10%;
  transform: rotate(45deg);
  z-index: -1;
  background: transparent;  /* التعبئة تأتي من كلاس آخر */
}

/* نسخة أصغر قليلاً */
.shape-corner-small::after {
  width: 40vmin;
  height: 40vmin;
  bottom: -28vmin;
}

/* تعبئة داكنة للماسة */
.shape-corner-fill-dark::after {
  background-color: var(--color-main-dark);
}

/* تعبئة بصورة (اختياري) */
.shape-corner-fill-image::after {
  background-image: var(--shape-corner-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 768px) {
  .shape-corner::after,
  .shape-corner-small::after {
    width: 65vmin;
    height: 65vmin;
    bottom: -40vmin;
  }
}

/* -----------------------------------------
   05) الشكل الفاتح العلوي (Light Overlay)
   - لوحة فاتحة مائلة أعلى الحافة
   ----------------------------------------- */

.shape-light-overlay {
  position: relative;
  overflow: hidden;
}

/* اللوحة الفاتحة */
.shape-light-overlay::after {
  content: "";
  position: absolute;
  width: 70vmin;
  height: 70vmin;          /* مربع */
  top: -10vmin;
  inset-inline-start: -30vmin;
  border-radius: 10%;
  transform: rotate(45deg);
  z-index: -1;
  background-color: var(--color-light);
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 768px) {
  .shape-light-overlay::after {
    width: 80vmin;
    height: 80vmin;
    top: -15vmin;
    inset-inline-start: -40vmin;
  }
}

/* -----------------------------------------
   06) صورة كاملة كخلفية للسكشن (سيناريو إضافي)
   - ليست داخل الشكل، بل تغطي السكشن كله
   - تُستخدم مع أو بدون الأشكال أعلاه
   ----------------------------------------- */

.bg-full-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* طبقة تغميق خفيفة فوق الصورة */
.bg-full-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.05)
  );
  z-index: -2;
}

/* -----------------------------------------
   07) حركة ظهور اختيارية للأقسام
   ----------------------------------------- */

.bg-animated {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.bg-animated.bg-in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bg-animated {
    opacity: 1;
    transform: none;
    transition: none;
  }
}



/* -----------------------------------------
لون فقط داخل الشكل:
<section class="section section-shape shape-main-v shape-fill-main">
  ...
</section>
نفس الشكل لكن بالصورة بدل اللون:
<section class="section section-shape shape-main-v shape-fill-image"
         style="--shape-image:url('images/Soccer.jpg');">
  ...
</section>
مع ماسة داكنة إضافية:
<section class="section section-shape shape-main-v shape-fill-image shape-corner shape-corner-fill-dark"
         style="--shape-image:url('images/Swimming.jpg');">
  ...
</section>
بهذا الشكل كل السيناريوهات مرتبة، والأهم: الصور أصبحت بديل للون الأخضر داخل الشكل نفسه، وليست خلفية كاملة للسيكشن إلا في مثال واحد اختياري فقط.

----------------------------------------- */