/* =========================================================
   مَطرقة — صفحة الهبوط
   كل التخطيط بخصائص منطقية. الألوان من التوكنات فقط.
   ========================================================= */

:root{
  /* الألوان الأساسية — مسحوبة من بكسل الشعار المعتمد */
  --coal:  #291D14;   /* فحمي — اللون القائد: النص والعلامة */
  --raw:   #E8D1B2;   /* خام  — الخلفية الافتراضية */
  --ember: #BA5017;   /* جمرة — إشارة فقط، ≤ 5% من المساحة */

  /* المحايدة */
  --smoke: #6B5844;   /* نص ثانوي */
  --ash:   #B9A98F;   /* حدود وفواصل */
  --paper: #F5EDE0;   /* خلفية المستندات */

  /* الخطوط */
  --font-display: 'Kufam', 'Noto Kufi Arabic', system-ui, sans-serif;
  --font-body:    'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}

/* ---------- توكنات تخطيط (مشتقة، لا ألوان جديدة) ---------- */
:root{
  /* Plex Mono بلا حروف عربية — العربي داخل نص Mono يسقط إلى Tajawal لا إلى خط النظام */
  --font-mono-ar: 'IBM Plex Mono', 'Tajawal', monospace;

  --header-h: 96px;
  --header-h-scrolled: 80px;
  --logo-w: 140px;
  --logo-w-scrolled: 120px;
  /* H = ارتفاع رأس المطرقة ≈ 0.404 × عرض العلامة */
  --logo-clear: calc(var(--logo-w) * 0.404);

  --gutter: 16px;
  --radius: 10px;
  --section-pad: clamp(64px, 10vw, 112px);
  --shadow: 0 6px 18px rgba(41, 29, 20, 0.10); /* فحمي بشفافية ≤ 12٪ */
}

/* ---------- أساسيات ---------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--raw);
  color: var(--coal);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(15px, 2.6vw, 17px);
  line-height: 1.75;
  letter-spacing: 0;
  overflow-x: clip;
}

img{ display: block; max-inline-size: 100%; block-size: auto; }

h1, h2, h3{
  font-family: var(--font-display);
  color: inherit;
  margin-block: 0;
  letter-spacing: 0;
}
h1{ font-weight: 800; font-size: clamp(40px, 9vw, 76px); line-height: 1.25; }
h2{ font-weight: 700; font-size: clamp(28px, 6vw, 42px); line-height: 1.3; }
h3{ font-weight: 600; font-size: clamp(19px, 4vw, 24px); line-height: 1.45; }

p{ margin-block: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
figure{ margin: 0; }

a{ color: inherit; }

em, i, cite{ font-style: normal; }

:focus-visible{
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.sprite{ position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

.icon{
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  fill: currentColor;
}

.mono-ar{ font-family: var(--font-mono-ar); font-weight: 500; }

.container{
  inline-size: 100%;
  max-inline-size: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow{ max-inline-size: 820px; }

.skip-link{
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-start: -100px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--coal);
  font-weight: 700;
  border-radius: var(--radius);
}
.skip-link:focus{ inset-block-start: 12px; }

/* ---------- الأزرار ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-lg{ min-block-size: 50px; padding-inline: 22px; }

/* زر واتساب — المكان الوحيد للجمرة كخلفية. النص ورقي لتباين 4.9:1 */
.btn-wa{
  background: var(--ember);
  border-color: var(--ember);
  color: var(--paper);
}
.btn-wa:hover{ background: var(--coal); border-color: var(--raw); }

.btn-outline{
  background: transparent;
  border-color: var(--raw);
  color: var(--raw);
}
.btn-outline:hover{ background: var(--raw); color: var(--coal); }

.btn-order{
  background: var(--coal);
  border-color: var(--coal);
  color: var(--raw);
  font-size: 14px;
  padding-inline: 16px;
}
.btn-order .icon{ inline-size: 16px; block-size: 16px; }
.btn-order:hover{ background: transparent; color: var(--coal); }

/* =========================================================
   ١) الهيدر
   ========================================================= */
.site-header{
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--coal);
  color: var(--raw);
  border-block-end: 1px solid transparent;
}
.site-header.is-scrolled{
  border-block-end-color: var(--smoke);
  box-shadow: var(--shadow);
}

