/* ==========================================================================
   صفحة الهبوط — templates/ui/pages/landing.html (المشاهد: components/scroll_scenes.css)
   خلفية داكنة بتوهّج برتقالي (هوية) وأزرق + حبيبات خفيفة · كروت زجاجية عليها نجمة الشعار
   ========================================================================== */
.lp-body {
  --lp-bg: #0c0e12;
  --lp-text: #f4f6fa;
  --lp-muted: #a9b1bd;
  --lp-card-w: min(29vw, 420px);
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--font-ar);
}
.lp { position: relative; isolation: isolate; }

/* الخلفيات الثلاث — ألوانها مأخوذة من صور التصميم، وتتبدّل حسب خطوة الـ Hero:
   0 = داكن + توهّج دافئ في الزاوية · 1 = داكن + توهّج أزرق جانبي · 2 = بني دافئ + رمادي + أزرق */
.lp-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }
/* كل توهّج طبقة لحالها (::before دافئ · ::after أزرق) أكبر من الشاشة — قصة الخلفية مع الضغطات:
   قبل الضغط: البرتقالي لحاله يسبح · ضغطة 1: يدخل الأزرق بنفس الحركة · ضغطة 2: الاثنين يتحركون، ويكملون طول السكرول.
   حركتين فوق بعض:
     - سباحة مستمرة (animation على transform) — كل لون بإيقاع مختلف (22s / 27s) عشان ما يتحركون مع بعض
     - انزياح مع السكرول (خاصية translate منفصلة) — البرتقالي يطلع والأزرق ينزل كل ما نزلت (--lp-scroll من landing.html)
   transform/translate بس = على كرت الشاشة بدون إعادة رسم التدرّج */
.lp-bg::before, .lp-bg::after { content: ""; position: absolute; inset: -20%; will-change: transform, translate; }
.lp-bg::before { animation: lp-bg-drift-warm 22s ease-in-out infinite alternate; translate: 0 calc(var(--lp-scroll, 0) * -14vh); }
.lp-bg::after  { animation: lp-bg-drift-blue 27s ease-in-out infinite alternate; translate: 0 calc(var(--lp-scroll, 0) * 12vh); }
@keyframes lp-bg-drift-warm {
  0%   { transform: translate(0, 0) scale(1); }
  35%  { transform: translate(-9%, 6%) scale(1.14); }
  70%  { transform: translate(5%, 10%) scale(.94); }
  100% { transform: translate(-4%, -7%) scale(1.08); }
}
@keyframes lp-bg-drift-blue {
  0%   { transform: translate(0, 0) scale(1.05); }
  30%  { transform: translate(8%, -7%) scale(.95); }
  65%  { transform: translate(-6%, 8%) scale(1.15); }
  100% { transform: translate(5%, 4%) scale(1); }
}

