/* ==========================================================================
   طبقة التوقيع — ما يميّز TechCpm عن القالب الذي بُني عليه.
   ==========================================================================

   تُحمَّل بعد components.css ولا تعدّله. الفصل مقصود: القاعدة أسفلها مقيسة
   بالمسطرة (المقاسات والإيقاع والحجوم)، وما هنا اختيارٌ بصري. إبقاؤهما في
   ملفين يجعل المراجعة ممكنة والتراجع ممكنًا.

   الخيط الجامع: المائل. شعار `tc` مقطوع بزاوية، فصار القَطْع بزاوية هو
   الموتيف المتكرّر — في صدر الشريط، وفي تسطير الروابط، وفي شريط التقدّم.

   كل حركة هنا مشروطة بـ prefers-reduced-motion في آخر الملف.
   ========================================================================== */

:root {
  --skew: -18deg;              /* زاوية الموتيف — واحدة في الملف كلّه */
  --glow-size: 220px;          /* قطر توهّج المؤشّر على البطاقات */
  --dur-slow: 0.42s;
}

/* ------------------------------------------------- شريط تقدّم القراءة --- */

/* يُملأ من `--progress` التي يكتبها a7.js. عرضه لا تحويله، لأن التحويل
   على عنصر ثابت يجبر المتصفح على إعادة الرسم في كل إطار. */
.progressbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: 2px;
  pointer-events: none;
  background: transparent;
}

.progressbar__fill {
  width: calc(var(--progress, 0) * 100%);
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-warm));
  box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 60%, transparent);
  transition: width 0.08s linear;
}

/* --------------------------------------------------------- هالة البطل --- */

/* توهّج دافئ خلف العنوان، وحبيبات دقيقة فوقه. الحبيبات هي الفرق بين
   «تدرّج رقمي مسطّح» وسطحٍ له ملمس. */
.hero {
  position: relative;
  isolation: isolate;
  /* الهالة أعرض من الحاوية عمدًا ليتلاشى طرفاها خارج الكادر. القصّ أفقي
     فقط — `clip` الكامل يبتر ما يفيض رأسيًا من البطل. */
  overflow-x: clip;
}

.hero::before {
  /* `left` لا `inset-inline-start`: هذه هالة متمركزة، وموضعها لا علاقة له
     باتجاه القراءة. المنطقيّة هنا تقلبها بلا داعٍ. */
  position: absolute;
  top: -18%;
  left: 50%;
  z-index: -2;
  width: min(900px, 120%);
  height: 420px;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    color-mix(in oklch, var(--accent) 22%, transparent) 0%,
    color-mix(in oklch, var(--accent) 7%, transparent) 38%,
    transparent 70%
  );
  transform: translateX(-50%);
}

.hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.4;
  /* feTurbulence مضمَّنة: لا طلب شبكة، ولا ملف صورة يُدار. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  /* بلا هذا القناع تنتهي الحبيبات عند حدّ البطل بخطٍّ أفقي حادّ يشقّ
     الصفحة. التلاشي يجعل الملمس ينتهي حيث تنتهي الهالة لا حيث ينتهي العنصر. */
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

:root[data-theme="light"] .hero::after {
  opacity: 0.22;
}

/* شبكة نقطية خفيفة خلف المنحنى — تعطي عمقًا بلا ضجيج. */
.hero__stage {
  position: relative;
}

.hero__stage::before {
  /* بلا توسيع أفقي: المسرح عرضه محسوب على حافة الصفحة، وأي تجاوز هنا
     يصنع تمريرًا أفقيًا على الشاشات الضيّقة. */
  position: absolute;
  inset: -12% 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background-image: radial-gradient(
    circle at 1px 1px,
    color-mix(in oklch, var(--foreground) 16%, transparent) 1px,
    transparent 0
  );
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
}

/* الأقراص تتنفّس: توهّج يتّسع عند المرور، وانجذاب طفيف نحو المؤشّر
   تكتبه a7.js في --pull-x/--pull-y. */
.hero__disc {
  position: relative;
  transform: translate(var(--pull-x, 0), var(--pull-y, 0));
}

.hero__disc::after {
  position: absolute;
  inset: -6px;
  z-index: -1;
  content: "";
  background: var(--accent);
  border-radius: inherit;
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-std),
    transform var(--dur-slow) var(--ease-std);
  filter: blur(10px);
}