.header-inner{
  display: flex;
  align-items: center;
  block-size: var(--header-h);
}
.site-header.is-scrolled .header-inner{ block-size: var(--header-h-scrolled); }

.brand{
  display: block;
  flex: none;
  margin-inline-end: var(--logo-clear);   /* المساحة الحرة H قبل أي نص */
  border-radius: 4px;
}
.brand img{ inline-size: var(--logo-w); }
.site-header.is-scrolled .brand img{ inline-size: var(--logo-w-scrolled); }

.site-nav{ margin-inline-start: auto; display: none; }
.site-nav ul{ display: flex; gap: 4px; }
.site-nav a{
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 10px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  color: var(--raw);
  border-block-end: 1px solid transparent;
}
.site-nav a:hover{ border-block-end-color: var(--ash); }

.header-wa{ margin-inline-start: auto; }
.site-nav + .header-wa{ margin-inline-start: 16px; }
.header-wa-label{ display: none; }

/* الجوال: أيقونة فقط، بلا تعبئة جمرة — الجمرة في الأيقونة (ميزانية ٥٪) */
.header-wa{
  inline-size: 44px;
  padding-inline: 0;
  background: transparent;
  border-color: var(--smoke);
  color: var(--ember);
}
.header-wa .icon{ inline-size: 24px; block-size: 24px; }
.header-wa:hover{ border-color: var(--raw); background: transparent; }

/* =========================================================
   ٢) الهيرو
   ========================================================= */
.hero{
  position: relative;
  min-block-size: 88vh;
  background: var(--coal);
  color: var(--raw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 40px 56px;
}

.hero-inner{
  display: grid;
  gap: 40px;
  align-items: center;
}

.hero-copy h1{ margin-block-end: 20px; }

.hero-lead{
  max-inline-size: 34ch;
  color: var(--raw);
  font-size: clamp(16px, 2.6vw, 19px);
  margin-block-end: 24px;
}

.trust{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--ash);
  font-size: 14px;
  line-height: 1.6;
  margin-block-end: 32px;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-media{ max-inline-size: 560px; }
@media (min-width: 1024px){ .hero-media{ max-inline-size: none; } }

.hero-media img{
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.crack{
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  inline-size: 100%;
  block-size: 24px;
}
.crack polyline{
  fill: none;
  stroke: var(--ember);
  stroke-width: 2;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

/* =========================================================
   أقسام عامة
   ========================================================= */
.section{ padding-block: var(--section-pad); }
.section-raw{ background: var(--raw); color: var(--coal); }
.section-coal{ background: var(--coal); color: var(--raw); }

.section h2{ margin-block-end: 16px; }
.section-lead{ color: var(--smoke); max-inline-size: 52ch; }

section[id]{ scroll-margin-block-start: var(--header-h-scrolled); }
#prices{ scroll-margin-block-start: calc(var(--header-h-scrolled) + 24px); }

/* =========================================================
   ٣) الفرق
   ========================================================= */
.card-grid{
  display: grid;
  gap: 16px;
  margin-block-start: 32px;
}

.card{
  background: var(--paper);
  border: 1px solid var(--ash);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.card h3{ margin-block-end: 10px; }
.card p{ color: var(--smoke); }

.card-index{
  display: block;
  margin-block-end: 16px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.22em;
  color: var(--smoke);
}

/* =========================================================
   ٤) المنتجات
   ========================================================= */
.section-products{ padding-block-start: 0; }

.product-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  margin-block-start: 32px;
}

.product{
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--ash);
  border-radius: var(--radius);
  overflow: hidden;
}

.product-media{
  aspect-ratio: 4 / 3;
  background: var(--ash);
}
.product-media img,
.product > img{
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.product-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}
.product h3{ font-weight: 500; margin-block-end: 6px; }
.product-spec{ color: var(--smoke); margin-block-end: 20px; }

.product-foot{
  margin-block-start: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--ash);
}

.price{
  color: var(--ember);
  font-size: 14px;
  line-height: 1.6;
}

.custom-note{
  margin-block-start: 32px;
  color: var(--smoke);
}
.custom-note a{
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--coal);
  font-weight: 700;
  text-decoration-color: var(--ash);
  text-underline-offset: 4px;
}
.custom-note a:hover{ text-decoration-color: var(--coal); }

