/* ===========================================================
   Urealm — مشهد شاشة الدخول.

   **ملفٌّ واحد لكلّ ما يُرى في أوّل شاشة.** وما في `auth.css` هو
   السلوك والحقول والخطوات — لا الشكل. فمن أراد تغيير المشهد يفتح هذا
   وحده، ومن أراد تغيير التدفّق لا يفتحه.

   ── الفكرة ─────────────────────────────────────────────────

   **عالَمٌ يتشكّل، لا كوكبٌ يُصوَّر.**

   الكوكب والنجوم صورةٌ مرّت على كلّ شاشة دخولٍ في السنوات الأخيرة،
   ومن رآها لا يذكر صاحبها. وUrealm ليس فضاءً — هو مكانٌ يبنيه صاحبه.
   فالمشهد هنا **ثلاث ستائرَ من ضوء** تتحرّك ببطءٍ شديد خلف زجاجٍ
   نظيف: لا شكلَ لها يُسمّى، وإنّما لونٌ يتنفّس. تُقرأ حضورًا لا رسمًا،
   وهذا ما يجعلها تحتمل النظر إليها كلّ يوم.

   ── ما يصنع الفرق فعلًا ────────────────────────────────────

   ▸ **الحُبيبات.** طبقةُ ضجيجٍ دقيقة فوق كلّ شيء. بدونها يظهر التدرّج
     الداكن أحزمةً على شاشات ٨ بت — وهو أوّل ما يجعل الواجهة الداكنة
     تبدو رخيصة. وبها يصير السواد **مادّةً** لا فراغًا.

   ▸ **الخيوط لا الحدود.** كلّ فاصلٍ هنا شعرةٌ بشفافيّةٍ محسوبة، لا
     خطًّا رماديًّا. والفرق بين ٨٪ و١٥٪ هو الفرق بين لوحٍ يطفو ومربّعٍ
     مرسوم.

   ▸ **مشهدُ دخولٍ واحد لا مؤثّراتٌ متفرّقة.** الأرض تظهر، ثمّ اللوح
     يصعد، ثمّ العلامة، ثمّ الأزرار واحدًا بعد واحد. حركةٌ واحدة
     منسّقة أثمن من خمسٍ متناثرة.

   ▸ **و`prefers-reduced-motion` تُبقي المشهد وتُسقط الحركة.** من
     طلبها يرى نفس الصورة ساكنةً — لا شاشةً فارغة.
   =========================================================== */

.auth {
  /* ─── المقابض ─────────────────────────────────────────── */

  /* **أبيضُ وأسودُ لا غير.** لا لونَ في هذه الشاشة أصلًا: الستائر
     ضوءٌ أبيضُ خافت على أسودَ تامّ، والعمق يُصنع بالشدّة والحجم لا
     بالصبغة. ولذلك `--veil-power` هنا أقلُّ بكثيرٍ ممّا يحتمله لونٌ
     مشبع — الأبيض على الأسود يصرخ عند أدنى نسبة.

     و`--light` وحدها تنقلب بين الوضعين: بيضاءُ في الليل، سوداءُ في
     النهار. فتبقى الستائر ظاهرةً على الأرضين بلا لونٍ يدخل. */
  --light: #ffffff;

  --veil-power: 0.22;        /* شدّة الستائر كلّها */
  --veil-blur: 100px;        /* نعومتها */

  --grain: 0.045;            /* كثافة الحُبيبات */
  --grain-size: 190px;       /* حجم بلاطتها */

  /* التفاعل مع المؤشّر. `--mx/--my` موضعه (٠..١)، و`--dx/--dy` بُعده
     عن المركز (−٠٫٥..٠٫٥) — تُكتب من جافاسكربت وتُقرأ هنا. */
  --mx: 0.5;
  --my: 0.42;
  --dx: 0;
  --dy: 0;

  --pointer-size: 34rem;     /* اتّساع ضوء المؤشّر */
  --pointer-power: 0.16;     /* شدّته */
  --parallax: 26px;          /* أقصى إزاحةٍ للطبقة الأعمق */
  --tilt: 2.4deg;            /* أقصى ميلٍ للّوح */

  /* الأزمنة. */
  --drift: 34s;              /* بطء تنفّس الستائر */
  --enter: 900ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* **الشاشة تملأ الشاشة.** كانت تُرسم داخل هيكل التطبيق، فيظهر خلفها
   الشريطُ الجانبيّ وقائمةُ عوالمَ لمن لم يدخل بعد. */
.view--auth {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: auto;
  overscroll-behavior: contain;

  /* و`.view` تحصر عرضها وتتوسّط — صوابٌ لكلّ شاشةٍ إلّا هذه. */
  max-inline-size: none;
  margin: 0;
  padding: 0;
}

/* ----------------------- الأرض ----------------------- */

.auth {
  --light: #000000;
  --ground: #fff;
  --pane: rgb(255 255 255 / 74%);
  --hair: rgb(0 0 0 / 10%);
  --hair-lit: rgb(0 0 0 / 20%);
}

:root[data-mode='night'] .auth {
  /* **أسودُ بحت.** لا تدرّجَ ولا ميلَ إلى لون: الأرض صفرٌ تامّ. وعلى
     الأسود التامّ تُقرأ الحُبيبات أوضح، فتُخفَّف لئلّا تصير رملًا. */
  --light: #ffffff;
  --ground: #000;
  --pane: rgb(255 255 255 / 4%);
  --hair: rgb(255 255 255 / 9%);
  --hair-lit: rgb(255 255 255 / 20%);
}

.auth-scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--ground);
}

