/* ==========================================================================
   شركة ايفار الشرق — الحركة والتفاعل
   --------------------------------------------------------------------------
   يُحمَّل بعد style.css ويبني فوقه. قاعدتان تحكمان كل ما هنا:

   ١) الحركة تحسين لا شرط. بلا JavaScript يبقى الموقع كاملاً ومقروءاً،
      والمشهد مرسوماً وخط الأنابيب يتدفّق بـCSS وحده.
   ٢) «تقليل الحركة» في الجهاز يُحترم كلياً: لا دخول متحرّك، ولا ميلان،
      ولا حركة مرتبطة بالتمرير. التفاعل بالمعلومات (الشرح عند اللمس) يبقى،
      لأنه معلومة لا حركة.

   الحلقات المستمرّة (الموج، الإشارة، التدفّق) تتوقّف حين تخرج الواجهة من
   الشاشة — لا بطارية تُستهلك على شيء لا يُرى.
   ========================================================================== */

:root{--spot-c:rgba(27,108,168,.10);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--spot-c:rgba(143,185,221,.12);}
}
:root[data-theme="dark"]{--spot-c:rgba(143,185,221,.12);}

/* ==========================================================================
   ١) المشهد
   ========================================================================== */
.hero-art{pointer-events:auto;}
.hero-art .rig{transform-origin:50% 60%;}

/* الهاتف: كان المشهد شبحاً شفّافاً خلف النص لا يُلمس. صار تحته، مرئياً وتفاعلياً. */
@media (max-width:900px){
  .hero-art{
    position:relative;inset:auto;transform:none;
    width:min(100%,470px);margin:30px auto 0;opacity:1;z-index:2;
  }
}

.rig-hit{fill:transparent;stroke:none;pointer-events:all;}
.rig-part,.valve{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;}
.rig-part{transition:opacity .4s var(--ease);}
.rig.has-active .rig-part:not(.is-active){opacity:.4;}
.rig.valve-on #partPipe{opacity:1;}

