/* ثبره القابضة — طبقة الحياة.
   قواعد صارمة: transform/opacity فقط (GPU)، صفر مكتبات، و prefers-reduced-motion
   يُطفئ كل شيء. الفخامة هدوء — أي عنصر «يصرخ» يُحذف.
   المحتوى لا يبدأ مخفياً إلا إذا كان JavaScript يعمل فعلاً (بوابة html.js). */

/* ══════════ 1) الشفق المحيطي — يتنفّس خلف كل شيء ══════════ */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, var(--c-panel-1), var(--c-bg-base) 60%);
}

.aurora__a,
.aurora__b {
  position: absolute;
  inline-size: 60vmax;
  block-size: 60vmax;
  border-radius: var(--r-pill);
  filter: blur(90px);
  opacity: .30;
  will-change: transform;
}

.aurora__a {
  background: radial-gradient(circle, var(--c-primary), transparent 62%);
  inset-block-start: -18vmax;
  inset-inline-start: -12vmax;
  animation: drift-a var(--mo-ambient) ease-in-out infinite alternate;
}

.aurora__b {
  background: radial-gradient(circle, var(--c-accent), transparent 62%);
  inset-block-start: 28vmax;
  inset-inline-end: -20vmax;
  opacity: .24;
  animation: drift-b calc(var(--mo-ambient) * 1.45) ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vmax, 5vmax, 0) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-7vmax, -4vmax, 0) scale(1); }
}

/* شبكة خافتة تعطي إحساس العمق والمكان — لا تُرى، تُحسّ. */
.aurora__grid {
  position: absolute;
  inset: -10%;
  opacity: .05;
  background-image:
    linear-gradient(var(--c-primary) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-primary) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(70% 55% at 50% 20%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 55% at 50% 20%, #000, transparent 75%);
  animation: grid-drift calc(var(--mo-ambient) * 3) linear infinite;
}
@keyframes grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(72px, 72px, 0); }
}

/* ══════════ 2) شريط تقدّم القراءة ══════════ */

.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  z-index: 60;
  pointer-events: none;
}
.progress__bar {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  transform: scaleX(0);
  transform-origin: inline-start;
  background: linear-gradient(to inline-end, var(--c-primary), var(--c-accent));
  will-change: transform;
}

/* ══════════ 3) العنصر البطل — نقطة الالتقاء تتنفّس ══════════ */

.convergence__arms { transform-origin: 50% 50%; }

.arm {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.arm--a { animation: converge-a 7s ease-in-out infinite alternate; }
.arm--b { animation: converge-b 7s ease-in-out infinite alternate; }

@keyframes converge-a {
  from { transform: translateX(-3px) scale(1);     opacity: .92; }
  to   { transform: translateX(6px)  scale(0.965); opacity: 1; }
}
@keyframes converge-b {
  from { transform: translateX(3px)  scale(1);     opacity: .92; }
  to   { transform: translateX(-6px) scale(0.965); opacity: 1; }
}

/* النواة تنبض مع كل التقاء. */
.convergence__core {
  transform-origin: 50% 50%;
  animation: core-pulse 7s ease-in-out infinite alternate;
}
@keyframes core-pulse {
  from { transform: scale(.72); opacity: .70; }
  to   { transform: scale(1.14); opacity: 1; }
}

.convergence__halo { animation: halo-breathe 9s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes halo-breathe {
  from { transform: scale(.92); opacity: .75; }
  to   { transform: scale(1.06); opacity: 1; }
}

/* الحلقات تدور ببطء شديد — إحساس مدار لا دوران. */
.convergence__ring { transform-origin: 50% 50%; }
.convergence__ring--1 { animation: spin 46s linear infinite; }
.convergence__ring--2 { animation: spin 64s linear infinite reverse; }
.convergence__ring--3 { animation: spin 90s linear infinite; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ══════════ 4) نطق العنوان كلمةً كلمة ══════════ */
/* بلا JavaScript: الكلمات ظاهرة. مع JavaScript: تحطّ واحدةً تلو الأخرى. */

.speak .w { display: inline-block; }

html.js .speak .w {
  opacity: 0;
  transform: translateY(0.4em);
  animation: land var(--mo-slow) var(--mo-ease) forwards;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
@keyframes land {
  to { opacity: 1; transform: none; }
}

/* ══════════ 5) الدخول الذي يستقرّ ══════════ */

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--mo-slow) var(--mo-ease),
              transform var(--mo-slow) var(--mo-ease);
  transition-delay: var(--d, 0s);
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* مسار الظهور الفوري: تبويب مخفي، أو تقليل حركة، أو عطل في JavaScript.
   يُلغي الانتقال بالكامل فيظهر المحتوى في اللحظة نفسها بدل أن ينتظر إطاراً لن يأتي. */
html.js.instant .speak .w,
html.js.instant .reveal {
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ══════════ 6) احترام تفضيل تقليل الحركة — يُطفئ كل ما سبق ══════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html.js .speak .w,
  html.js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .aurora__a,
  .aurora__b,
  .aurora__grid { animation: none !important; }

  .progress { display: none; }

  .card > article::before { display: none; }
}