/* **وتعتيمٌ خفيف يشدّ النظر إلى الوسط.** بدونه ينتشر الضوء إلى
   الأطراف فتُقرأ الشاشة خلفيّةَ سطح مكتب لا واجهةَ تطبيق. */
.auth-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 50%, rgb(0 0 0 / 38%) 100%);
  pointer-events: none;
}

:root[data-mode='day'] .auth-scene::after {
  background: radial-gradient(120% 90% at 50% 45%, transparent 48%, rgb(0 0 0 / 7%) 100%);
}

/* ----------------------- الستائر -----------------------

   **وموضعها فيزيائيّ عمدًا.** الضوء ليس نصًّا يُقرأ في اتّجاه: يبقى
   حيث هو في العربيّة كما في الإنجليزيّة، والذي يتبع اللغة هو اللوح
   وحده. والقاعدة التي تمنع هذا صحيحةٌ في كلّ مكانٍ آخر. */
/* stylelint-disable property-disallowed-list -- الضوء لا يتبع اتّجاه اللغة */

/* **والعمق يُصنع بالفرق لا بالحركة.** لو أُزيحت الطبقات بمقدارٍ واحد
   لتحرّكت الصورة كلّها كصفيحة؛ وباختلاف المقدار تُقرأ بعيدةً وقريبة.
   والإزاحة في `translate` لا في `transform` كي لا تنازع حركةَ
   التنفّس — الخاصّيّتان مستقلّتان وتتركّبان. */
.auth-scene__veil {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--veil-blur));
  opacity: var(--veil-power);
  translate: calc(var(--dx) * var(--depth, 0.4) * var(--parallax))
             calc(var(--dy) * var(--depth, 0.4) * var(--parallax));
  transition: translate 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, translate;
}

/* واحدةٌ تعلو من تحت اللوح — هي التي تُشعر بأنّ شيئًا خلفه. */
.auth-scene__veil--a {
  width: 78vmax;
  height: 52vmax;
  left: 50%;
  top: 34%;
  margin-left: -39vmax;
  --depth: 1;
  background: radial-gradient(closest-side, var(--light), transparent 72%);
  animation: veil-a var(--drift) ease-in-out infinite;
}

/* وثانيةٌ باردة تدخل من الحافّة — بها يتنفّس اللون ولا يستقرّ. */
.auth-scene__veil--b {
  width: 54vmax;
  height: 54vmax;
  left: -14vmax;
  top: -12vmax;
  --depth: -0.55;
  background: radial-gradient(closest-side, var(--light), transparent 70%);
  opacity: calc(var(--veil-power) * 0.5);
  animation: veil-b calc(var(--drift) * 1.35) ease-in-out infinite;
}

/* وثالثةٌ خافتةٌ جدًّا تُوازن الأولى. */
.auth-scene__veil--c {
  width: 46vmax;
  height: 46vmax;
  right: -12vmax;
  bottom: -10vmax;
  --depth: 0.35;
  background: radial-gradient(closest-side, var(--light), transparent 70%);
  opacity: calc(var(--veil-power) * 0.42);
  animation: veil-c calc(var(--drift) * 1.7) ease-in-out infinite;
}