.hero__chip:hover .hero__disc::after {
  opacity: 0.55;
  transform: scale(1.25);
}

/* ------------------------------------------- صدر الشريط: موتيف المائل --- */

/* بدل الحافة المصمتة: ثلاث شرائح مائلة متدرّجة الشفافية عند مقدّمة الصدر.
   تعمل في الاتجاهين لأن `inset-inline-start` منطقيّة لا يسارية. */
.band__head {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to inline-end,
    color-mix(in oklch, var(--accent) 7%, var(--fill-1)),
    var(--fill-1) 42%
  );
}

.band__head::before {
  position: absolute;
  inset-block: -4px;
  inset-inline-start: 10px;
  width: 26px;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    var(--accent) 0 3px,
    transparent 3px 9px
  );
  opacity: 0.55;
  transform: skewX(var(--skew));
}

[dir="rtl"] .band__head::before {
  transform: skewX(calc(-1 * var(--skew)));
}

/* حشوة على الطرفين لا على المقدّمة وحدها: العنوان متمركز، فحشو جهة واحدة
   يزيحه عن المنتصف. المطلوب أن يبتعد عن الموتيف لا أن ينحرف. */
.band__title {
  padding-inline: 26px;
}

/* --------------------------------------------------- الروابط النصّية --- */

/* تسطير ينمو من مقدّمة الرابط، مائل الطرف على نفس زاوية الموتيف. */
.textlink {
  position: relative;
}

.textlink::after {
  position: absolute;
  inset-inline-start: 8px;
  bottom: 8px;
  width: 0;
  height: 2px;
  content: "";
  background: var(--accent);
  border-radius: 2px;
  transition: width var(--dur-hover) var(--ease-std);
}

.textlink:hover::after,
.textlink:focus-visible::after {
  width: calc(100% - 16px);
}

/* ------------------------------------------------------------ الأزرار --- */

/* حافّة سفلية صلبة تنهار عند الضغط: عمق ملموس بدل زرٍّ مسطّح.
   وهي أيضًا ما يجعل البرتقالي يبدو مقصودًا لا صدفة لونية. */
.btn--primary {
  box-shadow:
    0 2px 0 var(--accent-2),
    var(--shadow);
}

.btn--primary:hover:not(:disabled) {
  box-shadow:
    0 3px 0 var(--accent-2),
    var(--shadow-hover);
}

.btn--primary:active:not(:disabled) {
  box-shadow:
    0 0 0 var(--accent-2),
    var(--shadow);
  transform: translateY(2px);
}

.pillform__btn {
  box-shadow: 0 2px 0 var(--accent-2);
  transition:
    transform var(--dur-hover) var(--ease-std),
    box-shadow var(--dur-hover) var(--ease-std),
    opacity var(--dur-hover) var(--ease-std);
}

.pillform__btn:active {
  box-shadow: 0 0 0 var(--accent-2);
  transform: translateY(2px);
}

/* ---------------------------------------------- البطاقات: توهّج المؤشّر --- */

/* `--mx`/`--my` تكتبهما a7.js عند حركة المؤشّر. القيمة الابتدائية في المنتصف
   حتى تبدو البطاقة سليمة قبل أي حركة، وعلى الأجهزة اللمسية التي لا مؤشّر لها. */
.mcard {
  --mx: 50%;
  --my: 50%;
}

.mcard::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    var(--glow-size) circle at var(--mx) var(--my),
    color-mix(in oklch, var(--accent) 30%, transparent),
    transparent 68%
  );
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-std);
}

.mcard:hover::after {
  opacity: 1;
}

.mcard:hover {
  outline: 1px solid color-mix(in oklch, var(--accent) 42%, transparent);
  outline-offset: -1px;
}

/* البلاطات تأخذ نفس المعاملة، فالتفاعل واحد عبر الموقع لا معاملتان. */
.tile:hover {
  border-color: color-mix(in oklch, var(--accent) 38%, transparent);
}

/* ------------------------------------------------------ أرقام تتصاعد --- */

