/* مذكرة «عبدالله الإنسان» — الألوان والخطوط من دليل الهوية */
@font-face {
  font-family: 'Qarandash';
  src: url('../assets/fonts/qarandash.ttf') format('truetype');
  font-display: block;
}

:root {
  --desk: #E6E1D6;
  --paper: #F7F2E7;
  --paper-back: #F1EBDE;
  --ink: #1E2B52;
  --rule: #B9C7DD;
  --cover: #24382F;
  --cover-inside: #2B4136;
  --brass: #D8C79E;
  --sumi: #5A5853;
  --wire: #1B1D1E;
  --hand: 'Qarandash', 'Aref Ruqaa', serif;
  --ui: 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* تُضبط من notebook.js حسب حجم الشاشة */
  --W: 480px;
  --H: 690px;
  --L: 38px;
  --top: 68px;
  --mx: 27px;

  --grain: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--desk);
  background-image: radial-gradient(120% 90% at 50% 35%, #EEEAE0 0%, var(--desk) 55%, #D9D3C6 100%);
  color: var(--ink);
  font-family: var(--ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

.desk {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- المذكرة ---------- */
.notebook {
  position: relative;
  width: var(--W);
  height: var(--H);
  flex: none;
  cursor: grab;
}
.notebook.dragging { cursor: grabbing; }

.pad-depth {
  position: absolute;
  inset: 0;
  border-radius: 3px 3px 5px 5px;
  background: var(--cover);
  box-shadow:
    0 2px 0 #EDE6D6, 0 3px 0 #DCD3C0,
    0 5px 0 #EDE6D6, 0 6px 0 #D6CCB8,
    0 8px 0 #EAE3D2, 0 9px 0 #CFC5AF,
    0 12px 0 var(--cover),
    -1px 4px 0 #E2DAC8, 1px 4px 0 #E2DAC8,
    0 30px 40px -18px rgba(30, 35, 30, .55),
    0 60px 80px -40px rgba(30, 35, 30, .35);
}

.sheet, .face { position: absolute; inset: 0; }
.base { overflow: hidden; border-radius: 3px 3px 4px 4px; }
.base::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 24, 30, .45), rgba(20, 24, 30, .08) 45%, rgba(20, 24, 30, 0) 80%);
  opacity: var(--cast, 0);
}

/* ---------- الصفحات ---------- */
.page {
  position: absolute;
  inset: 0;
  border-radius: 3px 3px 4px 4px;
  overflow: hidden;
}

.paper {
  background-color: var(--paper);
  background-image: var(--grain), linear-gradient(to bottom, rgba(255,255,255,.35), rgba(0,0,0,0) 30%, rgba(120,100,70,.05));
  background-blend-mode: multiply, normal;
}
.paper::before {
  /* شريط الثقوب أعلى الورقة */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--top);
  background: linear-gradient(to bottom, rgba(120, 105, 80, .06), rgba(0,0,0,0));
}
.paper-back { background: var(--paper-back); background-image: var(--grain); background-blend-mode: multiply; }

.lines {
  position: absolute;
  top: var(--top);
  left: 0; right: 0;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 calc(var(--L) * .6 - 1px),
    var(--rule) calc(var(--L) * .6 - 1px) calc(var(--L) * .6),
    transparent calc(var(--L) * .6) var(--L));
  opacity: .9;
}

.content {
  position: absolute;
  top: var(--top);
  right: var(--mx);
  left: var(--mx);
  font-family: var(--hand);
  color: var(--ink);
  line-height: var(--L);
  text-align: right;
}
.content p, .content div { margin: 0; }

.t-title  { font-size: calc(var(--L) * .9);  position: relative; top: calc(var(--L) * -.01); }
.t-phrase { font-size: calc(var(--L) * .72); position: relative; top: calc(var(--L) * .01); }
.t-body   { font-size: calc(var(--L) * .56); position: relative; top: calc(var(--L) * .03); }
.t-small  { font-size: calc(var(--L) * .45); position: relative; top: calc(var(--L) * .045); color: var(--sumi); }

.num {
  position: absolute;
  left: var(--mx);
  font-family: var(--hand);
  font-size: calc(var(--L) * .45);
  line-height: var(--L);
  color: var(--sumi);
}

.content a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
}
.content a:hover { text-decoration: underline; text-decoration-style: wavy; text-decoration-color: rgba(30, 43, 82, .45); text-underline-offset: calc(var(--L) * .14); }
.content a:focus-visible { outline: 2px solid rgba(30, 43, 82, .5); outline-offset: 2px; }

