/* ═══ نافذة «ابدأ الآن» — تدفّق البداية فوق الصفحة الرئيسة ═══
   على فكرة مشغّل الفيديو: لا مغادرة للصفحة. طبقة ثابتة فوق كلّ شيء
   (فوق الشريط z:7 وتحت لا شيء)، وخلفية الصورة تملأ الشاشة كاملةً
   فتحجب ما خلفها — بلا بطاقة ولا بلور ولا تعتيم (بطلب المستخدم).
   الخلفيات تتبدّل مع كلّ بطاقة، وتنسيق النصّ كما ضُبط: الأسئلة
   موسَّطة بعرضٍ مقيَّد وبمقاسات أكبر، والانتقال بحركة خروجٍ ودخول. */

.start-ov{
  position:fixed;
  inset:0;
  z-index:70;
  /* بلا تعتيم ولا بلور (بطلب المستخدم): الخلفية تملأ الشاشة وتغطّي
     ما خلفها كلّه، فلا حاجة لطبقةٍ فوق الصفحة */
  visibility:hidden;
  opacity:0;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.start-ov.is-open{
  visibility:visible;
  opacity:1;
  transition:opacity .45s ease;
}

/* الخلفية بملء الشاشة: لا بطاقة ولا زوايا مدوّرة ولا ظلّ ولا هالة
   (بطلب المستخدم) — الصورة تغطّي الشاشة كلّها والأسئلة فوقها */
.start-ov__panel{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:url(../../assets/backgrounds/3.jpg) center/cover no-repeat #131615;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(25px, 4.46vw, 86px);     /* فجوة المرجع 44/986 من العرض */
  /* بلا حركة دخول على اللوح: تصغيره وهو بملء الشاشة كان يكشف
     حوافّ الصفحة تحته — تلاشي الطبقة نفسها يكفي */
}
@media (prefers-reduced-motion: reduce){
  .start-ov{transition-duration:.01ms}
  .start-ov__panel{transition-duration:.01ms}
}

/* زرّ الخروج — أعلى يمين اللوح، بلغة زرّ × في مشغّل الفيديو */
.start-ov__exit{
  position:absolute;
  top:18px;
  right:18px;
  z-index:3;
  width:clamp(42px, 3.4vw, 52px);
  height:clamp(42px, 3.4vw, 52px);
  border-radius:50%;
  background:rgba(10,10,10,.72);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-size:clamp(16px, 1.3vw, 20px);
  display:grid;
  place-items:center;
  text-decoration:none;
  transition:background .3s ease, transform .3s ease;
}
.start-ov__exit:hover,
.start-ov__exit:focus-visible{background:#1f1f1f;transform:scale(1.08)}
.start-ov__exit:active{transform:scale(.96)}
.start-ov__exit:focus-visible{outline:1px solid rgba(242,237,228,.5);outline-offset:4px}

/* زرّا الاختيار — نِسَب مرجع البداية.png (كنفا 986×678): العرض
   489/986 من عرض الشاشة والنسبة 489:77، والخطوط بوحدات cq فتتقيّس
   مع الزرّ نفسه */
.start-ov__choice{
  position:relative;
  width:clamp(240px, 49.6vw, 960px);
  aspect-ratio:489/77;
  container-type:inline-size;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#f2ede4;
  border-radius:2.45cqw;
  transition:background .35s ease, transform .35s ease;
}
.start-ov__choice:hover,
.start-ov__choice:focus-visible{background:rgba(255,244,225,.05)}
.start-ov__choice:active{transform:scale(.985)}
.start-ov__choice:focus-visible{outline:1px solid rgba(242,237,228,.5);outline-offset:5px}

/* حدود الشُّرَط: مستطيلان متطابقان — dasharray واحد وإزاحة نصف
   الدورة للثاني فتتناوب شرطة حمراء وشرطة خضراء حول المحيط،
   والهندسة من CSS كي تعمل النسب المئوية والزوايا المدوّرة */
.start-ov__dash{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.start-ov__dash rect{
  x:0.5px; y:0.5px;
  width:calc(100% - 1px);
  height:calc(100% - 1px);
  rx:2.45cqw;
  fill:none;
  stroke-width:1.2;
  stroke-dasharray:7 25;
}
.start-ov__dash rect:nth-child(1){stroke:rgba(190,70,18,.95)}
.start-ov__dash rect:nth-child(2){stroke:rgba(96,128,62,.9);stroke-dashoffset:-16}

/* «اللغة العربية» — نسخ تقليديّ ثقيل كما في المرجع */
.start-ov__choice--ar span{
  font-family:'Traditional Arabic','Noto Naskh Arabic','Amiri',serif;
  font-weight:700;
  font-size:6.95cqw;                 /* 34px على كنفا المرجع */
  line-height:1;
  padding-bottom:.14em;              /* ميزان بصريّ لارتفاع النسخ */
}

/* «English» — سيريف عالي التباين على أسلوب ديدون */
.start-ov__choice--en span{
  font-family:'Bodoni MT','Didot','Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:700;
  font-size:6.15cqw;                 /* 30px على كنفا المرجع */
  line-height:1;
  letter-spacing:.01em;
}

/* لمسة الاختيار: وميض خفيف حتى ينتقل المشهد لبطاقات النموذج */
.start-ov__choice.is-picked{background:rgba(255,244,225,.09)}

/* ═══ مشهد بطاقات النموذج ═══
   البطاقة على أنساق تصاميم Form: عنوان نسخ ثقيل، كتل أسئلة في
   شبكة عمودين، مربّعات اختيار بحدّ أبيض رفيع وعلامة ✓ ذات ذيل،
   حقول حبّية بحدّ مدوّر، «التالي» حبّة بيضاء بمثلّث أحمر، رجوع
   حبّة صغيرة أعلى البداية، وخطّ تقدّم متقطّع بتعبئة متدرّجة
   وفقّاعة نسبة تعدّ — كما في مرجع cards animation/1.mp4 */
.start-ov__view{position:absolute;inset:0}
/* [hidden] يجب أن تغلب display الصريح — بدونها بقيت شاشة اللغة
   ظاهرة فوق كلّ البطاقات */
.start-ov__view[hidden]{display:none !important}
.start-ov__view--lang{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(25px, 4.46vw, 86px);
  /* خروج شاشة اللغة بالحركة نفسها التي تخرج بها البطاقات، فيكون
     الانتقال إليها ومنها متّصلاً لا قفزة */
  transition:opacity .24s ease, transform .24s ease;
}
.start-ov__view--lang.is-out{
  opacity:0;
  transform:translateX(7%);         /* تخرج يميناً كالبطاقات */
}
.start-ov__view--card{display:flex;flex-direction:column}

/* مساحة البطاقة: عمود مرن، والأسئلة تتوسّطه رأسيّاً بهامشٍ تلقائيّ
   (margin-block:auto على الشبكة تحت) — يتوسّط ما يسع الشاشةَ ويبدأ
   من الأعلى ما طال عنها، بلا قصّ كما يفعل justify-content:center.

   الانتقال أفقيّ (بطلب المستخدم): البطاقة تنزلق خارجةً يميناً
   والتالية تدخل من اليسار — يوافق اتّجاه القراءة العربيّ. الاتّجاه
   من المتغيّر ‎--dir‎ الذي يضبطه js/startflow.js: ‏1 للتقدّم و‎-1‎
   للرجوع، فينعكس المشهد تلقائياً حين يضغط الزائر «رجوع». حالة
   is-enter تضع البطاقة على يسارها بلا انتقال، ثمّ يُنزَع الصنف
   فتنساب إلى موضعها. */
.start-ov__card{
  flex:1;
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  padding:clamp(28px, 4.5vh, 56px) clamp(28px, 4vw, 72px) 12px;
  opacity:1;
  transform:none;
  transition:opacity .42s ease, transform .42s cubic-bezier(.2,.8,.3,1);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
}
.start-ov__card.is-out{
  opacity:0;
  transform:translateX(calc(var(--dir, 1) * 7%));
  transition-duration:.26s;          /* الخروج أسرع من الدخول */
}
/* نقطة انطلاق الدخول: على اليسار وبلا انتقال كي تكون قفزةً غير مرئيّة */
.start-ov__card.is-enter{
  opacity:0;
  transform:translateX(calc(var(--dir, 1) * -7%));
  transition:none;
}

/* عمود التنقّل في الذيل: «التالي» وتحته حبّة الرجوع الصغيرة */
.start-ov__navcol{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
/* زرّ الرجوع — حبّة صغيرة بمثلّث وشُرَط كما في التصاميم */
.start-ov__back{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(10,10,10,.5);
  color:#f2ede4;
  font-size:11px;
  letter-spacing:.18em;
  text-decoration:none;
  transition:background .3s ease;
}
.start-ov__back:hover{background:rgba(30,30,30,.7)}
.start-ov__back-tri{
  width:0;height:0;
  border-block:5px solid transparent;
  border-inline-end:8px solid #f2ede4;
}

/* شبكة كتل الأسئلة */
/* الشبكة موسَّطة أفقيّاً بعرضٍ مقيَّد ورأسيّاً بهامشٍ تلقائيّ: بلا
   القيد كانت الكتلة الواحدة تتمدّد على كامل العرض فتلتصق بحافّة
   الشاشة (يمينُها في RTL) ويبقى نصف الشاشة فارغاً. */
/* المقاسات مربوطة بالعرض والارتفاع معاً: كانت بـvh وحدها فتبقى
   صغيرةً على الشاشات العريضة مهما اتّسعت (max بين الاثنين يأخذ
   الأكبر) — والخلفية صارت بملء الشاشة فبدا النصّ أصغر منها بكثير. */
.sf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(520px, 100%), 1fr));
  gap:clamp(26px, 4vh, 52px) clamp(32px, 3.8vw, 76px);
  align-content:start;
  width:min(1400px, 100%);
  margin:auto;                 /* التوسيط الآمن — انظر .start-ov__card */
}
.sf-block--textarea{grid-column:1 / -1}

.sf-block__title{
  font-family:'Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight:700;
  font-size:clamp(26px, max(2.9vw, 3.2vh), 60px);
  color:#fff;
  margin-bottom:.5em;
  line-height:1.3;
}
.sf-block__helper{
  color:rgba(242,237,228,.78);
  font-family:'Traditional Arabic','Noto Naskh Arabic',serif;
  font-size:clamp(16px, max(1.3vw, 1.9vh), 26px);
  line-height:1.7;
  margin-bottom:.7em;
}

/* خيارات الاختيار: مربّع بحدّ رفيع وعلامة صحّ بذيل عند التفعيل */
.sf-block__opts{display:flex;flex-direction:column;gap:clamp(12px, 1.7vh, 18px)}
.sf-block__opts--cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px, 1.7vh, 18px) clamp(16px, 2.2vw, 32px);
}
.sf-opt{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
}
.sf-opt__box{position:absolute;opacity:0;pointer-events:none}
.sf-opt__mark{
  flex:none;
  width:clamp(22px, max(1.8vw, 2.3vh), 36px);
  height:clamp(22px, max(1.8vw, 2.3vh), 36px);
  margin-top:3px;
  border:1.4px solid rgba(255,255,255,.75);
  border-radius:3px;
  position:relative;
  display:grid;
  place-items:center;
}
/* علامة صحّ حقيقية داخل المربّع بخطّ النصّ نفسه (بطلب المستخدم) —
   كانت زاويةً مرسومة بحدّين تخرج فوق المربّع فتبدو سهماً */