.rig-part .rig-line,.rig-part .rig-hair{transition:stroke .3s,opacity .3s;}
.rig-part.is-active .rig-line{stroke:#d9ebf8;opacity:1;}
.rig-part.is-active .rig-hair{opacity:.62;}

.rig-part:focus-visible .rig-hit,
.valve:focus-visible .rig-hit{stroke:var(--gold);stroke-width:1.6;stroke-dasharray:4 5;}

/* ---- البرج: الصواني تضيء من الأسفل إلى الأعلى كما يصعد البخار ---- */
.tray{fill:none;stroke:var(--brand-soft);stroke-width:1.6;stroke-linecap:round;opacity:.85;}
.tower-rise{opacity:0;}
.rig-part.is-active .tray{animation:trayPulse 1.9s var(--ease) infinite;animation-delay:calc(var(--i) * .22s);}
.rig-part.is-active .tower-rise{opacity:1;animation:towerRise 1.9s linear infinite;}
@keyframes trayPulse{
  0%,55%,100%{stroke:var(--brand-soft);stroke-width:1.6;opacity:.85;}
  16%{stroke:#fff;stroke-width:3.2;opacity:1;}
}
@keyframes towerRise{from{transform:translateY(0);}to{transform:translateY(-380px);}}

/* إشارة تحذير الطيران أعلى البرج */
.beacon{fill:#ff8f70;}
.beacon-halo{transform-box:fill-box;transform-origin:center;opacity:0;}
.beacon{animation:beacon 2.6s ease-in-out infinite;}
.beacon-halo{animation:halo 2.6s ease-in-out infinite;}
.rig-part.is-active .beacon,.rig-part.is-active .beacon-halo{animation-duration:1s;}
@keyframes beacon{0%,68%,100%{opacity:.3;}76%{opacity:1;}}
@keyframes halo{0%,68%,100%{opacity:0;transform:scale(.5);}76%{opacity:.95;transform:scale(1.5);}}

/* ---- الكرتان: سائل بموجة، ومستواه يُحدَّد من JavaScript ---- */
.wave-a{fill:url(#gLiquid);animation:waveA 3.8s linear infinite;}
.wave-b{fill:rgba(143,185,221,.16);animation:waveB 5.6s linear infinite;}
.wave-s{fill:url(#gLiquid);animation:waveS 3s linear infinite;}
@keyframes waveA{to{transform:translateX(-120px);}}
@keyframes waveB{to{transform:translateX(120px);}}
@keyframes waveS{to{transform:translateX(-60px);}}

/* خطوط الطول تدور فتبدو الكرة مجسّمة.
   القيمة الثابتة (--ms) هي شكلها لمن فعّل «تقليل الحركة». */
.meridian{
  fill:none;stroke:var(--brand-soft);stroke-width:1;opacity:.34;
  transform-box:fill-box;transform-origin:center;
  transform:scaleX(var(--ms,1));vector-effect:non-scaling-stroke;
}
.rig-part.is-active .meridian{opacity:.6;}
@keyframes meridian{0%,100%{transform:scaleX(1);}50%{transform:scaleX(0);}}

/* ---- التدفّق ---- */
.flow-seg{
  fill:none;stroke:var(--brand-500);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:26 40;animation:pipeflow 3.2s linear infinite;
  transition:opacity .45s var(--ease);
}
.js-flow .flow-seg{animation:none;}          /* JavaScript يتولّاه ليتحكّم بسرعته بسلاسة */
.flow-seg.is-stopped{opacity:.2;}

.drop-flow{
  fill:none;stroke:#bfe0f7;stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:6 8;opacity:0;transition:opacity .3s;
}
.rig.tower-on .drop-flow{opacity:1;animation:dropFlow .8s linear infinite;}
@keyframes dropFlow{to{stroke-dashoffset:-28;}}

/* ---- الصمّامان ---- */
.valve-body{fill:rgba(143,185,221,.06);transition:fill .35s,stroke .35s;}
.valve-wheel{transform-box:view-box;transition:transform .5s var(--ease);}
.valve.is-closed .valve-wheel{transform:rotate(90deg);}
.valve.is-closed .valve-body{fill:rgba(200,164,92,.38);stroke:var(--gold);}
.valve.is-active .rig-line{stroke:#fff;opacity:1;}

/* ---- الدخول ---- */
.rig .fillable{transition:opacity 1.1s var(--ease);}
.rig.is-intro .fillable{opacity:0;}

/* ---- الشرح ---- */
.rig-tip{
  position:absolute;top:0;left:0;z-index:6;
  width:max-content;max-width:min(272px,calc(100vw - 32px));
  padding:11px 14px;border-radius:12px;
  background:rgba(6,32,60,.9);border:1px solid rgba(143,185,221,.3);
  box-shadow:0 14px 34px rgba(0,0,0,.38);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;text-align:start;pointer-events:none;
  opacity:0;transition:opacity .22s var(--ease);
}
.rig-tip.show{opacity:1;}
.rig-tip strong{display:block;font-size:14px;line-height:1.4;margin-bottom:4px;color:#fff;}
.rig-tip span{display:block;font-size:12.8px;line-height:1.65;color:rgba(255,255,255,.8);}

.rig-hint{
  margin:10px 0 0;text-align:center;
  font-size:12.5px;color:rgba(143,185,221,.78);
  transition:opacity .6s var(--ease);
}
.rig-hint.gone{opacity:0;}

/* ---- توهّج يتبع المؤشر ---- */
.hero-glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .7s var(--ease);
  background:radial-gradient(540px circle at var(--gx,70%) var(--gy,40%),rgba(43,134,197,.2),transparent 62%);
}
.hero.glow-on .hero-glow{opacity:1;}

/* الواجهة خارج الشاشة: كل حلقة تتوقّف */
.hero.is-offscreen .rig,
.hero.is-offscreen .rig *{animation-play-state:paused!important;}

/* ==========================================================================
   ٢) دخول الواجهة — CSS وحده، فيعمل حتى لو تأخّر JavaScript
   fill-mode:backwards لا both: بعد الانتهاء تعود الخصائص لطبيعتها، فلا تبقى
   قيمة transform عالقة تُعطّل الأزرار المغناطيسية أو التمرير.
   ========================================================================== */
/* --hd = مدة شاشة الافتتاح إن ظهرت، فيبدأ الدخول بعد ارتفاعها لا خلفها */
.has-intro{--hd:1.2s;}

@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow{animation:heroIn .7s var(--ease) calc(var(--hd,0s) + .05s) backwards;}
  /* العنوان يتحرّك ولا يختفي: عنصر شفّافيته صفر لا يُحتسب «أكبر رسم» (LCP)،
     فالظهور التدريجي كان يؤخّر المقياس ثانية ونصفاً في أول زيارة */
  .hero h1{animation:heroRise .9s var(--ease) calc(var(--hd,0s) + .14s) backwards;}
  .hero-lead{animation:heroIn .9s var(--ease) calc(var(--hd,0s) + .3s) backwards;}
  .hero-actions{animation:heroIn .9s var(--ease) calc(var(--hd,0s) + .42s) backwards;}
  .hero-chips li{animation:heroIn .7s var(--ease) backwards;}
  .hero-chips li:nth-child(1){--ci:0;animation-delay:calc(var(--hd,0s) + .52s);}
  .hero-chips li:nth-child(2){--ci:1;animation-delay:calc(var(--hd,0s) + .58s);}
  .hero-chips li:nth-child(3){--ci:2;animation-delay:calc(var(--hd,0s) + .64s);}
  .hero-chips li:nth-child(4){--ci:3;animation-delay:calc(var(--hd,0s) + .7s);}
  .hero-art{animation:fadeIn 1.2s var(--ease) calc(var(--hd,0s) + .2s) backwards;}

  /* لمعة تمرّ على الوسوم بالتتابع كل بضع ثوانٍ */
  .hero-chips li{position:relative;overflow:hidden;}
  .hero-chips li::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);
    transform:translateX(-130%);
    animation:chipShine 8s ease-in-out infinite;
    animation-delay:calc(var(--hd,0s) + 2.4s + var(--ci,0) * .22s);
  }

  .hero h1 .grad{background-size:220% auto;animation:gradShift 7s ease-in-out infinite alternate;}

  .meridian{animation:meridian 12s ease-in-out infinite;animation-delay:calc(var(--m) * -4s);}
}
@keyframes heroRise{from{transform:translateY(18px);}to{transform:none;}}
@keyframes heroIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes gradShift{from{background-position:0% 50%;}to{background-position:100% 50%;}}
@keyframes chipShine{0%{transform:translateX(-130%);}14%,100%{transform:translateX(130%);}}

/* ==========================================================================
   ٣) شريط تقدّم القراءة
   ========================================================================== */
/* خارج الهيدر: حين يختفي الهيدر أثناء النزول يصعد الشريط معه ويبقى ظاهراً */
.scroll-bar{
  position:fixed;inset-inline:0;inset-block-start:calc(var(--header-h) - 1px);z-index:101;
  height:2px;overflow:hidden;pointer-events:none;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.hdr-up .scroll-bar{transform:translateY(calc(var(--header-h) * -1 + 1px));}
.scroll-bar span{
  display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand),var(--gold));
}
[dir="rtl"] .scroll-bar span{
  transform-origin:100% 50%;
  background:linear-gradient(270deg,var(--brand),var(--gold));
}

/* ==========================================================================
   ٤) البطاقات: ضوء يتبع المؤشر، وميلان خفيف
   الضوء عنصر يُنشأ عند أول مرور — لأن data.js يعيد بناء بطاقات الخدمات
   والمنتجات من قاعدة البيانات، فأي عنصر مكتوب في HTML سيُمحى.
   ========================================================================== */
.why-item,.info-card{position:relative;overflow:hidden;}
.why-item,.info-card,.idcard,.card{isolation:isolate;}
.idcard{transition:transform .5s var(--ease),box-shadow .3s,background-color .3s,border-color .3s;}

.spot{
  position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(380px circle at var(--sx,50%) var(--sy,50%),var(--spot-c),transparent 62%);
}
.is-lit > .spot{opacity:1;}
.card > :not(.spot),
.why-item > :not(.spot),
.info-card > :not(.spot),
.idcard > :not(.spot){position:relative;z-index:1;}

.product,.why-item{--spot-c:rgba(143,185,221,.17);}
.product-more{--spot-c:rgba(27,108,168,.10);}

@media (hover:hover) and (pointer:fine){
  .product.is-tilt{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
    transition:transform .14s linear,box-shadow .3s;
  }
  .idcard.is-tilt{
    transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .14s linear,box-shadow .3s;
  }
}

/* ==========================================================================
   ٥) الأيقونات تُرسَم خطّاً خطّاً حين تظهر
   --len يقيسه JavaScript لكل مسار؛ بدونه لا تُطبَّق القاعدة وتبقى الأيقونة كما هي.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .drawable{
    stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
    transition:stroke-dashoffset 1.3s var(--ease) .15s;
  }
  .reveal.visible .drawable,
  .credbar.is-drawn .drawable{stroke-dashoffset:0;}
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .product:hover .product-ico svg,
  .card:hover .card-ico svg{animation:bob 1.8s ease-in-out infinite;}
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

/* ==========================================================================
   ٦) آلية العمل: الخطّ يمتلئ مع التمرير والمراحل تضيء بالترتيب
   ========================================================================== */
.tl-step{z-index:1;}
.timeline::after{
  content:'';position:absolute;z-index:0;pointer-events:none;border-radius:2px;
  inset-block-start:8px;inset-inline-start:9px;width:2px;
  height:calc((100% - 16px) * var(--tl,0));
  background:linear-gradient(180deg,var(--brand),var(--gold));
}
@media (min-width:901px){
  .timeline::after{
    inset-block-start:11px;inset-inline-start:10px;height:2px;
    width:calc((100% - 20px) * var(--tl,0));
    background:linear-gradient(90deg,var(--brand),var(--gold));
  }
  [dir="rtl"] .timeline::after{background:linear-gradient(270deg,var(--brand),var(--gold));}
}
.tl-dot{transition:background-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease);}
.tl-dot::after{transition:background-color .45s,opacity .45s;}
.tl-step.is-lit .tl-dot{
  background:var(--accent);transform:scale(1.1);
  box-shadow:0 0 0 6px rgba(27,108,168,.15);
}
.tl-step.is-lit .tl-dot::after{background:#fff;opacity:.95;}

/* ==========================================================================
   ٧) البيان: الكلمات تُضاء كلمة كلمة مع التمرير
   الأجزاء تُنشئها JavaScript؛ بدونها يبقى النصّ كاملاً بلا تعتيم.
   ========================================================================== */
.statement blockquote .w{opacity:.2;transition:opacity .4s var(--ease);}
.statement blockquote .w.on{opacity:1;}

.statement-mark{transform:translateY(calc(-50% + var(--py,0px)));}
.why::before{transform:translateY(var(--py,0px));}

/* ==========================================================================
   ٨) نجاح الإرسال: علامة الصح تُرسَم
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .form-done:not([hidden]) .form-done-ico{animation:popIn .5s var(--ease) backwards;}
  .form-done:not([hidden]) .form-done-ico path{
    stroke-dasharray:24;stroke-dashoffset:24;
    animation:drawCheck .55s var(--ease) .25s forwards;
  }
}
@keyframes drawCheck{to{stroke-dashoffset:0;}}
@keyframes popIn{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:none;}}

/* ==========================================================================
   ═════════════════  المرحلة الثانية  ═════════════════
   ========================================================================== */

/* ==========================================================================
   ٩) شاشة الافتتاح
   تظهر فقط مع has-intro (سكربت الرأس: أول زيارة في الجلسة، بلا «تقليل الحركة»).
   ترتفع بحركة CSS وحدها — لا تنتظر JavaScript، فلا تعلق أبداً.
   ========================================================================== */
.intro{display:none;}
.has-intro .intro{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:1000;pointer-events:none;
  background:
    radial-gradient(70% 55% at 72% 18%,rgba(18,64,110,.9),transparent 70%),
    radial-gradient(50% 40% at 10% 100%,rgba(200,164,92,.12),transparent 75%),
    #04162b;
  animation:introOut .85s cubic-bezier(.76,0,.24,1) 1s forwards;
}
.intro-inner{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  animation:introInner .7s cubic-bezier(.76,0,.24,1) 1s forwards;
}
.intro-mark{width:58px;height:77px;margin-bottom:16px;overflow:visible;}
.intro-mark path{
  stroke-width:2.2;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;
  animation:imDraw .8s cubic-bezier(.65,0,.35,1) forwards,imFill .5s ease .5s forwards;
}
.im-back{fill:#8fb9dd;stroke:#8fb9dd;}
.intro-mark .im-front{fill:#2b86c5;stroke:#6bb3e4;animation-delay:.12s,.62s;}
.intro-ar,.intro-en{display:block;opacity:0;animation:introTxt .7s cubic-bezier(.22,.61,.36,1) .38s forwards;}
.intro-ar{font-family:var(--font-ar);font-size:21px;font-weight:700;color:#fff;letter-spacing:-.01em;}
.intro-en{font-family:var(--font-en);font-size:10.5px;font-weight:600;letter-spacing:.38em;color:#8fb9dd;animation-delay:.5s;}
.intro-line{
  display:block;width:132px;height:1px;margin-top:16px;
  background:linear-gradient(90deg,transparent,#c8a45c,transparent);
  transform:scaleX(0);animation:introLine .75s cubic-bezier(.22,.61,.36,1) .52s forwards;
}
@keyframes imDraw{to{stroke-dashoffset:0;}}
@keyframes imFill{to{fill-opacity:1;stroke-opacity:0;}}
@keyframes introTxt{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes introLine{to{transform:scaleX(1);}}
@keyframes introOut{to{transform:translateY(-100%);visibility:hidden;}}
@keyframes introInner{to{transform:translateY(-60px);opacity:0;}}
@media (prefers-reduced-motion:reduce){ .intro{display:none!important;} }

/* ==========================================================================
   ١٠) عناوين الأقسام: كل كلمة تصعد من خلف قناع
   الأجزاء تُنشئها JavaScript؛ بدونها يبقى العنوان نصاً عادياً.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .sw{
    display:inline-block;overflow:hidden;vertical-align:top;
    padding-block:.12em .2em;margin-block:-.12em -.2em;
  }
  .sw-i{
    display:inline-block;transform:translateY(112%) rotate(3deg);
    transition:transform 1s cubic-bezier(.19,1,.22,1);
    transition-delay:calc(var(--wi,0) * 55ms + 60ms);
  }
  [dir="rtl"] .sw-i{transform:translateY(112%) rotate(-3deg);}
  .reveal.visible .sw-i{transform:none;}
}

/* ==========================================================================
   ١١) الهيدر: يختفي أثناء النزول ويعود مع أول حركة للأعلى
   ========================================================================== */
.site-header{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .25s,border-color .25s,background-color .3s var(--ease);}
.hdr-up .site-header{transform:translateY(-100%);box-shadow:none;}

/* مؤشر القائمة: خلفية تنزلق تحت الرابط الذي تحت المؤشر، وخطّ تحت القسم الحالي */
.nav-ink,.nav-line{display:none;}
@media (min-width:1080px){
  .main-nav.has-ink{position:relative;isolation:isolate;}
  .main-nav.has-ink a{position:relative;z-index:1;}
  .main-nav.has-ink a:hover{background:transparent;}
  .nav-ink,.nav-line{display:block;position:absolute;left:0;pointer-events:none;opacity:0;}
  .nav-ink{
    top:50%;height:38px;margin-top:-19px;border-radius:10px;z-index:0;
    background:var(--surface-2);
    transition:transform .4s cubic-bezier(.22,.61,.36,1),width .4s cubic-bezier(.22,.61,.36,1),opacity .25s;
  }
  .nav-line{
    bottom:1px;height:2px;border-radius:2px;z-index:1;
    background:linear-gradient(90deg,var(--brand),var(--gold));
    transition:transform .55s cubic-bezier(.22,.61,.36,1),width .55s cubic-bezier(.22,.61,.36,1),opacity .3s;
  }
  .nav-ink.on,.nav-line.on{opacity:1;}
}

/* ==========================================================================
   ١٢) مؤشر الماوس المرافق — ماوس فقط، والمؤشر الأصلي يبقى كما هو
   ========================================================================== */
.cursor{position:fixed;left:0;top:0;z-index:999;pointer-events:none;opacity:0;transition:opacity .3s;}
.cursor.on{opacity:1;}
.cursor.on.is-text{opacity:0;}
.cursor i{
  position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;
  border:1.5px solid rgba(27,108,168,.45);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),background-color .3s,border-color .3s;
}
.cursor.is-hot i{transform:scale(1.6);background:rgba(27,108,168,.07);border-color:rgba(27,108,168,.22);}
.cursor.is-down i{transform:scale(.7);}
.cursor.is-hot.is-down i{transform:scale(1.25);}
.cursor.is-dark i{border-color:rgba(191,224,247,.5);}
.cursor.is-dark.is-hot i{background:rgba(191,224,247,.08);border-color:rgba(191,224,247,.26);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cursor i{border-color:rgba(107,179,228,.5);}
  :root:not([data-theme="light"]) .cursor.is-hot i{background:rgba(107,179,228,.08);border-color:rgba(107,179,228,.26);}
}
:root[data-theme="dark"] .cursor i{border-color:rgba(107,179,228,.5);}
:root[data-theme="dark"] .cursor.is-hot i{background:rgba(107,179,228,.08);border-color:rgba(107,179,228,.26);}

/* ==========================================================================
   ١٣) الأزرار: تمتلئ من نقطة دخول المؤشر، وتتموّج عند الضغط
   ========================================================================== */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn-primary,.btn-ghost{position:relative;overflow:hidden;isolation:isolate;}
  .btn-primary::before,.btn-ghost::before{
    content:'';position:absolute;z-index:-1;pointer-events:none;
    left:var(--bx,50%);top:var(--by,50%);width:280%;aspect-ratio:1;border-radius:50%;
    transform:translate(-50%,-50%) scale(0);
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .btn-primary::before{background:var(--brand-strong);}
  .btn-ghost::before{background:#fff;}
  .btn-primary:hover{background:var(--brand);}
  .btn-primary:hover::before,.btn-ghost:hover::before{transform:translate(-50%,-50%) scale(1);}
  .btn-ghost:hover{color:var(--navy-900);background:rgba(255,255,255,.04);}
}

.btn,.icon-btn,a.info-card,.work-arrow,.social{position:relative;overflow:hidden;}
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:.2;transform:scale(0);
  animation:ripple .7s cubic-bezier(.22,.61,.36,1) forwards;
}
a.info-card > .ripple{position:absolute;z-index:2;color:var(--brand);}
@keyframes ripple{to{transform:scale(1);opacity:0;}}

/* ==========================================================================
   ١٤) إطار مضيء يتبع المؤشر على البطاقات
   نفس إحداثيات الضوء (--sx/--sy)؛ القناع يُبقي التدرّج على الحافة وحدها.
   ========================================================================== */
.card,.why-item,.info-card,.idcard{--edge-c:rgba(27,108,168,.6);}
.why-item{--edge-c:rgba(191,224,247,.55);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .info-card,
  :root:not([data-theme="light"]) .idcard{--edge-c:rgba(107,179,228,.6);}
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .idcard{--edge-c:rgba(107,179,228,.6);}

.card::after,.why-item::after,.info-card::after,.idcard::after{
  content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(220px circle at var(--sx,50%) var(--sy,50%),var(--edge-c),transparent 72%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;transition:opacity .45s var(--ease);
}
.card.is-lit::after,.why-item.is-lit::after,.info-card.is-lit::after,.idcard.is-lit::after{opacity:1;}

/* ==========================================================================
   ١٥) دخول البطاقات: الخدمات ترتفع، و«لماذا» تنقلب من الأسفل
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .card.reveal{
    transform:translateY(34px) scale(.965);
    transition:opacity .8s var(--ease),transform .9s cubic-bezier(.19,1,.22,1),box-shadow .3s,border-color .3s,background-color .3s;
  }
  .why-item.reveal{
    transform:perspective(900px) translateY(40px) rotateX(16deg);transform-origin:50% 100%;
    transition:opacity .8s var(--ease),transform 1s cubic-bezier(.19,1,.22,1),background .25s,border-color .25s;
  }
  .card.reveal.visible,.why-item.reveal.visible{transform:none;}
}
@media (hover:hover) and (pointer:fine){
  .card.reveal.visible:hover{transform:translateY(-6px);}
  .why-item.reveal.visible:hover{transform:translateY(-4px);}
}

/* الأرقام المحدّدة تمتلئ بالتدرّج حين تظهر البطاقة */
.why-num{
  background:linear-gradient(90deg,var(--brand-soft),var(--gold)) no-repeat 0 0/0% 100%;
  -webkit-background-clip:text;background-clip:text;
  transition:background-size 1.3s cubic-bezier(.22,.61,.36,1) .35s,opacity .6s;
}
[dir="rtl"] .why-num{background-position:100% 0;}
.why-item.visible .why-num{background-size:100% 100%;opacity:1;}

/* شفق بطيء خلف «لماذا» */
.why::after{
  content:'';position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(26% 30% at 28% 62%,rgba(200,164,92,.14),transparent 70%),
    radial-gradient(30% 34% at 70% 38%,rgba(43,134,197,.3),transparent 70%);
}
@media (prefers-reduced-motion:no-preference){
  .why::after{animation:aurora 24s ease-in-out infinite alternate;}
}
@keyframes aurora{
  0%{transform:translate3d(-6%,4%,0) rotate(0deg);}
  50%{transform:translate3d(5%,-3%,0) rotate(8deg) scale(1.08);}
  100%{transform:translate3d(-2%,-6%,0) rotate(-6deg);}
}

/* ==========================================================================
   ١٦) آلية العمل: رسم لكل مرحلة، علامة تسير على الخط، وتثبيت على الشاشة
   ========================================================================== */
.tl-track{position:relative;}
.tl-art{display:block;width:44px;height:44px;margin-bottom:10px;color:var(--brand-soft);transition:color .5s var(--ease);}
.tl-art path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tl-step.is-lit .tl-art{color:var(--accent);}
.tl-step h3{transition:color .45s var(--ease);}
.tl-step.is-current h3{color:var(--accent);}
.tl-step{transition:opacity .5s var(--ease);}
.tl-track.is-running .tl-step:not(.is-lit){opacity:.42;}

/* المسارات المباشرة (> path) تُرسم؛ نسخة tl-ghost الباهتة ثابتة تحتها */
.tl-ghost path{opacity:.3;stroke-dasharray:3 3;}
@media (prefers-reduced-motion:no-preference){
  .js-tl .tl-art > path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1);}
  .js-tl .tl-art > path:nth-of-type(2){transition-delay:.12s;}
  .js-tl .tl-art > path:nth-of-type(3){transition-delay:.24s;}
  .js-tl .tl-art > path:nth-of-type(4){transition-delay:.36s;}
  .js-tl .tl-step.is-lit .tl-art > path{stroke-dashoffset:0;}
}

.tl-marker{
  position:absolute;z-index:3;width:14px;height:14px;margin-top:-7px;pointer-events:none;
  border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 5px rgba(200,164,92,.2),0 0 20px rgba(200,164,92,.65);
  inset-inline-start:3px;
  inset-block-start:calc(8px + (100% - 16px) * var(--tl,0));
  opacity:0;transition:opacity .4s var(--ease);
}
.tl-track.is-running .tl-marker{opacity:1;}
.tl-marker::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(200,164,92,.55);
}
@media (prefers-reduced-motion:no-preference){
  .tl-marker::after{animation:markerPing 1.8s ease-out infinite;}
}
@keyframes markerPing{from{transform:scale(.6);opacity:1;}to{transform:scale(1.9);opacity:0;}}

@media (min-width:901px){
  .tl-marker{
    inset-block-start:12px;
    inset-inline-start:calc(3px + (100% - 20px) * var(--tl,0));
  }
  .tl-art{width:50px;height:50px;margin-bottom:14px;}
}

/* التثبيت: القسم يطول، ومحتواه يبقى على الشاشة بينما يمتلئ الخط */
@media (min-width:1080px) and (min-height:700px) and (prefers-reduced-motion:no-preference){
  #process.is-pinned{height:240vh;padding-block:0;}
  /* المحتوى من الأعلى لا في المنتصف: بالتوسيط تظهر فجوة فارغة كبيرة فوق العنوان
     حين يصل الزائر إلى القسم */
  #process.is-pinned > .container{
    position:sticky;top:0;min-height:100vh;
    display:flex;flex-direction:column;justify-content:flex-start;
    padding-block:calc(var(--header-h) + 64px) 36px;
  }
  #process.is-pinned .section-head{margin-bottom:64px;}
}

/* ==========================================================================
   ١٧) الشريط المتحرّك
   الاتجاه ltr ثابت حتى تكون حسابات الإزاحة واحدة في اللغتين.
   ========================================================================== */
.ribbon{
  direction:ltr;overflow:hidden;
  padding-block:30px 34px;background:var(--bg);border-block-start:1px solid var(--line);
  transition:background-color .3s var(--ease);
}
.ribbon-row{overflow:hidden;white-space:nowrap;line-height:1.2;}
.ribbon-track{display:inline-flex;}
.js-ribbon .ribbon-track{will-change:transform;}
.ribbon-item{
  display:inline-flex;align-items:center;gap:.42em;padding-inline:.42em;
  font-size:clamp(34px,6.6vw,96px);font-weight:700;letter-spacing:-.035em;
}
.ribbon-row.is-en .ribbon-item{
  font-family:var(--font-en);text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.2px var(--line-strong);
}
.ribbon-row.is-ar .ribbon-item{
  font-family:var(--font-ar);letter-spacing:0;
  background:linear-gradient(90deg,var(--ink),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ribbon-star{
  font-size:.34em;color:var(--gold);-webkit-text-stroke:0;
  -webkit-text-fill-color:var(--gold);
}

/* ==========================================================================
   ١٨) قصّ الأقسام الداكنة: تتّسع من بطاقة مستديرة إلى عرض الشاشة
   القيمة يكتبها JavaScript مع التمرير.
   ========================================================================== */
.statement,.why{clip-path:var(--clip,none);}

/* ==========================================================================
   ١٩) ختم الشركة على البطاقة
   ========================================================================== */
.idcard-wrap{position:relative;}
.seal{
  position:absolute;z-index:4;pointer-events:none;
  width:100px;height:100px;inset-block-start:-46px;inset-inline-end:-14px;
  filter:drop-shadow(0 8px 18px rgba(9,38,66,.16));
  transition:opacity .8s var(--ease),transform 1.2s cubic-bezier(.19,1,.22,1);
}
.seal-bg{fill:var(--surface);stroke:var(--line);stroke-width:1;transition:fill .3s;}
.seal-rim{fill:none;stroke:var(--line);stroke-width:1;}
.seal text{font-family:var(--font-en);font-size:9.6px;font-weight:600;fill:var(--ink-soft);}
.seal-ring{transform-box:view-box;transform-origin:60px 60px;transform:rotate(var(--rot,0deg));}
@media (prefers-reduced-motion:no-preference){
  .idcard-wrap .seal{opacity:0;transform:scale(.55) rotate(-60deg);}
  .idcard-wrap.is-in .seal{opacity:1;transform:none;}
}
@media (max-width:900px){
  .seal{width:84px;height:84px;inset-block-start:-38px;inset-inline-end:8px;}
}

/* ==========================================================================
   ٢٠) الفوتر: اسم الشركة كبيراً يمتلئ حين تصل إليه
   ========================================================================== */
.footer-giant{
  overflow:hidden;text-align:center;line-height:.95;
  padding-block:26px 12px;user-select:none;pointer-events:none;   /* مساحة لذيل حرف Q */
}
.footer-giant span{
  display:inline-block;white-space:nowrap;
  font-family:var(--font-en);font-weight:700;letter-spacing:-.045em;
  font-size:min(12vw,142px);
  color:transparent;-webkit-text-stroke:1px rgba(143,185,221,.24);
  background:linear-gradient(90deg,var(--brand-500),#bfe0f7 55%,var(--gold)) no-repeat 0 0/calc(var(--fp,1) * 100%) 100%;
  -webkit-background-clip:text;background-clip:text;
}

/* ==========================================================================
   ٢١) الواجهة: جزيئات غاز تصعد، ومؤشّر النزول
   ========================================================================== */
.hero-particles{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;}

.scroll-cue{display:none;}
@media (min-width:901px) and (min-height:720px){
  .scroll-cue{
    position:absolute;z-index:3;left:50%;bottom:20px;
    display:flex;flex-direction:column;align-items:center;gap:7px;
    color:rgba(191,224,247,.55);font-size:10.5px;font-weight:600;letter-spacing:.24em;
    transform:translateX(-50%);transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s;
  }
  .scroll-cue:hover{color:#fff;}
  .cue-mouse{position:relative;width:22px;height:34px;border:1.5px solid currentColor;border-radius:12px;}
  .cue-mouse i{
    position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;
    border-radius:2px;background:currentColor;
  }
  .hero.cue-gone .scroll-cue{opacity:0;transform:translate(-50%,10px);pointer-events:none;}
}
@media (min-width:901px) and (min-height:720px) and (prefers-reduced-motion:no-preference){
  .cue-mouse i{animation:cue 1.9s ease-in-out infinite;}
  .scroll-cue{animation:fadeIn 1s var(--ease) calc(var(--hd,0s) + 1.1s) backwards;}
}
@keyframes cue{
  0%{opacity:0;transform:translateY(-3px);}
  30%,65%{opacity:1;}
  100%{opacity:0;transform:translateY(10px);}
}

/* ==========================================================================
   ٢٢) نقاط الأقسام على جانب الشاشة — شاشات عريضة بماوس
   ========================================================================== */
.sect-dots{display:none;}
@media (min-width:1280px) and (hover:hover) and (pointer:fine){
  .sect-dots{
    display:flex;flex-direction:column;gap:2px;
    position:fixed;top:50%;inset-inline-end:16px;z-index:90;
    padding:8px 5px;border-radius:999px;
    background:var(--header-bg);
    border:1px solid var(--line);box-shadow:var(--shadow-sm);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    transform:translate(0,-50%);opacity:0;pointer-events:none;
    transition:opacity .4s var(--ease),background-color .3s;
  }
  .sect-dots.on{opacity:1;pointer-events:auto;}
  .sd{position:relative;display:grid;place-items:center;width:20px;height:22px;}
  .sd::before{
    content:'';width:6px;height:6px;border-radius:999px;background:var(--line-strong);
    transition:height .4s cubic-bezier(.22,.61,.36,1),background-color .3s;
  }
  .sd:hover::before{background:var(--brand-soft);}
  .sd.is-active::before{height:18px;background:var(--accent);}
  .sd-label{
    position:absolute;top:50%;inset-inline-end:30px;
    padding:4px 11px;border-radius:8px;white-space:nowrap;
    font-size:12.5px;font-weight:600;line-height:1.6;
    background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm);
    opacity:0;transform:translateY(-50%) scale(.94);transition:opacity .2s,transform .25s var(--ease);
    pointer-events:none;
  }
  .sd:hover .sd-label{opacity:1;transform:translateY(-50%);}
}

/* ==========================================================================
   ٢٣) نموذج التواصل: خطّ يمتدّ تحت الحقل النشط، واهتزاز للحقل الخاطئ
   ========================================================================== */
.field{position:relative;}
.field::after{
  content:'';position:absolute;inset-inline:14px;bottom:0;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--brand),var(--gold));
  transform:scaleX(0);transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.field:focus-within::after{transform:scaleX(1);}
.field label{transition:color .25s;}
.field:focus-within label{color:var(--accent);}
@media (prefers-reduced-motion:no-preference){
  .field input.invalid,.field textarea.invalid{animation:shake .45s cubic-bezier(.36,.07,.19,.97);}
  #formSubmit[disabled]{
    background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.24) 50%,transparent 70%);
    background-size:240% 100%;animation:sending 1.3s linear infinite;
  }
}
@keyframes shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}
@keyframes sending{from{background-position:130% 0;}to{background-position:-130% 0;}}

/* ==========================================================================
   ٢٤) انتقال الوضع واللغة (View Transitions — main.js)
   ========================================================================== */
.vt-theme *,.vt-theme *::before,.vt-theme *::after{transition:none!important;}
:root.vt-theme::view-transition-old(root),
:root.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal;}
:root.vt-theme::view-transition-new(root){animation:vtCircle .75s cubic-bezier(.65,0,.35,1);}
@keyframes vtCircle{
  from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,0));}
  to{clip-path:circle(var(--vt-r,150vmax) at var(--vt-x,50%) var(--vt-y,0));}
}
:root.vt-lang::view-transition-old(root){animation:vtOut .26s ease both;}
:root.vt-lang::view-transition-new(root){animation:vtIn .45s cubic-bezier(.22,.61,.36,1) .06s both;}
@keyframes vtOut{to{opacity:0;}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px);}}