/* phone-motion.css — نسخة الموبايل «تطبيق» (جولة 2). كل القواعد جوّه @media (max-width:767px)
   الحركة والتفاصيل اللي بتخلّي الموبايل حي زي الديسكتوب — من غير blur ومن غير ما نتقل على السكرول:
   - html.pm-on = phone-motion.js شغّال (ومش «حركة أقل»). الحالة المستخبية مربوطة بيه، فمن غير JS كل حاجة باينة.
   - عناوين السكاشن كلمة كلمة (.pm-w) · الدروس بتدخل صف صف · الأرقام بتعدّ (.pm-n) · الكارت اللي في النص
     في الشرايط أكبر والجيران أهدى · رسمة الحملة بتترسم أول ما الكارت يبقى في النص · توهجات ثابتة بالتدرّج.
   - كل الحركة transform/opacity، مرة واحدة (مفيش لانهائي)؛ الاستثناء: خط التمييز تحت «مليون جنيه» ورسمة
     الحملة (رسم صغير مرة واحدة).
   - #offer و #guarantee والشريطين (فوق/تحت) مش بتوعي. */

@media (max-width: 767px) {

  /* ================= توهجات ثابتة (بدل الأورب والـblur) ================= */
  html.phone-app #reviews {
    background: radial-gradient(85% 26% at 88% 6%, rgba(196, 248, 42, .075), transparent 72%);
  }
  html.phone-app #learn {
    background: radial-gradient(80% 22% at 10% 10%, rgba(196, 248, 42, .07), transparent 72%);
  }
  html.phone-app #cases {
    background: radial-gradient(90% 30% at 50% 62%, rgba(196, 248, 42, .065), transparent 72%);
  }
  html.phone-app #why {
    background: radial-gradient(85% 24% at 90% 8%, rgba(196, 248, 42, .07), transparent 72%),
                radial-gradient(70% 20% at 0% 88%, rgba(123, 224, 164, .05), transparent 72%);
  }
  html.phone-app #faq {
    background: radial-gradient(80% 26% at 12% 10%, rgba(196, 248, 42, .065), transparent 72%);
  }
  html.phone-app[data-theme="light"] #reviews { background: radial-gradient(85% 26% at 88% 6%, rgba(159, 185, 138, .22), transparent 72%); }
  html.phone-app[data-theme="light"] #learn { background: radial-gradient(80% 22% at 10% 10%, rgba(159, 185, 138, .2), transparent 72%); }
  html.phone-app[data-theme="light"] #cases { background: radial-gradient(90% 30% at 50% 62%, rgba(159, 185, 138, .2), transparent 72%); }
  html.phone-app[data-theme="light"] #why {
    background: radial-gradient(85% 24% at 90% 8%, rgba(159, 185, 138, .2), transparent 72%),
                radial-gradient(70% 20% at 0% 88%, rgba(143, 183, 166, .16), transparent 72%);
  }
  html.phone-app[data-theme="light"] #faq { background: radial-gradient(80% 26% at 12% 10%, rgba(159, 185, 138, .2), transparent 72%); }

  /* توهج كارت يحيي: كان blur(40px) — بقى تدرّج دايري بنفس الإحساس */
  html.phone-app .yh__card::after {
    filter: none;
    inset: auto 4% -46px; height: 96px;
    background: radial-gradient(closest-side, var(--accent-glow), transparent);
    opacity: .6;
  }

  /* كروت «الفرق»: على الديسكتوب زجاج — هنا سطح ولمعة خفيفة فوق بدل الـblur */
  html.phone-app #why .dcard {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 42%),
      var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 36px -26px rgba(0, 0, 0, .9);
  }
  html.phone-app[data-theme="light"] #why .dcard { background: #FFFFFF; box-shadow: var(--shadow-sm); }

  /* ================= الهيرو: بعد ما الصفحة تحمّل (بعد الـLCP) ================= */
  html.phone-app .stage::before,
  html.phone-app .stage::after {
    content: ""; position: absolute; pointer-events: none; opacity: 0;
    transition: opacity 1.2s var(--ease);
  }
  /* توهج ليموني تحت الكارت */
  html.phone-app .stage::before {
    z-index: 0; inset: auto 8% -26px; height: 70px;
    background: radial-gradient(closest-side, rgba(196, 248, 42, .32), transparent);
  }
  /* حلقة ليمونية رفيعة حوالين الكارت */
  html.phone-app .stage::after {
    z-index: 1; inset: 0; border-radius: 24px;
    box-shadow: 0 0 0 1px rgba(196, 248, 42, .34), 0 0 30px -6px rgba(196, 248, 42, .38);
  }
  html.phone-app[data-theme="light"] .stage::before { background: radial-gradient(closest-side, rgba(127, 168, 26, .3), transparent); }
  html.phone-app[data-theme="light"] .stage::after { box-shadow: 0 0 0 1px rgba(71, 105, 10, .28), 0 0 26px -8px rgba(71, 105, 10, .3); }
  html.pm-hero .stage::before,
  html.pm-hero .stage::after { opacity: 1; }
  /* لمعة واحدة على الغلاف (opacity بس — الحركة بـtransform كانت بتتحسب layout shift على زرار التشغيل في كروم) */
  html.phone-app .reel::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .13) 46%, rgba(196, 248, 42, .07) 54%, transparent 68%);
    opacity: 0;
  }
  html.pm-hero .reel::after { animation: pmGlint 1.8s ease-in-out .2s 1 both; }
  html.pm-hero .reel.is-on::after { animation: none; opacity: 0; }

  /* ================= العناوين كلمة كلمة ================= */
  html.pm-on .pm-split[data-reveal] { opacity: 1 !important; transform: none !important; }
  html.pm-on .pm-w {
    display: inline-block;
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  html.pm-on .pm-split:not(.pm-in) .pm-w { opacity: 0; transform: translateY(.55em) rotate(var(--pm-r, 2deg)); }
  html.pm-on[dir="rtl"] .pm-split { --pm-r: -2deg; }
  /* «مليون جنيه مبيعات»: التمييز الليموني بيترسم ورا الكلام */
  html.pm-on .pm-split mark {
    background: linear-gradient(var(--accent), var(--accent)) no-repeat right center / 0% 100%;
    color: var(--text);
    transition: background-size .7s cubic-bezier(.65, 0, .35, 1) .45s, color .3s ease .7s;
  }
  html.pm-on[dir="ltr"] .pm-split mark { background-position: left center; }
  html.pm-on .pm-split.pm-in mark { background-size: 100% 100%; color: var(--accent-ink); }

  /* البادج: النقطة بتنبض مرة لما السكشن يبان */
  html.pm-on .pm-eb.pm-in::before { animation: pmDot .9s cubic-bezier(.22, 1, .36, 1) .15s 1 both; }

  /* ================= الدروس صف صف ================= */
  html.pm-on #learn .crs__list li {
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
  }
  html.pm-on #learn .crs__list li:not(.pm-in) { opacity: 0; transform: translateY(12px); }

  /* ================= الأرقام بتعدّ ================= */
  .pm-n { display: inline-block; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

  /* ================= الشرايط: الكارت اللي في النص هو البطل ================= */
  html.pm-on #learn .crs__tab {
    transition: background .3s var(--ease), color .3s var(--ease), scale .5s cubic-bezier(.22, 1, .36, 1);
  }
  html.pm-on #learn .crs__tab:not(.is-on) { scale: .93; }
  html.pm-on #learn .crs__tab.is-on { box-shadow: 0 18px 40px -22px var(--accent-glow); }

  /* !important: GSAP بيكتب scale:none inline على الكروت ([data-stagger]) */
  html.pm-on #cases .ep,
  html.pm-on #why .dcard {
    transition: transform .4s var(--ease), border-color .35s var(--ease), box-shadow .4s var(--ease), scale .5s cubic-bezier(.22, 1, .36, 1);
    scale: .95 !important;
  }
  html.pm-on #cases .ep::after,
  html.pm-on #why .dcard::after {
    content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
    background: var(--bg); opacity: .42;
    transition: opacity .45s ease;
  }
  html.pm-on #cases .eps__grid[data-prl-active="1"] > .ep:nth-child(1),
  html.pm-on #cases .eps__grid[data-prl-active="2"] > .ep:nth-child(2),
  html.pm-on #cases .eps__grid[data-prl-active="3"] > .ep:nth-child(3),
  html.pm-on #cases .eps__grid[data-prl-active="4"] > .ep:nth-child(4),
  html.pm-on #cases .eps__grid[data-prl-active="5"] > .ep:nth-child(5),
  html.pm-on #why .diff[data-prl-active="1"] > .dcard:nth-child(1),
  html.pm-on #why .diff[data-prl-active="2"] > .dcard:nth-child(2),
  html.pm-on #why .diff[data-prl-active="3"] > .dcard:nth-child(3),
  html.pm-on #why .diff[data-prl-active="4"] > .dcard:nth-child(4) {
    scale: 1 !important; border-color: var(--tint-36);
    box-shadow: 0 22px 44px -28px var(--accent-glow);
  }
  html.pm-on #cases .eps__grid[data-prl-active="1"] > .ep:nth-child(1)::after,
  html.pm-on #cases .eps__grid[data-prl-active="2"] > .ep:nth-child(2)::after,
  html.pm-on #cases .eps__grid[data-prl-active="3"] > .ep:nth-child(3)::after,
  html.pm-on #cases .eps__grid[data-prl-active="4"] > .ep:nth-child(4)::after,
  html.pm-on #cases .eps__grid[data-prl-active="5"] > .ep:nth-child(5)::after,
  html.pm-on #why .diff[data-prl-active="1"] > .dcard:nth-child(1)::after,
  html.pm-on #why .diff[data-prl-active="2"] > .dcard:nth-child(2)::after,
  html.pm-on #why .diff[data-prl-active="3"] > .dcard:nth-child(3)::after,
  html.pm-on #why .diff[data-prl-active="4"] > .dcard:nth-child(4)::after { opacity: 0; }

  /* رسمة الحملة بتترسم أول ما الكارت يبقى في النص (مرة واحدة) */
  /* --pm-len = طول الخط (من getTotalLength في الجافاسكريبت) */
  html.pm-on #cases .ep__art [style*="--pm-len"] {
    stroke-dasharray: var(--pm-len); stroke-dashoffset: var(--pm-len);
    transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1);
  }
  html.pm-on #cases .ep__art .f { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .55s cubic-bezier(.34, 1.56, .64, 1) .75s; }
  html.pm-on #cases .ep.pm-drawn .ep__art [style*="--pm-len"] { stroke-dashoffset: 0; }
  html.pm-on #cases .ep.pm-drawn .ep__art .f { scale: 1; }
}

@keyframes pmGlint {
  0%, 100% { opacity: 0; }
  45%      { opacity: 1; }
}
@keyframes pmDot {
  0%   { transform: scale(1); }
  40%  { transform: scale(2.1); }
  100% { transform: scale(1); }
}

/* حركة أقل: مفيش أي حركة من الملف ده (والجافاسكريبت مش بيحط pm-on أصلًا) */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.phone-app .reel::after { display: none; }
  html.phone-app .stage::before, html.phone-app .stage::after { transition: none; }
}