.sf-opt__mark::after{
  content:"✓";
  font-family:'Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight:700;
  font-size:clamp(17px, max(1.35vw, 1.75vh), 27px);
  line-height:1;
  color:#f2ede4;
  transform:scale(0);
  transition:transform .22s cubic-bezier(.3,1.4,.5,1);
}
.sf-opt__box:checked ~ .sf-opt__mark::after{transform:scale(1)}
.sf-opt__box:focus-visible ~ .sf-opt__mark{outline:1px solid rgba(242,237,228,.6);outline-offset:3px}
.sf-opt__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.sf-opt__label{
  font-family:'Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight:700;
  font-size:clamp(18px, max(1.75vw, 2.2vh), 36px);
  color:#fff;
  line-height:1.4;
}
.sf-opt__desc{
  font-family:'Traditional Arabic','Noto Naskh Arabic',serif;
  font-size:clamp(14px, max(1.2vw, 1.7vh), 24px);
  color:rgba(242,237,228,.72);
  line-height:1.6;
}
.sf-opt__other{
  flex:1;
  min-width:90px;
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  color:#f2ede4;
  padding:6px 14px;
  font-size:16px;
  font-family:inherit;
}

/* الحقول الحبّية — كما في بطاقة التواصل */
.sf-field{display:flex;align-items:center;gap:16px}
.sf-field__label{
  flex:none;
  font-family:'Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight:700;
  font-size:clamp(18px, max(1.7vw, 2.3vh), 34px);
  color:#fff;
  min-width:9em;
}
.sf-field__input{
  flex:1;
  background:rgba(10,10,10,.25);
  border:1.4px solid rgba(255,255,255,.65);
  border-radius:999px;
  color:#f2ede4;
  padding:14px 22px;
  font-size:clamp(17px, max(1.25vw, 1.9vh), 25px);
  font-family:'Segoe UI',system-ui,sans-serif;
}
.sf-field__area{
  width:100%;
  min-height:clamp(90px, 16vh, 150px);
  background:rgba(10,10,10,.25);
  border:1.4px solid rgba(255,255,255,.65);
  border-radius:18px;
  color:#f2ede4;
  padding:12px 16px;
  font-size:15px;
  font-family:'Segoe UI',system-ui,sans-serif;
  resize:vertical;
}
.sf-field__input:focus-visible,
.sf-field__area:focus-visible,
.sf-opt__other:focus-visible{outline:1px solid rgba(242,237,228,.7);outline-offset:2px}
.sf-field__input::placeholder,
.sf-field__area::placeholder,
.sf-opt__other::placeholder{color:rgba(242,237,228,.4)}