/* الفهرس */
.toc-row { display: flex; align-items: flex-end; gap: calc(var(--L) * .25); }
.toc-row .lead { flex: 1; height: calc(var(--L) * .55); border-bottom: 2px dotted rgba(30, 43, 82, .3); }
.toc-row .pg { font-size: calc(var(--L) * .5); color: var(--sumi); }

/* افتتاحية المقالة */
.figure {
  display: block;
  margin: 0 auto;
  border-radius: 1px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 14px -8px rgba(40, 35, 25, .45);
  object-fit: cover;
}
.end { text-align: center; color: var(--sumi); }
.end-links { text-align: center; }

/* الغلاف */
.cover {
  background-color: var(--cover);
  background-image:
    var(--grain),
    radial-gradient(130% 90% at 30% 15%, rgba(255,255,255,.07), rgba(0,0,0,0) 60%),
    radial-gradient(120% 100% at 50% 110%, rgba(0,0,0,.25), rgba(0,0,0,0) 60%);
  background-blend-mode: soft-light, normal, normal;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 -2px 6px rgba(0,0,0,.2);
}
.cover .logo { position: relative; width: 62%; color: var(--brass); opacity: .93; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.cover .logo svg { display: block; width: 100%; height: auto; }
.cover .logo .l1 { clip-path: inset(0 0 46% 0); }
.cover .logo .l2 { position: absolute; inset: 0; clip-path: inset(54% 0 0 0); }
.cover-inside, .back {
  background-color: var(--cover-inside);
  background-image: var(--grain), radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.05), rgba(0,0,0,0) 60%);
  background-blend-mode: soft-light, normal;
}

/* ---------- السلك ---------- */
.coil {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 50;
}
.coil svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- التقليب ---------- */
.flips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: calc(var(--H) * 2.5);
  perspective-origin: 50% 12%;
  z-index: 20;
}
.flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.seg {
  position: absolute;
  left: 0;
  width: 100%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.seg > .face { overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.seg > .face.back-face { transform: rotateX(180deg); }
.face .wrap { position: absolute; left: 0; width: 100%; height: var(--H); }
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #141820;
  opacity: var(--s, 0);
}

/* ---------- أدوات التحكم ---------- */
.ctrl {
  order: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--sumi);
  opacity: .8;
  transition: opacity .2s;
}
.ctrl:hover, .ctrl:focus-within { opacity: 1; }
.ctrl button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}
.ctrl button:hover { background: rgba(30, 43, 82, .07); color: var(--ink); }
.ctrl button:focus-visible { outline: 2px solid rgba(30, 43, 82, .45); outline-offset: 1px; }
.ctrl button:disabled { opacity: .35; cursor: default; background: transparent; }
.ctrl .pos { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }

.hint {
  order: 1;
  margin: 0 0 -8px;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--sumi);
  opacity: 0;
  transition: opacity .6s;
  pointer-events: none;
}
.hint.on { opacity: .75; }

