/* =========================================================
   KFOO FIT — نظام السكرول السينمائي
   ثلاثة فصول (فيديو الموقع الحالي ثم الثاني ثم الثالث)
   ملف جديد مستقل — لا يغيّر أي نص أو تخطيط قائم.
   ========================================================= */

.kfs{
  --vh:1vh;
  --p:0;        /* التقدّم الكلي */
  --p2:0;       /* تقدّم الفيديو الثاني */
  --p3:0;       /* تقدّم الفيديو الثالث */
  --p4:0;       /* تقدّم الفيديو الرابع */       /* تقدّم الفيديو الثالث */
  --heroOut:0;  /* تلاشي نص البطل */
  --veil:0;     /* الستارة */
  position:relative;
  background:#060810;
  height:calc(var(--vh) * 620);
}

.kfs__pin{
  position:sticky;top:0;
  height:calc(var(--vh) * 100);
  overflow:hidden;
  background:#060810;
  isolation:isolate;
}

/* ممنوع وضع أي قاعدة على قسم البطل نفسه — يبقى بتخطيطه الأصلي حرفياً */

/* الفيديو الحيّ يُستبدل بلوحة الإطارات (العنصر يبقى في الصفحة بمصادره) */
.kfs .hero-video{visibility:hidden !important;}

/* لوحة الفيديو الأول: مكان الفيديو تماماً داخل حاوية الخلفية */
.kfs__canvas{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  transform:scale(calc(1.06 - var(--p) * .06));
  /* التكبير ينطلق من أعلى الكادر لا من مركزه — فلا يقتطع الرؤوس */
  transform-origin:center top;
  will-change:transform;
}

/* تلاشي محتوى البطل — بالشفافية فقط.
   ممنوع لمس transform: الشعار يستخدم translateX(-50%) للتوسيط. */
.kfs [data-purpose="hero-banner"] > .container,
.kfs .brand-badge{
  opacity:calc(1 - var(--heroOut));
  will-change:opacity;
}

/* ---- طبقتا الفيديو الثاني والثالث ---- */
.kfs__film{
  position:absolute;inset:0;
  overflow:hidden;background:#060810;
  visibility:hidden;
}
.kfs__film--2{z-index:2;}
.kfs__film--3{z-index:3;}
.kfs__film--4{z-index:4;}
.kfs__film.is-on{visibility:visible;}
.kfs__film canvas{display:block;width:100%;height:100%;transform-origin:center top;will-change:transform;}
.kfs__film--2 canvas{transform:scale(calc(1.06 - var(--p2) * .06));}
.kfs__film--3 canvas{transform:scale(calc(1.06 - var(--p3) * .06));}
.kfs__film--4 canvas{transform:scale(calc(1.06 - var(--p4) * .06));}