/* الذيل: خطّ التقدّم + التالي */
.start-ov__footer{
  flex:none;
  display:flex;
  align-items:center;
  gap:clamp(16px, 2.6vw, 34px);
  padding:14px clamp(20px, 3vw, 44px) 20px;
}
.start-ov__prog{
  position:relative;
  flex:1;
  height:34px;
}
.start-ov__prog::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:16px;
  height:2px;
  background:repeating-linear-gradient(to right, rgba(255,255,255,.8) 0 7px, transparent 7px 15px);
}
.start-ov__prog-fill{
  position:absolute;
  inset-inline-start:0;
  top:16px;
  height:2.4px;
  width:1%;
  background:linear-gradient(to right, #57c46a, #cdd23a, #e2603a, #d23929);
  transition:width .8s cubic-bezier(.3,.7,.3,1);
}
.start-ov__prog-bubble{
  position:absolute;
  top:0;
  inset-inline-start:0;
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.8);
  background:rgba(10,10,10,.55);
  color:#f2ede4;
  display:grid;
  place-items:center;
  font-family:'Bodoni MT',Georgia,serif;
  font-size:11.5px;
  transition:inset-inline-start .8s cubic-bezier(.3,.7,.3,1);
}
.start-ov__next{
  flex:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 26px;
  border-radius:999px;
  border:none;
  background:#f4f1ea;
  color:#141414;
  font-family:'Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight:700;
  font-size:clamp(16px, 2.2vh, 20px);
  line-height:1;
  cursor:pointer;
  transition:transform .25s ease, opacity .3s ease;
}
.start-ov__next:hover:not(:disabled){transform:scale(1.05)}
.start-ov__next:disabled{opacity:.35;cursor:not-allowed}
.start-ov__next-tri{
  width:0;height:0;
  border-block:6px solid transparent;
  border-inline-start:10px solid #d23929;
}