/* الأرقام المتغيّرة تُقرأ أسهل بعرض خانات ثابت — بلا رقصٍ أفقي أثناء العدّ. */
.tabular,
.countup {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ تبديل السمة --- */

/* انتقال قصير على الأسطح وحدها. لا نضعه على `*` لأنه يجعل كل حالة مرور
   في الموقع تتباطأ. */
body,
.mcard,
.band__head,
.tile,
.btn {
  transition:
    background-color var(--dur-hover) var(--ease-std),
    border-color var(--dur-hover) var(--ease-std),
    color var(--dur-hover) var(--ease-std);
}

/* ========================================================================
   الحركة المستمرّة
   ========================================================================

   دورات طويلة (٣٫٤ إلى ٧ ثوانٍ) لا قصيرة. الحركة القصيرة المتكرّرة تسرق
   الانتباه من المحتوى؛ الطويلة تُشعر أن الصفحة حيّة دون أن تُلِحّ.
   ======================================================================== */

@keyframes a7-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

/* حلقة تتّسع ثم تختفي، وتبقى غائبة بقيّة الدورة — فالنبضة حدثٌ لا إيقاع. */
@keyframes a7-halo {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }

  68%,
  100% {
    opacity: 0;
    transform: scale(3.1);
  }
}

@keyframes a7-beat {
  0%,
  100% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.16);
  }
}

/* تبادل لغتَي الصفة: كلٌّ ظاهرة نصف الدورة تقريبًا مع تداخل قصير. */
@keyframes a7-role {
  0%,
  42% {
    opacity: 1;
    transform: translateY(0);
  }

  50%,
  92% {
    opacity: 0;
    transform: translateY(-4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- الأيقونة تطفو داخل القرص ------------------------------------------ */

/* على الأيقونة لا على القرص: القرص يحمل `--pull-x/y` للانجذاب، ووضع حركة
   عليه يدهس ذلك التحويل. الطبقتان تعملان معًا هكذا — قرصٌ ينجذب وأيقونةٌ
   تطفو داخله. */
.hero__disc svg {
  animation: a7-float var(--dur-float) ease-in-out infinite;
}

/* --- هالة نابضة حول القرص ---------------------------------------------- */

.hero__disc::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border: 2px solid var(--accent);
  border-radius: inherit;
  animation: a7-halo var(--dur-pulse) var(--ease-surface) infinite;
}

/* تأخير متدرّج حتى لا تنبض الأقراص الأربعة معًا كإشارة إنذار */
.hero__chip:nth-child(2) .hero__disc::before { animation-delay: 0.85s; }
.hero__chip:nth-child(3) .hero__disc::before { animation-delay: 1.7s; }
.hero__chip:nth-child(4) .hero__disc::before { animation-delay: 2.55s; }

/* الأيقونة تطفو بإزاحات مختلفة أيضًا، فلا تتحرّك الأربعة كجسم واحد */
.hero__chip:nth-child(2) .hero__disc svg { animation-delay: 1.15s; }
.hero__chip:nth-child(3) .hero__disc svg { animation-delay: 2.3s; }
.hero__chip:nth-child(4) .hero__disc svg { animation-delay: 3.45s; }

/* --- النقطة النشطة في المؤشّرات تنبض ----------------------------------- */

.dot[data-on="true"]::before {
  animation: a7-beat var(--dur-pulse) ease-in-out infinite;
}

/* --- الصفة تتبادل اللغتين ---------------------------------------------- */

.roleswap {
  position: relative;
  display: inline-grid;
}

/* الاثنتان في خليّة واحدة: الارتفاع يساوي أطولهما فلا يقفز السطر عند التبديل */
.roleswap__a,
.roleswap__b {
  grid-area: 1 / 1;
  animation: a7-role 7s ease-in-out infinite;
}

.roleswap__b {
  animation-delay: -3.5s;
}

/* ========================================================================
   الظهور بالتمرير — أشكال إضافية
   ======================================================================== */

/* الخطوط الفاصلة تُرسم من مقدّمتها بدل أن تظهر دفعة واحدة. */
.reveal--rule {
  transform: scaleX(0);
  transform-origin: left center;
  filter: none;
}

[dir="rtl"] .reveal--rule {
  transform-origin: right center;
}

.reveal--rule.is-in {
  transform: scaleX(1);
}

/* ========================================================================
   تعديلات المرور
   ======================================================================== */

/* منحنى نابض على البطاقات: تتجاوز هدفها قليلًا ثم تستقرّ. الفرق بينه وبين
   المنحنى القياسي هو الفرق بين «تحرّكت» و«استجابت». */
.mcard,
.tile {
  transition:
    transform var(--dur-spring) var(--ease-pop),
    box-shadow var(--dur-hover) var(--ease-std),
    border-color var(--dur-hover) var(--ease-std),
    outline-color var(--dur-hover) var(--ease-std);
}

.mcard img {
  transition: transform var(--dur-settle) var(--ease-surface);
}

/* البطاقات المجاورة في الرصّة: ضبابية وخفض تشبّع يدفعان العين إلى الوسط. */
.deck__card {
  filter: blur(3px) saturate(0.85);
  transition:
    transform var(--dur-stage) var(--ease-surface),
    opacity var(--dur-stage) var(--ease-surface),
    filter var(--dur-settle) var(--ease-surface);
}

.deck__card[data-active="true"] {
  filter: none;
}

/* --- الرصّة بمنظور --------------------------------------------------- */

/* المنظور على المسرح لا على البطاقات: قيمة واحدة تحكم نقطة التلاشي لكلّها،
   فتبدو مصفوفةً في مشهد واحد لا كلٌّ في مشهدها. */
.deck--flow .deck__stage {
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

.deck--flow .deck__card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* الضبابية تأتي من التنسيق السطري لكل بطاقة بحسب بُعدها، فلا قيمة هنا */
  filter: none;
  transition:
    transform var(--dur-stage) var(--ease-surface),
    opacity var(--dur-stage) var(--ease-surface),
    filter var(--dur-stage) var(--ease-surface);
}

/* بطاقة الرصّة ثلاثية الأبعاد: مربّع مكتفٍ بذاته لا صورة تملأ الإطار */
.flowcard {
  display: grid;
  gap: 10px;
  place-content: center;
  place-items: center;
  padding: 18px;
  text-align: center;
  background: linear-gradient(160deg, var(--fill-2), var(--fill-1));
  border: 1px solid var(--border-soft);
}

.flowcard__ic {
  border-radius: var(--radius-md);
}

.flowcard__t {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--heading);
}

.flowcard__go {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-pill);
}