/* عنصر القياس للتقسيم إلى صفحات */
.measure {
  position: fixed;
  left: -9999px;
  top: 0;
  width: var(--W);
  height: var(--H);
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 520px) {
  .ctrl { font-size: 12px; gap: 0; }
  .ctrl button { padding: 6px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .hint, .ctrl { transition: none; }
}

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

/* المذكرة توضع على المكتب */
.desk.arrive .notebook { animation: arrive 1.25s cubic-bezier(.2, .8, .25, 1) both; }
.desk.arrive .pad-depth { animation: settle-shadow 1.25s cubic-bezier(.2, .8, .25, 1) both; }
.desk.arrive .ctrl, .desk.arrive .hint { animation: fade-in .8s 1.1s both; }
@keyframes arrive {
  from { opacity: 0; transform: translateY(46px) rotate(-2.4deg) scale(.97); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes settle-shadow {
  from { filter: drop-shadow(0 40px 30px rgba(30, 35, 30, .0)); }
  to { filter: none; }
}
@keyframes fade-in { from { opacity: 0; } }

/* الشعار يُكتب من اليمين إلى اليسار، سطرًا بعد سطر */
.base.intro .logo svg {
  -webkit-mask-image: linear-gradient(to left, #000 44%, transparent 56%);
          mask-image: linear-gradient(to left, #000 44%, transparent 56%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0;
          mask-position: 0% 0;
  animation: write-logo 1.1s cubic-bezier(.45, .1, .35, 1) forwards;
}
.base.intro .logo .l1 { animation-delay: .95s; }
.base.intro .logo .l2 { animation-delay: 1.85s; animation-duration: 1.3s; }
@keyframes write-logo {
  to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

/* الحبر ينزل كلمة كلمة على الورقة الجديدة */
.base.writing .w {
  display: inline-block;
  opacity: 0;
  animation: ink .42s cubic-bezier(.3, .6, .3, 1) forwards;
}
.base.writing .figure { opacity: 0; animation: develop 1.1s ease-out forwards; }
.base.held .w, .base.held .figure { animation-play-state: paused; }
@keyframes ink {
  from { opacity: 0; filter: blur(2.4px); transform: translateY(.06em); }
  55% { opacity: .85; }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes develop {
  from { opacity: 0; filter: grayscale(1) contrast(.6) brightness(1.25) blur(1.5px); }
  to { opacity: 1; filter: none; }
}

/* أثر الحبر من ظهر الورقة */
.bleed { position: absolute; inset: 0; opacity: .085; filter: blur(.4px); }
.bleed .paper { background: none; }
.bleed .paper::before, .bleed .lines { display: none; }


@media (prefers-reduced-motion: reduce) {
  .desk.arrive .notebook, .desk.arrive .pad-depth, .base.intro .logo svg, .base.writing .w, .base.writing .figure { animation: none; -webkit-mask: none; mask: none; opacity: 1; }
}

/* ---------- المشهد: صورة المكتب ---------- */
body { background: #5a3d24; }
.desk-photo {
  position: fixed;
  inset: -4%;
  background: #6b4a2c var(--scene) center / cover no-repeat;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.02);
  transition: filter 1.1s ease;
  will-change: transform;
}
.desk-photo::after {
  /* تعتيم خفيف للأطراف يركّز العين على المذكرة */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 70% at 50% 50%, rgba(0,0,0,0) 55%, rgba(30, 18, 8, .35) 100%);
}
.desk.reading .desk-photo { filter: blur(3.5px) brightness(.82) saturate(.9); }

.desk.arrive .desk-photo { animation: focus-in 2.2s cubic-bezier(.25, .7, .2, 1) both; }
@keyframes focus-in {
  from { filter: blur(14px) brightness(.7); transform: translate3d(0, 0, 0) scale(1.16); }
  to { filter: none; transform: translate3d(0, 0, 0) scale(1.02); }
}

/* ظل النافذة نفسه يطيح على المذكرة (نفس الصورة، محوّلة لخريطة ضوء وظل) */
.sun, .warm {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  border-radius: 3px 3px 4px 4px;
}
.sun {
  background-image: var(--scene);
  background-repeat: no-repeat;
  background-size: var(--sw, 100%) var(--sh, 100%);
  background-position: var(--sx, 0) var(--sy, 0);
  filter: grayscale(1) blur(5px) brightness(1.75) contrast(2.1);
  mix-blend-mode: multiply;
  opacity: .62;
  transition: opacity 1.1s ease;
}
.desk.reading .sun { opacity: .45; }
.warm { background: rgba(255, 214, 160, .32); mix-blend-mode: multiply; }

/* ظل المذكرة على المكتب باتجاه الضوء */
.pad-depth {
  box-shadow:
    0 2px 0 #EDE6D6, 0 3px 0 #DCD3C0,
    0 5px 0 #EDE6D6, 0 6px 0 #D6CCB8,
    0 8px 0 #EAE3D2, 0 9px 0 #CFC5AF,
    0 12px 0 var(--cover),
    -1px 4px 0 #E2DAC8, 1px 4px 0 #E2DAC8,
    14px 22px 26px -6px rgba(40, 22, 8, .55),
    34px 50px 60px -20px rgba(40, 22, 8, .4);
}

/* أدوات التحكم فوق الخشب */
.ctrl {
  background: rgba(247, 242, 231, .78);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 3px 6px;
  box-shadow: 0 6px 18px -8px rgba(40, 22, 8, .5);
  opacity: .92;
}
.hint {
  color: #F7F2E7;
  text-shadow: 0 1px 6px rgba(30, 18, 8, .7);
}

/* ---------- خامات حقيقية (صور) ---------- */
.paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,.25), rgba(0,0,0,0) 28%, rgba(110, 90, 60, .05)),
    url('../assets/textures/paper.jpg');
  background-size: 100% 100%, cover;
  background-position: center;
  background-blend-mode: normal;
}
.paper-back {
  background-image: linear-gradient(rgba(120, 100, 70, .06), rgba(120, 100, 70, .06)), url('../assets/textures/paper.jpg');
  background-size: cover;
  background-blend-mode: normal;
}
.cover {
  background-image:
    radial-gradient(130% 90% at 30% 15%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%),
    radial-gradient(120% 100% at 50% 110%, rgba(0,0,0,.28), rgba(0,0,0,0) 60%),
    url('../assets/textures/cover.jpg');
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
  background-blend-mode: normal;
}
.cover-inside, .back {
  background-image: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12)), url('../assets/textures/cover.jpg');
  background-size: cover;
  background-blend-mode: normal;
}

/* ---------- الليل: لمبة مكتب بدل ضوء النافذة ---------- */
.desk.night .sun { filter: grayscale(1) blur(10px) brightness(1.35) contrast(1.5); opacity: .9; }
.desk.night.reading .sun { opacity: .72; }
.desk.night .warm { background: rgba(255, 184, 110, .42); }
.desk.night .pad-depth {
  box-shadow:
    0 2px 0 #EDE6D6, 0 3px 0 #DCD3C0,
    0 5px 0 #EDE6D6, 0 6px 0 #D6CCB8,
    0 8px 0 #EAE3D2, 0 9px 0 #CFC5AF,
    0 12px 0 var(--cover),
    -1px 4px 0 #E2DAC8, 1px 4px 0 #E2DAC8,
    -10px 26px 30px -6px rgba(10, 5, 0, .7),
    -24px 50px 70px -20px rgba(10, 5, 0, .55);
}
.desk.night .ctrl { background: rgba(40, 30, 20, .55); color: #E9DFC9; }
.desk.night .ctrl button:hover { background: rgba(255, 240, 210, .1); color: #fff; }

/* ---------- صنعة المذكرة: ميلان، سماكة، ظل تلامس ---------- */
:root { --tilt: -2.2deg; }
.notebook { transform: rotate(var(--tilt)); }
@keyframes arrive {
  from { opacity: 0; transform: translateY(46px) rotate(calc(var(--tilt) - 3deg)) scale(.97); }
  60% { opacity: 1; }
  to { opacity: 1; transform: rotate(var(--tilt)); }
}
.sun-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px 3px 4px 4px;
  pointer-events: none;
  z-index: 40;
  mix-blend-mode: multiply;   /* المزج هنا: الغلاف يكوّن سياقًا معزولًا فلا يصل مزج الطبقة الداخلية للورق */
}
.sun-clip .sun {
  mix-blend-mode: normal;
  inset: auto;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  border-radius: 0;
  transform: rotate(calc(var(--tilt) * -1));
}
/* سماكة الأوراق تظهر أسفل ويمين المذكرة (الضوء من أعلى اليسار)، ثم الغلاف، ثم ظل التلامس */
.pad-depth,
.desk.night .pad-depth {
  box-shadow:
    1px 1px 0 #EFE8D9, 1px 2px 0 #D8CEBA,
    2px 3px 0 #ECE5D4, 2px 4px 0 #D2C8B2,
    3px 5px 0 #E9E1CF, 3px 6px 0 #CDC2AB,
    4px 7px 0 #E6DECB, 4px 8px 0 #C8BDA5,
    5px 10px 0 var(--cover),
    6px 12px 5px rgba(30, 15, 3, .45),
    16px 26px 30px -6px rgba(40, 22, 8, .42),
    34px 52px 70px -24px rgba(40, 22, 8, .38);
}
.desk.night .pad-depth { filter: brightness(.8); }
/* انحناء خفيف عند الزاوية السفلية للورقة */
.base::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top left, rgba(255,255,255,.18), rgba(255,255,255,0) 14%),
    linear-gradient(to bottom, rgba(0,0,0,0) 92%, rgba(60, 40, 15, .06));
}

/* ---------- المكتب يتنفّس (فيديو) ---------- */
.desk-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.desk-photo.live .desk-video { opacity: 1; }
.desk-photo::after { z-index: 1; }
.sun-live { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.sun.live .sun-live { opacity: 1; }
/* مع الفيديو: ظل أوضح وتفاصيل أدق حتى تُرى حركة الأغصان على الورق */
.desk .sun.live { filter: grayscale(1) blur(2.5px) brightness(1.7) contrast(2.4); opacity: .7; }
.desk.reading .sun.live { opacity: .5; }
.desk.night .sun.live { filter: grayscale(1) blur(6px) brightness(1.35) contrast(1.6); opacity: .9; }

/* ظل أغصان الزيتون المتحرك (فوق المكتب والمذكرة، تحت الأزرار) */
.leaves {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: multiply;
  filter: blur(7px);
  opacity: .3;
  transition: opacity 1.1s ease;
}
.desk.reading .leaves { opacity: .2; }
.ctrl, .hint { position: relative; z-index: 6; }

/* الورقة أثناء التقليب: فوق طبقة الضوء (ارتفعت عن سطح الظل) بدفء موحّد، ومنظور أهدأ */
.flips { z-index: 45; perspective: calc(var(--H) * 3.6); }
.seg > .face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(255, 214, 160, .3);
  mix-blend-mode: multiply;
}
.desk.night .seg > .face::before { background: rgba(200, 140, 80, .55); }
.seg > .face::after { z-index: 2; }

/* الليل: ضوء اللمبة على الورق ناعم ومتدرّج، بلا بقع */
.desk.night .sun,
.desk.night .sun.live { filter: grayscale(1) blur(16px) brightness(1.45) contrast(1.25); opacity: .55; }
.desk.night.reading .sun,
.desk.night.reading .sun.live { opacity: .42; }

/* الدفء على الورقة المتحركة بفلتر على كل شريحة (لا مزج) حتى لا تظهر خطوط عند تداخل الشرائح */
.seg > .face::before { display: none; }
.seg > .face { filter: sepia(.18) brightness(.98); }
.desk.night .seg > .face { filter: sepia(.32) brightness(.8) saturate(1.05); }

/* الورقة المتحركة تحت الضوء ما دامت قريبة من الصفحة، وفوقه فقط حين ترتفع */
.flips { z-index: 20; }
.flips.lifted { z-index: 45; }
.flips:not(.lifted) .seg > .face { filter: none; }

/* ---------- الليل: الورق يأخذ لون ضوء اللمبة من صورة المكتب نفسها (بالألوان، لا رمادي) ---------- */
.desk.night .sun,
.desk.night .sun.live { filter: blur(18px) brightness(2.05) saturate(1.15) contrast(.9); opacity: .9; }
.desk.night.reading .sun,
.desk.night.reading .sun.live { opacity: .8; }
.desk.night .warm { background: rgba(255, 200, 140, .12); }
/* الورقة المرتفعة أثناء التقليب بنفس دفء اللمبة تقريبًا */
.desk.night .flips.lifted .seg > .face { filter: sepia(.6) saturate(1.5) hue-rotate(-6deg) brightness(.82); }
.desk.night .pad-depth { filter: sepia(.5) brightness(.7); }
.desk.night .sun,
.desk.night .sun.live { filter: blur(18px) saturate(.5) brightness(1.7) contrast(.85); opacity: .72; }
.desk.night.reading .sun,
.desk.night.reading .sun.live { opacity: .62; }
.desk.night .flips.lifted .seg > .face { filter: sepia(.45) saturate(1.15) brightness(.84); }

/* ---------- الإضاءة داخل الورقة المتحركة نفسها ---------- */
.flips, .flips.lifted { z-index: 45; }
.seg > .face, .flips:not(.lifted) .seg > .face, .desk.night .seg > .face, .desk.night .flips.lifted .seg > .face { filter: none; isolation: isolate; }
.seg > .face::before { display: none; }
.face-sun {
  position: absolute;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  pointer-events: none;
  transform: rotate(calc(var(--tilt) * -1));
  background-image: var(--scene);
  background-repeat: no-repeat;
  background-size: var(--sw, 100%) var(--sh, 100%);
  background-position: var(--sx, 0) var(--sy, 0);
  mix-blend-mode: multiply;
  filter: grayscale(1) blur(5px) brightness(1.75) contrast(2.1);
  opacity: .62;
}
.desk.reading .face-sun { opacity: .45; }
.face-warm { position: absolute; inset: 0; pointer-events: none; background: rgba(255, 214, 160, .32); mix-blend-mode: multiply; }
.desk.night .face-warm { background: rgba(255, 200, 140, .12); }

/* ---------- ضوء اللمبة بالليل: دافي متدرّج بلا ألوان الأغصان ---------- */
.desk.night .sun,
.desk.night .sun.live,
.desk.night .face-sun { filter: grayscale(1) sepia(.75) saturate(1.3) blur(18px) brightness(1.55) contrast(.9); opacity: .78; }
.desk.night.reading .sun,
.desk.night.reading .sun.live,
.desk.night.reading .face-sun { opacity: .66; }

/* ---------- خط العناوين ---------- */
@font-face {
  font-family: 'PanoramaNaskh';
  src: url('../assets/fonts/panorama-naskh.otf') format('opentype');
  font-display: block;
}
.t-title, .t-phrase { font-family: 'PanoramaNaskh', var(--hand); }
.desk.night .sun,
.desk.night .sun.live,
.desk.night .face-sun { filter: grayscale(1) sepia(1) saturate(1.7) hue-rotate(-8deg) blur(18px) brightness(1.4) contrast(.95); opacity: .85; }
.desk.night.reading .sun,
.desk.night.reading .sun.live,
.desk.night.reading .face-sun { opacity: .75; }

/* ---------- الشريطة: تتدلى من أسفل المذكرة وتعيدك لآخر صفحة قرأتها ---------- */
.ribbon {
  position: absolute;
  right: 16%;
  bottom: -46px;
  width: 16px;
  height: 64px;
  border: 0;
  padding: 0;
  z-index: 3;
  cursor: pointer;
  background: linear-gradient(90deg, #17213f, #2a3a6b 45%, #1E2B52 60%, #141c36);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  box-shadow: 2px 3px 6px rgba(20, 10, 0, .4);
  transform-origin: 50% 0;
  animation: ribbon-sway 4.5s ease-in-out infinite;
}
.ribbon:hover { filter: brightness(1.25); }
.ribbon:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@keyframes ribbon-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }

.resume {
  order: 1;
  position: relative;
  z-index: 6;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink);
  background: rgba(247, 242, 231, .85);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: -8px;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(40, 22, 8, .5);
}
.resume:hover { background: #F7F2E7; }

/* ---------- مشاركة جملة ---------- */
.share-pop {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(30, 43, 82, .94);
  box-shadow: 0 12px 30px -10px rgba(10, 10, 20, .6);
  font-family: var(--ui);
  font-size: 13px;
}
.share-pop button { font: inherit; color: #F7F2E7; background: none; border: 0; border-radius: 8px; padding: 8px 14px; text-align: right; cursor: pointer; }
.share-pop button:hover, .share-pop button:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.toast {
  position: fixed;
  z-index: 1300;
  left: 50%;
  top: max(18px, env(safe-area-inset-top));
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(30, 43, 82, .92);
  color: #F7F2E7;
  font-family: var(--ui);
  font-size: 13px;
  max-width: calc(100vw - 32px);
  overflow-wrap: anywhere;
}

/* ---------- القراءة المريحة ---------- */
.r-veil { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 12, 4, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.reader {
  position: fixed;
  z-index: 1001;
  top: max(16px, env(safe-area-inset-top));
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  background: var(--paper) url('../assets/textures/paper.jpg') center / cover;
  border-radius: 4px;
  box-shadow: 0 30px 70px -20px rgba(10, 5, 0, .7);
  --rs: 24px;
}
.reader[hidden], .r-veil[hidden] { display: none; }
.r-bar { display: flex; justify-content: flex-start; gap: 4px; padding: 10px 12px 4px; font-family: var(--ui); font-size: 13px; }
.r-bar button { font: inherit; color: var(--ink); background: rgba(30, 43, 82, .06); border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.r-bar button:hover { background: rgba(30, 43, 82, .12); }
.r-bar #r-close { margin-inline-start: auto; }
.r-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px clamp(20px, 7vw, 64px) 64px;
  font-family: var(--hand);
  color: var(--ink);
  font-size: var(--rs);
  line-height: 1.95;
  user-select: text;
  -webkit-user-select: text;
}
.r-scroll .r-date { font-size: calc(var(--rs) * .75); color: var(--sumi); }
.r-scroll .r-title { font-family: 'PanoramaNaskh', var(--hand); font-weight: 400; font-size: calc(var(--rs) * 1.7); margin: 0 0 .6em; line-height: 1.4; }
.r-scroll p { margin: 0 0 .9em; max-width: 34em; }
body.reader-on .desk { pointer-events: none; }

@media (max-width: 520px) {
  .ctrl .pos { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ribbon { animation: none; } }

.share-pop[hidden], .toast[hidden], .resume[hidden], .ribbon[hidden] { display: none; }

/* ---------- اختيار جملة للمشاركة ---------- */
.desk.picking .notebook { cursor: pointer; }
.desk.picking #base .content p { cursor: pointer; }
::highlight(pick) { background-color: rgba(196, 160, 90, .45); }
.share-menu button { white-space: nowrap; }

/* ---------- معاينة البطاقة ---------- */
#card-veil { z-index: 1100; }
.card-preview {
  position: fixed;
  z-index: 1101;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
}
.card-preview[hidden] { display: none; }
.card-preview img {
  display: block;
  width: auto;
  height: auto;
  max-height: min(72vh, 660px);
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 30px 70px -20px rgba(10, 5, 0, .75);
}
.card-actions { display: flex; gap: 8px; font-family: var(--ui); font-size: 14px; }
.card-actions button { font: inherit; border: 0; border-radius: 999px; padding: 9px 20px; cursor: pointer; }
#card-share { background: var(--ink); color: #F7F2E7; }
#card-cancel { background: rgba(247, 242, 231, .85); color: var(--ink); }
.card-actions button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.desk.picking #base .content p:hover { background: rgba(196, 160, 90, .16); box-shadow: 0 0 0 4px rgba(196, 160, 90, .16); border-radius: 3px; }

/* رسم بالحبر بخلفية شفافة: كأنه مرسوم على صفحة المذكرة نفسها */
.figure.ink { box-shadow: none; object-fit: contain; mix-blend-mode: multiply; border-radius: 0; }

/* ---------- ترتيب نص المقالة: سطر فاضي بين الفقرات، ونداءات بلون ---------- */
.t-body { font-size: calc(var(--L) * .5); top: calc(var(--L) * .05); word-spacing: -.06em; }
.content p.t-body { margin-bottom: var(--L); }
.content p.t-body:last-child { margin-bottom: 0; }
.content .call, .r-scroll p.call { color: #4C6A8F; }
.desk.night .content .call { color: #5B7193; }

/* ---------- رقم الصفحة على اليمين ---------- */
.num { left: auto; right: var(--mx); }

/* ---------- الشريطة: ساتان يخرج من بين الأوراق ---------- */
.base { z-index: 2; }
.ribbon {
  bottom: auto;
  top: calc(100% - 14px);        /* طرفها العلوي مخفي تحت الورقة */
  right: 17%;
  width: 22px;
  height: 96px;
  background: none;
  clip-path: none;
  box-shadow: none;
  z-index: 1;
  filter: drop-shadow(2px 4px 3px rgba(30, 15, 3, .45)) drop-shadow(5px 9px 8px rgba(30, 15, 3, .25));
  animation: ribbon-sway 5.5s ease-in-out infinite;
}
.ribbon svg { display: block; width: 100%; height: 100%; }
.ribbon:hover { filter: drop-shadow(2px 4px 3px rgba(30, 15, 3, .45)) brightness(1.2); }
@keyframes ribbon-sway { 0%, 100% { transform: rotate(-1.5deg) skewX(.5deg); } 50% { transform: rotate(2deg) skewX(-.8deg); } }
.desk.night .ribbon svg { filter: brightness(.8) sepia(.2); }
.ribbon { right: 5%; height: 84px; }

.ctrl button.off, .ctrl button.off:hover { opacity: .32; pointer-events: none; background: transparent; }

.r-scroll .r-figure { display: block; width: min(360px, 80%); height: auto; margin: 0 auto 1.4em; }
.r-scroll .r-figure.ink { mix-blend-mode: multiply; }

/* ---------- تحديد مقطع للمشاركة ---------- */
.desk.picking #base .content { -webkit-user-select: text; user-select: text; }
.desk.picking #base .content ::selection, .r-scroll ::selection { background: rgba(196, 160, 90, .5); color: inherit; }
.pick-bar {
  position: fixed;
  z-index: 900;
  left: 50%;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 56px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 24px);
  padding: 6px 6px 6px 8px;
  padding-inline-start: 14px;
  border-radius: 999px;
  background: rgba(30, 43, 82, .94);
  color: #F7F2E7;
  font-family: var(--ui);
  font-size: 13px;
  box-shadow: 0 12px 30px -10px rgba(10, 10, 20, .6);
}
.pick-bar[hidden] { display: none; }
.pick-bar span { opacity: .85; }
.pick-bar button { font: inherit; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; }
#pick-go { background: #F7F2E7; color: var(--ink); }
#pick-go:disabled { opacity: .4; cursor: default; }
#pick-cancel { background: transparent; color: #F7F2E7; }
#r-quote:disabled { opacity: .4; cursor: default; }
@media (max-width: 520px) { .pick-bar span { display: none; } }

.pick-bar { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 64px); }
.pick-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42ch; }

/* =================== تحسينات القراءة =================== */
/* خط أوضح: كتابة بقلم حبر بدل قلم رصاص (نفس الخط، أسمك وأغمق) */
.content { color: #17224A; }
.t-body, .t-small, .num, .r-scroll p {
  -webkit-text-stroke: calc(var(--L, 44px) * .011) currentColor;
  paint-order: stroke fill;
}
.t-body { font-size: calc(var(--L) * .52); }
.r-scroll p { -webkit-text-stroke: .025em currentColor; }

/* إضاءة الورق وقت القراءة ناعمة ومتساوية؛ المشهد السينمائي يبقى على المكتب */
.desk.reading .sun, .desk.reading .sun.live, .desk.reading .face-sun { opacity: .2; }
.desk.night.reading .sun, .desk.night.reading .sun.live, .desk.night.reading .face-sun {
  filter: grayscale(1) sepia(1) saturate(1.5) hue-rotate(-8deg) blur(40px) brightness(1.55) contrast(.6);
  opacity: .5;
}
.desk.reading .leaves { opacity: .1; }

/* شريط التنقل: مجموعتان، خط أكبر وتباين أوضح */
.ctrl {
  background: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
  padding: 0;
  gap: 10px;
  opacity: 1;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 15px;
  color: var(--ink);
}
.ctrl .grp {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(247, 242, 231, .9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px -10px rgba(40, 22, 8, .55);
}
.ctrl button { padding: 8px 14px; color: var(--ink); font-weight: 500; }
.ctrl .pos { min-width: 72px; color: var(--sumi); font-size: 14px; }
.desk.night .ctrl { background: none; color: #F1E7D2; }
.desk.night .ctrl .grp { background: rgba(38, 28, 18, .78); }
.desk.night .ctrl button, .desk.night .ctrl .pos { color: #F1E7D2; }
@media (max-width: 520px) {
  .ctrl { font-size: 14px; gap: 6px; }
  .ctrl button { padding: 7px 10px; }
  .ctrl .pos { display: inline; min-width: 0; font-size: 12px; }
}

/* لا يظهر المشهد قبل أن تجهز الصورة والخط معًا */
body:not(.ready) .desk { visibility: hidden; }
/* حافة الأوراق تأخذ نفس إضاءة الورقة */
.pad-depth { filter: sepia(.25) brightness(.93); }
.desk.night .pad-depth { filter: sepia(.6) saturate(1.2) brightness(.62); }
.desk.night.reading .pad-depth { filter: sepia(.5) saturate(1.1) brightness(.78); }

/* ضبابية المكتب وقت القراءة: حركة الافتتاح تنتهي عليها مباشرة، والتبديل أسرع */
.desk-photo { --rest: none; transition: filter .45s ease; }
.desk.reading .desk-photo { --rest: blur(3.5px) brightness(.82) saturate(.9); }
@keyframes focus-in {
  from { filter: blur(14px) brightness(.7); transform: translate3d(0, 0, 0) scale(1.16); }
  to { filter: var(--rest); transform: translate3d(0, 0, 0) scale(1.02); }
}

/* مسافة فوق المذكرة للسلك */
.notebook { margin-top: calc(var(--L) * .9); }

/* الجوال الطولي: تعتيم الأطراف أخف حتى يبان المكتب فوق المذكرة وتحتها */
@media (max-aspect-ratio: 2/3) {
  .desk-photo::after { background: radial-gradient(90% 60% at 50% 50%, rgba(0,0,0,0) 60%, rgba(30, 18, 8, .22) 100%); }
}

/* أزرار البطاقة: الحفظ هو الأساسي، والمشاركة ثانوية */
#card-save { background: var(--ink); color: #F7F2E7; }
#card-share { background: rgba(247, 242, 231, .85); color: var(--ink); }
.card-actions button[hidden] { display: none; }

/* زر النهار والليل */
.ctrl .theme { display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; }
.ctrl .theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* يظهر رمز الوضع الذي سينتقل إليه: قمر في النهار، وشمس في الليل */
.ctrl .theme .i-sun { display: none; }
.desk.night .ctrl .theme .i-sun { display: inline; }
.desk.night .ctrl .theme .i-moon { display: none; }

/* الجوال: الشريط سطران متساويان بعرض المذكرة، والأزرار موزعة بالتساوي */
@media (max-width: 520px) {
  .ctrl { flex-direction: column; align-items: stretch; gap: 8px; width: min(100%, var(--W)); font-size: 14px; }
  .ctrl .grp { justify-content: space-between; padding: 3px 4px; gap: 0; }
  .ctrl .grp > * { flex: 1 1 0; text-align: center; padding: 9px 4px; white-space: nowrap; }
  .ctrl .grp .theme { flex: 0 0 auto; padding: 9px 14px; }
  .ctrl .pos { font-size: 12px; min-width: 0; }
}

/* الجوال الطولي: خطوط ألواح الخشب في الصورة الممدودة تطلع على الغلاف كخطوط؛ ضوء أنعم يخفيها */
@media (max-aspect-ratio: 2/3) {
  .desk:not(.reading) .sun, .desk:not(.reading) .face-sun { filter: grayscale(1) blur(14px) brightness(1.7) contrast(1.6); }
  .desk.night:not(.reading) .sun, .desk.night:not(.reading) .face-sun { filter: grayscale(1) sepia(1) saturate(1.7) hue-rotate(-8deg) blur(34px) brightness(1.4) contrast(.85); }
}

/* تلاشي التبديل بين النهار والليل */
.theme-veil {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 90% at 50% 45%, #F3E6CC, #D9C29A);
  transition: opacity .9s cubic-bezier(.4, 0, .2, 1);
}
.theme-veil.to-night { background: radial-gradient(120% 90% at 50% 45%, #2A1D12, #120B06); }
.theme-veil.on { opacity: .92; transition-duration: .42s; }
@media (prefers-reduced-motion: reduce) { .theme-veil { transition: none; } }