/* ==========================================================================
   l6NA — Social Hub
   هوية داكنة فضية مصقولة. بدون حركة مستمرة: انتقالات لونية فقط.
   ========================================================================== */

:root {
  /* الأسطح */
  --ink:            #050506;
  --surface:        rgba(255, 255, 255, 0.035);
  --surface-hover:  rgba(255, 255, 255, 0.070);
  --surface-tile:   rgba(255, 255, 255, 0.055);

  /* الحدود */
  --line:           rgba(255, 255, 255, 0.085);
  --line-strong:    rgba(255, 255, 255, 0.180);

  /* النص */
  --fg:             #f2f2f5;
  --fg-2:           #a6a6b0;
  /* #6e6e78 كان يعطي 3.8:1 على سطح البطاقة — أقل من حد WCAG AA (4.5:1) للنص الصغير */
  --fg-3:           #82828c;

  /* الإيقاع */
  --gap:            12px;
  --radius:         16px;
  --radius-tile:    12px;
  --shell-w:        440px;
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --speed:          180ms;

  --font: "Tajawal", ui-sans-serif, system-ui, "Segoe UI",
          "Noto Naskh Arabic", "Arial", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100svh;
  padding: clamp(32px, 8vh, 72px) 20px clamp(40px, 8vh, 72px);
  display: flex;

  background-color: var(--ink);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- الخلفية: طبقات ساكنة تماماً --------------------------------------- */

/* وهج فضي خافت خلف الشعار + عمق أسفل الصفحة */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 36% at 50% 28%,  rgba(255, 255, 255, 0.11), transparent 72%),
    radial-gradient(80% 50% at 50% 100%, rgba(150, 150, 170, 0.06), transparent 70%);
}

/* حبيبات دقيقة تعطي إحساس الخامة — SVG مضمّن، بدون طلب شبكة */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- الهيكل ------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell-w);
  display: flex;
  flex-direction: column;
  /* توسيط رأسي وأفقي. الهوامش التلقائية لا تقصّ المحتوى إذا طال، عكس justify-content */
  margin: auto;
}

/* --- الترويسة ----------------------------------------------------------- */

.profile {
  text-align: center;
  margin-bottom: clamp(28px, 5vh, 40px);
}

.crest {
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}

.crest-mark {
  width: clamp(132px, 33vw, 176px);
  height: auto;
  filter:
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 54px rgba(190, 190, 210, 0.18));
}

.name {
  margin: 0 0 10px;
  font-size: clamp(2rem, 8vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  /* letter-spacing يضيف فراغاً بعد آخر حرف — نلغيه ليبقى الاسم متوسطاً فعلاً */
  margin-inline-end: -0.16em;
  /* الاسم لاتيني: نعزله عن اتجاه الصفحة العربي */
  direction: ltr;
  unicode-bidi: isolate;

  color: var(--fg);
  background: linear-gradient(150deg, #ffffff 0%, #dcdce4 38%, #ffffff 58%, #9d9daa 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

@supports (-webkit-text-fill-color: transparent) {
  .name { -webkit-text-fill-color: transparent; }
}

.bio {
  margin: 0 auto;
  max-width: 38ch;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--fg-2);
  text-wrap: balance;
}

/* --- الروابط ------------------------------------------------------------ */

.links {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;

  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--surface);

  font: inherit;
  color: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;

  transition:
    background-color var(--speed) var(--ease),
    border-color     var(--speed) var(--ease),
    color            var(--speed) var(--ease);
}

.link:hover,
.link:focus-visible {
  background-color: var(--surface-hover);
  border-color: var(--line-strong);
}

.link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}

/* البطاقة المميّزة: خيط فضي علوي + سطح أفتح */
.link.is-featured {
  border-color: rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.06);
}

.link.is-featured::before {
  content: "";
  position: absolute;
  inset-inline: 18%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}

.link.is-featured:hover,
.link.is-featured:focus-visible {
  background-color: rgba(255, 255, 255, 0.095);
  border-color: rgba(255, 255, 255, 0.28);
}

/* الأيقونة */
.link-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background-color: var(--surface-tile);
}

.link-icon img,
.link-icon svg {
  width: 25px;
  height: 25px;
  display: block;
  object-fit: contain;
}

.link-icon svg { color: var(--fg); }

/* النص */
.link-body { min-width: 0; }

.link-title {
  display: block;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.45;
}

.link-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--fg-3);
  /* أسماء المستخدمين لاتينية داخل صفحة عربية */
  unicode-bidi: isolate;
  /* يسمح بسطرين للنصوص الطويلة بدل قصّها على الشاشات الضيقة */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link.is-featured .link-sub { color: var(--fg-2); }

/* السهم — يتجه لنهاية السطر تلقائياً في RTL */
.link-arrow {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
  transition: color var(--speed) var(--ease);
}

.link:hover .link-arrow,
.link:focus-visible .link-arrow { color: var(--fg); }

/* --- التذييل ------------------------------------------------------------ */

.signal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: clamp(26px, 4vh, 36px);
}

.signal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e8e8ee;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.signal-text {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--fg-3);
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- تنبيه النسخ -------------------------------------------------------- */

.toast {
  position: fixed;
  inset-inline: 20px;
  bottom: 24px;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 40px);

  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #141417;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);

  font-size: 0.85rem;
  color: var(--fg);

  opacity: 0;
  visibility: hidden;
  transition: opacity var(--speed) var(--ease), visibility var(--speed);
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
}

/* --- ظهور أولي لمرة واحدة (ليس حركة مستمرة) ---------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .profile,
  .link,
  .signal {
    animation: rise 420ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }

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

/* --- الجوال ------------------------------------------------------------- */

@media (max-width: 380px) {
  .link      { padding: 12px 13px; gap: 12px; }
  .link-icon { width: 42px; height: 42px; }
  .link-icon img,
  .link-icon svg { width: 22px; height: 22px; }
  .name      { letter-spacing: 0.12em; }
}

/* --- تباين عالٍ ---------------------------------------------------------- */

@media (prefers-contrast: more) {
  :root {
    --line: rgba(255, 255, 255, 0.30);
    --fg-2: #d0d0d8;
    --fg-3: #b0b0ba;
  }
}