/* ----------------------- ضوء المؤشّر -----------------------

   **والمشهد يعرف أين أنت.** ضوءٌ بارد يتبع المؤشّر، ويمرّ بـ`screen`
   فيجمع نفسه إلى ما تحته بدل أن يغطّيه — وهكذا يضيء ما يمرّ عليه ولا
   يبهته. ويختفي كلّه حين تغادر النافذة.

   ▸ ولا وجود له على اللمس: إصبعٌ لا يحوم، فيبقى الضوء عالقًا حيث
     رُفع آخر مرّة — أثرٌ ميّت. `hover: hover` وحدها تشغّله. */
.auth-scene__pointer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle var(--pointer-size) at calc(var(--mx) * 100%) calc(var(--my) * 100%),
    color-mix(in oklab, var(--light) 60%, transparent),
    transparent 68%
  );
  transition: opacity 500ms ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .auth.is-tracking .auth-scene__pointer { opacity: var(--pointer-power); }
}

/* ----------------------- الحُبيبات -----------------------

   ضجيجٌ مولَّد في الملفّ نفسه: لا صورةَ تُجلب، ولا طلبَ شبكةٍ يفشل في
   نسخةٍ بلا إنترنت. */
.auth-scene__grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: var(--grain-size) var(--grain-size);
  animation: grain-swim 8s steps(1) infinite;
}

/* stylelint-enable property-disallowed-list */

/* ----------------------- اللوح ----------------------- */

/* **زجاجٌ يطفو، لا مستطيلٌ مرسوم.** خيطٌ فاتح على حافّته العليا وحدها
   — الضوء يأتي من فوق، وحدٌّ متساوٍ من كلّ جهةٍ يُلغي ذلك فيُقرأ
   ملصوقًا. والظلّ طويلٌ خافت لا قريبٌ داكن. */
.auth__card {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: var(--pane);
  backdrop-filter: blur(28px) saturate(1.4);
  box-shadow:
    0 1px 0 0 rgb(255 255 255 / 6%) inset,
    0 40px 80px -32px rgb(0 0 0 / 55%),
    0 8px 24px -16px rgb(0 0 0 / 40%);
  animation: pane-rise var(--enter) var(--ease) 60ms both;
}

/* **واللوح يميل قليلًا مع المؤشّر — على غلافٍ لا على نفسه.**

   حركةُ الدخول تملك `transform` الخاصّ باللوح. وكانت المحاولة الأولى
   أن يُنتظر انتهاؤها ثمّ تُلغى بـ`animation: none` ويُسلَّم الميلُ
   زمامَه — وذلك **يُلغي** الحركة لا يُنهيها، فيُرفَض وعدُ `finished`
   بـ`AbortError` لمن كان ينتظره. وهو ما أسقط اختبار الشاشة.

   والغلاف يحلّ الأمرين: لكلٍّ `transform` خاصّته، ولا إلغاءَ ولا
   انتظار. والمقدار صغيرٌ عمدًا — لوحٌ يميل كثيرًا يُقرأ لعبةً لا
   واجهة. */
.auth__tilt {
  inline-size: 100%;
  max-inline-size: 26rem;
  transform:
    perspective(1400px)
    rotateX(calc(var(--dy) * var(--tilt) * -1))
    rotateY(calc(var(--dx) * var(--tilt)));
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* خيطٌ مضيء يعبر الحافّة العليا ويخفت عند الطرفين. تفصيلةٌ لا تُرى
   وحدها، وتُرى إن غابت. */
.auth__card::after {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 18%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-lit), transparent);
  pointer-events: none;
}

/* ----------------------- العلامة ----------------------- */

/* العلامة نفسها، بهالةٍ من تحتها — لا حرفٌ في مربّع. */
.auth__mark {
  inline-size: auto;
  block-size: auto;
  margin: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--fg);
  filter: drop-shadow(0 8px 34px color-mix(in oklab, var(--light) 30%, transparent));
  animation: mark-in var(--enter) var(--ease) 140ms both;
}

.auth__mark > .logo-mark { display: block; margin-inline: auto; }

.auth__title {
  margin-block: var(--sp-5) var(--sp-2);
  letter-spacing: -0.02em;
  animation: rise-in 620ms var(--ease) 220ms both;
}

.auth__lead { animation: rise-in 620ms var(--ease) 280ms both; }

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

/* النصّ في الوسط ولا سهم: السهم يَعِد بقائمةٍ تُفتح، وهذه تفتح نافذة
   مزوّد. والارتفاع سخيّ — الإصبع أعرض من المؤشّر. */
.auth-provider {
  justify-content: center;
  gap: var(--sp-4);
  min-block-size: 52px;
  padding-block: var(--sp-3);
  border-color: var(--hair);
  border-radius: 12px;
  background: color-mix(in oklab, var(--fg) 4%, transparent);
  text-align: center;
  transition: border-color 200ms, background 200ms, transform 200ms;
}