/* --- رصيف الفلاتر العائم --------------------------------------------- */

/* يظهر حين يخرج شريط الفلاتر من الشاشة، ويختفي عند بلوغ التذييل.
   الفائدة: المعارض طويلة، والعودة إلى أعلى الصفحة لتغيير التصنيف رحلة. */
.filterdock {
  position: fixed;
  inset-inline: 0;
  bottom: 20px;
  z-index: 40;
  display: flex;
  justify-content: center;
  /* الحاوية شفّافة للنقر حتى لا تحجب عرض الصفحة خلفها؛ الزرّ وحده يستقبله */
  pointer-events: none;
  opacity: 0;
  transform: translateY(120%);
  transition:
    transform 0.32s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.24s ease-out;
}

.filterdock[data-show="true"] {
  opacity: 1;
  transform: translateY(0);
}

.filterdock__btn {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  height: 44px;
  padding-inline: 18px;
  pointer-events: auto;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--foreground);
  background: var(--glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sheet);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition:
    transform var(--dur-hover) var(--ease-pop),
    border-color var(--dur-hover) var(--ease-std);
}

.filterdock__btn:hover {
  border-color: color-mix(in oklch, var(--accent) 46%, transparent);
  transform: translateY(-2px);
}

.filterdock__cur {
  color: var(--accent-ink);
}

/* الصفحة خلف الدُّرج تنسحب إلى الخلف بضبابية وخفض سطوع. */
.drawer__scrim {
  backdrop-filter: blur(5px) brightness(0.6);
  -webkit-backdrop-filter: blur(5px) brightness(0.6);
  transition: backdrop-filter var(--dur-spring) var(--ease-surface);
}

/* ------------------------------------------------- احترام تقليل الحركة --- */

@media (prefers-reduced-motion: reduce) {
  .progressbar__fill,
  .hero__disc,
  .hero__disc::after,
  .mcard::after,
  .textlink::after {
    transition: none;
  }

  .hero__disc {
    transform: none;
  }

  .btn--primary:active:not(:disabled),
  .pillform__btn:active {
    transform: none;
  }
}