/* ══════════════════════════════════════════════════════════════
   PALM PROPERTIES DEVELOPMENT — طبقة الحركة
   ملف مستقل فوق style.css — لو شلته، الموقع يفضل شغّال عادي.

   الفلسفة: حركة بتحصل مرة واحدة وقت الظهور، وبعدين الصفحة تسكت.
   مفيش أنيميشن مستمر ولا حاجة بتلحق الماوس — ده اللي كان بيتقّل
   الجهاز لأن المتصفّح بيفضل يعيد الرسم طول الوقت.

   المسموح: opacity · transform · clip-path (كلها على كارت الشاشة).
   الممنوع: filter/blur المستمر · mix-blend-mode · أنيميشن infinite
            على عناصر كبيرة · أي هاندلر على mousemove.

   الترتيب:
   0 · متغيّرات        3 · ظهور الصور        6 · لمسات الهوفر
   1 · الظهور          4 · دخول الصفحة       7 · الفورم
   2 · كتابة العناوين  5 · الهيدر والقوايم   8 · زر «لأعلى»
                                             9 · التركيز + تقليل الحركة
   ══════════════════════════════════════════════════════════════ */


/* ══════════ 0 · متغيّرات ══════════ */
:root{
  --e-out:  cubic-bezier(.16,1,.3,1);     /* expo-out: انطلاقة واضحة وذيل طويل بيستقرّ ببطء */
  --e-wipe: cubic-bezier(.76,0,.24,1);    /* للستارة: بتبدأ وتقف بحسم */
  --a-dur:  1.5s;                         /* مدة الظهور الافتراضية */
  --dl:     0ms;                          /* تأخير العنصر — الجافاسكريبت بيكتبه */
  --sgn:    1;                            /* اتجاه القراءة: 1 لاتيني · -1 عربي */
  --wo:     right;                        /* نهاية سطر القراءة — الستارة بتنسحب ناحيتها */
}
html[dir="rtl"]{ --sgn:-1; --wo:left }


/* ══════════════════════════════════════════════════════════════
   1 · الظهور مع التمرير — data-anim
   العنصر بيتحرّك مرة واحدة أول ما يبان وخلاص.
   الأنواع: up · down · start · end · zoom · rise
   إضافات: data-delay="360" · data-dur="800" · data-stagger="280" (على الأب)
   ══════════════════════════════════════════════════════════════ */
html.anim [data-anim]{
  opacity:0;
  transition:
    opacity   var(--a-dur) var(--e-out) var(--dl),
    transform var(--a-dur) var(--e-out) var(--dl);
}
html.anim [data-anim].in{ opacity:1; transform:none }

html.anim [data-anim="up"]   { transform:translate3d(0,34px,0) }
html.anim [data-anim="down"] { transform:translate3d(0,-24px,0) }
html.anim [data-anim="start"]{ transform:translate3d(calc(var(--sgn) * 40px),0,0) }
html.anim [data-anim="end"]  { transform:translate3d(calc(var(--sgn) * -40px),0,0) }
html.anim [data-anim="zoom"] { transform:scale(.955) }
html.anim [data-anim="rise"] { transform:translate3d(0,44px,0) }
/* الكروت بتدخل بعمق بسيط كمان — مع فرق التأخير بينهم بتبان زي ورق بيترصّ */
html.anim [data-anim="card"] { transform:translate3d(0,42px,0) scale(.972) }

/* توافق مع الكلاس القديم .reveal لو رجع في أي صفحة جديدة */
html.anim .reveal:not([data-anim]){
  opacity:0; transform:translate3d(0,34px,0);
  transition:opacity var(--a-dur) var(--e-out) var(--dl),
             transform var(--a-dur) var(--e-out) var(--dl);
}
html.anim .reveal:not([data-anim]).in{ opacity:1; transform:none }

/* قاعدة .in فوق بتكتب transform:none بترتيب أقوى من :hover اللي في
   style.css — فرفعة الكارت عند الهوفر كانت بتتلغي. بنرجّعها هنا. */