.auth-provider__label { flex: none; }
.auth-provider__go { display: none; }

/* يرتفع قليلًا تحت المؤشّر، وينزل تحت الإصبع. */
.auth-provider:hover {
  border-color: var(--hair-lit);
  background: color-mix(in oklab, var(--fg) 7%, transparent);
  transform: translateY(-1px);
}

.auth-provider:active { transform: translateY(0) scale(0.995); }

/* **ولا وميضَ أزرق عند كلّ لمسة.** والحلقة تبقى لمن يتنقّل بالمفاتيح
   وحده — وهو من صُنعت له. */
.auth,
.auth * { -webkit-tap-highlight-color: transparent; }

.auth :focus:not(:focus-visible) { outline: none; }

.auth :focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 3px;
}

.auth__or { color: var(--fg-mute); }
.auth__switch { margin-block-start: var(--sp-5); }

/* الرابط بلون العلامة، بلا خطٍّ تحته إلّا عند المرور. */
/* **ولا لونَ يميّز الرابط**، فالتمييز بالوزن والخطّ: أبيضُ ثخينٌ
   مسطَّرٌ بخطٍّ خافت يزداد وضوحًا عند المرور. */
.auth__link {
  color: var(--fg);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--hair-lit);
  text-underline-offset: 3px;
}

.auth__link:hover { text-decoration-color: currentcolor; }

/* ----------------------- الزوايا ----------------------- */

.auth__brand,
.auth__toggles {
  position: absolute;
  inset-block-start: var(--sp-5);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  animation: fade-in 700ms var(--ease) 420ms both;
}

.auth__brand {
  inset-inline-start: var(--sp-6);
  gap: var(--sp-2);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.auth__toggles { inset-inline-end: var(--sp-6); }

.auth__switcher {
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--pane);
  backdrop-filter: blur(14px);
}

.auth__switch-btn {
  display: grid;
  place-items: center;
  min-inline-size: 38px;
  block-size: 30px;
  padding-inline: var(--sp-2);
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg-mute);
  font: inherit;
  font-size: var(--fs-1, 0.8rem);
  font-weight: 600;
  cursor: pointer;
  transition: color 180ms, background 180ms;
}

.auth__switch-btn:hover { color: var(--fg); }

.auth__switch-btn[aria-pressed='true'] {
  color: var(--fg);
  background: color-mix(in oklab, var(--fg) 9%, transparent);
}

/* ----------------------- التخطيط ----------------------- */

/* **مركزٌ واحد، لا عمودان.** الكلامُ التسويقيّ بجانب استمارةٍ هو
   قالبُ كلّ صفحةٍ رأيتها؛ والصفحة التي لا شيء فيها إلّا ما جئتَ له
   تُقرأ أثمن. فيسقط العمود، ويبقى الفراغ. */
.auth__aside { display: none; }

.auth {
  display: grid;
  place-items: center;
  min-block-size: 100dvh;
  padding: var(--sp-8) var(--sp-5);
}

.auth__card {
  inline-size: 100%;
  max-inline-size: 26rem;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
}

/* وعلى الجوال يتنفّس أكثر ويقلّ زجاجه: لوحٌ يكاد يملأ العرض لا يفصل
   شيئًا عن شيء. */
@media (max-width: 32rem) {
  .auth { padding-inline: var(--sp-4); }

  .auth__card {
    border-color: transparent;
    padding-inline: var(--sp-3);
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }

  .auth__card::after { display: none; }
  .auth__brand { display: none; }
}

/* ----------------------- الحركة ----------------------- */

@keyframes veil-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4%, -5%, 0) scale(1.1); }
}

@keyframes veil-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(8%, 6%, 0) scale(1.14); }
}

@keyframes veil-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50% { transform: translate3d(-7%, -4%, 0) scale(1); }
}

@keyframes pane-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

@keyframes mark-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes grain-swim {
  0% { background-position: 0 0; }
  25% { background-position: -18px 12px; }
  50% { background-position: 14px -16px; }
  75% { background-position: -8px -6px; }
  100% { background-position: 0 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-scene__veil,
  .auth__card,
  .auth__mark,
  .auth__title,
  .auth__lead,
  .auth__brand,
  .auth__toggles,
  .auth-scene__grain { animation: none; }

  /* ومن طلب السكون لا يتبعه المشهد: تُلغى الإزاحة والميل معًا. */
  .auth-scene__veil { translate: none; }
  .auth__tilt { transform: none; }
}