/* نفس معالجة إضاءة البطل — ليتطابق الإحساس البصري */
.kfs__fx{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(6,8,16,.15) 40%, rgba(6,8,16,.55) 75%, #060810 100%),
    linear-gradient(180deg, rgba(6,8,16,.6) 0%, transparent 18%, transparent 74%, #060810 100%);
}

/* ---- الكلام التحفيزي فوق كل فصل ----
   نفس خطوط البطل حرفياً: العنوان Changa/Cairo بوزن 800 مع نفس التوهّج،
   والسطر العلوي Cairo بوزن 700 — ليقرأها الزائر كامتداد لنفس الهوية
   لا كعنصر غريب. يظهر مع تقدّم الفصل ويختفي قبل الستارة. */
.kfs__cap{
  /* على اليمين كنص البطل تماماً (الصفحة RTL)، لا في المنتصف:
     الشخصيات في هذه اللقطات تتوسّط الكادر، فالنص المتوسّط يجلس فوق
     أجسادهم. الثلث الأيمن مظلم في المشهدين فيقرأ النص بوضوح. */
  position:absolute;right:0;bottom:14%;z-index:3;
  max-width:42%;padding:0 clamp(24px,4vw,64px);
  text-align:right;pointer-events:none;
  opacity:var(--cap,0);
  transform:translateY(calc((1 - var(--cap,0)) * 18px));
  will-change:opacity,transform;
}
.kfs__cap-sub{
  font-family:'Cairo','Tajawal',sans-serif;
  font-weight:700;letter-spacing:.5px;color:#fff;
  font-size:clamp(13px,1.7vw,22px);
  margin:0 0 10px;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.kfs__cap-title{
  font-family:'Changa','Cairo','Tajawal',sans-serif;
  font-weight:800;line-height:1.3;letter-spacing:-0.01em;
  color:#ccff00;
  font-size:clamp(26px,4.4vw,60px);
  margin:0;
  text-shadow:0 0 40px rgba(204,255,0,.35), 0 4px 12px rgba(0,0,0,.4);
}
.kfs__cap-title span{display:block;}

/* ---- الستارة بين الفصول ---- */
.kfs__veil{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:#060810;
  opacity:var(--veil);
  will-change:opacity;
}

/* ---- شريط تقدّم رفيع بألوان الهوية ---- */
.kfs__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:7;
  height:2px;background:rgba(255,255,255,.08);pointer-events:none;
}
.kfs__bar i{
  display:block;height:100%;width:calc(var(--p) * 100%);
  background:linear-gradient(90deg,#ccff00,#00e5ff);
  box-shadow:0 0 12px rgba(204,255,0,.5);
}

/* ---- شاشة تحميل أول إطار ---- */
.kfs__load{
  position:absolute;inset:0;z-index:8;display:grid;place-items:center;
  background:#060810;transition:opacity .5s;pointer-events:none;
}
.kfs__load.is-done{opacity:0;}
.kfs__load i{
  width:32px;height:32px;border-radius:50%;
  border:2px solid rgba(255,255,255,.14);border-top-color:#ccff00;
  animation:kfsSpin .8s linear infinite;
}
@keyframes kfsSpin{to{transform:rotate(360deg);}}

/* ---- وضع الأمان: يُفعّل تلقائياً إن تعذّر تحميل الإطارات ----
   الصفحة تعود لحالتها الأصلية تماماً بفيديو حيّ، بلا مشهد فارغ. */
.kfs.kfs--off{height:auto !important;}
.kfs.kfs--off .kfs__pin{position:static !important;height:auto !important;overflow:visible !important;}
.kfs.kfs--off .hero-video{visibility:visible !important;}
.kfs.kfs--off [data-purpose="hero-banner"] > .container,
.kfs.kfs--off .brand-badge{opacity:1 !important;}
.kfs.kfs--off .kfs__canvas,
.kfs.kfs--off .kfs__film,
.kfs.kfs--off .kfs__veil,
.kfs.kfs--off .kfs__bar,
.kfs.kfs--off .kfs__load{display:none !important;}

/* الشاشات الطولية القصيرة: مسافة سكرول أقصر */
@media (max-aspect-ratio:3/4){
  .kfs{height:calc(var(--vh) * 520);}
}

/* نفس شرط JS حرفياً (innerHeight > innerWidth) حتى لا تختلف اللوحة عن التنسيق
   في المنطقة الرمادية بين 3/4 و 1/1 (نافذة ضيقة على سطح المكتب مثلاً). */
@media (max-aspect-ratio:1/1){
  /* ---- وضع الجوال: الفيديو كما هو، بلا قصّ وبلا إضاءة مضافة ----

     ١) إلغاء التكبير التدريجي.
        اللوحة ترسم الإطار كاملاً (contain)، فلو بقي scale(1.06) لعاد
        القصّ من الحواف وضاع الغرض.

     ٢) إخفاء طبقات التعتيم المضافة فوق الفيديو.
        الشاشة صغيرة والشخصية تملأ منتصفها تماماً حيث تتركّز الڤينييت،
        فتبتلع الوجه والأذرع. على الجوال نعرض إضاءة المقطع الأصلية فقط.
        الطبقتان المستهدفتان هما اللتان تغطّيان الإطار كله (inset-0):
        تعتيم ثابت 20% + ڤينييت مركزي. أما تدرّجا الأعلى والأسفل
        (top-0 h-24 · bottom-0 h-40) فيبقيان: وظيفتهما دمج حدّ القسم
        مع لون الصفحة، لا إضاءة الشخصيات. */
  .kfs__canvas,
  .kfs__film canvas{transform:none !important;}

  .kfs [data-purpose="hero-banner"] > .z-0 > div.inset-0{display:none !important;}
  .kfs__fx{display:none !important;}

  /* الشاشة ضيّقة: النص أقرب للأسفل وبمسافة جانبية أوسع حتى لا يلتصق بالحواف */
  /* الشاشة ضيّقة: لا مجال لعمود جانبي — النص بعرض الشاشة وفي المنتصف.
     bottom:22% وليس 8%: اللوحة على الجوال ترسم الإطار كاملاً (contain)
     فيبقى أسفلها شريط خلفية بارتفاع ‏9–10%‏ من الشاشة. النص عند 8% كان
     يقع داخل ذلك الشريط — منفصلاً عن الصورة وملتصقاً بحافة الشاشة.
     22% ترفعه إلى الثلث السفلي من الصورة نفسها على كل نسب الهواتف. */
  .kfs__cap{right:0;left:0;bottom:22%;max-width:none;padding:0 20px;text-align:center;}
  .kfs__cap-sub{font-size:15px;margin-bottom:8px;}
  .kfs__cap-title{font-size:30px;}
}

/* ---- تقليل الحركة ----
   ملاحظة مهمة: كثير من أجهزة أندرويد تُفعّل «إزالة الحركات» تلقائياً مع
   وضع توفير البطارية. لو عطّلنا النظام هنا فسيرى صاحب الجهاز صورة ثابتة
   بلا سكرول إطلاقاً — وهذا ما كان يحدث فعلاً.

   والسكرول هنا ليس حركة ذاتية: الإطارات تتبع إصبع المستخدم تماماً ولا
   تتحرّك من تلقاء نفسها. لذلك نُبقي النظام عاملاً ونكتفي بإلغاء الحركات
   الزائدة: التكبير التدريجي، ودوران مؤشّر التحميل. */
@media (prefers-reduced-motion:reduce){
  .kfs__canvas,
  .kfs__film--2 canvas,
  .kfs__film--3 canvas,
  .kfs__film--4 canvas{transform:none !important;}
  .kfs__cap{transform:none !important;}
  .kfs__load i{animation:none !important;}
}