/* =========================================================
   ٥) كيف نشتغل
   ========================================================= */
.section-process{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.process-bg{
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  opacity: 0.08;
}

.steps{
  display: grid;
  gap: 28px;
  margin-block-start: 40px;
}

.step{
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.step h3{ margin-block-end: 6px; }
.step p{ color: var(--raw); }

.step-num{
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 52px;
  block-size: 52px;
  border: 1px solid var(--ash);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ember);
}

/* =========================================================
   ٦) الخامات
   ========================================================= */
.materials{
  display: grid;
  gap: 16px;
  margin-block-start: 32px;
}

.materials-col{
  background: var(--paper);
  border: 1px solid var(--ash);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.materials-col h3{ margin-block-end: 16px; }
.materials-col li{
  padding-block: 12px;
  border-block-start: 1px solid var(--ash);
}
.materials-col li:first-child{ border-block-start: 0; padding-block-start: 0; }

.materials-refuse{ border-inline-start: 3px solid var(--ember); }

.reason{
  display: block;
  color: var(--smoke);
  font-size: 15px;
}

.materials-note{
  margin-block-start: 28px;
  color: var(--smoke);
  max-inline-size: 56ch;
}

/* =========================================================
   ٧) العرض الحالي
   ========================================================= */
.offer{
  background: var(--coal);
  color: var(--raw);
  padding-block: clamp(48px, 8vw, 80px);
  text-align: center;
  border-block: 1px solid var(--smoke);
}
.offer h2{ max-inline-size: 30ch; margin-inline: auto; text-wrap: balance; }
.ember-word{ color: var(--ember); }

.offer-sub{
  margin-block-start: 16px;
  color: var(--ash);
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   ٨) الأسئلة الشائعة
   ========================================================= */
.faq{
  margin-block-start: 32px;
  border-block-start: 1px solid var(--ash);
}

.faq details{ border-block-end: 1px solid var(--ash); }

.faq summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 56px;
  padding-block: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(16px, 2.6vw, 18px);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::marker{ content: ""; }

.faq summary::after{
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  border: 1px solid var(--ash);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
}
.faq details[open] summary::after{ content: "\2212"; }
.faq summary:hover::after{ border-color: var(--coal); }

.faq details p{
  padding-block-end: 20px;
  color: var(--smoke);
  max-inline-size: 60ch;
}

/* =========================================================
   ٩) الفوتر
   ========================================================= */
.site-footer{
  background: var(--coal);
  color: var(--raw);
  padding-block: 72px 40px;
}

.footer-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* المساحة الحرة H حول العلامة (≈ 65px عند 160px) */
.footer-brand{ padding: 0 0 calc(160px * 0.404); }
.footer-brand img{ inline-size: 160px; }

.footer-tagline{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 4vw, 24px);
  line-height: 1.35;
  margin-block-end: 24px;
}

.social{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.social a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding-inline: 14px;
  border: 1px solid var(--smoke);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}
.social a:hover{ border-color: var(--raw); }

.handle{
  margin-block-start: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ash);
}

.colophon{
  margin-block-start: 48px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--smoke);
  inline-size: 100%;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.22em;
  color: var(--ash);
}

