/* ═══════════════════════════════════════════════════════════════
   LB AGENCY — bio-white.css : صفحات الروابط الخاصة (تصميم أبيض)
   خلفية بيضاء، خط بسيط (IBM Plex) لكل النص، والرقعة لاسم المؤثرة فقط.
   كل الكتابة والأيقونات بالأسود. داخل كل زر: الإنجليزي يسار والعربي يمين.
   ═══════════════════════════════════════════════════════════════ */
@font-face { font-family: "Aref Ruqaa"; font-weight: 700; font-display: swap; src: url("../assets/fonts/aref-ruqaa-arabic-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 400; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex"; font-weight: 500; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex"; font-weight: 700; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex"; font-weight: 400; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Plex"; font-weight: 500; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Plex"; font-weight: 700; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body.bio {
  min-height: 100vh; min-height: 100svh;
  background: #ffffff; color: #000;
  font-family: "Plex", system-ui, sans-serif; line-height: 1.6;
  display: flex; justify-content: center;
  padding: 2rem 1.25rem 2.5rem; overflow-x: hidden;
}
.bio-wrap { position: relative; width: 100%; max-width: 30rem; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* زخرفة خفيفة جدًا بالخلفية */
.bio-deco { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; }
.bio-deco.d1 { width: 340px; height: 340px; inset-block-start: -140px; inset-inline-end: -120px; background: radial-gradient(circle, rgba(46,70,63,.10), transparent 70%); animation: bfloat 14s ease-in-out infinite alternate; }
.bio-deco.d2 { width: 280px; height: 280px; inset-block-end: -110px; inset-inline-start: -100px; background: radial-gradient(circle, rgba(168,132,59,.12), transparent 70%); animation: bfloat 18s ease-in-out infinite alternate-reverse; }
.bio-deco.d3 { width: 14px; height: 14px; inset-block-start: 22%; inset-inline-start: 8%; border-radius: 0;
  background: #a8843b; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: btw 3.2s ease-in-out infinite; }
@keyframes bfloat { to { transform: translate(-30px, 40px) scale(1.1); } }
@keyframes btw { 50% { opacity: .2; transform: rotate(90deg) scale(.6); } }
.bio-wrap > *:not(.bio-deco) { position: relative; z-index: 1; }

.bio-brand img { width: 64px; height: 64px; display: block; object-fit: contain; }
.bio-brand { margin-block-end: 1.4rem; }
.bio-avatar { width: 128px; height: 128px; border-radius: 50%; padding: 3px; border: 1.5px solid #000; margin-block-end: 1.1rem; animation: bin .7s ease both; }
.bio-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 25%; display: block; }
.bio-name { font-family: "Aref Ruqaa", serif; font-weight: 700; font-size: 2.2rem; line-height: 1.7; color: #000; animation: bin .7s .08s ease both; }
.bio-role { font-size: .92rem; color: #000; margin-block-end: 1.8rem; animation: bin .7s .14s ease both; }
.bio-role .sep { opacity: .45; margin-inline: .3rem; }

.bio-links { width: 100%; display: grid; gap: .75rem; }
.bio-link {
  direction: ltr; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.2rem; border: 1.5px solid #000; border-radius: 14px;
  background: #fff; color: #000; text-decoration: none; font-weight: 500; font-size: .98rem;
  transition: background .25s, color .25s, transform .25s;
  opacity: 0; animation: bin .55s ease forwards;
}
.bio-link:nth-child(1) { animation-delay: .2s; } .bio-link:nth-child(2) { animation-delay: .27s; } .bio-link:nth-child(3) { animation-delay: .34s; }
.bio-link:nth-child(4) { animation-delay: .41s; } .bio-link:nth-child(5) { animation-delay: .48s; } .bio-link:nth-child(6) { animation-delay: .55s; }
.bio-link:nth-child(7) { animation-delay: .62s; } .bio-link:nth-child(8) { animation-delay: .69s; }
.bl-en { display: inline-flex; align-items: center; gap: .6rem; }
.bl-ar { direction: rtl; font-weight: 500; }
.ico { width: 20px; height: 20px; fill: currentColor; flex: none; }
.ico-img { height: 20px; width: auto; max-width: 70px; object-fit: contain; flex: none; filter: grayscale(1) contrast(1.4); }
.bio-link:hover, .bio-link:focus-visible { background: #000; color: #fff; transform: translateY(-2px); outline: none; }
.bio-link:hover .ico-img { filter: grayscale(1) invert(1); }
.bio-link.bl-main { background: #000; color: #fff; }
.bio-link.bl-main:hover { background: #2e463f; border-color: #2e463f; }

.bio-foot { margin-block-start: 2.2rem; padding-block-start: 1.2rem; border-top: 1px solid rgba(0,0,0,.15); width: 100%; font-size: .78rem; color: #000; display: grid; gap: .25rem; }
.bio-foot strong { font-weight: 700; }
.bio-logos { display: flex; justify-content: center; align-items: center; gap: 1.4rem; margin-block-start: .9rem; }
.bio-logos img { height: 56px; width: auto; object-fit: contain; }
@keyframes bin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bio-deco, .bio-avatar, .bio-name, .bio-role, .bio-link { animation: none; opacity: 1; } }