/* لقطات التطبيق داخل إطار آيفون مرسوم بالكود — لا صورة للإطار.
 * «التمييز هو الفخامة» (أمر الحلقة §4): الإمالة واللمعة والتوهج لهذه البطاقات
 * وحدها، والبطاقات النصية تبقى مسطّحة. كل القيم من tokens.css، والخصائص المخصصة
 * الجديدة تُعلن هنا بقيمها الافتراضية (بوابة الفحص ترفض متغيراً بلا تعريف). */

.shot {
  --shot-w: min(320px, 74vw);
  --shot-r: calc(var(--shot-w) * 0.155);
  --mx: 50%;
  --my: 38%;
  position: relative;
  width: var(--shot-w);
  margin-inline: auto;
  /* ‎--mx/--my مسجَّلتان (أسفل) فتنتقلان انتقالاً حقيقياً؛ الوراثة هي ما يوصلهما
   * إلى ‎.shot-frame::after حيث تُرسم اللمعة. */
  transition: transform var(--motion-base) ease, --mx var(--motion-base) linear, --my var(--motion-base) linear;
  will-change: transform;
}

.shot--hero { --shot-w: min(350px, 78vw); }

/* توهج بذرة خلف الجهاز — الضوء قبل الشكل */
.shot-glow {
  position: absolute;
  inset: -14% -18%;
  background: radial-gradient(58% 52% at 50% 40%, var(--nooda-primary-glow), transparent 72%);
  background: radial-gradient(58% 52% at 50% 40% in oklab, var(--nooda-primary-glow), transparent 72%);
  filter: blur(28px);
  pointer-events: none;
}

/* جسم الآيفون: حافة معدنية بتدرج العلامة، وبدن داكن، وظل مرفوع */
.shot-frame {
  position: relative;
  padding: 9px;
  border-radius: var(--shot-r);
  background:
    linear-gradient(var(--nooda-background), var(--nooda-background)) padding-box,
    linear-gradient(155deg, var(--nooda-primary), var(--nooda-surface-variant) 38%, var(--nooda-surface-variant) 62%, var(--nooda-secondary)) border-box;
  background:
    linear-gradient(in oklab, var(--nooda-background), var(--nooda-background)) padding-box,
    linear-gradient(155deg in oklab, var(--nooda-primary), var(--nooda-surface-variant) 38%, var(--nooda-surface-variant) 62%, var(--nooda-secondary)) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}

/* الشاشة: شريط أمان علوي بنسبة الجهاز الحقيقية (59pt/393pt ≈ 0.15) تسكنه
 * الجزيرة — القصّ أزال شريط حالة المحاكي، وهذا يعيد المنطقة بلا ساعة ولا بطارية */
.shot-screen {
  position: relative;
  border-radius: calc(var(--shot-r) - 9px);
  overflow: hidden;
  background: var(--nooda-background);
  padding-block-start: calc(var(--shot-w) * 0.13);
}
.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}
/* تدرج يذوّب حدّ الشريط في أول المحتوى فلا يظهر خطّ */
.shot-screen::before {
  content: "";
  position: absolute;
  top: calc(var(--shot-w) * 0.13 - 1px);
  inset-inline: 0;
  height: calc(var(--shot-w) * 0.10);
  background: linear-gradient(var(--nooda-background), transparent);
  z-index: 1;
  pointer-events: none;
}

/* الجزيرة العلوية داخل شريط الأمان */
.shot-island {
  position: absolute;
  top: calc(var(--shot-w) * 0.032);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: calc(var(--shot-w) * 0.30);
  height: calc(var(--shot-w) * 0.072);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--nooda-background) 60%, black);
  z-index: 2;
}
[dir="rtl"] .shot-island { transform: translateX(50%); }

/* موضع اللمعة مسجَّل نسبةً مئوية: يصير رقماً يقبل الاستيفاء، فتنزلق اللمعة خلف
 * المؤشر بدل أن تقفز قفزة لكل إطار — والقفزة كانت مرئية عند حركة اليد السريعة. */
@property --mx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --my {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 38%;
}

/* لمعة تتبع المؤشر — يضبط nooda.js ‎--mx/--my مع الإمالة */
.shot-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(200px circle at var(--mx) var(--my), var(--sheen), var(--sheen-end) 68%);
  background: radial-gradient(200px circle at var(--mx) var(--my) in oklab, var(--sheen), var(--sheen-end) 68%);
  opacity: 0;
  transition: opacity var(--motion-base) ease;
  pointer-events: none;
  z-index: 3;
}
.shot:hover .shot-frame::after { opacity: 1; }

/* ===== البطل: النص أولاً في DOM (يحمي LCP الجوال)، وعمودان على الشاشة الواسعة ===== */
.hero-grid { display: grid; gap: var(--space-3xl); align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) auto; gap: var(--space-4xl); }
  .hero-grid .shot { margin-inline: 0; }
}

/* ===== خطوات الممشى: نص وجهاز جنباً إلى جنب، يتناوبان الجهة ===== */
.walk-step {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
  margin-block-start: var(--space-4xl);
}
@media (min-width: 900px) {
  .walk-step { grid-template-columns: 1fr auto; gap: var(--space-4xl); }
  .walk-step:nth-of-type(even) .walk-copy { order: 1; }
}
.walk-copy { display: grid; gap: var(--space-2xl); }
.walk-point { display: flex; gap: var(--space-md); align-items: flex-start; }
.walk-point .seed-mark { flex-shrink: 0; margin-block-start: 6px; }
.walk-point h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--type-h3-weight);
  margin-block-end: var(--space-xs);
}
.walk-point p { color: var(--nooda-text-secondary); max-width: 46ch; margin: 0; }

/* على الشاشات الضيقة: ميل ساكن متناوب خفيف بدل شريط أفقي — إيقاع لا ضجيج */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .walk-step:nth-of-type(odd) .shot { transform: rotate(1.2deg); }
  .walk-step:nth-of-type(even) .shot { transform: rotate(-1.2deg); }
}

/* لمحات الممشى الأربع — بطاقات صغيرة تحت الخطوات */
.walk-details {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--space-4xl);
}
@media (min-width: 700px) { .walk-details { grid-template-columns: 1fr 1fr; } }
.walk-details .card h4 { margin-block-end: var(--space-xs); font-size: var(--type-h4-size); }
.walk-details .card p { color: var(--nooda-text-secondary); font-size: var(--type-small-size); line-height: var(--type-small-lh); margin: 0; }

/* صف لقطات حر (صفحة التحميل) */
.shot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl);
  margin-block-start: var(--space-2xl);
}
.shot-row .shot { --shot-w: min(240px, 62vw); margin-inline: 0; }

/* ===== حركة: طفو خامل للبطل، وانجراف الممشى بالتمرير حيث يُدعم ===== */
@media (prefers-reduced-motion: no-preference) {
  .shot--float { animation: shot-float 9s ease-in-out infinite; }
  @keyframes shot-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
  }

  /* انجراف اللقطة أبطأ من التمرير — «محسوس لا ملحوظ». يعمل حيث تُدعم
     scroll-driven animations؛ وإلا فالكشف العادي يكفي. */
  @supports (animation-timeline: view()) {
    .walk-step .shot {
      animation: walk-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes walk-drift {
      from { translate: 0 22px; }
      to { translate: 0 -22px; }
    }
  }
}