/* ==========================================================================
   VERTEX — Motion
   البريلودر + ظهور العناصر مع السكرول + الرسم الإنشائي + القائمة.
   التوقيتات في tokens.css (قسم Motion).
   قاعدة المشروع: الأنيميشن يشتغل دايمًا — مفيش reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Preloader
   صور المشاريع تنزل واحدة ورا التانية جوه اللوجو ←
   آخر صورة تكبر لملء الشاشة ← الطبقة تختفي ونص الهيرو يطلع
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--white);
  transition: opacity var(--pl-fade) ease-in;
}
.no-js .preloader { display: none; }

.preloader__mark {
  position: absolute;
  inset-block-start: 50%;
  left: 50%;
  height: 40%;
  width: auto;
  transform: translate(-50%, -50%);
}
@media (min-width: 769px) {
  .preloader__mark { height: 70%; }
}

.preloader__slides {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: scale(1);
  transition: transform var(--pl-expand) var(--ease-inout);
}
html.preloader-on .preloader__slides { transform: scale(var(--pl-scale)); }

.preloader__slide { position: absolute; inset: 0; }
.preloader__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preloader__slide::before,
.preloader__slide::after { transition: opacity var(--pl-expand) ease-in; }
html.preloader-on .preloader__slide::before,
html.preloader-on .preloader__slide::after { opacity: 0; }

.preloader__slide.is-sliding {
  animation: pl-slide var(--pl-slide) var(--ease-inout) calc(var(--i) * var(--pl-step)) forwards;
  animation-play-state: paused;
}
html.preloader-playing .preloader__slide.is-sliding { animation-play-state: running; }

@keyframes pl-slide {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

html.js.preloader-on,
html.js.preloader-on body { overflow: hidden; }

html.preloader-gone .preloader { opacity: 0; pointer-events: none; }
html.preloader-done .preloader { display: none; }

/* --------------------------------------------------------------------------
   2. Hero entrance — العنوان سطر سطر من ورا قناع، والكروت تطلع بعده
   -------------------------------------------------------------------------- */
.js .hero__work {
  opacity: 0;
  transform: translateY(5rem);
  transition: opacity 1s var(--ease-out) 0.45s, transform 1.2s var(--ease-expo) 0.45s;
}
.js .hero.is-in .hero__work { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   3. Line-mask headings (.js-lines → JS بيقسم العنوان لسطور)
   -------------------------------------------------------------------------- */
.line {
  display: block;
  overflow: hidden;
  /* مساحة للنقط والهمزات فوق وتحت الحروف العربي عشان القناع ميقصهاش */
  padding-block: 0.14em 0.2em;
  margin-block: -0.14em -0.2em;
}
.line > span { display: inline-block; }

.js .js-lines .line > span {
  transform: translateY(115%);
  transition: transform 1.3s var(--ease-expo) calc(var(--li, 0) * 0.1s);
}
.js .js-lines.in-view .line > span,
.js .hero.is-in .js-lines .line > span { transform: none; }

/* --------------------------------------------------------------------------
   4. Scroll reveal (يظهر لما أعلاه يعدّي 75% من الشاشة، ويختفي لو رجعت لفوق)
   -------------------------------------------------------------------------- */
.js .reveal-up {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-expo);
}
.js .reveal-up.in-view { opacity: 1; transform: none; }

/* Image clip reveal */
.js .js-img {
  clip-path: inset(16% 8% 16% 8%);
  transition: clip-path 1.6s var(--ease-expo);
}
.js .js-img.in-view { clip-path: inset(0 0 0 0); }

/* Lazy images fade-in */
.js .media > img { opacity: 0; transition: opacity var(--dur-slow); }
.js .media > img.is-loaded { opacity: 1; }

/* --------------------------------------------------------------------------
   5. Parallax — JS بيحدد --pp من -1 لـ 1 حسب مكان العنصر في الشاشة
   -------------------------------------------------------------------------- */
[data-parallax] > img,
[data-parallax] > .hero__slide > img {
  transform: translate3d(0, calc(var(--pp, 0) * var(--pamt, -6%)), 0) scale(var(--pscale, 1.14));
  will-change: transform;
}
.hero__slides { --pamt: -14%; --pscale: 1.12; }
.statement__media, .feature__media { --pamt: -10%; --pscale: 1.2; }
.project-card__media { --pamt: -5%; --pscale: 1.12; }

/* Hero slides: zoom بطيء جوه الصورة النشطة */
.hero__slide > img { transition: opacity var(--dur-slow); }

/* --------------------------------------------------------------------------
   6. Intro words (الكلمات تنوّر مع السكرول)
   -------------------------------------------------------------------------- */
.js .js-words .word { opacity: 0.18; transition: opacity 0.4s ease; }
.js .js-words .word.is-on { opacity: 1; }

/* --------------------------------------------------------------------------
   7. Split heading — الخط يترسم من اليمين والكلمتين يتباعدوا
   -------------------------------------------------------------------------- */
.split-heading::before { transition: width var(--dur-slow) var(--ease-draw); }
.split-heading span:nth-child(1) {
  margin-inline-end: 1em;
  transition: margin var(--dur-slow) var(--ease-draw);
}
.split-heading span:nth-child(2) {
  margin-inline-end: 40vw;
  transition: margin 2s var(--ease-draw);
}
.split-heading.in-view::before { width: 100%; }
.split-heading.in-view span { margin-inline-end: 0; }
.no-js .split-heading::before { width: 100%; }
.no-js .split-heading span { margin-inline-end: 0; }

