/*
=========================================================
MAHEDI ALTAYS — HERO
=========================================================

المشكلة

قال صاحب الموقع: «بداية الموقع جامدة، غير احترافية».
والوصف دقيق. الواجهة كانت مستطيلين ساكنين: نصّ في جهة
وصندوق صورة في الجهة الأخرى. تفتح الصفحة فتظهر كاملةً
دفعةً واحدة، بلا تدرّج ولا عمق — كأنها لقطة مطبوعة لا
صفحة حيّة.

والصورة كانت داخل إطار بحدّ وزوايا، فتبدو ملصوقة على
الصفحة لا جزءًا منها. وهذا تحديدًا ما يجعل موقعًا يبدو
«قالبًا» لا عملًا مقصودًا.

ما يفعله هذا الملف

  ١) دخول متدرّج: تظهر عناصر الواجهة واحدًا بعد الآخر
     بفارق يسير — العين تتبع الترتيب فتقرأ كما رُتّب لها.

  ٢) عمق: وهج برونزي يتحرّك ببطء خلف الاسم، فيعطي
     الخلفية حياة بلا أن يسرق الانتباه.

  ٣) الصورة تذوب في الخلفية بدل أن تُحاط بإطار.

الانضباط

الحركة كلّها من سُلَّم --motion، فتتوقف وحدها عند
prefers-reduced-motion. والتأخيرات تُصفَّر هناك أيضًا —
وإلا ظلّت العناصر تتأخّر بلا سبب لمن طلب سكونًا.

ولا يبدأ شيء قبل وصول المحتوى: home-content.js يملأ الاسم
والوصف بعد جلبهما، فلو بدأت الحركة عند التحميل لانتهت على
عناصر فارغة. الصنف .is-alive يضعه hero-life.js بعد الامتلاء.

=========================================================
*/


/* ---------------------------------------------------------
   1 — الدخول المتدرّج
   --------------------------------------------------------- */

@keyframes hero-rise{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}

/*
الإخفاء يسبق الحركة، والصنف hero-prep يضعه hero-life.js في
<head> — أي قبل أوّل رسم. ولو انتُظر .is-alive وحده لظهرت
الواجهة أوّلًا ثم اختفت لتعود: وميض، لا دخول.

والإخفاء بـopacity لا visibility ولا display: القارئ الآلي
يجب أن يقرأ النصّ، والبحث يجب أن يجده. العنصر باقٍ في
الشجرة طوال الوقت، شفافًا لا غائبًا.
*/
html.hero-prep .hero .hero-content > *,
html.hero-prep .hero .hero-card{
  opacity:0;
}

.hero.is-alive .hero-content > *,
.hero.is-alive .hero-card{
  animation:hero-rise var(--motion-slower) var(--motion-emphasis) forwards;
}

.hero.is-alive .hero-content > .eyebrow      { animation-delay:.05s; }
.hero.is-alive .hero-content > h1            { animation-delay:.14s; }
.hero.is-alive .hero-content > .hero-subtitle{ animation-delay:.24s; }
.hero.is-alive .hero-content > .hero-text    { animation-delay:.32s; }
.hero.is-alive .hero-content > .status-row   { animation-delay:.40s; }
.hero.is-alive .hero-content > .hero-actions { animation-delay:.48s; }
.hero.is-alive .hero-card                    { animation-delay:.18s; }


/* ---------------------------------------------------------
   2 — عمق خلف الاسم

   وهج برونزي واسع يتحرّك ببطء شديد. مداه صغير عمدًا:
   الحركة تُحَسّ ولا تُرى، وهذا هو المطلوب في خلفية.
   --------------------------------------------------------- */

/*
الوهج موجود أصلًا في base.css — كرة برونزية مطموسة في زاوية
الشبكة. لكنها ساكنة، فتُقرأ كجزء من الصورة الخلفية لا كضوء.
فتُحرَّك ببطء شديد بدل إضافة طبقة جديدة فوقها.

    ولا يُضاف الوهج على .hero بل داخل .hero-grid: الشبكة
    لها خلفية مصمتة و overflow:hidden، فأيّ ضوء خلفها
    يختفي تحتها.
*/

.hero-grid::before{
  animation:hero-drift 26s ease-in-out infinite alternate;
}