html.anim .srv[data-anim].in:hover { transform:translate3d(0,-8px,0) }
html.anim .fact[data-anim].in:hover{ transform:translate3d(0,-5px,0) }
@media (hover:none){
  html.anim .srv[data-anim].in:hover,
  html.anim .fact[data-anim].in:hover{ transform:none }
}


/* ══════════════════════════════════════════════════════════════
   2 · العناوين بتتكتب — data-type
   كل كلمة بتتكشف من ناحية بداية القراءة، وعلامة القلم بتنطّ وراها.

   ليه كشف بالـclip-path مش حرف حرف؟ العربي خط متّصل — لو قسّمناه
   حروف كل حرف هيترسم منفصل والكلمة تتفكّك. الكشف الأفقي بيدّي نفس
   إحساس الكتابة بالظبط، وبيتنفّذ على كارت الشاشة من غير أي reflow.
   ══════════════════════════════════════════════════════════════ */
.sp-w{ display:inline-block }

/* .tp بيتحطّ من الجافاسكريبت بعد ما يقسّم — من غيره الكلام يفضل ظاهر */
html.anim [data-type].tp .sp-w{
  /* السالب فوق وتحت بيمنع قص الهمزة وذيول الحروف */
  clip-path:inset(-.38em 0 -.32em 100%);
  transition:clip-path var(--tw, .58s) cubic-bezier(.4,0,.15,1);
}
html[dir="ltr"].anim [data-type].tp .sp-w{ clip-path:inset(-.38em 100% -.32em 0) }
html.anim [data-type].tp .sp-w.on{ clip-path:inset(-.38em 0 -.32em 0) }

/* الكلمة اللي جوّه <em> بتاخد شريحتها من نفس الجراديانت.
   لازم الجراديانت ينزل على الكلمة نفسها مش على الـ<em>، لأن
   clip-path على الابن مابيقصّش خلفية الأب المقصوصة على النص. */
[data-type].tp em{ background:none }
[data-type].tp .sp-g{
  /* البادينج بيوسّع صندوق الرسم، والمارجن السالب بيلغي أثره على السطر */
  padding-block:.32em .24em; margin-block:-.32em -.24em;
  background-image:var(--tp-bg, linear-gradient(100deg,var(--navy),var(--blue) 55%,var(--green)));
  background-size:var(--bgw, 100%) 100%;
  background-position:var(--bgx, 0) 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* علامة القلم — بتتشال من الصفحة أول ما الكتابة تخلص */
.tp-cur{
  display:inline-block; width:0; height:1em; position:relative;
  vertical-align:-.14em; pointer-events:none;
}
.tp-cur::before{
  content:''; position:absolute; inset-block:0; inset-inline-start:.05em;
  width:2px; border-radius:2px; background:var(--gold-s);
  animation:ppBlink 1.05s step-end infinite;
}
.tp-cur.off::before{ animation:none; opacity:0; transition:opacity .45s ease }
@keyframes ppBlink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }


/* ══════════════════════════════════════════════════════════════
   3 · ظهور الصور — ستارة بتنسحب والصورة بتستقرّ من تكبير خفيف
   الستارة موجودة في الماركب من أول رسمة (كلاس .rv-shot في الـHTML)
   عشان مايحصلش وميض للصورة قبل ما الجافاسكريبت يشتغل.
   ══════════════════════════════════════════════════════════════ */
.rv-shot{ position:relative; overflow:hidden }
.rv-shot::before{
  content:''; position:absolute; inset:0; z-index:6; pointer-events:none;
  /* لون الهوية + ظلّ متدرّج ناحية الحافة اللي بتسحب — بيدّي الستارة
     عمق بدل ما تبان مستطيل مصمت. بتفضل معتمة ١٠٠٪ عشان الصورة
     ما تبصّصش من ورا الستارة قبل الكشف. */
  background-color:var(--sc, var(--navy-d));
  background-image:linear-gradient(to var(--wo), rgba(4,14,30,.46), rgba(4,14,30,0) 64%);
  transform-origin:var(--wo);
  transition:transform 1.7s var(--e-wipe);
}
.rv-shot.in::before{ transform:scaleX(0) }