/* ---------- زر واتساب العائم ---------- */
.wa-float{
  position: fixed;
  inset-inline-start: 20px;
  inset-block-end: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: var(--ember);
  color: var(--paper);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
}
.wa-float .icon{ inline-size: 28px; block-size: 28px; }
.wa-float.is-visible{ opacity: 1; visibility: visible; }
.wa-float:hover{ background: var(--coal); }

/* =========================================================
   الاستجابة — ٧٦٨ و ١٠٢٤ فقط
   ========================================================= */
@media (max-width: 767.98px){
  :root{
    --header-h: 80px;
    --logo-w: 120px;
  }

  /* ميزانية الجمرة ≤ ٥٪ على شاشة ٣٢٠×٥٦٨ */
  .btn-lg{ min-block-size: 44px; padding-inline: 16px; }
}

@media (min-width: 768px){
  :root{ --gutter: 24px; }

  .site-nav{ display: block; }

  .card-grid.three{ grid-template-columns: repeat(3, 1fr); }

  .materials{ grid-template-columns: 1fr 1fr; }

  .steps{
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
}

@media (min-width: 1024px){
  :root{ --gutter: 32px; }

  .site-nav ul{ gap: 8px; }

  /* زر الهيدر الكامل بالنص — الجمرة كتعبئة على الديسكتوب فقط */
  .header-wa{
    inline-size: auto;
    padding-inline: 18px;
    background: var(--ember);
    border-color: var(--ember);
    color: var(--paper);
  }
  .header-wa .icon{ inline-size: 20px; block-size: 20px; }
  .header-wa:hover{ background: var(--coal); border-color: var(--raw); }
  .header-wa-label{ display: inline; }

  .hero-inner{
    grid-template-columns: 1fr 45%;
    gap: 56px;
  }

  /* شريط أفقي: الخطوات الأربع في صف واحد، مع خط رماد يربطها */
  .steps{
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
  }
  .steps::before{
    content: "";
    position: absolute;
    inset-inline: 26px;
    inset-block-start: 26px;
    border-block-start: 1px solid var(--ash);
    z-index: -1;
  }
  .step{
    flex-direction: column;
    gap: 20px;
  }
  .step-num{ background: var(--coal); }
}

/* =========================================================
   الحركة — كلها هنا فقط
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  .btn,
  .site-nav a,
  .social a,
  .custom-note a,
  .faq summary::after{
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, text-decoration-color 0.2s ease;
  }

  .site-header{ transition: border-color 0.2s ease, box-shadow 0.2s ease; }
  .header-inner{ transition: block-size 0.2s ease; }
  .brand img{ transition: inline-size 0.2s ease; }

  .wa-float{
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
  }

  .js .reveal{
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .js .reveal.is-visible{
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   مطرقة 2 — مشهد الهيرو المربوط بالسكرول
   الافتراضي (بدون JS / بدون GSAP / تقليل حركة) = الحالة النهائية الثابتة.
   وسم html.hs يفعّل تخطيط التثبيت ويخفي المشهد حتى يتسلّمه GSAP.
   ========================================================= */

.hero-scroll-stage{
  --h: clamp(76px, 15vw, 120px);          /* ارتفاع رأس المطرقة */
  position: relative;
  inline-size: calc(var(--h) * 1.9);
  block-size: var(--h);
  margin-block-end: calc(var(--h) * 0.62);
  pointer-events: none;
}

.hammer-drop{
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  margin-inline: auto;                     /* توسيط منطقي — GSAP يحرّك y و rotate فقط */
  block-size: var(--h);
  inline-size: auto;
  aspect-ratio: 170 / 481;
  will-change: transform, opacity;
}

.fracture-burst{
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--h) * 0.772);   /* نقطة الاصطدام (٢٤/٩٠ من الـSVG) عند طرف المطرقة */
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
  transform-origin: 50% 27%;
  will-change: transform, opacity;
}
.fracture-burst polyline{
  fill: none;
  stroke: var(--ember);
  stroke-width: 2.5;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

/* ---------- الوضع المفعّل: المشهد مثبّت بـ sticky طوال مسافة السكرول ---------- */
html.hs .hammer-drop,
html.hs .fracture-burst{ opacity: 0; }     /* GSAP يتولى الباقي عبر style مباشر */

html.hs .hero{
  --scene-h: max(calc(100svh - 80px), 460px);   /* ما تحت الهيدر (٨٠ = ارتفاعه بعد التصغير) */
  --scrub-dist: 120svh;                         /* النطاق: أول ١٢٠vh */
  min-block-size: 0;
  padding-block-start: 0;
  justify-content: flex-start;
}

html.hs .hero-track{
  grid-template-columns: 1fr;
  grid-template-rows: calc(var(--scene-h) + var(--scrub-dist)) auto;
  align-items: start;
  row-gap: 0;
}

html.hs .hero-copy{                          /* حاوية تحدّد نطاق التثبيت = صف المشهد فقط */
  grid-row: 1;
  grid-column: 1;
  align-self: stretch;
}
html.hs .hero-pin{
  position: sticky;
  inset-block-start: 80px;
  block-size: var(--scene-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

html.hs .hero-media{
  grid-row: 2;
  grid-column: 1;
  margin-block-start: 40px;
}

@media (min-width: 1024px){
  html.hs .hero-track{
    grid-template-columns: 1fr 45%;
    grid-template-rows: calc(var(--scene-h) + var(--scrub-dist));
    column-gap: 56px;
  }
  html.hs .hero-media{
    grid-row: 1;
    grid-column: 2;
    margin-block-start: 0;
    position: sticky;
    inset-block-start: 80px;
    block-size: var(--scene-h);
    display: flex;
    align-items: center;
  }
  html.hs .hero-media img{
    max-block-size: var(--scene-h);
    object-fit: cover;
  }
}

/* الجوال الصغير: ضغط عمودي كي يتّسع المشهد المثبّت في شاشة ٣٢٠×٥٦٨ */
@media (max-width: 767.98px){
  .hero-scroll-stage{ --h: clamp(64px, 20vw, 88px); margin-block-end: calc(var(--h) * 0.8); }
  html.hs .hero-pin .hero-lead{ margin-block-end: 16px; }
  html.hs .hero-pin .trust{ margin-block-end: 20px; }
}

/* =========================================================
   مطرقة 2 — التأثير الثاني: الحفر يظهر بالسكرول (بعد الهيرو)
   الافتراضي = الأثر مكتمل. html.hs يفعّل التثبيت والحركة.
   ========================================================= */

.engrave{
  background: var(--raw);
  color: var(--coal);
  padding-block: var(--section-pad);
}

.engrave-inner{
  display: grid;
  gap: 32px;
  align-items: center;
}

.engrave-copy h2{ margin-block-end: 16px; }
.engrave-copy .section-lead{ margin-block-end: 20px; }

.engrave-meter{
  color: var(--smoke);
  font-size: 14px;
  line-height: 1.6;
}

.engrave-board{
  --p: 1;                                  /* تقدّم الحفر ٠ → ١ (يكتبه GSAP) */
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--ash);
  border-radius: var(--radius);
  overflow: hidden;
}

.engrave-burn{
  inline-size: 78%;
  block-size: auto;
  /* يُكشف الأثر من بداية السطر (اليمين) باتجاه اليسار — clip-path فيزيائي بطبيعته */
  clip-path: inset(0 0 0 calc((1 - var(--p)) * 100%));
}

.engrave-laser{
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--p) * 100%);
  inline-size: 2px;
  background: var(--ember);
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px){
  .engrave-inner{ grid-template-columns: 1fr 1fr; gap: 48px; }
}

html.hs .engrave{
  --scene2-h: max(calc(100svh - 80px), 460px);
  --scrub2: 100svh;
  padding-block: 0;
  block-size: calc(var(--scene2-h) + var(--scrub2));
}
html.hs .engrave-pin{
  position: sticky;
  inset-block-start: 80px;
  block-size: var(--scene2-h);
  display: flex;
  align-items: center;
}
html.hs .engrave-board{ --p: 0; }