/* ضوء ثانٍ خلف الصورة، معاكس في طوره فلا يتنفّس الاثنان معًا */
.hero-grid::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto -12% -28% auto;

  width:380px;
  height:380px;

  border-radius:50%;

  background:rgba(var(--brand-bronze-rgb), .07);
  filter:blur(100px);
  pointer-events:none;

  animation:hero-drift 34s ease-in-out infinite alternate-reverse;
}

@keyframes hero-drift{
  from{ transform:translate3d(0,0,0)     scale(1);    opacity:.75; }
  to  { transform:translate3d(6%,-5%,0)  scale(1.14); opacity:1;   }
}


/* ---------------------------------------------------------
   3 — النقطة الحيّة

   نقطة الحالة كانت ساكنة، وهي الشيء الوحيد في الصفحة الذي
   يدّعي أنه «الآن». فتنبض نبضًا خفيفًا.
   --------------------------------------------------------- */

.status-row .dot{
  position:relative;
}

.status-row .dot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid rgba(var(--brand-green-rgb), .55);
  animation:hero-pulse 2.8s ease-out infinite;
}

@keyframes hero-pulse{
  0%  { transform:scale(.7); opacity:.9; }
  70% { transform:scale(1.7); opacity:0; }
  100%{ transform:scale(1.7); opacity:0; }
}


/* ---------------------------------------------------------
   4 — الصورة تذوب في الصفحة

   كان الإطار حدًّا ظاهرًا وزوايا مستديرة، فتبدو الصورة
   ملصقة. الآن: بلا حدّ، وحوافها تتلاشى في الخلفية، ووهج
   خلفها يفصلها عن السواد بلا خطّ.
   --------------------------------------------------------- */

.hero-card{
  /*
  القناع يُعرَّف هنا مرّة واحدة لأن طبقتين تحتاجانه: الصورة
  نفسها، والتدرّج الداكن الذي فوقها (::after في base.css).
  لو قُنِّعت الصورة وحدها لبقي التدرّج مستطيلًا بحدٍّ ظاهر
  فوق صورةٍ بلا حدّ — أسوأ من الإطار الأصلي.
  */
  /*
  التلاشي محصور في الحافّة الخارجية وحدها: تامّ حتى ٧٨٪ ثم
  ينحلّ. والسبب أن الصورة بورتريه — الكتفان عند الحافّة
  السفلى والرأس قرب العليا — فتلاشٍ أوسع يأكل الموضوع نفسه
  لا إطاره.
  */
  --hero-fade:radial-gradient(
    ellipse 96% 94% at 50% 44%,
    rgba(var(--tint-dark-rgb), 1) 78%,
    rgba(var(--tint-dark-rgb), 0) 100%
  );

  border-color:transparent;
  background:none;
  box-shadow:none;

  /* الوهج خلف البطاقة يخرج عن حدودها، فلا يُقَصّ */
  overflow:visible;
}

.hero-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:6% 4%;

  border-radius:28px;
  background:radial-gradient(
    ellipse at 50% 35%,
    rgba(var(--brand-bronze-rgb), .22),
    transparent 70%
  );
  filter:blur(28px);
}

.hero-card img,
.hero-card::after{
  /* الحواف تتلاشى بدل أن تنتهي بخطّ */
  -webkit-mask-image:var(--hero-fade);
  mask-image:var(--hero-fade);
}

.hero-card img{
  border-radius:26px;

  /*
  الوجه يقع في الثلث الأعلى من أي بورتريه. و center يقصّ
  من أعلى الرأس عند القصّ الرأسي، فيُرفع مركز الاقتصاص.
  */
  object-position:center 28%;
}

/*
بطاقة المنصب تبقى بحدّها: هي معلومة لا صورة، والحدّ يقول
إنها لوح مقروء فوق الصورة لا جزء منها.
*/
.hero-card .mini-card{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


/* ---------------------------------------------------------
   5 — من طلب سكونًا حصل عليه كاملًا

   سُلَّم --motion يصير .01ms تلقائيًا عند تفضيل تقليل
   الحركة، لكن التأخيرات ليست منه. فتُصفَّر هنا صراحةً،
   وإلا ظهرت العناصر متأخّرة بلا حركة — وهو أسوأ من الاثنين.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){

  html.hero-prep .hero .hero-content > *,
  html.hero-prep .hero .hero-card,
  .hero.is-alive .hero-content > *,
  .hero.is-alive .hero-card{
    opacity:1;
    animation:none;
    animation-delay:0s;
  }

  .hero-grid::before,
  .hero-grid::after,
  .status-row .dot::after{
    animation:none;
  }
}