/* الصورة بتستقرّ من ١٫٠٨ لـ ١ — بطيئة شوية عن الستارة عشان تكمّل بعدها */
.rv-shot img, .rv-shot video{
  transform:scale(1.1);
  transition:transform 2.7s var(--e-out);
}
.rv-shot.in img, .rv-shot.in video{ transform:none }
/* زووم الهوفر بيفضل شغّال بعد ما الكشف يخلص — وبمدّة الهوفر القصيرة
   مش مدّة الاستقرار الطويلة */
.srv figure.rv-shot.in img{ transition:transform .55s var(--e-out) }
.srv:hover figure.rv-shot.in img{ transform:scale(1.06) }


/* ══════════════════════════════════════════════════════════════
   4 · دخول الصفحة — بيحصل مرة واحدة أول ما تفتح
   ══════════════════════════════════════════════════════════════ */
html.anim .hero h1,
html.anim .hero .lede,
html.anim .hero-acts,
html.anim .hero-media,
html.anim .pbanner .crumb,
html.anim .pbanner h1,
html.anim .pbanner > .wrap > p{
  opacity:0; transform:translate3d(0,30px,0);
  transition:opacity 1.5s var(--e-out), transform 1.5s var(--e-out);
}
html.anim body.lit .hero h1    { opacity:1; transform:none; transition-delay:.08s }
html.anim body.lit .hero .lede { opacity:1; transform:none; transition-delay:.38s }
html.anim body.lit .hero-acts  { opacity:1; transform:none; transition-delay:.66s }
html.anim body.lit .hero-media { opacity:1; transform:none; transition-delay:.22s }

html.anim body.lit .pbanner .crumb     { opacity:1; transform:none; transition-delay:.08s }
html.anim body.lit .pbanner h1         { opacity:1; transform:none; transition-delay:.32s }
html.anim body.lit .pbanner > .wrap > p{ opacity:1; transform:none; transition-delay:.58s }

/* العنوان اللي بيتكتب مابيتحرّكش ككتلة — الكلمات هي اللي بتشتغل */
html.anim .hero h1[data-type],
html.anim .pbanner h1[data-type]{ opacity:1; transform:none }

/* شريط المسارات تحت الهيرو */
.hero-strip a{ position:relative }
.hero-strip a::after{
  content:''; position:absolute; inset-block-end:-1px; inset-inline:0; height:2px;
  background:var(--blue);
  transform:scaleX(0); transform-origin:var(--o, left);
  transition:transform .4s var(--e-out);
}
html[dir="rtl"] .hero-strip a::after{ --o:right }
.hero-strip a:hover::after{ transform:scaleX(1) }

/* إشارة «انزل» */
.scroll-cue{
  display:grid; place-items:center; gap:9px;
  width:max-content; margin-inline:auto;
  margin-block-start:clamp(26px,3.4vw,40px);
  font-size:11.5px; font-weight:700; letter-spacing:.14em;
  color:var(--mut); text-transform:uppercase;
  transition:color var(--fast);
}
.scroll-cue i{
  display:block; width:24px; height:38px;
  border:1.5px solid var(--line); border-radius:13px;
  position:relative; background:rgba(255,255,255,.5);
  transition:border-color var(--fast);
}
.scroll-cue i::after{
  content:''; position:absolute; left:50%; margin-left:-2px;
  inset-block-start:8px; width:4px; height:7px;
  border-radius:3px; background:var(--blue);
  transition:transform .4s var(--e-out);
}
.scroll-cue:hover{ color:var(--blue) }
.scroll-cue:hover i{ border-color:var(--blue) }
.scroll-cue:hover i::after{ transform:translateY(13px) }
@media (max-width:900px){ .scroll-cue{ display:none } }


/* ══════════════════════════════════════════════════════════════
   5 · الهيدر والقوايم
   ══════════════════════════════════════════════════════════════ */
/* الهيدر بيختفي وانت نازل وبيرجع أول ما تطلع — مساحة قراءة أكبر.
   الشرط :not(.menu) مهم: لمّا الدراور يفتح لازم الـtransform يتشال،
   لأن أي transform على الأب بيكسر position:fixed بتاع الدراور. */
.nav{ transition:transform .55s var(--e-out) }
body:not(.menu) .nav.hide{ transform:translateY(-104%) }

