/* ═══ اللوحة الخلفية — طبقة الصور خلف الكانفس ═══
   مُستخرَج حرفياً من index.html بلا أي تعديل. */

/* ═══════════ اللوحة الخلفية (الصور الثلاث الموصولة) ═══════════ */
.bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;background:#000;
  opacity:0;transition:opacity .9s ease;
}
.bg.is-ready{opacity:1}
.bg__strip{
  position:absolute;top:0;left:50%;
  transform:translate3d(-50%,0,0);
  will-change:transform;font-size:0;line-height:0;
}
.bg__layer{display:block;width:100%;height:auto}
/* كل صورة بعد الأولى تتداخل مع التي فوقها بمقدار --seam وتتلاشى حافتها
   العليا داخلها — فتبدو الصور الثلاث لوحةً واحدة بلا خط فاصل */
.bg__layer--joined{
  margin-top:calc(var(--seam) * -1);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 var(--seam));
          mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 var(--seam));
}
/* الشعار: صورة بشفافية حقيقية، فلا حاجة لأي دمج — الخلفية والهالة
   مُزالتان من الملف نفسه. الملفّ المستعمل حالياً يُحدَّد في
   js/config.js ضمن BG_CONFIG.logo (وهو assets/logo-mask.png).
   مخفيّ طوال السكرول، ويظهر بعد أن يصل السكرول إلى نهايته — التأخير
   والتلاشي من الـ transition نفسه، لا من موضع السكرول */
.bg__logo{
  position:absolute;transform:translate(-50%,-50%);
  height:auto;pointer-events:none;
  opacity:0;transition:opacity .7s ease .35s;
}
/* تدرّج سينمائي فوق اللوحة: فينييت + تعتيم اختياري */
.bg__grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(128% 92% at 50% 44%, rgba(0,0,0,0) 26%, rgba(0,0,0,var(--bg-vig,.5)) 100%),
    rgba(0,0,0,var(--bg-dark,0));
}