/* ═══════════════════════════════════════════════════════════════════════════
   sketch — Motion
   حركة مدفوعة بالتمرير عبر animation-timeline — تعمل على مسار المُركِّب
   (compositor)، لا على الخيط الرئيسي. صفر مستمعي scroll، صفر jank.

   يتدهور بلطف: المتصفحات القديمة تحصل على IntersectionObserver من app.js.
   ═════════════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()){

  /* نوقف احتياطي الـ JS — CSS يتكفّل */
  html.has-scroll-timeline .reveal{ opacity:1; transform:none; transition:none; }

  /* ── ظهور الأقسام: يترافق مع دخول العنصر للإطار ──────────────────────── */
  html.has-scroll-timeline .reveal{
    animation:reveal-up linear both;
    animation-timeline:view();
    animation-range:entry 5% cover 26%;
  }
  @keyframes reveal-up{
    from{ opacity:0; transform:translateY(30px); }
    to  { opacity:1; transform:none; }
  }

  /* ── البطاقات: ظهور متدرّج داخل الشبكة ───────────────────────────────── */
  html.has-scroll-timeline .services-list > *,
  html.has-scroll-timeline .pf-index > *,
  html.has-scroll-timeline .store-grid > *,
  html.has-scroll-timeline .blog-grid > *,
  html.has-scroll-timeline .intro-pillars > *{
    animation:card-in linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 22%;
  }
  @keyframes card-in{
    from{ opacity:0; transform:translateY(26px) scale(.985); }
    to  { opacity:1; transform:none; }
  }

  /* ── شريط تقدّم القراءة بالترويسة — خط يترسم مع التمرير ──────────────── */
  .read-progress{
    position:fixed; top:0; inset-inline:0; height:2px; z-index:calc(var(--z-header) + 1);
    background:var(--violet); transform-origin:right center;
    animation:progress linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

  /* ── الهيرو: تلاشٍ وانزلاق طفيف أثناء الخروج (parallax حقيقي) ────────── */
  .hero-inner{
    animation:hero-lift linear both;
    animation-timeline:view(block);
    animation-range:exit 0% exit 92%;
  }
  @keyframes hero-lift{ to{ transform:translateY(-46px); opacity:.12; } }

  .hero-sheet{
    animation:sheet-drift linear both;
    animation-timeline:view(block);
    animation-range:exit 0% exit 100%;
  }
  @keyframes sheet-drift{ to{ transform:translateY(-26px) rotate(-1.5deg); } }

  /* ── قسم الفكرة: النص يكبر قليلًا وهو يعبر الشاشة ────────────────────── */
  .concept-text{
    animation:concept-scale linear both;
    animation-timeline:view(block);
    animation-range:entry 20% exit 40%;
  }
  @keyframes concept-scale{
    from{ transform:scale(.97); opacity:.55; }
    40%, 60%{ transform:scale(1); opacity:1; }
    to  { transform:scale(1); opacity:1; }
  }

  /* ── البورتفوليو: البطاقة الكبيرة تتحرك أبطأ من جاراتها ──────────────── */

  /* ── عدّاد الأقسام: الرقم يتقدّم مع التمرير ──────────────────────────── */
  .eyebrow::before{
    animation:rule-draw linear both;
    animation-timeline:view();
    animation-range:entry 10% entry 90%;
  }
  @keyframes rule-draw{ from{ width:0; } to{ width:20px; } }
}

/* ═══ بدون دعم: app.js يضيف .is-in ويتولّى المهمة ═══ */

@media (prefers-reduced-motion: reduce){
  html.has-scroll-timeline .reveal,
  html.has-scroll-timeline .services-list > *,
  html.has-scroll-timeline .pf-index > *,
  html.has-scroll-timeline .store-grid > *,
  html.has-scroll-timeline .blog-grid > *,
  html.has-scroll-timeline .intro-pillars > *,
  .concept-text, .eyebrow::before{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .read-progress{ display:none; }
}