/* --------------------------------------------------------------------------
   8. Block heading — "لنبدأ مشروعك"
   -------------------------------------------------------------------------- */
.js .block-heading span {
  opacity: 0;
  transform: translateY(0.1em);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.js .block-heading span:nth-child(2) { transition-delay: 0.08s; }
.js .block-heading span:nth-child(3) { transition-delay: 0.16s; }
.js .block-heading.in-view span,
.js .mobile-menu.is-open .block-heading span { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   9. Structural frame drawing — يترسم دور دور من تحت لفوق
   -------------------------------------------------------------------------- */
.js .frame-drawing path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition:
    stroke-dashoffset 1s var(--ease-draw) calc(var(--d) * 0.08s),
    fill-opacity 0.5s ease-out calc(var(--d) * 0.08s);
}
.js .frame-drawing path.f { fill-opacity: 0; }
.js .frame-drawing .ground path {
  stroke-dasharray: 0.012 0.009;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-out calc(var(--d) * 0.08s);
}
.js .in-view .frame-drawing path { stroke-dashoffset: 0; }
.js .in-view .frame-drawing path.f { fill-opacity: 1; }
.js .in-view .frame-drawing .ground path { opacity: 1; }

/* --------------------------------------------------------------------------
   10. Buttons, marquee
   -------------------------------------------------------------------------- */
@keyframes nudge {
  0%, 50%, 100% { transform: translateX(0); }
  25% { transform: translateX(1px); }
  75% { transform: translateX(-2px); }
}
.btn-arrow:hover > i svg,
.btn-arrow:focus-visible > i svg { animation: nudge 0.5s ease-in-out 2; }

/* RTL marquee: المحتوى يتحرك ناحية اليمين */
@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.marquee ul { animation: marquee-rtl 20s linear infinite; }

/* --------------------------------------------------------------------------
   11. Mobile menu — ستارة من فوق + الروابط تطلع من ورا قناع واحد ورا التاني
   -------------------------------------------------------------------------- */
.mobile-menu {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-inout);
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); }

.mm-link__text > span {
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-expo);
}
.mm-link__num,
.mm-link__icon,
.mm-link__plus,
.mm-links > li,
.mobile-menu__bottom > * {
  transition-property: opacity, transform, border-color;
}
.mm-link__num,
.mm-link__icon,
.mm-link__plus { opacity: 0; }
.mm-links > li { border-block-end-color: transparent; transition: border-color 0.6s ease-out; }
.mobile-menu__bottom > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s ease-out, transform 0.9s var(--ease-expo);
}

.mobile-menu.is-open .mm-link__text > span { transform: none; }
.mobile-menu.is-open .mm-link__num,
.mobile-menu.is-open .mm-link__plus { opacity: 1; transition: opacity 0.6s ease-out; }
.mobile-menu.is-open .mm-link__icon { opacity: 0.45; transition: opacity 0.6s ease-out, transform var(--dur-base) var(--ease-out); }
.mobile-menu.is-open .mm-links > li { border-block-end-color: rgba(255, 255, 255, 0.12); }
.mobile-menu.is-open .mobile-menu__bottom > * { opacity: 1; transform: none; }

/* stagger: كل رابط يتأخر شوية عن اللي قبله (بعد ما الستارة تنزل) */
.mobile-menu.is-open .mm-links > li:nth-child(1) * { transition-delay: 0.3s; }
.mobile-menu.is-open .mm-links > li:nth-child(2) > .mm-link * { transition-delay: 0.36s; }
.mobile-menu.is-open .mm-links > li:nth-child(3) * { transition-delay: 0.42s; }
.mobile-menu.is-open .mm-links > li:nth-child(4) * { transition-delay: 0.48s; }
.mobile-menu.is-open .mm-links > li:nth-child(5) * { transition-delay: 0.54s; }
.mobile-menu.is-open .mm-links > li:nth-child(1) { transition-delay: 0.3s; }
.mobile-menu.is-open .mm-links > li:nth-child(2) { transition-delay: 0.36s; }
.mobile-menu.is-open .mm-links > li:nth-child(3) { transition-delay: 0.42s; }
.mobile-menu.is-open .mm-links > li:nth-child(4) { transition-delay: 0.48s; }
.mobile-menu.is-open .mm-links > li:nth-child(5) { transition-delay: 0.54s; }
.mobile-menu.is-open .mobile-menu__bottom > :nth-child(1) { transition-delay: 0.6s; }
.mobile-menu.is-open .mobile-menu__bottom > :nth-child(2) { transition-delay: 0.68s; }
.mobile-menu.is-open .mobile-menu__bottom > :nth-child(3) { transition-delay: 0.76s; }
.mobile-menu.is-open .mm-cta span:nth-child(1) { transition-delay: 0.8s; }
.mobile-menu.is-open .mm-cta span:nth-child(2) { transition-delay: 0.86s; }
.mobile-menu.is-open .mm-cta span:nth-child(3) { transition-delay: 0.92s; }

/* زرار القائمة: الخطوط تتحرك لما تضغط */
.burger i { transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); }
.pill-btn:hover .burger i:last-child { width: 100%; }
#open-menu[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
#open-menu[aria-expanded="true"] .burger i:nth-child(2) { transform: scaleX(0); }
#open-menu[aria-expanded="true"] .burger i:nth-child(3) { width: 100%; transform: translateY(-4px) rotate(-45deg); }