/* المنسدلة — بنودها بتنزل ورا بعض (ديسكتوب بس، لأن على الموبايل
   المنسدلة بتبان مفتوحة جوه الدراور فلو خفّيناها هتختفي خالص) */
@media (min-width:981px){
  .drop a{
    opacity:0; transform:translateY(-5px);
    transition:opacity .3s var(--e-out), transform .3s var(--e-out),
               background var(--fast), color var(--fast);
  }
  .nav-item.has-drop:hover .drop a,
  .nav-item.has-drop:focus-within .drop a{ opacity:1; transform:none }
  .drop a:nth-child(1){ transition-delay:.05s }
  .drop a:nth-child(2){ transition-delay:.11s }
  .drop a:nth-child(3){ transition-delay:.17s }
  .drop a:nth-child(4){ transition-delay:.23s }
}

/* الدراور — البنود بتدخل ورا بعض */
@media (max-width:980px){
  .nav-links .nav-item, .nav-links .drawer-extra{
    opacity:0; transform:translateX(calc(var(--sgn) * -18px));
    transition:opacity .38s var(--e-out), transform .42s var(--e-out);
  }
  body.menu .nav-links .nav-item,
  body.menu .nav-links .drawer-extra{ opacity:1; transform:none }
  body.menu .nav-links .nav-item:nth-child(1){ transition-delay:.10s }
  body.menu .nav-links .nav-item:nth-child(2){ transition-delay:.17s }
  body.menu .nav-links .nav-item:nth-child(3){ transition-delay:.24s }
  body.menu .nav-links .nav-item:nth-child(4){ transition-delay:.31s }
  body.menu .nav-links .drawer-extra         { transition-delay:.38s }
}

/* تغيير اللغة — تلاشي خفيف بدل ما النص ينطّ فجأة */
body.lang-x .nav, body.lang-x section, body.lang-x .foot{ animation:ppFade .62s var(--e-out) }
@keyframes ppFade{ from{ opacity:.45 } to{ opacity:1 } }


/* ══════════════════════════════════════════════════════════════
   6 · لمسات الهوفر — كلها transform أو لون، مفيش رسم تقيل
   ══════════════════════════════════════════════════════════════ */
/* الشريط اللوني فوق كارت الخدمة بيتمدّ */
.srv::before{
  transform:scaleX(.32); transform-origin:var(--o,left);
  transition:transform .5s var(--e-out);
}
html[dir="rtl"] .srv::before{ --o:right }
.srv:hover::before{ transform:scaleX(1) }

/* «اعرف المزيد» — خط بيتمدّ تحته */
.srv .more{ position:relative; padding-block-end:3px }
.srv .more::before{
  content:''; position:absolute; inset-block-end:0; inset-inline:0; height:1.5px;
  background:currentColor;
  transform:scaleX(0); transform-origin:var(--o,left);
  transition:transform .4s var(--e-out);
}
html[dir="rtl"] .srv .more::before{ --o:right }
.srv:hover .more::before{ transform:scaleX(1) }

/* رقم الكارت بيترفع شوية */
.srv .num{ transition:transform .4s var(--e-out) }
.srv:hover .num{ transform:translateY(-3px) }

/* أيقونات السوشيال ومسار التنقّل */
.tb-social a:hover{ transform:translateY(-2px) }
.ct-social a{ transition:transform .3s var(--e-out), background var(--fast),
                         color var(--fast), border-color var(--fast) }
.crumb a{ display:inline-block; transition:color var(--fast), transform .28s var(--e-out) }
.crumb a:hover{ transform:translateX(calc(var(--sgn) * 3px)) }

/* على اللمس مفيش hover — الشريط اللوني يفضل كامل */
@media (hover:none){ .srv::before{ transform:scaleX(1) } }


/* ══════════════════════════════════════════════════════════════
   7 · الفورم
   ══════════════════════════════════════════════════════════════ */
/* نقطة صغيرة جنب اسم الحقل بتخضرّ لما الحقل يتملى */
.fld > span{ display:flex; align-items:center; gap:7px }
.fld > span::before{
  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--line); transition:background .25s ease;
}
.fld.on  > span::before{ background:var(--green) }
.fld.err > span::before{ background:var(--alert) }