/* بطاقة النهاية — على تصميم النهاية.png: «إرسال» ضخمة بمثلّث أحمر
   مفرّغ خلفها وخطّ تحتيّ رفيع */
.sf-end{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
}
.sf-end__lead{
  color:rgba(242,237,228,.75);
  font-family:'Traditional Arabic','Noto Naskh Arabic',serif;
  font-size:clamp(15px, 2vh, 19px);
}
.sf-end__send{
  position:relative;
  background:none;
  border:none;
  cursor:pointer;
  padding:24px 40px;
  color:#fff;
}
.sf-end__word{
  position:relative;
  z-index:1;
  font-family:'Traditional Arabic','Noto Naskh Arabic',serif;
  font-weight:700;
  font-size:clamp(44px, 8vh, 76px);
  line-height:1;
}
.sf-end__tri{
  position:absolute;
  left:50%;top:50%;
  width:64px;height:64px;
  transform:translate(-90%,-52%) rotate(90deg);
  border:2px solid rgba(210,57,41,.9);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  background:transparent;
}
.sf-end__send:hover .sf-end__word{text-shadow:0 0 22px rgba(210,57,41,.5)}
.sf-end__send:disabled{cursor:default}
.sf-end__send.is-sent .sf-end__word{color:#7ce8a8}
.sf-end__line{
  width:min(320px, 50%);
  height:1px;
  background:rgba(255,255,255,.55);
}

/* الإنجليزية: اتّجاه يسار-يمين وخطوط سيريف على أسلوب التصاميم */
.start-ov__view--card.is-en .sf-block__title,
.start-ov__view--card.is-en .sf-block__helper,
.start-ov__view--card.is-en .sf-opt__label,
.start-ov__view--card.is-en .sf-opt__desc,
.start-ov__view--card.is-en .sf-field__label,
.start-ov__view--card.is-en .start-ov__next,
.start-ov__view--card.is-en .sf-end__lead,
.start-ov__view--card.is-en .sf-end__word{
  font-family:'Bodoni MT','Didot','Playfair Display',Georgia,serif;
}

/* هواتف: اللوح أضيق فالإطار يرقّ والشبكة عمود واحد */
@media (max-width:640px){
  .start-ov__panel{inset:0}
  .sf-block__opts--cols{grid-template-columns:1fr}
  .sf-field{flex-direction:column;align-items:stretch;gap:6px}
  .sf-field__label{min-width:0}
}