.lp-bg--0 { opacity: 1; background: linear-gradient(135deg, #090a07 0%, #14130f 55%, #2a2219 100%); }
.lp-bg--0::before { background: radial-gradient(70vw 75vh at 90% 86%, rgb(122 84 40 / .95), rgb(82 60 33 / .55) 38%, transparent 72%); }
.lp-bg--1 { background: linear-gradient(120deg, #0d0b0b 0%, #16171b 50%, #1c2633 100%); }
.lp-bg--1::after { background: radial-gradient(56vw 90vh at 96% 54%, rgb(37 63 92 / .95), rgb(30 53 77 / .6) 40%, transparent 75%); }
.lp-bg--2 { background: linear-gradient(90deg, #4a3a29 0%, #3a3c3e 50%, #253b53 100%); }
.lp-bg--2::before { background: radial-gradient(52vw 72vh at 8% 20%, rgb(109 71 30 / .95), rgb(79 62 45 / .55) 40%, transparent 75%); }
.lp-bg--2::after  { background: radial-gradient(52vw 86vh at 96% 50%, rgb(37 64 91 / .95), rgb(37 59 83 / .55) 40%, transparent 75%); }
.lp:has(.lp-hero[data-step="1"]) .lp-bg--1,
.lp:has(.lp-hero[data-step="2"]) .lp-bg--2 { opacity: 1; }
.lp:has(.lp-hero[data-step="1"]) .lp-bg--0,
.lp:has(.lp-hero[data-step="2"]) .lp-bg--0 { opacity: 0; }

/* حبيبات (grain) خفيفة فوق الخلفية */
.lp::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>");
}

/* ---------- شريط التنقل ---------- */
.lp-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) clamp(1rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, rgb(12 14 18 / .55), rgb(12 14 18 / 0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lp-nav__brand { justify-self: start; display: inline-flex; }
.lp-nav__links { display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); }
.lp-nav__links a { color: rgb(255 255 255 / .82); font-size: var(--text-sm); text-decoration: none; transition: color .2s; }
.lp-nav__links a:hover { color: #fff; }
.lp-nav__links a.is-active { color: #fff; font-weight: var(--weight-semibold); box-shadow: inset 0 -2px 0 var(--color-secondary, #F9A038); padding-block-end: 4px; }
.lp-nav > .lp-btn { justify-self: end; }

/* ---------- الأزرار ---------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: .7rem 1.4rem;
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn--light { background: #fff; color: #11151b; box-shadow: 0 8px 24px -10px rgb(255 255 255 / .45); }
.lp-btn--light:hover { color: #11151b; box-shadow: 0 10px 28px -8px rgb(249 160 56 / .55); }
.lp-btn--sm { padding: .5rem 1.1rem; }
.lp-btn__icon { display: inline-grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; margin-inline-end: -.6rem; border-radius: 50%; background: #11151b; color: #fff; }
[dir="ltr"] .lp-btn__icon svg { transform: scaleX(-1); }

/* ---------- Section 01 · Hero (بالضغط) ---------- */
.lp-hero { display: flex; flex-direction: column; align-items: center; }
.lp-nav[data-step-in] { transform: translateY(-8px); }
.lp-nav[data-step-in].is-in { transform: none; }
.lp-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-inline-size: 46rem;
  margin-block-start: clamp(6.5rem, 17vh, 10rem);
  padding-inline: var(--space-4);
  text-align: center;
}
.lp-hero__title {
  margin: 0;
  font-size: clamp(2.1rem, 5.2vw, 4.25rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, #ffffff 15%, #9ca6b3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-hero__text { margin: 0; max-inline-size: 36rem; color: var(--lp-muted); font-size: clamp(.95rem, 1.4vw, 1.05rem); line-height: 1.9; }

/* الكروت: كلها متمركزة في نفس النقطة والحركة (data-track) تفرّقها */
.lp-cards { position: absolute; inset: 0; pointer-events: none; }
.lp-card {
  position: absolute;
  inset-block-start: 57vh;
  inset-block-start: 57svh;
  inset-inline-start: 50%;
  margin-inline-start: calc(var(--lp-card-w) / -2);
  inline-size: var(--lp-card-w);
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  border-radius: clamp(1.6rem, 2.6vw, 2.6rem);
  border: 1px solid rgb(255 255 255 / .28);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .75), inset 0 1px 0 rgb(255 255 255 / .45);
  overflow: hidden;
  transform-origin: 50% 100%;
}
/* لمعة زجاجية فوق التدرّج */
.lp-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgb(255 255 255 / .38) 0%, rgb(255 255 255 / 0) 42%); }
.lp-card__star { position: relative; z-index: 1; inline-size: 18%; fill: var(--star); opacity: .85; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .18)); }
/* ---------- الكرت الرئيسي = كرت الهوية (من التصميم): أبيض + توهّج أزرق فاتح وخوخي يتحرك + الشعار ---------- */
.lp-card--main { z-index: 3; }
.lp-card--brand { background: #fbfcfe; border-color: rgb(255 255 255 / .7); }
.lp-card--brand::after { background: linear-gradient(155deg, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 40%); }
/* التوهّج: طبقة أكبر من الكرت فيها البقعتين (#D6E3F1 فوق · #FEF0E0 تحت)، تدور وتتحرك ببطء — "الظل يتحرك" */
.lp-card__glow {
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(38% 34% at 30% 28%, rgb(184 208 236 / .95), rgb(214 227 241 / .7) 45%, transparent 75%),
    radial-gradient(36% 32% at 72% 74%, rgb(253 222 186 / .95), rgb(254 240 224 / .75) 45%, transparent 75%);
  filter: blur(18px);
  animation: lp-glow-move 14s ease-in-out infinite;
}
@keyframes lp-glow-move {
  0%   { transform: rotate(0deg) translate(0, 0) scale(1); }
  25%  { transform: rotate(40deg) translate(3%, -2%) scale(1.06); }
  50%  { transform: rotate(95deg) translate(-2%, 3%) scale(.97); }
  75%  { transform: rotate(150deg) translate(-3%, -2%) scale(1.05); }
  100% { transform: rotate(180deg) translate(0, 0) scale(1); }
}
/* الشعار في نص الجزء الظاهر (الكرت مقصوص من تحت) */
.lp-card__logo { position: relative; z-index: 1; inline-size: 34%; block-size: auto; margin-block-end: 30%; filter: drop-shadow(0 10px 18px rgb(42 108 181 / .18)); }
/* النجمة تلمع لمعة خفيفة كل 4.5 ثانية */
.lp-card__logo .ui-logo-mark__star { animation: lp-star-glint 4.5s ease-in-out 1.2s infinite; }
@keyframes lp-star-glint {
  0%, 78%, 100% { transform: none; }
  86% { transform: scale(1.25) rotate(45deg); }
  92% { transform: scale(.92) rotate(90deg); }
}
.lp-card--side { z-index: 1; }
.lp-card--side .lp-card__star { inline-size: 15%; }
.lp-card--blue { --star: #24448a; background: linear-gradient(150deg, #b9c6f3 0%, #8fa4e6 55%, #6f86c9 100%); }
/* نجمة الكروت الجانبية: تحت النص وجهة الكرت الرئيسي (مثل الفيديو) — اتجاهات فعلية مو منطقية */
.lp-card--blue .lp-card__star { transform: translate(150%, 25%); }
.lp-card--coral { --star: #a8423d; background: linear-gradient(150deg, #f0b9b0 0%, #e59a7e 55%, #f2a65a 100%); }
.lp-card--coral .lp-card__star { transform: translate(-150%, 25%); }

/* ---------- Section 02 · جملة تنكشف ---------- */
.lp-story__stage { display: grid; place-items: center; padding-inline: clamp(1rem, 8vw, 8rem); }
.lp-story__text { margin: 0; max-inline-size: 60rem; font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.6; font-weight: 700; text-align: center; }
.lp-word { display: inline-block; opacity: .12; }

/* ---------- Section 03 · قسم عادي ---------- */
.lp-next { min-block-size: 80vh; display: grid; place-content: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); text-align: center; color: var(--lp-muted); }
.lp-next h2 { margin: 0; color: var(--lp-text); font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* ---------- الجوال ---------- */
@media (max-width: 767.98px) {
  .lp-body { --lp-card-w: 58vw; }
  .lp-nav { grid-template-columns: auto 1fr auto; }
  .lp-nav__links { display: none; }
  .lp-card { inset-block-start: 60vh; inset-block-start: 60svh; }
  .lp-body { --lp-spread: 36vw; --lp-drop: 5vh; }
}

/* ---------- ضغطة 2: الجانبيين يطلعون من خلف الرئيسي وينفردون — حركة وحدة متصلة ----------
   منحنى يبدأ هادي (= "يطلّون") ثم يسرع ويهدى لين يستقر — بدل حركتين متتاليتين (كان فيه قفزة سرعة بينهم).
   الكرت الثاني يتأخر 70ms عشان يبان طبيعي · will-change: الحركة على كرت الشاشة (GPU) بدون تقطيع */
.lp-card--blue { --dir: -1; }
.lp-card--coral { --dir: 1; }
.lp-card--side { will-change: transform, opacity; backface-visibility: hidden; }
.lp-card--side[data-step-in] { transition: none; }
.lp-card--side.is-in { animation: lp-fan 1.3s cubic-bezier(.55, .05, .15, 1) both; }
.lp-card--coral.is-in { animation-delay: .07s; }
@keyframes lp-fan {
  0%   { opacity: 0; transform: translate(0, 1.5vh) rotate(0deg) scale(.95); }
  22%  { opacity: 1; }
  100% { opacity: 1; transform: translate(calc(var(--dir) * var(--lp-spread, 22vw)), var(--lp-drop, 7vh)) rotate(calc(var(--dir) * 9deg)) scale(1); }
}

/* تلميح "اضغط للبدء" — أسفل الشاشة، ينبض بهدوء */
.lp-hint {
  position: absolute;
  inset-block-end: clamp(1.5rem, 6vh, 3rem);
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  color: rgb(255 255 255 / .55);
  font-size: var(--text-xs);
  letter-spacing: .02em;
  pointer-events: none;
}
.lp-hint__dot { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--color-secondary, #F9A038); box-shadow: 0 0 0 0 rgb(249 160 56 / .6); animation: lp-pulse 1.8s ease-out infinite; }
@keyframes lp-pulse { 0% { box-shadow: 0 0 0 0 rgb(249 160 56 / .55); } 100% { box-shadow: 0 0 0 12px rgb(249 160 56 / 0); } }
/* بعد ضغطة 1: "اضغط للمتابعة" فوق الكرت الرئيسي (على قاعدة شفافة عشان ينقرأ) */
.lp-hint { z-index: 5; }
.lp-hint__more { display: none; }
.lp-hero[data-step="1"] .lp-hint__start { display: none; }
.lp-hero[data-step="1"] .lp-hint__more { display: inline; }
.lp-hero[data-step="1"] .lp-hint { inset-inline: auto; inset-inline-start: 50%; translate: 50% 0; padding: .45rem .9rem; border-radius: var(--radius-full); background: rgb(12 14 18 / .55); color: rgb(255 255 255 / .85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
[dir="ltr"] .lp-hero[data-step="1"] .lp-hint { translate: -50% 0; }

@media (prefers-reduced-motion: reduce) {
  .lp-card__glow, .lp-card__logo .ui-logo-mark__star, .lp-card--side.is-in, .lp-hint__dot, .lp-bg::before, .lp-bg::after { animation: none; }
  .lp-bg::before, .lp-bg::after { translate: none; }
  .lp-card--side.is-in { transform: translate(calc(var(--dir) * var(--lp-spread, 22vw)), var(--lp-drop, 7vh)) rotate(calc(var(--dir) * 9deg)); }
}

/* ---------- Section 02 · "التجمّع" (فكرة D360 — المسارات في landing.html) ---------- */
.lp-gather { --gather-card: clamp(11rem, 19.5vw, 17.5rem); }
.lp-gather__stage { display: grid; place-items: center; }
.lp-gather__head { position: relative; z-index: 0; text-align: center; padding-inline: var(--space-4); transform-origin: 50% 50%; }
.lp-gather__title-big {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 8.5rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #ffd29a 0%, var(--color-secondary, #F9A038) 55%, #d97f1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-gather__sub { margin: var(--space-3) 0 0; color: var(--lp-muted); font-size: clamp(1rem, 2vw, 1.6rem); }

/* العناصر: كلها في نص الشاشة، والمسار يبدأها برا (الزوايا/فوق) */
.lp-gather__card {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  margin-block-start: calc(var(--gather-card) / -2);
  margin-inline-start: calc(var(--gather-card) / -2);
  inline-size: var(--gather-card);
  block-size: var(--gather-card);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: clamp(1rem, 1.6vw, 1.5rem);
  border-radius: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid rgb(255 255 255 / .35);
  /* ظل خفيف بطبقات (حافة ناعمة) ويخف كل ما قرب الكرت من النص (--t من المحرك = تقدّم الكرت 0→1)
     عشان ظلال الخمسة ما تتراكم وهم مجتمعين — الكرت اللي فوق (brand) يحتفظ بظل خفيف تحت */
  --shadow: calc(1 - var(--t, 0) * .85);
  box-shadow:
    0 1px 2px rgb(0 0 0 / calc(.10 * var(--shadow))),
    0 6px 12px -2px rgb(0 0 0 / calc(.10 * var(--shadow))),
    0 16px 28px -8px rgb(0 0 0 / calc(.14 * var(--shadow))),
    0 32px 56px -18px rgb(0 0 0 / calc(.18 * var(--shadow))),
    inset 0 1px 0 rgb(255 255 255 / .5);
  color: #11151b;
  overflow: hidden;
  backface-visibility: hidden;
}
.lp-gather__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0) 45%); pointer-events: none; }
.lp-gather__icon { position: absolute; inset-block-start: clamp(1rem, 1.6vw, 1.5rem); inset-inline-start: clamp(1rem, 1.6vw, 1.5rem); display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 1rem; background: rgb(255 255 255 / .6); color: var(--tone-ink); }
.lp-gather__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.lp-gather__title { position: relative; z-index: 1; font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 800; color: var(--tone-ink); }
.lp-gather__text { position: relative; z-index: 1; font-size: var(--text-sm); color: rgb(17 21 27 / .7); }
.lp-gather__card--orange { --tone-ink: #8a3f00; background: linear-gradient(150deg, #ffd9a8 0%, #f9a038 70%, #ef8a2a 100%); }
.lp-gather__card--blue   { --tone-ink: #173f73; background: linear-gradient(150deg, #d6e6fb 0%, #8fb6ea 65%, #5f8fd3 100%); }
.lp-gather__card--sand   { --tone-ink: #6b4a22; background: linear-gradient(150deg, #f4e7d4 0%, #e0c49c 70%, #cfa874 100%); }
.lp-gather__card--mint   { --tone-ink: #135b4a; background: linear-gradient(150deg, #dcf5ec 0%, #9fdcc6 70%, #6cc3a6 100%); }
.lp-gather__card--lilac  { --tone-ink: #3c2f7a; background: linear-gradient(150deg, #e6e1fb 0%, #b9adf0 70%, #9486e2 100%); }
@media (max-width: 767.98px) { .lp-gather { --gather-card: 46vw; } }

/* كرت الهوية في قسم التجمّع ("تطبيق أبياتي" — آخر كرت فوق الكومة): نفس كرت الهيرو (التوهّج + الشعار) */
.lp-gather__card--brand { --tone-ink: #1f4f8a; background: #fbfcfe; border-color: rgb(255 255 255 / .7); --shadow: calc(1 - var(--t, 0) * .45); }
.lp-gather__card--brand::after { background: linear-gradient(155deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 40%); }
.lp-gather__logo { position: absolute; inset-block-start: 16%; inset-inline-start: 50%; translate: 50% 0; inline-size: 38%; margin: 0; }
[dir="ltr"] .lp-gather__logo { translate: -50% 0; }