/* رجّة خفيفة عند الخطأ */
.fld.err{ animation:ppShake .38s ease }
@keyframes ppShake{
  20%{ transform:translateX(-5px) } 40%{ transform:translateX(5px) }
  60%{ transform:translateX(-3px) } 80%{ transform:translateX(3px) }
}

/* عدّاد حروف الرسالة — بيبان وقت الكتابة بس */
.fld .cnt{
  position:absolute; inset-block-end:11px; inset-inline-end:14px;
  font-family:var(--f-en); font-size:11.5px; font-weight:700;
  color:var(--mut); opacity:0; pointer-events:none;
  transition:opacity .25s ease, color .25s ease;
}
.fld:focus-within .cnt{ opacity:.85 }
.fld .cnt.hot{ color:var(--gold-d) }

/* زر الإرسال — بيدوّر وهو بيبعت وبعدين علامة صح.
   الزر لازم يبقى position:relative — من غيره السبينر وعلامة الصح
   بيتوسّطوا على الشاشة كلها مش جوّه الزر (style.css مابيحطّهاش). */
.btn{ position:relative }
.btn.sending, .btn.done{ pointer-events:none }
.btn.sending > span, .btn.done > span,
.btn.sending::after, .btn.done::after{ opacity:0 }
.btn.done{ background:var(--green); color:#fff }
.btn .spin{
  position:absolute; top:50%; left:50%;      /* فيزيائي — التوسيط واحد في الاتجاهين */
  width:20px; height:20px; margin:-10px 0 0 -10px;
  border:2px solid rgba(255,255,255,.35); border-block-start-color:#fff;
  border-radius:50%; animation:ppSpin .65s linear infinite;
}
@keyframes ppSpin{ to{ transform:rotate(360deg) } }
.btn .tick{
  position:absolute; top:50%; left:50%;
  width:20px; height:11px; margin:-8px 0 0 -10px;
  border-inline-start:2.5px solid #fff; border-block-end:2.5px solid #fff;
  transform:rotate(-45deg);
}


/* ══════════════════════════════════════════════════════════════
   8 · زر «لأعلى» + احترام «تقليل الحركة»
   ══════════════════════════════════════════════════════════════ */
.to-top svg{
  position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px);
  transform:rotate(-90deg); pointer-events:none;
}
.to-top svg circle{ fill:none; stroke-width:3.5; stroke-linecap:round }
.to-top .rng-bg{ stroke:rgba(255,255,255,.16) }
.to-top .rng-fg{ stroke:var(--gold) }

/* ══════════════════════════════════════════════════════════════
   9 · حلقة التركيز على الأسطح الغامقة
   style.css فيه :focus-visible أزرق — ممتاز على الأبيض، بس على
   الكحلي (الفوتر · الشريط السفلي · الأعمدة الغامقة · الأزرار العايمة)
   التباين بيوقع. الذهبي بيقراه العين على الاتنين.
   ══════════════════════════════════════════════════════════════ */
.foot :focus-visible,
.infobar :focus-visible,
.pillar :focus-visible,
.wa:focus-visible,
.to-top:focus-visible,
.nav.stuck .mainbar :focus-visible{
  outline-color:var(--gold);
  outline-offset:4px;
}


@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition-duration:.001s !important }
  html.anim [data-anim], html.anim .reveal:not([data-anim]),
  html.anim .hero h1, html.anim .hero .lede, html.anim .hero-acts, html.anim .hero-media,
  html.anim .pbanner .crumb, html.anim .pbanner h1, html.anim .pbanner > .wrap > p,
  .drop a, .nav-links .nav-item, .nav-links .drawer-extra{
    opacity:1 !important; transform:none !important;
  }
  /* الكلام يبان كامل والستارة تتشال على طول */
  html.anim [data-type].tp .sp-w{ clip-path:none !important }
  .rv-shot::before{ transform:scaleX(0) !important }
  .rv-shot img, .rv-shot video{ transform:none !important }
  .tp-cur, .scroll-cue{ display:none !important }
}