/* ════════════════════════════════════════════════════════════════════════════
   1) الخطوط — محفوظة داخل الموقع (assets/fonts)
   ════════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: "Aref Ruqaa"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/aref-ruqaa-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Aref Ruqaa"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/aref-ruqaa-arabic-700-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Aref Ruqaa"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/aref-ruqaa-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-200B, U+200F, U+2012-204E, U+2050-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Aref Ruqaa"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/aref-ruqaa-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-200B, U+200F, U+2012-204E, U+2050-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/amiri-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/amiri-arabic-700-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/amiri-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-200B, U+200F, U+2012-204E, U+2050-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/amiri-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-200B, U+200F, U+2012-204E, U+2050-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ════════════════════════════════════════════════════════════════════════════
   2) متغيّرات عامة
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --font-title: "Aref Ruqaa", "Amiri", "Geeza Pro", "Noto Naskh Arabic", serif;
  --font-body: "Amiri", "Geeza Pro", "Noto Naskh Arabic", "Traditional Arabic", serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* 1% من عرض/ارتفاع المسرح — يضبطهما الكود بالبكسل (القيمتان هنا احتياط) */
  --vw: 1vw;
  --vh: 1vh;

  --fs-xs:   clamp(14px, calc(var(--vw) * 3.6), 15px);     /* أصغر من 14px يصير خط أميري صعب القراءة */
  --fs-sm:   clamp(14px, calc(var(--vw) * 3.9), 16px);
  --fs-body: clamp(16px, calc(var(--vw) * 4.6), 20px);
  --fs-lg:   clamp(19px, calc(var(--vw) * 5.5), 24px);
  --fs-xl:   clamp(23px, calc(var(--vw) * 6.9), 31px);
  --fs-2xl:  clamp(29px, calc(var(--vw) * 8.8), 42px);
  --fs-3xl:  clamp(38px, calc(var(--vw) * 12),  60px);
  --fs-hero: clamp(84px, calc(var(--vw) * 34),  170px);

  --pad-x: 24px;
  --hud-top: 60px;          /* ارتفاع منطقة الزوايا العلوية (زر الكتم/المعاينة) */
  --next-zone: 112px;       /* المساحة المحجوزة أسفل كل مشهد لزر «التالي» */
  --max-w: 30rem;

  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --fade: #000;
  --grain-img: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   3) الثيمات — كلها متغيّرات CSS
      لكل ثيم نغمتان: room (المشاهد الداخلية) و night (مشاهد الليل والسماء).
      العنصر الذي يحمل data-tone يثبّت نغمته لنفسه ولكل ما بداخله.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── مخمل أحمر (الأساسي) ── */
:root,
[data-theme="velvet"],
[data-theme="velvet"] [data-tone="room"] {
  color-scheme: dark;
  --bg-0: #1f0009;  --bg-1: #3b0010;  --bg-2: #6d0b24;  --bg-rgb: 31, 0, 9;
  --ink: #fbe9e4;   --ink-rgb: 251, 233, 228;
  --gold-1: #f0cf86; --gold-2: #e0b96a; --gold-3: #a87b35; --gold-hi: #fff4d2; --gold-rgb: 224, 185, 106;
  --accent: #c41e45; --accent-rgb: 196, 30, 69;
  --petal-1: #d81b45; --petal-2: #7a0a22; --petal-edge: rgba(0, 0, 0, 0); --heart: #e8486a;
  --paper: #f8ecd8; --paper-2: #ecd9b8; --paper-ink: #3d1a14;
  --glow-rgb: 255, 232, 196;
  --vig-rgb: 0, 0, 0; --vig-a: .62; --grain-a: .085;
}
[data-theme="velvet"] [data-tone="night"] {
  --bg-0: #060208;  --bg-1: #180513;  --bg-2: #3a0c25;  --bg-rgb: 6, 2, 8;
  --ink: #fbe9e4;   --ink-rgb: 251, 233, 228;
  --gold-1: #f0cf86; --gold-2: #e0b96a; --gold-3: #a87b35; --gold-hi: #fff4d2; --gold-rgb: 224, 185, 106;
  --accent: #c41e45; --accent-rgb: 196, 30, 69;
  --petal-1: #d81b45; --petal-2: #7a0a22; --petal-edge: rgba(0, 0, 0, 0); --heart: #e8486a;
  --paper: #f8ecd8; --paper-2: #ecd9b8; --paper-ink: #3d1a14;
  --glow-rgb: 255, 232, 196;
  --vig-rgb: 0, 0, 0; --vig-a: .66; --grain-a: .085;
}

/* ── سينما ذهبية ── */
[data-theme="cinema"],
[data-theme="cinema"] [data-tone="room"] {
  color-scheme: dark;
  --bg-0: #050403;  --bg-1: #14110b;  --bg-2: #302613;  --bg-rgb: 5, 4, 3;
  --ink: #f7ecd6;   --ink-rgb: 247, 236, 214;
  --gold-1: #f8dc98; --gold-2: #e6b955; --gold-3: #96702a; --gold-hi: #fff7dc; --gold-rgb: 230, 185, 85;
  --accent: #d19a2e; --accent-rgb: 209, 154, 46;
  --petal-1: #b5122e; --petal-2: #5c0918; --petal-edge: rgba(0, 0, 0, 0); --heart: #e6b955;
  --paper: #f6ead0; --paper-2: #e6d2a6; --paper-ink: #2b2112;
  --glow-rgb: 255, 236, 190;
  --vig-rgb: 0, 0, 0; --vig-a: .7; --grain-a: .1;
}
[data-theme="cinema"] [data-tone="night"] {
  --bg-0: #020204;  --bg-1: #0b0c14;  --bg-2: #1d1b28;  --bg-rgb: 2, 2, 4;
  --ink: #f7ecd6;   --ink-rgb: 247, 236, 214;
  --gold-1: #f8dc98; --gold-2: #e6b955; --gold-3: #96702a; --gold-hi: #fff7dc; --gold-rgb: 230, 185, 85;
  --accent: #d19a2e; --accent-rgb: 209, 154, 46;
  --petal-1: #b5122e; --petal-2: #5c0918; --petal-edge: rgba(0, 0, 0, 0); --heart: #e6b955;
  --paper: #f6ead0; --paper-2: #e6d2a6; --paper-ink: #2b2112;
  --glow-rgb: 255, 236, 190;
  --vig-rgb: 0, 0, 0; --vig-a: .7; --grain-a: .1;
}

/* ── ورد جوري ── */
[data-theme="rose"],
[data-theme="rose"] [data-tone="room"] {
  color-scheme: dark;
  --bg-0: #2b0719;  --bg-1: #510f31;  --bg-2: #8e2355;  --bg-rgb: 43, 7, 25;
  --ink: #fff0f3;   --ink-rgb: 255, 240, 243;
  --gold-1: #f9dcc4; --gold-2: #efb99a; --gold-3: #b9755c; --gold-hi: #fff6ee; --gold-rgb: 239, 185, 154;
  --accent: #f0568a; --accent-rgb: 240, 86, 138;
  --petal-1: #ff8fb1; --petal-2: #c7356a; --petal-edge: rgba(0, 0, 0, 0); --heart: #ff9ebb;
  --paper: #fff3ee; --paper-2: #f6d9d3; --paper-ink: #4a1730;
  --glow-rgb: 255, 226, 220;
  --vig-rgb: 20, 0, 10; --vig-a: .6; --grain-a: .08;
}
[data-theme="rose"] [data-tone="night"] {
  --bg-0: #0f030c;  --bg-1: #2a0a23;  --bg-2: #521746;  --bg-rgb: 15, 3, 12;
  --ink: #fff0f3;   --ink-rgb: 255, 240, 243;
  --gold-1: #f9dcc4; --gold-2: #efb99a; --gold-3: #b9755c; --gold-hi: #fff6ee; --gold-rgb: 239, 185, 154;
  --accent: #f0568a; --accent-rgb: 240, 86, 138;
  --petal-1: #ff8fb1; --petal-2: #c7356a; --petal-edge: rgba(0, 0, 0, 0); --heart: #ff9ebb;
  --paper: #fff3ee; --paper-2: #f6d9d3; --paper-ink: #4a1730;
  --glow-rgb: 255, 226, 220;
  --vig-rgb: 8, 0, 6; --vig-a: .66; --grain-a: .08;
}

/* ── ياسمين الشام (فاتح) ── */
[data-theme="jasmine"],
[data-theme="jasmine"] [data-tone="room"] {
  color-scheme: light;
  --bg-0: #dfe6cf;  --bg-1: #f4f4e6;  --bg-2: #ffffff;  --bg-rgb: 244, 244, 230;
  --ink: #24382b;   --ink-rgb: 36, 56, 43;
  /* ذهب أغمق درجةً على الخلفية الفاتحة: النص الذهبي ≥ 3.7:1 واللمعة لا تذوب في الخلفية */
  --gold-1: #9c7620; --gold-2: #85621c; --gold-3: #6f5312; --gold-hi: #b78c33; --gold-rgb: 156, 118, 32;
  --accent: #4f7f57; --accent-rgb: 79, 127, 87;
  --petal-1: #ffffff; --petal-2: #e2e8c9; --petal-edge: rgba(70, 100, 70, .38); --heart: #c9a14a;
  --paper: #fffdf4; --paper-2: #f0ecd4; --paper-ink: #2c3a2e;
  --glow-rgb: 255, 255, 236;
  --vig-rgb: 60, 84, 52; --vig-a: .26; --grain-a: .06;
}
[data-theme="jasmine"] [data-tone="night"] {
  color-scheme: dark;
  --bg-0: #06120d;  --bg-1: #0f261b;  --bg-2: #1d4532;  --bg-rgb: 6, 18, 13;
  --ink: #f2f6e9;   --ink-rgb: 242, 246, 233;
  --gold-1: #f3dc9c; --gold-2: #dfc071; --gold-3: #9d7f36; --gold-hi: #fffbe6; --gold-rgb: 223, 192, 113;
  --accent: #7fb88a; --accent-rgb: 127, 184, 138;
  --petal-1: #ffffff; --petal-2: #e6edd2; --petal-edge: rgba(0, 0, 0, 0); --heart: #f3dc9c;
  --paper: #fffdf4; --paper-2: #f0ecd4; --paper-ink: #2c3a2e;
  --glow-rgb: 244, 255, 232;
  --vig-rgb: 0, 0, 0; --vig-a: .62; --grain-a: .08;
}

/* ── عاجي ناعم (فاتح) ── */
[data-theme="ivory"],
[data-theme="ivory"] [data-tone="room"] {
  color-scheme: light;
  --bg-0: #e4d6bd;  --bg-1: #f5ecdc;  --bg-2: #fffaf0;  --bg-rgb: 245, 236, 220;
  --ink: #4b3226;   --ink-rgb: 75, 50, 38;
  /* ذهب أغمق درجةً على الخلفية الفاتحة: النص الذهبي ≥ 3.4:1 واللمعة لا تذوب في الخلفية */
  --gold-1: #a2772a; --gold-2: #8a6424; --gold-3: #76531a; --gold-hi: #b98a36; --gold-rgb: 162, 119, 42;
  --accent: #b9697a; --accent-rgb: 185, 105, 122;
  --petal-1: #eeb0b5; --petal-2: #cc7a88; --petal-edge: rgba(120, 60, 60, .2); --heart: #d98a98;
  --paper: #fffdf8; --paper-2: #f0e4cf; --paper-ink: #4b3226;
  --glow-rgb: 255, 248, 230;
  --vig-rgb: 96, 64, 30; --vig-a: .28; --grain-a: .065;
}
[data-theme="ivory"] [data-tone="night"] {
  color-scheme: dark;
  --bg-0: #120d0b;  --bg-1: #261b17;  --bg-2: #4a352b;  --bg-rgb: 18, 13, 11;
  --ink: #f8eedd;   --ink-rgb: 248, 238, 221;
  --gold-1: #f0cf86; --gold-2: #e0b96a; --gold-3: #a87b35; --gold-hi: #fff4d2; --gold-rgb: 224, 185, 106;
  --accent: #d98a98; --accent-rgb: 217, 138, 152;
  --petal-1: #f2bcc1; --petal-2: #cc7a88; --petal-edge: rgba(0, 0, 0, 0); --heart: #e9a3ae;
  --paper: #fffdf8; --paper-2: #f0e4cf; --paper-ink: #4b3226;
  --glow-rgb: 255, 236, 206;
  --vig-rgb: 0, 0, 0; --vig-a: .62; --grain-a: .085;
}

/* ── زمرد ملكي ── */
[data-theme="emerald"],
[data-theme="emerald"] [data-tone="room"] {
  color-scheme: dark;
  --bg-0: #021410;  --bg-1: #053526;  --bg-2: #0c6048;  --bg-rgb: 2, 20, 16;
  --ink: #eef8f1;   --ink-rgb: 238, 248, 241;
  --gold-1: #f3d88f; --gold-2: #dcb55d; --gold-3: #98782f; --gold-hi: #fff6d6; --gold-rgb: 220, 181, 93;
  --accent: #1fb585; --accent-rgb: 31, 181, 133;
  --petal-1: #f6e8cc; --petal-2: #d9b46c; --petal-edge: rgba(0, 0, 0, 0); --heart: #f3d88f;
  --paper: #f7f1df; --paper-2: #e6dcbc; --paper-ink: #10362a;
  --glow-rgb: 236, 255, 226;
  --vig-rgb: 0, 0, 0; --vig-a: .62; --grain-a: .085;
}
[data-theme="emerald"] [data-tone="night"] {
  --bg-0: #010a08;  --bg-1: #031d17;  --bg-2: #073a2d;  --bg-rgb: 1, 10, 8;
  --ink: #eef8f1;   --ink-rgb: 238, 248, 241;
  --gold-1: #f3d88f; --gold-2: #dcb55d; --gold-3: #98782f; --gold-hi: #fff6d6; --gold-rgb: 220, 181, 93;
  --accent: #1fb585; --accent-rgb: 31, 181, 133;
  --petal-1: #f6e8cc; --petal-2: #d9b46c; --petal-edge: rgba(0, 0, 0, 0); --heart: #f3d88f;
  --paper: #f7f1df; --paper-2: #e6dcbc; --paper-ink: #10362a;
  --glow-rgb: 236, 255, 226;
  --vig-rgb: 0, 0, 0; --vig-a: .66; --grain-a: .085;
}

/* ════════════════════════════════════════════════════════════════════════════
   4) الأساس
   ════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
  background: #000;
}

body {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
img, svg, canvas { display: block; }
[hidden] { display: none !important; }

button, select, input, textarea {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-appearance: none; appearance: none; }
select, input, textarea { font-size: 16px; }     /* لا أقل من 16px حتى لا يكبّر آيفون الصفحة */
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 3px; }

.app {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  overflow: clip;            /* clip يمنع التمرير البرمجي أيضًا (focus / scrollIntoView)؛ المتصفحات الأقدم تبقى على hidden */
  background: var(--bg-0);
}

/* ── طبقات الخلفية ── */
.bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: var(--bg-0); overflow: hidden; }
.bg-layer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1800ms ease;
  background: var(--bg-0);
  pointer-events: none;
}
.bg-layer.is-live { visibility: visible; }
.bg-layer.is-active { opacity: 1; }
.bg-layer:not(.is-live) *, .bg-layer:not(.is-live) *::before, .bg-layer:not(.is-live) *::after { animation-play-state: paused !important; }

/* ── قماش المؤثرات (بتلات/قلوب/قصاصات) ── */
.fx { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ── المسرح والمشاهد ── */
.stage, .hud {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.stage { z-index: 2; }

.scene {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--safe-t) + 20px) calc(var(--safe-r) + var(--pad-x)) calc(var(--safe-b) + var(--next-zone)) calc(var(--safe-l) + var(--pad-x));
  overflow: hidden;
  overflow: clip;
  color: var(--ink);
}
.scene.is-active { display: flex; }

/* ── النصوص المشتركة ── */
.eyebrow { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.7; color: var(--gold-2); }
.title { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.55; color: var(--gold-1); text-wrap: balance; }
.subtitle { font-family: var(--font-body); font-size: var(--fs-lg); line-height: 1.8; color: var(--ink); text-wrap: balance; }
.text { font-size: var(--fs-body); line-height: 1.95; color: rgba(var(--ink-rgb), .9); text-wrap: pretty; }
.footnote { font-size: var(--fs-xs); line-height: 1.7; color: rgba(var(--ink-rgb), .6); }
.hint { font-size: var(--fs-sm); line-height: 1.7; color: rgba(var(--ink-rgb), .78); animation: hint-pulse 2.6s ease-in-out infinite; }
@keyframes hint-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ذهب لامع متحرّك (للأسماء والعناوين الكبيرة). الحشو يمنع قصّ أطراف خط الرقعة. */
.gold-text {
  color: var(--gold-1);
  background-image: linear-gradient(100deg, var(--gold-3) 0%, var(--gold-2) 18%, var(--gold-1) 34%, var(--gold-hi) 50%, var(--gold-1) 66%, var(--gold-2) 82%, var(--gold-3) 100%);
  background-size: 240% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: .32em .22em .42em;
  margin: -.32em -.22em -.42em;
  animation: gold-sheen 5.5s linear infinite;
}
@keyframes gold-sheen { from { background-position: 100% 50%; } to { background-position: -71.4286% 50%; } }   /* إزاحة تساوي بلاطة كاملة = حلقة بلا قفزة */

/* خط زخرفي فاصل */
.rule { width: min(62%, 220px); height: 14px; margin: 14px auto; position: relative; opacity: .9; }
/* فجوة الخط حول المعيّن مرسومة داخل التدرّج نفسه، فتبدو صحيحة فوق أي خلفية */
.rule::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--gold-rgb), 0), rgba(var(--gold-rgb), .9) 30%, rgba(var(--gold-rgb), .9) calc(50% - 9px), rgba(var(--gold-rgb), 0) calc(50% - 9px), rgba(var(--gold-rgb), 0) calc(50% + 9px), rgba(var(--gold-rgb), .9) calc(50% + 9px), rgba(var(--gold-rgb), .9) 70%, rgba(var(--gold-rgb), 0)); }
.rule::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; transform: rotate(45deg); background: var(--gold-2); }

/* ── الظهور التدريجي: أضف الصنف rv ثم is-in عبر ctx.reveal ── */
.rv { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 1s ease, transform 1.1s var(--ease-out); will-change: opacity, transform; }
.rv.rv-fade { transform: none; }
.rv.rv-scale { transform: scale(.92); }
.rv.rv-down { transform: translate3d(0, -14px, 0); }
.rv.is-in { opacity: 1; transform: none; }

/* ── الأزرار ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; min-width: 132px; padding: 6px 30px 8px;
  font-family: var(--font-title); font-weight: 700; font-size: var(--fs-lg); line-height: 1.4;
  color: var(--gold-1);
  background: rgba(var(--bg-rgb), .38);
  border: 1px solid rgba(var(--gold-rgb), .7);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .14), 0 10px 28px rgba(0, 0, 0, .28);
  text-decoration: none;
  transition: transform .18s ease, background-color .25s ease, box-shadow .25s ease;
}
.btn:active { transform: scale(.96); background: rgba(var(--gold-rgb), .2); }
/* زر يظهر تدريجيًا (btn + rv): نجمع الانتقالين حتى لا يُلغي أحدهما الآخر */
.btn.rv { transition: opacity 1s ease, transform 1.1s var(--ease-out), background-color .25s ease, box-shadow .25s ease; }
.btn.rv.is-in { transition: opacity 1s ease, transform .3s ease, background-color .25s ease, box-shadow .25s ease; }
.btn--solid {
  color: var(--bg-0);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  border-color: var(--gold-1);
  box-shadow: 0 10px 30px rgba(var(--gold-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn--solid:active { background: linear-gradient(180deg, var(--gold-2), var(--gold-2)); }
.btn--ghost { border-color: rgba(var(--gold-rgb), .35); color: rgba(var(--ink-rgb), .82); box-shadow: none; font-size: var(--fs-body); min-height: 46px; }

/* ════════════════════════════════════════════════════════════════════════════
   5) الأزرار الثابتة: «التالي» + كتم الصوت
   ════════════════════════════════════════════════════════════════════════════ */
.hud { z-index: 5; pointer-events: none; }
.hud > * { pointer-events: auto; }

.next {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-b) + 28px);
  transform: translate3d(-50%, 16px, 0);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 150px; min-height: 54px; padding: 4px 26px 6px 30px;
  font-family: var(--font-title); font-weight: 700; font-size: var(--fs-lg); line-height: 1.4;
  color: var(--gold-1);
  background: rgba(var(--bg-rgb), .42);
  border: 1px solid rgba(var(--gold-rgb), .75);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .14), 0 12px 32px rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .8s ease, transform .9s var(--ease-out), visibility 0s linear .8s, background-color .25s ease;
  white-space: nowrap;
}
.next.is-in { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(-50%, 0, 0); transition-delay: 0s; }
/* التوهّج النابض: ظلّ ثابت على طبقة منفصلة تتغيّر شفافيتها فقط (لا box-shadow متحرّك = لا إعادة رسم كل إطار) */
.next::after {
  content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px;
  border-radius: inherit;
  box-shadow: 0 0 22px 2px rgba(var(--gold-rgb), .28), inset 0 0 0 1px rgba(var(--gold-rgb), .16);
  opacity: 0;
  pointer-events: none;
}
.next.is-in::after { animation: next-glow 3.2s ease-in-out 1.2s infinite; }
.next:active { background: rgba(var(--gold-rgb), .22); }
.next-arrow { width: 20px; height: 20px; margin-inline-start: 8px; flex: none; animation: next-nudge 1.8s ease-in-out infinite; }
@keyframes next-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes next-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }

.mute {
  position: absolute;
  top: calc(var(--safe-t) + 10px);
  left: calc(var(--safe-l) + 10px);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-1);
  background: rgba(var(--bg-rgb), .4);
  border: 1px solid rgba(var(--gold-rgb), .4);
  border-radius: 50%;
  opacity: .78;
  transition: opacity .3s ease, transform .18s ease;
}
.mute:active { transform: scale(.92); opacity: 1; }
.mute svg { width: 22px; height: 22px; }
.mute .mute-off { display: none; }
.mute.is-muted .mute-on { display: none; }
.mute.is-muted .mute-off { display: block; }
.mute.is-muted { opacity: .55; }

/* ════════════════════════════════════════════════════════════════════════════
   6) لمسات السينما
   ════════════════════════════════════════════════════════════════════════════ */
.vignette {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 46%, rgba(var(--vig-rgb), 0) 42%, rgba(var(--vig-rgb), calc(var(--vig-a) * .42)) 74%, rgba(var(--vig-rgb), var(--vig-a)) 100%);
  transition: background 1.2s ease;
}
.fade {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9;
  background: var(--fade);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.fade.is-on { opacity: 1; pointer-events: auto; }
.grain {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 10; pointer-events: none;
  background-image: var(--grain-img);
  background-size: 128px 128px;
  opacity: var(--grain-a);
  animation: grain-shift 1.2s steps(1, end) infinite;
  will-change: transform;
}
@keyframes grain-shift {
  0% { transform: translate3d(0, 0, 0); }
  12% { transform: translate3d(-5%, 3%, 0); }
  25% { transform: translate3d(4%, -6%, 0); }
  37% { transform: translate3d(-7%, -2%, 0); }
  50% { transform: translate3d(6%, 5%, 0); }
  62% { transform: translate3d(-3%, 7%, 0); }
  75% { transform: translate3d(7%, -4%, 0); }
  87% { transform: translate3d(-6%, 6%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* نجوم متلألئة جاهزة (App.starfield) */
.starfield-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; animation: star-twinkle 5s ease-in-out infinite; }
@keyframes star-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* الشهاب يتحرّك نحو طرفه الأيسر: الرأس المضيء هناك، والذيل يطول خلفه */
.shooting-star {
  position: absolute; top: 12%; left: 70%; width: 110px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  opacity: 0; transform: rotate(-32deg) translate3d(0, 0, 0); transform-origin: 0 50%;
  animation: star-shoot 9s ease-in 3s infinite;
}
@keyframes star-shoot {
  0% { opacity: 0; transform: rotate(-32deg) translate3d(0, 0, 0) scaleX(.2); }
  2% { opacity: 1; }
  9% { opacity: 0; transform: rotate(-32deg) translate3d(-260px, 0, 0) scaleX(1); }
  100% { opacity: 0; transform: rotate(-32deg) translate3d(-260px, 0, 0) scaleX(1); }
}

/* ════════════════════════════════════════════════════════════════════════════
   7) المعاينة، تدوير الجوال، شاشة التحميل
   ════════════════════════════════════════════════════════════════════════════ */
.preview {
  position: absolute; z-index: 20;
  top: calc(var(--safe-t) + 10px); right: calc(var(--safe-r) + 10px);
  display: flex; align-items: center; gap: 6px;
  max-width: calc(100% - 80px);
  padding: 4px 6px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(var(--gold-rgb), .45);
  border-radius: 12px;
  font-family: var(--font-body);
  color: #fff;
  direction: rtl;
}
.preview-tag { font: inherit; font-size: 13px; line-height: 1.4; min-height: 34px; padding: 0 8px; color: #f0cf86; white-space: nowrap; background: none; border: 0; border-radius: 8px; cursor: pointer; }
/* بعد ثوانٍ تنطوي اللوحة إلى كلمة «معاينة» فقط حتى لا تغطي العناوين؛ لمسها يفتحها */
.preview.is-collapsed { padding: 0 2px; background: rgba(0, 0, 0, .35); border-color: rgba(var(--gold-rgb), .25); }
.preview.is-collapsed select { display: none; }
.preview select {
  font-size: 16px; line-height: 1.3; max-width: 34vw; min-height: 34px; padding: 2px 6px;
  color: #fff; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px;
}
.preview select option { color: #111; background: #fff; }

.rotate {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 40;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-0); color: var(--gold-1);
  font-family: var(--font-title); font-size: 22px; text-align: center;
}
.rotate svg { width: 54px; height: 54px; margin-bottom: 10px; animation: rotate-hint 2.4s ease-in-out infinite; }
@keyframes rotate-hint { 0%, 20% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (orientation: landscape) and (max-height: 480px) { .rotate { display: flex; } }

.loader {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  transition: opacity .9s ease;
}
.loader span { width: 10px; height: 10px; border-radius: 50%; background: #e0b96a; box-shadow: 0 0 18px 4px rgba(224, 185, 106, .5); animation: loader-beat 1.2s ease-in-out infinite; }
@keyframes loader-beat { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.25); opacity: 1; } }
.loader.is-done { opacity: 0; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════════════════
   8) احترام «تقليل الحركة»
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .grain { animation: none !important; }
  .rv { transform: none !important; }
  .bg-layer { transition-duration: .4s !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ١ — القفل (سماء ليل + عدّاد تنازلي)
   ════════════════════════════════════════════════════════════════════════════ */
#bg-lock {
  background:
    radial-gradient(120% 70% at 50% 108%, var(--bg-2) 0%, rgba(var(--bg-rgb), 0) 62%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 70%, var(--bg-2) 135%);
}
#bg-lock .lock-bg-stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#bg-lock .lock-bg-moon {
  position: absolute;
  top: calc(var(--safe-t) + var(--vh) * 9);
  left: 14%;
  width: calc(var(--vw) * 13);
  height: calc(var(--vw) * 13);
  max-width: 64px; max-height: 64px;
  border-radius: 50%;
  box-shadow: inset calc(var(--vw) * 3.2) calc(var(--vw) * -1) 0 0 var(--gold-hi);
  filter: drop-shadow(0 0 14px rgba(var(--glow-rgb), .5));
  transform: rotate(-18deg);
  opacity: .92;
}
#bg-lock .lock-bg-haze {
  position: absolute; left: -10%; right: -10%; bottom: -6%; height: 46%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(var(--gold-rgb), .16), rgba(var(--gold-rgb), 0) 70%);
}

#scene-lock { padding-bottom: calc(var(--safe-b) + 40px); }
#scene-lock .lock-emblem { width: clamp(46px, calc(var(--vw) * 15), 64px); color: var(--gold-1); margin-bottom: calc(var(--vh) * 2); filter: drop-shadow(0 0 14px rgba(var(--gold-rgb), .45)); }
#scene-lock .lock-emblem svg { width: 100%; height: auto; overflow: visible; }
#scene-lock .lock-shackle { transform-origin: 45px 34px; transition: transform 1s var(--ease-spring); }
#scene-lock .lock-heart { transform-origin: 32px 50px; animation: lock-beat 2.4s ease-in-out infinite; }
@keyframes lock-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.16); } 24% { transform: scale(1); } 36% { transform: scale(1.1); } 48% { transform: scale(1); } }

#scene-lock .lock-title { margin: calc(var(--vh) * .6) 0 calc(var(--vh) * 3); font-size: var(--fs-xl); }

#scene-lock .lock-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(7px, calc(var(--vw) * 2.4), 12px);
  width: 100%;
  max-width: 380px;
  direction: rtl;
}
#scene-lock .lock-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--vw) * 2.6) 2px calc(var(--vw) * 2.2);
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .07), rgba(var(--ink-rgb), .02));
  border: 1px solid rgba(var(--gold-rgb), .38);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(var(--gold-rgb), .18);
}
#scene-lock .lock-num {
  display: block;
  min-width: 2.1ch;
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(30px, calc(var(--vw) * 10.4), 48px);
  line-height: 1.35;
  color: var(--gold-1);
  text-shadow: 0 0 18px rgba(var(--gold-rgb), .35);
  font-variant-numeric: tabular-nums;
}
#scene-lock .lock-num.is-tick { animation: lock-tick .45s var(--ease-out); }
@keyframes lock-tick { from { opacity: .35; transform: translateY(-18%); } to { opacity: 1; transform: none; } }
#scene-lock .lock-lbl { font-size: var(--fs-xs); line-height: 1.5; color: rgba(var(--ink-rgb), .72); }

#scene-lock .lock-sub { margin-top: calc(var(--vh) * 3.2); font-size: var(--fs-body); color: rgba(var(--ink-rgb), .88); }
#scene-lock .footnote { margin-top: 4px; }

/* لحظة الفتح */
#scene-lock.is-ready .lock-count { opacity: .55; transition: opacity .8s ease; }
#scene-lock.is-open .lock-shackle { transform: rotate(38deg) translateY(-3px); }
#scene-lock.is-open .lock-emblem { transition: transform 1.2s var(--ease-out), filter 1.2s ease; transform: scale(1.25); filter: drop-shadow(0 0 26px rgba(var(--gold-rgb), .9)); }
#scene-lock.is-open .lock-count, #scene-lock.is-open .lock-sub, #scene-lock.is-open .footnote, #scene-lock.is-open .eyebrow { opacity: 0; transition: opacity .9s ease; }

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ٢ — البوابة (صالة سينما معتمة + شعاع آلة العرض)
   ════════════════════════════════════════════════════════════════════════════ */
#bg-gate {
  --gate-lx: calc(var(--safe-r) + 32px);        /* موضع العدسة: في الزاوية المقابلة لزر الكتم وعلى ارتفاعه */
  --gate-ly: calc(var(--safe-t) + 32px);
  --gate-reach: calc(var(--vh) * 118);          /* طول الشعاع (يطابق REACH في logic.js) */
  --gate-tilt: 29deg;                           /* ميل محور الشعاع عن العمودي نحو اليسار (يطابق TILT في logic.js) */
  background:
    radial-gradient(90% 44% at 14% 104%, rgba(var(--glow-rgb), .035) 0%, rgba(var(--glow-rgb), 0) 72%),
    radial-gradient(150% 50% at 50% 118%, var(--bg-2) 0%, rgba(var(--bg-rgb), 0) 74%),
    radial-gradient(130% 72% at 100% 0%, var(--bg-1) 0%, rgba(var(--bg-rgb), 0) 64%),
    linear-gradient(205deg, var(--bg-1) 0%, var(--bg-0) 54%, var(--bg-0) 100%);
}

/* عمود بعرض المسرح (حتى تبقى العدسة فوق النص على الشاشات العريضة) */
#bg-gate .gate-col { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-width: 540px; margin: 0 auto; }

/* ── ضوء الشعاع ──
   ثلاث لوحات بحجم العمود تقريبًا، زاويتها العليا اليمنى = العدسة. يرسمها الكود مرة واحدة بدقّة منخفضة
   (الضوء ناعم فلا يحتاج أكثر) فتبقى كل طبقة صورة ثابتة؛ الحركة شفافية ودوران فقط، بلا أقنعة ولا مرشّحات. */
#bg-gate .gate-beam,
#bg-gate .gate-rays {
  position: absolute; top: var(--gate-ly); right: var(--gate-lx);
  width: calc(100% - var(--gate-lx) + 24px);
  height: calc(100% - var(--gate-ly) + 24px);
  transform-origin: 100% 0%;
}

/* شفافية المخروط الأساسي هي «قوة المصباح»: ترتعش قليلًا في السكون، وتقفز عند الضغط على «ابدئي» (آلة العرض تشتغل).
   الانتقال يكفي وحده عند «تقليل الحركة»؛ وفي الحالة العادية تقوده الحركة gate-ignite أسرع قليلًا. */
#bg-gate .gate-beam { opacity: .45; transition: opacity .2s ease-out; animation: gate-lamp 5.6s linear infinite; }
#bg-gate.is-on .gate-beam { opacity: .95; animation: gate-ignite .5s ease-out; }
/* خيوط الضوء تتمايل وتتبدّل كما يتبدّل الضوء مع لقطات الفيلم */
#bg-gate .gate-rays--a { animation: gate-sway-a 9s ease-in-out infinite alternate, gate-shimmer-a 3.7s ease-in-out infinite; }
#bg-gate .gate-rays--b { animation: gate-sway-b 13s ease-in-out infinite alternate, gate-shimmer-b 5.9s ease-in-out infinite; }

@keyframes gate-lamp {
  0%, 100% { opacity: .45; }
  3% { opacity: .405; } 6% { opacity: .45; }
  18% { opacity: .432; } 20% { opacity: .378; } 23% { opacity: .441; }
  37% { opacity: .45; } 39% { opacity: .414; } 42% { opacity: .45; }
  57% { opacity: .437; } 59% { opacity: .387; } 61% { opacity: .428; } 64% { opacity: .45; }
  78% { opacity: .419; } 81% { opacity: .45; }
  90% { opacity: .405; } 93% { opacity: .45; }
}
@keyframes gate-ignite { 0% { opacity: .45; } 30%, 100% { opacity: .95; } }   /* يبلغ ذروته خلال ١٥٠ ملّي ثانية: الشاشة تُظلم بعد اللمسة بأقل من ثانية */
@keyframes gate-sway-a { from { transform: rotate(-1.1deg); } to { transform: rotate(1.3deg); } }
@keyframes gate-sway-b { from { transform: rotate(1.2deg); } to { transform: rotate(-.9deg); } }
@keyframes gate-shimmer-a { 0%, 100% { opacity: .35; } 45% { opacity: 1; } 70% { opacity: .6; } }
@keyframes gate-shimmer-b { 0%, 100% { opacity: 1; } 40% { opacity: .3; } 75% { opacity: .8; } }

/* ── ذرّات الغبار (مثبّتة عند العدسة، وموضع كل ذرّة بزاوية وبُعد) ── */
#bg-gate .gate-dust { position: absolute; top: var(--gate-ly); right: var(--gate-lx); width: 0; height: 0; }
#bg-gate .gate-mote {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  transform: rotate(calc(var(--gate-tilt) + var(--a))) translateY(calc(var(--gate-reach) * var(--d)));
  opacity: var(--o);                           /* أقصى سطوع للذرّة */
}
#bg-gate .gate-mote.is-off { visibility: hidden; }   /* ذرّة تقع فوق الكلمات (يحدّدها الكود؛ تبقى في مكانها ليُعاد قياسها) */
/* كل ذرّة تظهر، تنجرف ببطء وهي تتلألأ، ثم تختفي وتعود من موضعها الأول */
#bg-gate .gate-mote i {
  position: absolute; top: 0; left: 0;
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow-rgb), 1) 0%, rgba(var(--glow-rgb), .8) 30%, rgba(var(--glow-rgb), 0) 72%);
  animation: gate-mote linear infinite;
  animation-duration: var(--t);
  animation-delay: var(--w);
}
#bg-gate .gate-mote--soft i { background: radial-gradient(circle, rgba(var(--glow-rgb), .9) 0%, rgba(var(--glow-rgb), .7) 46%, rgba(var(--glow-rgb), 0) 74%); }
@keyframes gate-mote {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  14% { opacity: 1; }
  34% { opacity: .35; }
  50% { opacity: 1; }
  68% { opacity: .5; }
  84% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0); }
}

/* ── العدسة ── */
#bg-gate .gate-lens { position: absolute; top: var(--gate-ly); right: var(--gate-lx); width: 0; height: 0; }
#bg-gate .gate-lens i { position: absolute; top: 0; left: 0; display: block; border-radius: 50%; }
#bg-gate .gate-lens-halo {
  width: 230px; height: 230px; margin: -115px 0 0 -115px;
  background: radial-gradient(circle, rgba(var(--glow-rgb), .7) 0%, rgba(var(--glow-rgb), .34) 7%, rgba(var(--glow-rgb), .14) 22%, rgba(var(--glow-rgb), .05) 44%, rgba(var(--glow-rgb), 0) 70%);
  animation: gate-flicker 5.6s linear infinite;      /* بإيقاع ارتعاش المصباح نفسه */
  transition: transform .4s var(--ease-out);
}
@keyframes gate-flicker {
  0%, 100% { opacity: 1; }
  3% { opacity: .9; } 6% { opacity: 1; }
  18% { opacity: .96; } 20% { opacity: .84; } 23% { opacity: .98; }
  37% { opacity: 1; } 39% { opacity: .92; } 42% { opacity: 1; }
  57% { opacity: .97; } 59% { opacity: .86; } 61% { opacity: .95; } 64% { opacity: 1; }
  78% { opacity: .93; } 81% { opacity: 1; }
  90% { opacity: .9; } 93% { opacity: 1; }
}
/* وهج أفقي رفيع كوهج عدسات السينما */
#bg-gate .gate-lens-streak {
  width: 280px; height: 6px; margin: -3px 0 0 -140px;
  background: radial-gradient(ellipse closest-side, rgba(var(--glow-rgb), .95) 0%, rgba(var(--glow-rgb), .5) 28%, rgba(var(--glow-rgb), 0) 100%);
  opacity: .8;
  transition: transform .4s var(--ease-out), opacity .14s ease-out;
}
#bg-gate .gate-lens-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid rgba(var(--glow-rgb), .2); }
#bg-gate .gate-lens-core {
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: radial-gradient(circle, #fff 0%, #fff 40%, rgba(var(--glow-rgb), 1) 100%);
  box-shadow: 0 0 6px 2px rgba(var(--glow-rgb), 1), 0 0 16px 6px rgba(var(--glow-rgb), .85), 0 0 38px 14px rgba(var(--glow-rgb), .38);
}
#bg-gate.is-on .gate-lens-halo { transform: scale(1.8); }
#bg-gate.is-on .gate-lens-streak { transform: scaleX(1.6); opacity: 1; }

/* ════════════ المقدّمة: السطران ════════════ */
#scene-gate .gate-l1 { width: 100%; }
#scene-gate .gate-title { line-height: 1.6; }

#scene-gate .gate-rule { margin: clamp(10px, calc(var(--vh) * 2.2), 22px) auto clamp(14px, calc(var(--vh) * 3), 30px); }
#scene-gate .gate-rule::before { transform: scaleX(.15); transition: transform 1.5s var(--ease-out); }
#scene-gate .gate-rule.is-in::before { transform: scaleX(1); }

#scene-gate .gate-note { display: flex; flex-direction: column; align-items: center; }
#scene-gate .gate-vol {
  width: 36px; height: 30px; margin-bottom: 8px;
  color: var(--gold-2);
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
#scene-gate .gate-vol-w2 { animation: gate-wave 3.4s ease-in-out infinite; }
#scene-gate .gate-vol-w3 { animation: gate-wave 3.4s ease-in-out .5s infinite; }
@keyframes gate-wave { 0%, 100% { opacity: .2; } 38%, 72% { opacity: 1; } }

#scene-gate .gate-line2 { max-width: 12em; line-height: 1.75; color: rgba(var(--ink-rgb), .88); }

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ٣ — شارة البداية
   ستائر مسرح مخملية، عبارات تتوالى في الموضع نفسه، ثم الاسم بالذهب داخل قلب يرسم نفسه
   ════════════════════════════════════════════════════════════════════════════ */

/* ───────── الخلفية: جدار المسرح + بقعة الضوء ───────── */
#bg-intro {
  --intro-fy: 46%;                       /* مركز بقعة الضوء = مركز الاسم (يضبطه الكود بالبكسل) */
  background: radial-gradient(ellipse 98% 54% at 50% var(--intro-fy), var(--bg-1) 0%, var(--bg-0) 100%);
}
#bg-intro.is-light { background: radial-gradient(ellipse 98% 54% at 50% var(--intro-fy), var(--bg-2) 0%, var(--bg-1) 52%, var(--bg-0) 100%); }
/* ستارة خلفية بعيدة: طيّات خافتة لا تظهر إلا داخل بقعة الضوء */
#bg-intro .intro-bg-back {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  opacity: .6;
  background: linear-gradient(90deg,
    rgba(var(--vig-rgb), .3) 0%, rgba(var(--accent-rgb), .2) 6%, rgba(var(--vig-rgb), .28) 12%, rgba(var(--accent-rgb), .22) 20%,
    rgba(var(--vig-rgb), .32) 26%, rgba(var(--accent-rgb), .18) 34%, rgba(var(--vig-rgb), .26) 41%, rgba(var(--accent-rgb), .22) 50%,
    rgba(var(--vig-rgb), .3) 58%, rgba(var(--accent-rgb), .2) 65%, rgba(var(--vig-rgb), .28) 73%, rgba(var(--accent-rgb), .22) 81%,
    rgba(var(--vig-rgb), .32) 88%, rgba(var(--accent-rgb), .18) 94%, rgba(var(--vig-rgb), .3) 100%);
  -webkit-mask-image: radial-gradient(ellipse 66% 40% at 50% var(--intro-fy), #000 0%, rgba(0, 0, 0, .5) 48%, rgba(0, 0, 0, 0) 82%);
  mask-image: radial-gradient(ellipse 66% 40% at 50% var(--intro-fy), #000 0%, rgba(0, 0, 0, .5) 48%, rgba(0, 0, 0, 0) 82%);
}
#bg-intro .intro-bg-spot,
#bg-intro .intro-bg-bloom { position: absolute; left: 50%; top: var(--intro-fy); }
#bg-intro .intro-bg-spot {
  width: calc(var(--vw) * 120); height: calc(var(--vh) * 58);
  margin: calc(var(--vh) * -29) 0 0 calc(var(--vw) * -60);
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .3) 0%, rgba(var(--accent-rgb), .17) 42%, rgba(var(--accent-rgb), .05) 76%, rgba(var(--accent-rgb), 0) 100%);
  opacity: .62;
  transform: scale(.9);
  transition: opacity 2.8s ease, transform 3.6s var(--ease-out);
}
#bg-intro .intro-bg-bloom {
  width: calc(var(--vw) * 96); height: calc(var(--vh) * 44);
  margin: calc(var(--vh) * -22) 0 0 calc(var(--vw) * -48);
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .08) 0%, rgba(var(--gold-rgb), .07) 46%, rgba(var(--gold-rgb), 0) 100%);
  opacity: 0;
  transform: scale(.8);
  transition: opacity 2.6s ease, transform 3.6s var(--ease-out);
}
#bg-intro.is-light .intro-bg-spot { background: radial-gradient(closest-side, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .3) 46%, rgba(255, 255, 255, 0) 100%); }
#bg-intro.is-light .intro-bg-bloom { background: radial-gradient(closest-side, rgba(255, 255, 255, .6) 0%, rgba(var(--glow-rgb), .3) 50%, rgba(var(--glow-rgb), 0) 100%); }
#bg-intro.is-open .intro-bg-spot { opacity: 1; transform: scale(1.06); }
#bg-intro.is-open .intro-bg-bloom { opacity: 1; transform: none; }
#bg-intro .intro-bg-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--vh) * 18);
  background:
    radial-gradient(ellipse 62% 100% at 50% 100%, rgba(var(--gold-rgb), .09) 0%, rgba(var(--gold-rgb), 0) 72%),
    linear-gradient(180deg, rgba(var(--vig-rgb), 0) 0%, rgba(var(--vig-rgb), .4) 100%);
}

/* ───────── الستارتان الجانبيتان ───────── */
#bg-intro .intro-bg-drape {
  position: absolute; top: 0; bottom: 0;
  width: calc(var(--vw) * 21 + 2px);
  will-change: transform;
}
/* قبل بدء المشهد الستارتان أقرب قليلًا إلى الوسط، ثم تستقرّان مع ظهور الصورة */
#bg-intro .intro-bg-drape--l { left: -2px; transform-origin: 0 50%; transform: scaleX(1.1); }
#bg-intro .intro-bg-drape--r { right: -2px; transform-origin: 100% 50%; transform: scaleX(1.1); }
#bg-intro.is-set .intro-bg-drape { transform: none; transition: transform 3s var(--ease-out); }
#bg-intro .intro-bg-drape svg { width: 100%; height: 100%; }
/* ظل الستارة على جدار المسرح */
#bg-intro .intro-bg-drape::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc(var(--vw) * 9); }
#bg-intro .intro-bg-drape--l::after { left: 100%; background: linear-gradient(90deg, rgba(var(--vig-rgb), .5), rgba(var(--vig-rgb), 0)); }
#bg-intro .intro-bg-drape--r::after { right: 100%; background: linear-gradient(270deg, rgba(var(--vig-rgb), .5), rgba(var(--vig-rgb), 0)); }
/* عند ظهور الاسم تنفرج الستارتان قليلًا (تنضمّ الطيّات وتنسحب إلى الخارج) */
#bg-intro.is-open .intro-bg-drape { transition: transform 3.4s var(--ease-in-out); }
#bg-intro.is-open .intro-bg-drape--l, #bg-intro.is-still .intro-bg-drape--l { transform: translate3d(-22.6%, 0, 0) scaleX(.75); }
#bg-intro.is-open .intro-bg-drape--r, #bg-intro.is-still .intro-bg-drape--r { transform: translate3d(22.6%, 0, 0) scaleX(.75); }
#bg-intro.is-still .intro-bg-drape { transition: none; }

/* ───────── السِّتر العلوي المقوّس ───────── */
/* الحشوة العلوية = المنطقة الآمنة: يقرؤها الكود ليمدّ شريط السِّتر فوقها */
#bg-intro .intro-bg-valance { position: absolute; top: 0; left: 0; width: 100%; padding-top: var(--safe-t); }
#bg-intro .intro-bg-valance svg { position: absolute; top: 0; left: 0; width: 100%; }

/* ألوان الـ SVG: كلها من متغيّرات الثيم */
#bg-intro .intro-c-b0 { stop-color: var(--bg-0); }
#bg-intro .intro-c-b1 { stop-color: var(--bg-1); }
#bg-intro .intro-c-b2 { stop-color: var(--bg-2); }
#bg-intro .intro-c-ac { stop-color: var(--accent); }
#bg-intro .intro-c-sh { stop-color: rgb(var(--vig-rgb)); }
#bg-intro .intro-c-gl { stop-color: rgb(var(--glow-rgb)); }
#bg-intro .intro-c-g1 { stop-color: var(--gold-1); }
#bg-intro .intro-c-g3 { stop-color: var(--gold-3); }
#bg-intro .intro-bg-base { fill: var(--bg-1); }
#bg-intro .intro-bg-over { opacity: .9; }
#bg-intro .intro-bg-tint { fill: var(--accent); opacity: .07; }
#bg-intro .intro-bg-dim { fill: rgb(var(--vig-rgb)); }
#bg-intro .intro-bg-piping { fill: var(--gold-2); opacity: .7; }
#bg-intro .intro-bg-braid { fill: none; stroke: var(--gold-2); stroke-width: 1.4; stroke-linecap: round; }
#bg-intro .intro-bg-fringe { fill: none; stroke: var(--gold-1); stroke-width: .8; opacity: .78; }
#bg-intro .intro-bg-bead { fill: var(--gold-1); }
#bg-intro .intro-bg-cord { fill: none; stroke: var(--gold-2); stroke-width: 1; }
/* الثيمات الفاتحة: حرير شاحب — ظلال أنعم وصبغة أوضح */
#bg-intro.is-light .intro-bg-shade { opacity: .5; }
#bg-intro.is-light .intro-bg-sheen { opacity: .3; }
#bg-intro.is-light .intro-bg-over { opacity: .55; }
#bg-intro.is-light .intro-bg-tint { opacity: .18; }
#bg-intro.is-light .intro-bg-back { opacity: .3; }

#bg-intro.is-reset *, #bg-intro.is-reset *::after { transition: none !important; }

/* ───────── المشهد ───────── */
#scene-intro { padding-top: calc(var(--safe-t) + var(--vh) * 9); }
#scene-intro .intro-focus { position: relative; flex: none; width: calc(var(--vw) * 76); height: calc(var(--vw) * 72); }

/* العبارات الثلاث: كل واحدة في الموضع نفسه (مركز الاسم لاحقًا) */
#scene-intro .intro-card {
  position: absolute; left: 50%; top: var(--intro-cy, 47%);
  width: calc(var(--vw) * 64); margin-left: calc(var(--vw) * -32);
  transform: translateY(-50%);
  pointer-events: none;
}
#scene-intro .intro-card-in {
  display: block; position: relative; top: -.06em;
  font-family: var(--font-body);
  font-size: clamp(25px, calc(var(--vw) * 7.9), 37px);
  line-height: 1.7;
  color: var(--ink);
  text-shadow: 0 1px 16px rgba(var(--bg-rgb), .55);
  text-wrap: balance;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .9s ease, transform .9s var(--ease-out);
  will-change: opacity, transform;
}
#scene-intro .intro-card--date .intro-card-in {
  top: -.2em;
  font-family: var(--font-title); font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1.6;
  color: var(--gold-1);
  text-shadow: 0 0 22px rgba(var(--gold-rgb), .32), 0 1px 16px rgba(var(--bg-rgb), .5);
}
#scene-intro .intro-card.is-in .intro-card-in { opacity: 1; transform: none; }
#scene-intro .intro-card.is-out .intro-card-in {
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.4, 0, .8, .6);
}

/* الاسم */
#scene-intro .intro-name-box {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-title); font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1.7;
  white-space: nowrap;
}
#scene-intro .intro-name-rv {
  display: inline-block; position: relative;
  opacity: 0;
  transform: scale(.92);
  transition: opacity 1.5s ease, transform 2.2s var(--ease-out);
  will-change: opacity, transform;
}
/* حشوة رأسية أوسع من حشوة الصنف gold-text حتى لا يُقصّ ذيل أي حرف مهما كان الاسم (لا تؤثر في التخطيط لأنه عنصر سطري) */
#scene-intro .intro-name { padding-top: .5em; padding-bottom: .85em; }
/* نسخة ثانية من الاسم تحت الحروف اللامعة تمامًا، في طبقة مستقلة (فلا يُعاد رسمها مع لمعة الذهب):
   تعطيها ظلًّا ناعمًا، ولونها الذهبي الثابت يضمن بقاء الاسم ظاهرًا لو لم يرسم المتصفح التدرّج المقصوص على النص */
#scene-intro .intro-name-shade {
  position: absolute; top: 0; right: 0; left: 0; z-index: -1;
  color: var(--gold-2);
  text-shadow: 0 .028em .11em rgba(var(--vig-rgb), .42);
  will-change: transform;
  pointer-events: none;
}
#scene-intro .intro-name-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
#scene-intro.is-name .intro-name-rv { opacity: 1; transform: none; }

/* هالة خافتة خلف الاسم */
#scene-intro .intro-glow {
  position: absolute; left: 50%; top: 47%;
  width: 10px; height: 10px;
  background: radial-gradient(closest-side, rgba(var(--gold-rgb), .15) 0%, rgba(var(--accent-rgb), .1) 50%, rgba(var(--accent-rgb), 0) 100%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  transition: opacity 2.4s ease, transform 3s var(--ease-out);
  pointer-events: none;
}
#scene-intro.is-name .intro-glow { opacity: 1; transform: translate(-50%, -50%); }
#scene-intro.is-light .intro-glow { background: radial-gradient(closest-side, rgba(255, 255, 255, .75) 0%, rgba(var(--glow-rgb), .4) 50%, rgba(var(--glow-rgb), 0) 100%); }

/* القلب: خط ذهبي رفيع يرسم نفسه */
#scene-intro .intro-heart {
  position: absolute; left: -16px; top: -16px; width: calc(100% + 32px); height: calc(100% + 32px);   /* هامش 16px حول المسار للخط والوهج */
  overflow: visible;
  opacity: 0;
  transform-origin: 50% 54%;
  transition: opacity .5s ease;
  filter: drop-shadow(0 0 5px rgba(var(--gold-rgb), .5));
  pointer-events: none;
}
#scene-intro.is-heart .intro-heart { opacity: 1; }
/* نبضة واحدة هادئة لحظة اكتمال القلب */
#scene-intro.is-sparkle .intro-heart { animation: intro-beat 1.1s ease-in-out both; }
@keyframes intro-beat {
  0%, 100% { transform: scale(1); }
  16% { transform: scale(1.035); }
  34% { transform: scale(1); }
  50% { transform: scale(1.018); }
  70% { transform: scale(1); }
}
#scene-intro .intro-heart-line { stroke: var(--gold-1); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#scene-intro .intro-heart-tip { opacity: 0; }
#scene-intro .intro-heart-dot { fill: var(--gold-hi); }
#scene-intro .intro-tip-a { stop-color: var(--gold-hi); stop-opacity: .75; }
#scene-intro .intro-tip-b { stop-color: var(--gold-1); stop-opacity: 0; }

/* لمعات صغيرة عند اكتمال القلب: نجمة رباعية فوق وهج ناعم */
#scene-intro .intro-sparks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#scene-intro .intro-spark { position: absolute; opacity: 0; transform: scale(0); }
#scene-intro .intro-spark::before,
#scene-intro .intro-spark::after { content: ""; position: absolute; }
#scene-intro .intro-spark::before {
  top: -75%; right: -75%; bottom: -75%; left: -75%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), .5) 0%, rgba(var(--gold-rgb), 0) 68%);
}
#scene-intro .intro-spark::after {
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(circle, #fff 0%, var(--gold-hi) 36%, var(--gold-1) 82%);
  -webkit-clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
}
#scene-intro.is-light .intro-spark::after { background: radial-gradient(circle, var(--gold-hi) 0%, var(--gold-1) 45%, var(--gold-3) 100%); }   /* على الخلفية الفاتحة: نجمة ذهبية أغمق */
#scene-intro.is-sparkle .intro-spark { animation: intro-spark 1.25s var(--ease-out) both; }
@keyframes intro-spark {
  0% { opacity: 0; transform: scale(0) rotate(-30deg); }
  32% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(0) rotate(50deg); }
}

#scene-intro.is-reset, #scene-intro.is-reset * { transition: none !important; }

/* تقليل الحركة: ظهور واختفاء بالشفافية فقط، بلا إزاحة ولا تكبير */
@media (prefers-reduced-motion: reduce) {
  #scene-intro .intro-card-in, #scene-intro .intro-card.is-out .intro-card-in, #scene-intro .intro-name-rv { transform: none; }
  #scene-intro .intro-glow { transform: translate(-50%, -50%); }
  #bg-intro .intro-bg-spot, #bg-intro .intro-bg-bloom, #bg-intro.is-open .intro-bg-spot { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ٤ — الكعكة (شموع بعدد سنوات عمرها تُطفأ بتمرير الإصبع)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── الخلفية: مخمل دافئ + وهج شموع خلف الكعكة + أقراص ضوء ناعمة ── */
#bg-cake {
  background:
    radial-gradient(130% 60% at 50% 108%, var(--bg-0) 0%, rgba(var(--bg-rgb), 0) 72%),
    radial-gradient(120% 80% at 50% 42%, var(--bg-2) 0%, var(--bg-1) 50%, var(--bg-0) 100%);
}
#bg-cake .cake-bg-glow {
  position: absolute;
  left: var(--cake-gx, 50%); top: var(--cake-gy, 44%);
  width: calc(var(--vw) * 170); height: calc(var(--vw) * 170);
  max-width: 900px; max-height: 900px;
  transform: translate(-50%, -50%);
  opacity: calc(.3 + .7 * var(--cake-lit, 1));            /* يخفت مع كل شمعة تنطفئ */
  transition: opacity .9s ease;
}
#bg-cake .cake-bg-glow i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(var(--glow-rgb), .34) 0%, rgba(var(--gold-rgb), .34) 16%, rgba(var(--gold-rgb), .17) 40%, rgba(var(--gold-rgb), .06) 68%, rgba(var(--gold-rgb), 0) 100%);
  animation: cake-glow 5.6s ease-in-out infinite;
}
@keyframes cake-glow {
  0%, 100% { opacity: .86; transform: scale(1); }
  36% { opacity: 1; transform: scale(1.045); }
  64% { opacity: .9; transform: scale(.985); }
}
#bg-cake .cake-bg-bokeh { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .9s ease; }
#bg-cake .cake-bg-bokeh i {
  position: absolute; border-radius: 50%;
  width: calc(var(--vw) * var(--s)); height: calc(var(--vw) * var(--s));
  background: radial-gradient(circle closest-side, rgba(var(--gold-rgb), .15) 0%, rgba(var(--gold-rgb), .18) 56%, rgba(var(--gold-rgb), .08) 80%, rgba(var(--gold-rgb), 0) 100%);
  animation: cake-bokeh 17s ease-in-out infinite alternate;
}
#bg-cake .cake-bg-bokeh i:nth-child(2n) {
  background: radial-gradient(circle closest-side, rgba(var(--glow-rgb), .1) 0%, rgba(var(--glow-rgb), .13) 56%, rgba(var(--glow-rgb), .055) 80%, rgba(var(--glow-rgb), 0) 100%);
}
#bg-cake .cake-bg-bokeh i:nth-child(1) { --s: 40; left: -9%; top: 9%; }
#bg-cake .cake-bg-bokeh i:nth-child(2) { --s: 52; right: -17%; top: 24%; animation-duration: 21s; animation-delay: -6s; }
#bg-cake .cake-bg-bokeh i:nth-child(3) { --s: 30; left: 4%; top: 55%; animation-duration: 14s; animation-delay: -3s; }
#bg-cake .cake-bg-bokeh i:nth-child(4) { --s: 44; right: -8%; top: 66%; animation-duration: 19s; animation-delay: -11s; }
#bg-cake .cake-bg-bokeh i:nth-child(5) { --s: 22; left: 57%; top: 3%; animation-duration: 15s; animation-delay: -8s; }
@keyframes cake-bokeh {
  from { opacity: .65; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 1; transform: translate3d(3.5%, -5%, 0) scale(1.09); }
}
#bg-cake .cake-bg-shade {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(var(--vig-rgb), .36);
  opacity: 0;
  transition: opacity .4s ease;
}
/* انطفأت آخر شمعة: يخفت الضوء لحظةً… */
#bg-cake.is-dim .cake-bg-glow { opacity: .12; transition-duration: .4s; }
#bg-cake.is-dim .cake-bg-bokeh { opacity: .35; transition-duration: .4s; }
#bg-cake.is-dim .cake-bg-shade { opacity: 1; }
/* …ثم يعود ناعمًا مع القصاصات الذهبية */
#bg-cake.is-wish .cake-bg-glow { opacity: .8; transition-duration: 2.6s; }
#bg-cake.is-wish .cake-bg-bokeh { opacity: 1; transition-duration: 2.6s; }
#bg-cake.is-wish .cake-bg-shade { opacity: 0; transition-duration: 1.8s; }
/* الثيمات الفاتحة: الذهب هناك داكن، فنخفّف الوهج والأقراص حتى لا تبدو بقعًا */
#bg-cake.is-light .cake-bg-glow { opacity: calc(.1 + .2 * var(--cake-lit, 1)); }
#bg-cake.is-light .cake-bg-bokeh { opacity: .5; }
#bg-cake.is-light.is-dim .cake-bg-glow { opacity: .05; }
#bg-cake.is-light.is-dim .cake-bg-bokeh { opacity: .2; }
#bg-cake.is-light.is-wish .cake-bg-glow { opacity: .26; }
#bg-cake.is-light.is-wish .cake-bg-bokeh { opacity: .5; }

/* ── التخطيط ── */
#scene-cake { touch-action: none; }
#scene-cake::before { content: ""; flex: 0 1 calc(var(--vh) * 17); }      /* يُنزل المجموعة قليلًا تحت المنتصف حين يتّسع المكان */
#scene-cake .cake-title { flex: none; margin-bottom: calc(var(--vh) * .8); text-shadow: 0 0 26px rgba(var(--gold-rgb), .3); }

#scene-cake .cake-art {
  /* ٧٦٪ من عرض المسرح، وتصغر على الشاشات القصيرة ليبقى مكان للعنوان والأمنية وزر «التالي» */
  --cake-w: min(calc(var(--vw) * 76), calc((var(--vh) * 100 - var(--safe-t) - var(--safe-b) - 232px - var(--vw) * 20) * .86));
  --u: calc(var(--cake-w) / 300);                 /* وحدة رسم واحدة من viewBox بالبكسل */
  flex: none;
  position: relative;
  direction: ltr;
  width: var(--cake-w);
  height: calc(var(--u) * 348);
}
#scene-cake .cake-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
#scene-cake .cake-bloom {                         /* هالة ضوء الشموع حول القمة — تخفت مع انطفائها */
  position: absolute; left: calc(var(--u) * 10); top: calc(var(--u) * -62);
  width: calc(var(--u) * 280); height: calc(var(--u) * 210);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .36) 0%, rgba(var(--gold-rgb), .23) 30%, rgba(var(--gold-rgb), .1) 56%, rgba(var(--gold-rgb), .03) 80%, rgba(var(--gold-rgb), 0) 100%);
  opacity: var(--cake-lit, 1);
  transition: opacity .9s ease;
}
#scene-cake.is-light .cake-bloom { background: radial-gradient(closest-side, rgba(var(--glow-rgb), .9) 0%, rgba(var(--glow-rgb), .6) 40%, rgba(var(--glow-rgb), .2) 72%, rgba(var(--glow-rgb), 0) 100%); }
#scene-cake.is-light .cake-halo { background: radial-gradient(circle closest-side, rgba(var(--glow-rgb), .8) 0%, rgba(var(--gold-rgb), .07) 50%, rgba(var(--gold-rgb), 0) 100%); }

/* ── ألوان الكعكة (كلها من متغيّرات الثيم) ── */
#scene-cake .cake-body { fill: var(--paper-2); }
#scene-cake .cake-ice { fill: var(--paper); }
#scene-cake .cake-line { stroke: var(--gold-3); stroke-width: .7; stroke-opacity: .38; }
#scene-cake .cake-dripshade { fill: rgba(0, 0, 0, .14); }
#scene-cake .cake-gloss { fill: none; stroke: #fff; stroke-opacity: .65; stroke-width: 1; stroke-linecap: round; }
#scene-cake .cake-ribbon { fill: var(--accent); }
#scene-cake .cake-satin { fill: rgba(255, 255, 255, .17); }
#scene-cake .cake-trim { fill: none; stroke: var(--gold-1); stroke-width: 1; }
#scene-cake .cake-gold { stroke: var(--gold-hi); stroke-width: .6; stroke-opacity: .6; }
#scene-cake .cake-gold-d { fill: var(--gold-3); }
#scene-cake .cake-lip { fill: none; stroke: var(--gold-3); stroke-width: .7; stroke-opacity: .55; }
#scene-cake .cake-s-g1 { stop-color: var(--gold-1); }
#scene-cake .cake-s-g2 { stop-color: var(--gold-2); }
#scene-cake .cake-s-g3 { stop-color: var(--gold-3); }
#scene-cake .cake-s-hi { stop-color: var(--gold-hi); }
#scene-cake .cake-s-w { stop-color: #fff; }
#scene-cake .cake-s-k { stop-color: #000; }
#scene-cake .cake-pool { opacity: var(--cake-lit, 1); transition: opacity .8s ease; }
#scene-cake .cake-dusk { fill: rgb(var(--vig-rgb)); opacity: 0; transition: opacity 1.6s ease; }
#scene-cake .cake-art.is-dark .cake-dusk { opacity: .22; transition-duration: .4s; }

/* ── الشموع ── */
#scene-cake .cake-candles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 1.6s ease; }
#scene-cake .cake-art.is-dark .cake-candles { opacity: .8; transition-duration: .4s; }
#scene-cake .cake-candle { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: 0; height: 0; }
#scene-cake .cake-candle::before {                 /* ظل صغير يثبّت الشمعة على سطح الكعكة */
  content: ""; position: absolute;
  left: calc(var(--u) * var(--w) * -1.3); top: calc(var(--u) * -1.5);
  width: calc(var(--u) * var(--w) * 2.6); height: calc(var(--u) * 3);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
}
#scene-cake .cake-stick {
  position: absolute; bottom: 0; left: calc(var(--u) * var(--w) / -2);
  width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h));
  border-radius: calc(var(--u) * 1.5) calc(var(--u) * 1.5) calc(var(--u) * .6) calc(var(--u) * .6);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .28) 100%),
    repeating-linear-gradient(-56deg, var(--paper) 0, var(--paper) calc(var(--u) * 3.6), var(--accent) calc(var(--u) * 3.6), var(--accent) calc(var(--u) * 4.8));
}
#scene-cake .cake-candle--b .cake-stick {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .28) 100%),
    repeating-linear-gradient(-56deg, var(--paper) 0, var(--paper) calc(var(--u) * 3.6), var(--gold-2) calc(var(--u) * 3.6), var(--gold-2) calc(var(--u) * 4.8));
}
#scene-cake .cake-wick {
  position: absolute; left: calc(var(--u) * -.45); bottom: calc(var(--u) * var(--h));
  width: calc(var(--u) * .9); height: calc(var(--u) * 2.6);
  border-radius: 1px;
  background: var(--paper-ink);
}

/* اللهب: الغلاف الخارجي ينطفئ/يشتعل، والداخلي يرتجف (transform/opacity فقط) */
#scene-cake .cake-flame {
  position: absolute; left: calc(var(--u) * var(--fw) / -2); bottom: calc(var(--u) * (var(--h) + 1.2));
  width: calc(var(--u) * var(--fw)); height: calc(var(--u) * var(--fw) * 2.3);
  transform-origin: 50% 100%;
  transition: transform .18s ease-in, opacity .18s ease-in;
}
#scene-cake .cake-flame-in {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  transform-origin: 50% 96%;
  animation: cake-flick-a 1.6s ease-in-out infinite;
  will-change: transform;
}
#scene-cake .cake-flame-in--1 { animation-name: cake-flick-b; }
#scene-cake .cake-flame-in--2 { animation-name: cake-flick-c; }
#scene-cake .cake-flame svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
#scene-cake .cake-f1 { fill: var(--gold-2); }
#scene-cake .cake-f2 { fill: var(--gold-hi); }
#scene-cake .cake-f3 { fill: #fff; }
#scene-cake .cake-halo {
  position: absolute; left: 50%; top: 60%;
  width: calc(var(--u) * 44); height: calc(var(--u) * 44);
  margin: calc(var(--u) * -22) 0 0 calc(var(--u) * -22);
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(var(--glow-rgb), var(--halo, .4)) 0%, rgba(var(--gold-rgb), calc(var(--halo, .4) * .45)) 34%, rgba(var(--gold-rgb), 0) 100%);
}
@keyframes cake-flick-a {
  0%, 100% { transform: scale(1, 1) rotate(0deg); opacity: 1; }
  18% { transform: scale(.94, 1.06) rotate(-2.5deg); }
  37% { transform: scale(1.04, .95) rotate(1.5deg); opacity: .92; }
  58% { transform: scale(.97, 1.08) rotate(2.8deg); }
  79% { transform: scale(1.03, .97) rotate(-1.2deg); opacity: .96; }
}
@keyframes cake-flick-b {
  0%, 100% { transform: scale(1, 1) rotate(1deg); opacity: .97; }
  24% { transform: scale(1.05, .94) rotate(-1.8deg); }
  46% { transform: scale(.93, 1.09) rotate(-3deg); opacity: 1; }
  68% { transform: scale(1.02, 1) rotate(2.2deg); opacity: .9; }
  86% { transform: scale(.98, 1.04) rotate(.5deg); }
}
@keyframes cake-flick-c {
  0%, 100% { transform: scale(.98, 1.03) rotate(-1deg); opacity: 1; }
  15% { transform: scale(1.04, .96) rotate(1.4deg); opacity: .93; }
  41% { transform: scale(.95, 1.07) rotate(3deg); }
  63% { transform: scale(1.01, .99) rotate(-2.4deg); opacity: .97; }
  83% { transform: scale(.96, 1.05) rotate(-.6deg); }
}
/* مطفأة (أو لم تشتعل بعد): اللهب ينكمش ويميل مع اتجاه الإصبع */
#scene-cake .cake-candle.is-unlit .cake-flame,
#scene-cake .cake-candle.is-out .cake-flame {
  opacity: 0;
  transform: translateX(calc(var(--u) * 5 * var(--lean, 0))) skewX(calc(-30deg * var(--lean, 0))) scale(.35, .08);
}
#scene-cake .cake-candle.is-unlit .cake-flame-in,
#scene-cake .cake-candle.is-out .cake-flame-in { animation-play-state: paused; }
#scene-cake .cake-art.is-lighting .cake-flame { transition: transform .6s var(--ease-spring) var(--ld, 0s), opacity .28s ease var(--ld, 0s); }

/* نفثة دخان: خصلتان أو ثلاث تصعد وتتلاشى */
#scene-cake .cake-smoke { position: absolute; left: 0; bottom: calc(var(--u) * (var(--h) + 2)); width: 0; height: 0; }
#scene-cake .cake-smoke i {
  position: absolute; left: calc(var(--u) * -6); bottom: 0;
  width: calc(var(--u) * 12); height: calc(var(--u) * 21);
  border-radius: 50%;
  /* قلب بلون النص + حافة رمادية خفيفة: يظهر على الخلفية الداكنة وعلى الكريمي معًا */
  background: radial-gradient(closest-side, rgba(var(--ink-rgb), .62) 0%, rgba(var(--ink-rgb), .36) 36%, rgba(0, 0, 0, .1) 68%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
}
#scene-cake.is-light .cake-smoke i { background: radial-gradient(closest-side, rgba(var(--ink-rgb), .4) 0%, rgba(var(--ink-rgb), .2) 50%, rgba(var(--ink-rgb), 0) 100%); }
/* ‎--sx (انحراف -1..1) و ‎--ss (ارتفاع/مدّة) و ‎--sd (تأخير) تختلف من شمعة لأخرى */
#scene-cake .cake-candle.is-out .cake-smoke i { animation: cake-wisp-a calc(.92s * var(--ss, 1)) ease-out var(--sd, 0s); }
#scene-cake .cake-candle.is-out .cake-smoke i:nth-child(2) { animation-name: cake-wisp-b; animation-delay: calc(var(--sd, 0s) + .08s); }
#scene-cake .cake-candle.is-out .cake-smoke i:nth-child(3) { animation-name: cake-wisp-c; animation-delay: calc(var(--sd, 0s) + .17s); }
@keyframes cake-wisp-a {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.25, .35); }
  14% { opacity: .95; }
  52% { opacity: .6; transform: translate3d(calc(var(--u) * (3 + 4 * var(--sx, 0))), calc(var(--u) * -24 * var(--ss, 1)), 0) scale(.85, 1.1); }
  100% { opacity: 0; transform: translate3d(calc(var(--u) * (-3 + 8 * var(--sx, 0))), calc(var(--u) * -48 * var(--ss, 1)), 0) scale(1.9, 1.9); }
}
@keyframes cake-wisp-b {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.22, .3); }
  18% { opacity: .8; }
  50% { opacity: .5; transform: translate3d(calc(var(--u) * (-4 + 3 * var(--sx, 0))), calc(var(--u) * -18 * var(--ss, 1)), 0) scale(.8, 1); }
  100% { opacity: 0; transform: translate3d(calc(var(--u) * (3 + 7 * var(--sx, 0))), calc(var(--u) * -38 * var(--ss, 1)), 0) scale(2.1, 1.7); }
}
@keyframes cake-wisp-c {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.2, .28); }
  22% { opacity: .6; }
  100% { opacity: 0; transform: translate3d(calc(var(--u) * (5 - 6 * var(--sx, 0))), calc(var(--u) * -30 * var(--ss, 1)), 0) scale(2.3, 1.5); }
}

/* ── الإصبع الشبح (تلميح بعد ١٢ ثانية) ── */
#scene-cake .cake-ghost { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; pointer-events: none; }
#scene-cake .cake-ghost::before {                  /* وهج صغير عند طرف الإصبع */
  content: ""; position: absolute;
  left: calc(var(--u) * -19); top: calc(var(--u) * -17); width: calc(var(--u) * 38); height: calc(var(--u) * 38);
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(var(--glow-rgb), .55), rgba(var(--glow-rgb), .18) 55%, rgba(var(--glow-rgb), 0));
}
#scene-cake .cake-ghost svg {                      /* طرف السبابة عند (11.2 , 2) من viewBox 24×28 ← يقع على نقطة الأصل */
  position: absolute; left: calc(var(--u) * -23.3); top: calc(var(--u) * -4.2);
  width: calc(var(--u) * 50); height: calc(var(--u) * 58.3);
  overflow: visible;
  fill: rgba(var(--bg-rgb), .46); stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .35));
}
#scene-cake .cake-ghost.is-on { animation: cake-ghost 2.5s var(--ease-in-out) both; }
@keyframes cake-ghost {
  0% { opacity: 0; transform: translate3d(calc(var(--u) * var(--gx0)), calc(var(--u) * (var(--gy) + 10)), 0); }
  14% { opacity: .92; transform: translate3d(calc(var(--u) * var(--gx0)), calc(var(--u) * var(--gy)), 0); }
  82% { opacity: .92; transform: translate3d(calc(var(--u) * var(--gx1)), calc(var(--u) * var(--gy)), 0); }
  100% { opacity: 0; transform: translate3d(calc(var(--u) * var(--gx1)), calc(var(--u) * (var(--gy) + 8)), 0); }
}

/* ── أسفل الكعكة: التلميح ثم الأمنية في الموضع نفسه ── */
#scene-cake .cake-foot { flex: none; display: grid; justify-items: center; width: 100%; margin-top: calc(var(--vh) * 1.2); }
#scene-cake .cake-foot > * { grid-row: 1; grid-column: 1; align-self: start; }
#scene-cake .cake-hint .hint { display: flex; flex-direction: column; align-items: center; }
#scene-cake .cake-hint-ico { width: 48px; height: 30px; overflow: visible; fill: none; stroke: var(--gold-1); stroke-linecap: round; stroke-linejoin: round; }
#scene-cake .cake-hint-arc { stroke-width: 1.4; stroke-dasharray: .1 4.2; opacity: .8; }
#scene-cake .cake-hint-hand { stroke-width: 1.7; animation: cake-swipe 2.6s var(--ease-in-out) infinite; }
@keyframes cake-swipe { 0%, 100% { transform: translateX(10px); } 50% { transform: translateX(-10px); } }
#scene-cake .cake-hint.is-gone { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
#scene-cake .cake-hint.is-gone .hint, #scene-cake .cake-hint.is-gone .cake-hint-hand { animation-play-state: paused; }

#scene-cake .cake-wish { max-width: 22em; }
#scene-cake .cake-wish span { display: block; }
#scene-cake .cake-wish-a { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-xl); line-height: 1.6; color: var(--gold-1); text-shadow: 0 0 22px rgba(var(--gold-rgb), .3); }
#scene-cake .cake-wish--solo .cake-wish-a { display: none; }
#scene-cake .cake-wish--solo .cake-wish-b::before {       /* بلا «…» في النص: لمسة ذهبية صغيرة فوقه */
  content: ""; display: block; width: 46px; height: 1px; margin: 4px auto 8px;
  background: linear-gradient(90deg, rgba(var(--gold-rgb), 0), var(--gold-2), rgba(var(--gold-rgb), 0));
}

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ٥ — الأيام (سماء ليل، بدرٌ كبير، وعدد أيامها يصعد من الصفر)
   ════════════════════════════════════════════════════════════════════════════ */

/* هندسة القمر مشتركة بين الخلفية والمشهد: النص يبدأ دائمًا تحت القمر، والقمر تحت منطقة أزرار الزوايا */
#bg-days, #scene-days {
  --days-moon: min(calc(var(--vw) * 38), calc(var(--vh) * 20));          /* القطر */
  --days-moon-top: calc(var(--safe-t) + max(var(--vh) * 5.5, min(var(--hud-top), var(--vh) * 9.4)));
}

/* ── الخلفية ── */
#bg-days {
  --days-moon-x: calc(50% + var(--vw) * 21);                             /* مركز القمر: يمين الوسط */
  --days-moon-y: calc(var(--days-moon-top) + var(--days-moon) / 2);
  background:
    radial-gradient(130% 56% at 50% 114%, var(--bg-1) 0%, rgba(var(--bg-rgb), 0) 74%),
    linear-gradient(202deg, var(--bg-1) 0%, var(--bg-0) 56%);
}
#bg-days .days-bg-stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* الشهاب: نبقيه في السماء المفتوحة يسار القمر (المحرّك يضعه عشوائيًا في النصف الأيمن حيث القمر)،
   ورأسه المضيء في المقدّمة. الكود يطلقه مع ظهور الجملة الأخيرة. */
#bg-days .shooting-star {
  top: var(--days-star-y, 11%) !important;
  left: var(--days-star-x, 13%) !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0));
  animation-delay: .35s;
}

/* هالة القمر: ضوء دافئ فوق وهجٍ بلون السماء يُخفي النجوم القريبة منه */
#bg-days .days-bg-halo {
  position: absolute;
  left: var(--days-moon-x); top: var(--days-moon-y);
  width: calc(var(--days-moon) * 5.2); height: calc(var(--days-moon) * 5.2);
  margin: calc(var(--days-moon) * -2.6) 0 0 calc(var(--days-moon) * -2.6);
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, rgba(var(--glow-rgb), .3) 0%, rgba(var(--glow-rgb), .2) 19%, rgba(var(--glow-rgb), .09) 30%, rgba(var(--glow-rgb), .035) 46%, rgba(var(--glow-rgb), 0) 70%),
    radial-gradient(circle closest-side, var(--bg-2) 0%, rgba(var(--bg-rgb), 0) 66%);
  animation: days-halo 9s ease-in-out infinite;
}
@keyframes days-halo { 0%, 100% { opacity: 1; } 50% { opacity: .8; } }

/* القمر: يُرسم مرة واحدة على canvas (سطحه وبحاره من ضجيج ناعم — انظر logic.js)، والتوهّج حوله من CSS */
#bg-days .days-bg-moon {
  position: absolute;
  left: var(--days-moon-x); top: var(--days-moon-y);
  width: var(--days-moon); height: var(--days-moon);
  margin: calc(var(--days-moon) / -2) 0 0 calc(var(--days-moon) / -2);
  border-radius: 50%;
  box-shadow:
    0 0 calc(var(--days-moon) * .05) rgba(var(--glow-rgb), .62),
    0 0 calc(var(--days-moon) * .3) rgba(var(--glow-rgb), .24);
}

/* خيط غيم رقيق يعبر أسفل القمر ببطء — يكاد لا يُرى إلا حيث يحجب ضوءه */
#bg-days .days-bg-cloud {
  position: absolute;
  left: calc(var(--days-moon-x) - var(--days-moon) * 2.05);
  top: calc(var(--days-moon-y) - var(--days-moon) * .04);
  width: calc(var(--days-moon) * 3.5);
  height: calc(var(--days-moon) * .67);
  opacity: .7;
  transform: translate3d(-7%, 0, 0) rotate(-5deg);
  animation: days-cloud 46s ease-in-out infinite alternate;
}
@keyframes days-cloud { from { transform: translate3d(-7%, 0, 0) rotate(-5deg); } to { transform: translate3d(7%, 0, 0) rotate(-5deg); } }

/* ── المشهد ──
   على الشاشة القصيرة يبدأ حيّز النص تحت القمر تمامًا؛ وكلما طالت الشاشة (فوق ٧٠٠px) صعد قليلًا
   حتى يتداخل مع ربع القمر السفلي، فيبقى النص قريبًا من وسط الشاشة دون أن يلامس القمر. */
#scene-days {
  padding-top: calc(var(--days-moon-top) + var(--days-moon) + 6px
    - clamp(0px, (var(--vh) * 100 - 700px) * .5, var(--days-moon) * .28 + 6px));
}

#scene-days .days-lead { color: rgba(var(--ink-rgb), .92); }

/* الرقم الكبير: كل خانة بعرض ثابت (--days-cw يضبطه الكود بعد قياس أعرض رقم).
   أرقام خط الرقعة تجلس في أسفل صندوق السطر، فنسحب الصندوق للأعلى ليتوازن الفراغ فوقها وتحتها. */
#scene-days .days-figure {
  position: relative;
  margin-top: -.3em;
  font-family: var(--font-title); font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1.18;
  transition-duration: .7s, 1s;                 /* يظهر أسرع من البقية كي يُرى العدّ من أوله */
}
#scene-days .days-num {
  --days-w: calc(var(--n, 4) * var(--days-cw, .44em));          /* عرض الرقم كله */
  display: block; position: relative; z-index: 1; white-space: nowrap;
}
#scene-days .days-figure.is-landed .days-num { animation: days-land 1.1s var(--ease-out) both; }
@keyframes days-land { 0% { transform: scale(1); } 28% { transform: scale(1.045); } 100% { transform: scale(1); } }

/* كل خانة تحمل gold-text وتقصّ الخلفية على رقمها هي (الحالة الأبسط، آمنة في Chrome و Safari؛ قصّ خلفية
   العنصر الأب على نص أبناء inline-block لا يُعتمد عليه في Safari). وليبقى اللمعان واحدًا متصلًا عبر الرقم
   كله: بلاطة التدرّج بعرض ٢٫٤ × عرض الرقم (كما في gold-text) وكل خانة تُزيحها بمقدار موضعها --days-x.
   الحشو الصغير (يعوّضه هامش سالب) يمنع قصّ أطراف الرقم، فالخلفية لا تُرسم خارج صندوق الخانة. */
#scene-days .days-digit {
  --days-x: calc(var(--i, 0) * var(--days-cw, .44em) - .1em);
  display: inline-block;
  box-sizing: content-box;
  width: var(--days-cw, .44em);
  padding: .08em .1em .16em;
  margin: -.08em -.1em -.16em;
  text-align: center;
  background-size: calc(var(--days-w) * 2.4) 100%;
  background-position: calc(var(--days-w) * -1.4 - var(--days-x)) 50%;
  animation-name: days-sheen;
}
@keyframes days-sheen {
  from { background-position: calc(var(--days-w) * -1.4 - var(--days-x)) 50%; }
  to { background-position: calc(var(--days-w) - var(--days-x)) 50%; }
}
#scene-days .days-digit.is-blank { visibility: hidden; }

/* وهج ذهبي خلف الرقم: خافت أثناء العدّ، ونبضة عند الوصول */
#scene-days .days-glow {
  position: absolute; z-index: 0;
  left: 50%; top: 64%;
  width: max(150%, 2.3em); height: 130%;
  background: radial-gradient(ellipse closest-side, rgba(var(--gold-rgb), .26) 0%, rgba(var(--gold-rgb), .1) 46%, rgba(var(--gold-rgb), 0) 100%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.78);
  transition: opacity 1.4s ease .2s;
  pointer-events: none;
}
#scene-days .days-figure.is-in .days-glow { opacity: .3; }
#scene-days .days-figure.is-landed .days-glow { animation: days-glow 2.6s var(--ease-out) both; }
#scene-days .days-figure.is-still .days-glow { opacity: .55; transform: translate(-50%, -50%); }
@keyframes days-glow {
  0% { opacity: .3; transform: translate(-50%, -50%) scale(.78); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
}

/* نجيمات صغيرة تلمع حول الرقم لحظة الوصول */
#scene-days .days-sparks { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
#scene-days .days-spark {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  fill: var(--gold-hi);
  opacity: 0;
  transform: scale(0);
}
#scene-days .days-figure.is-landed .days-spark { animation: days-spark 1.5s ease-out var(--d, 0s) both; }
#scene-days .days-figure.is-landed .days-spark.is-stay { animation: days-spark 1.5s ease-out var(--d, 0s) both, days-twinkle 3.6s ease-in-out var(--d2, 1.7s) infinite; }
@keyframes days-spark {
  0% { opacity: 0; transform: scale(0) rotate(-35deg); }
  32% { opacity: 1; transform: scale(1) rotate(6deg); }
  100% { opacity: 0; transform: scale(.3) rotate(38deg); }
}
@keyframes days-twinkle {
  0%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); }
  50% { opacity: .8; transform: scale(.8) rotate(20deg); }
}

#scene-days .days-unit {
  font-family: var(--font-title); font-weight: 700;
  font-size: var(--fs-xl); line-height: 1.6;
  color: var(--gold-1);
}

/* الفاصل: فجوة حول المعيّن بدل حلقة بلون الخلفية (الخلفية هنا متدرّجة) */
#scene-days .days-rule { margin: calc(var(--vh) * 1.6) auto; }
#scene-days .days-rule::before {
  background: linear-gradient(90deg,
    rgba(var(--gold-rgb), 0) 0%, rgba(var(--gold-rgb), .85) 32%, rgba(var(--gold-rgb), .85) calc(50% - 11px),
    rgba(var(--gold-rgb), 0) calc(50% - 11px), rgba(var(--gold-rgb), 0) calc(50% + 11px),
    rgba(var(--gold-rgb), .85) calc(50% + 11px), rgba(var(--gold-rgb), .85) 68%, rgba(var(--gold-rgb), 0) 100%);
}
#scene-days .days-rule::after { box-shadow: none; }

#scene-days .days-line { color: var(--ink); }

/* مسبار القياس (غير مرئي): نفس خط الرقم بحجم كبير لقياس دقيق */
#scene-days .days-probe {
  position: absolute; top: 0; left: 0;
  visibility: hidden; pointer-events: none;
  font-family: var(--font-title); font-weight: 700; font-size: 200px; line-height: 1;
  white-space: nowrap;
  direction: ltr;
}

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ٦ — سماء ليلة ولادتها (خريطة نجوم حقيقية مرسومة بالذهب على ليلٍ عميق)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── الخلفية: ليل هادئ، أفتح قليلًا حيث تجلس الخريطة ──
   المتغيّران --sky-cy / --sky-d (مركز الخريطة وقطرها بالبكسل) يضبطهما الكود بعد قياس التخطيط. */
#bg-sky {
  background:
    radial-gradient(135% 76% at 50% 45%, var(--bg-1) 0%, rgba(var(--bg-rgb), 0) 76%),
    var(--bg-0);
}
/* نجوم بعيدة قليلة خافتة (CSS فقط، بلا canvas) في زوايا الشاشة فقط: بعيدًا عن الخريطة وعن النصوص حتى لا تختلط بنجوم الخريطة */
#bg-sky .sky-bg-stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .5; }
#bg-sky .sky-bg-stars::before,
#bg-sky .sky-bg-stars::after {
  content: "";
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  animation: sky-far 7s ease-in-out infinite;
}
#bg-sky .sky-bg-stars::before {
  background-image:
    radial-gradient(circle at 8% 5%, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, .9) .5px, rgba(255, 255, 255, 0) 1.3px),
    radial-gradient(circle at 19% 11.5%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.1px),
    radial-gradient(circle at 88% 3.5%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .85) .6px, rgba(255, 255, 255, 0) 1.5px),
    radial-gradient(circle at 79% 9.5%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.1px),
    radial-gradient(circle at 4% 15%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.2px),
    radial-gradient(circle at 96% 13%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, .8) .5px, rgba(255, 255, 255, 0) 1.3px),
    radial-gradient(circle at 7% 83%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, .8) .5px, rgba(255, 255, 255, 0) 1.3px),
    radial-gradient(circle at 15% 92%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.1px),
    radial-gradient(circle at 91% 80.5%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.2px),
    radial-gradient(circle at 85% 90%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .85) .6px, rgba(255, 255, 255, 0) 1.5px),
    radial-gradient(circle at 58% 98.2%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.1px);
}
#bg-sky .sky-bg-stars::after {
  animation-duration: 9s; animation-delay: -4s;
  background-image:
    radial-gradient(circle at 14% 2.2%, rgba(255, 255, 255, .75) 0, rgba(255, 255, 255, .75) .4px, rgba(255, 255, 255, 0) 1.2px),
    radial-gradient(circle at 24% 6.5%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.1px),
    radial-gradient(circle at 94% 7.5%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, .8) .5px, rgba(255, 255, 255, 0) 1.3px),
    radial-gradient(circle at 83% 14.5%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.1px),
    radial-gradient(circle at 45% 1%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.1px),
    radial-gradient(circle at 3% 88%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.1px),
    radial-gradient(circle at 12% 97%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, .8) .5px, rgba(255, 255, 255, 0) 1.3px),
    radial-gradient(circle at 95% 86%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.1px),
    radial-gradient(circle at 88% 95.5%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) .4px, rgba(255, 255, 255, 0) 1.2px),
    radial-gradient(circle at 33% 98.6%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .85) .6px, rgba(255, 255, 255, 0) 1.5px);
}
@keyframes sky-far { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* هالة ذهبية ناعمة خلف قرص الخريطة */
#bg-sky .sky-bg-glow {
  position: absolute;
  top: var(--sky-cy, 47%); left: 50%;
  width: calc(var(--sky-d, 340px) * 2.4); height: calc(var(--sky-d, 340px) * 2.4);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side,
    rgba(var(--gold-rgb), .19) 0%, rgba(var(--gold-rgb), .19) 36%, rgba(var(--gold-rgb), .085) 47%,
    rgba(var(--gold-rgb), .03) 66%, rgba(var(--gold-rgb), 0) 100%);
  animation: sky-breathe 9s ease-in-out infinite;
}
@keyframes sky-breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* ── المشهد ── */
#scene-sky { padding-top: calc(var(--safe-t) + 14px); }

#scene-sky .sky-head { flex: none; width: 100%; }
#scene-sky .sky-title { font-size: clamp(25px, calc(var(--vw) * 7.4), 36px); line-height: 1.5; }
#scene-sky .sky-sub {
  max-width: 21em;
  margin: 0 auto;
  font-size: var(--fs-sm); line-height: 1.6;
  color: rgba(var(--ink-rgb), .72);
  text-wrap: balance;
}

/* الخريطة: قرص دائري؛ قطره يحدّده الكود = الأصغر بين (عرض المسرح − 28px) والارتفاع المتبقّي */
#scene-sky .sky-chart {
  position: relative;
  flex: none;
  width: 300px; height: 300px;
  margin: clamp(5px, calc(var(--vh) * 4.6 - 23px), 24px) 0;
}
#scene-sky .sky-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#scene-sky.is-nochart .sky-chart { display: none; }
#scene-sky.is-nochart .sky-head { margin-bottom: calc(var(--vh) * 4); }

/* السطور تحت الخريطة */
#scene-sky .sky-caps { flex: none; width: 100%; }
#scene-sky .sky-cap { line-height: 1.6; color: rgba(var(--ink-rgb), .92); text-wrap: balance; }
#scene-sky .sky-weekday { font-size: clamp(17px, calc(var(--vw) * 4.9), 21px); }
#scene-sky .sky-moon {
  display: flex; align-items: center; justify-content: center;
  gap: 9px;
  font-size: clamp(15px, calc(var(--vw) * 4.3), 18px);
}
#scene-sky .sky-em { color: var(--gold-1); }
#scene-sky .sky-icon {
  flex: none;
  width: 22px; height: 22px;
  filter: drop-shadow(0 0 5px rgba(var(--glow-rgb), .38));
}
#scene-sky .sky-moonset { margin-top: 1px; }

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ٧ — فصول من حكايتنا (شريط فيلم ٣٥مم يُسحب بالإصبع)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── الخلفية: قاعة عرض خافتة — مخمل، ضوء آلة العرض من الأعلى، طيّات ضوء رأسية ── */
#bg-story {
  background:
    radial-gradient(135% 58% at 50% -8%, var(--bg-2) 0%, rgba(var(--bg-rgb), 0) 70%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 84%);
}
#bg-story .story-bg-folds {
  position: absolute; top: 0; bottom: 0; left: -6%; right: -6%;
  background:
    repeating-linear-gradient(90deg, rgba(var(--glow-rgb), 0) 0, rgba(var(--glow-rgb), .05) 2.4%, rgba(var(--glow-rgb), 0) 5.2%, rgba(var(--vig-rgb), .13) 9%, rgba(var(--vig-rgb), 0) 13%),
    repeating-linear-gradient(90deg, rgba(var(--glow-rgb), 0) 0, rgba(var(--glow-rgb), .03) 4%, rgba(var(--glow-rgb), 0) 9%, rgba(var(--vig-rgb), .08) 15%, rgba(var(--vig-rgb), 0) 21%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .2) 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .2) 100%);
}
#bg-story .story-bg-beam {
  position: absolute; left: -30%; right: -30%; top: -4%; height: 80%;
  background: conic-gradient(from 150deg at 50% 0%, rgba(var(--glow-rgb), 0) 0deg, rgba(var(--glow-rgb), .07) 14deg, rgba(var(--glow-rgb), .14) 30deg, rgba(var(--glow-rgb), .07) 46deg, rgba(var(--glow-rgb), 0) 60deg, rgba(var(--glow-rgb), 0) 360deg);
  -webkit-mask-image: radial-gradient(ellipse 62% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, 0) 78%);
          mask-image: radial-gradient(ellipse 62% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, 0) 78%);
  animation: story-beam 9s ease-in-out infinite;
}
@keyframes story-beam { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
#bg-story .story-bg-pool {
  position: absolute; left: -10%; right: -10%; top: 20%; height: 48%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--glow-rgb), .1), rgba(var(--glow-rgb), 0) 100%);
}

/* ── المقاسات: عرض الإطار ≈ ٦٢٪ من عرض المسرح، ويصغر على الشاشات القصيرة حتى يبقى كل شيء فوق منطقة «التالي».
      --story-room = الارتفاع المتاح للشريط؛ يقيسه الكود بدقة (مهما طال العنوان أو التعليق) والقيمة هنا تقدير احتياطي. ── */
#scene-story {
  --story-room: calc(var(--vh) * 100 - var(--safe-t) - var(--safe-b) - 340px);
  --story-edge: 29px;    /* هامش الشريط: ١٨ للثقوب + ١١ لأرقام الإطارات */
  --story-fw: clamp(128px, min(calc(var(--vw) * 62), calc((var(--story-room) - var(--story-edge) * 2) * .8)), 320px);
  --story-fh: calc(var(--story-fw) * 1.25);
  --story-gap: 14px;
  --story-side: calc((var(--vw) * 100 - var(--story-fw)) / 2);
  --story-hole: var(--bg-1);
}
#scene-story .story-title { max-width: calc(100% - 82px); margin: 0 0 clamp(4px, calc(var(--vh) * 1.5), 16px); }      /* أضيق من المسرح بـ١٣٠ بكسل: لا يلامس زرّ الكتم */

/* ── الشريط: يمتدّ من حافة المسرح إلى حافته ── */
#scene-story .story-film {
  position: relative; flex: none;
  width: calc(var(--vw) * 100);
  height: calc(var(--story-fh) + var(--story-edge) * 2);
  color: var(--ink);
  /* بلاطة الثقب (قناع) وحافّته اللامعة */
  --story-perf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0h20v18H0z M7.7 4h4.6a2.2 2.2 0 0 1 2.2 2.2v6.6a2.2 2.2 0 0 1-2.2 2.2H7.7a2.2 2.2 0 0 1-2.2-2.2V6.2A2.2 2.2 0 0 1 7.7 4z'/%3E%3C/svg%3E");
  --story-rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' preserveAspectRatio='none'%3E%3Crect x='5' y='3.5' width='10' height='12' rx='2.7' fill='none' stroke='%23fff' stroke-opacity='.24'/%3E%3C/svg%3E");
}
#scene-story .story-film::before, #scene-story .story-film::after {      /* ظلّ ناعم تحت الشريط وفوقه */
  content: ""; position: absolute; left: 0; right: 0; height: 26px; pointer-events: none;
}
#scene-story .story-film::before { bottom: 100%; height: 14px; background: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); }
#scene-story .story-film::after { top: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0)); }

/* التمرير الأصلي للمتصفح + الالتقاط على منتصف كل إطار */
#scene-story .story-reel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  cursor: grab;
}
#scene-story .story-reel::-webkit-scrollbar { display: none; width: 0; height: 0; }
#scene-story .story-reel.is-grab { scroll-snap-type: none; cursor: grabbing; }     /* سحب بالفأرة (معاينة على الحاسوب) */

/* المسار: «مواقف» شفافة يلتقط عندها التمرير؛ الشريط المرئي طبقة فوقها بالمقاسات نفسها
   (هكذا تبقى القياسات دقيقة حين يتحرّك الشريط المرئي في لمحة التعليم) */
#scene-story .story-track {
  position: relative; flex: none;
  display: flex; gap: var(--story-gap);
  height: 100%;
  padding: 0 var(--story-side);
}
#scene-story .story-stop { flex: none; width: var(--story-fw); scroll-snap-align: center; scroll-snap-stop: always; }

#scene-story .story-strip {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; gap: var(--story-gap);
  padding: var(--story-edge) var(--story-side);
  transform: translate3d(calc(var(--story-dir, 1) * -48px), 0, 0);
  transition: transform 1.7s var(--ease-out);
}
#scene-story .story-film.is-in .story-strip { transform: none; }
#scene-story .story-film.is-nudge .story-strip { animation: story-nudge 1.6s var(--ease-in-out) 1; }
@keyframes story-nudge {
  0%, 100% { transform: translate3d(0, 0, 0); }
  42% { transform: translate3d(calc(var(--story-dir, 1) * 44px), 0, 0); }
}

/* قاعدة الفيلم الداكنة + صفّا الثقوب (قناع يثقب الشريط فعلًا فتظهر الخلفية من خلاله) */
#scene-story .story-strip::before {
  content: ""; position: absolute; top: 17px; bottom: 17px; left: 0; right: 0; inset-inline-start: -160px;
  background: var(--bg-0);
}
#scene-story .story-perf {
  position: absolute; left: 0; right: 0; inset-inline-start: -160px; height: 18px;
  background: var(--bg-0);
  -webkit-mask-image: var(--story-perf); mask-image: var(--story-perf);
  -webkit-mask-size: 20px 18px; mask-size: 20px 18px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
#scene-story .story-perf::after {                          /* حافة الثقب تلتقط الضوء */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: var(--story-rim) 0 0 / 20px 18px repeat-x;
}
#scene-story .story-perf--t { top: 0; }
#scene-story .story-perf--b { bottom: 0; transform: scaleY(-1); }
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  #scene-story .story-perf {
    background: var(--bg-0) repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5.5px, var(--story-hole) 5.5px, var(--story-hole) 14.5px, rgba(0, 0, 0, 0) 14.5px, rgba(0, 0, 0, 0) 20px) 0 4px / 100% 11px no-repeat;
  }
}

/* ── الإطار ── */
#scene-story .story-frame {
  position: relative; flex: none;
  width: var(--story-fw); height: var(--story-fh);
  cursor: pointer;
}
#scene-story .story-frame::before {                        /* الإطار الذي في الوسط مُضاء: خط ذهبي وهالة دافئة (تظهر بالشفافية فقط) */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .55), 0 0 30px 4px rgba(var(--glow-rgb), .2);
  opacity: 0;
  transition: opacity .6s ease;
}
#scene-story .story-frame.is-active::before { opacity: 1; }
#scene-story .story-no {                                  /* أرقام الإطارات على حافة الفيلم */
  position: absolute; height: 11px;
  font-family: var(--font-body); font-size: 9.5px; line-height: 11px;
  color: rgba(var(--gold-rgb), .82);
}
#scene-story .story-no--t { top: -11px; inset-inline-start: 12px; }
#scene-story .story-no--b { bottom: -11px; inset-inline-end: 12px; }
#scene-story .story-no--b::after {                         /* سهم صغير كما على أفلام التصوير */
  content: ""; display: inline-block; vertical-align: middle; margin-inline-start: 4px;
  border-block: 2.5px solid transparent; border-inline-start: 4px solid currentColor;
  opacity: .8;
}

#scene-story .story-cell {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(0, 0, 0, .5);
  opacity: .42;
  transform: scale(.93);
  transition: opacity .55s ease, transform .7s var(--ease-out);
  will-change: opacity, transform;
}
#scene-story .story-frame.is-active .story-cell { opacity: 1; transform: none; }

#scene-story .story-img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  -webkit-user-drag: none;
}
#scene-story .story-frame.is-loaded .story-img { opacity: 1; }
#scene-story .story-frame.is-loaded .story-plate { visibility: hidden; transition: visibility 0s linear 1.1s; }

#scene-story .story-vig {                                  /* تعتيم خفيف لأطراف الصورة + خط الإطار */
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 76% at 50% 46%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .18) 80%, rgba(0, 0, 0, .4) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .32);
}

/* ── اللوحة الذهبية (مكان الصورة الغائبة) ── */
#scene-story .story-plate {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  color: var(--bg-1);
  background:
    radial-gradient(115% 80% at 22% 8%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 58%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .055) 0, rgba(255, 255, 255, 0) 1.5px, rgba(0, 0, 0, .03) 2.5px, rgba(0, 0, 0, 0) 4px),
    linear-gradient(158deg, var(--gold-3) 0%, var(--gold-2) 20%, var(--gold-1) 42%, var(--gold-hi) 54%, var(--gold-1) 66%, var(--gold-2) 84%, var(--gold-3) 100%);
}
#scene-story .story-plate-art {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: .62;
  filter: drop-shadow(0 .8px 0 rgba(255, 255, 255, .5));
}
#scene-story .story-plate-body {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12% 12% 14%;
  opacity: 0;                                              /* النقش يظهر حين يتأكد غياب الصورة */
  transition: opacity .8s ease;
}
#scene-story .story-frame.is-missing .story-plate-body { opacity: 1; }
#scene-story .story-plate-icon { width: 27%; height: auto; opacity: .74; filter: drop-shadow(0 .8px 0 rgba(255, 255, 255, .45)); }
#scene-story .story-plate-num {
  font-family: var(--font-title); font-weight: 700;
  font-size: calc(var(--story-fw) * .25); line-height: 1.32;
  opacity: .84;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
#scene-story .story-plate-rule { position: relative; width: 26%; height: 1px; margin: 2% 0 5%; background: currentColor; opacity: .5; }
#scene-story .story-plate-rule::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; transform: rotate(45deg); background: currentColor; }
#scene-story .story-plate-label {
  font-family: var(--font-body);
  font-size: clamp(12px, calc(var(--story-fw) * .076), 22px); line-height: 1.6;
  opacity: .82;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

/* ظلّ داخلي خفيف: طرفا الشريط يغيبان في العتمة */
#scene-story .story-shade {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0, rgba(255, 255, 255, .12) 1px, rgba(255, 255, 255, .045) 1px, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, .3) 100%);
}

/* ── تعليق الفصل الحالي: كل التعليقات في خانة واحدة فيثبت الارتفاع ويتبادلان بالتلاشي ── */
#scene-story .story-caps {
  display: grid;
  width: 100%; max-width: var(--max-w);
  margin-top: clamp(8px, calc(var(--vh) * 1.9), 22px);
}
#scene-story .story-cap {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 8px, 0);
  transition: opacity .4s ease, transform .6s var(--ease-out), visibility 0s linear .4s;
}
#scene-story .story-cap.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: .16s, .16s, 0s; }
#scene-story .story-cap-title { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-xl); line-height: 1.5; color: var(--gold-1); }
#scene-story .story-cap-text { font-size: var(--fs-body); line-height: 1.7; color: rgba(var(--ink-rgb), .9); text-wrap: balance; }

/* ── نقاط التقدّم: خيط رفيع عليه عقدة لكل فصل ── */
#scene-story .story-dots { display: flex; justify-content: center; width: 100%; height: 22px; margin-top: clamp(2px, calc(var(--vh) * 1), 12px); }
#scene-story .story-rail { position: relative; display: flex; align-items: center; max-width: 100%; height: 100%; }
#scene-story .story-rail::before {
  content: ""; position: absolute; top: 50%; height: 1px;
  left: calc(50% / var(--story-n, 5)); right: calc(50% / var(--story-n, 5));
  background: rgba(var(--gold-rgb), .34);
}
#scene-story .story-dot { position: relative; flex: 0 1 auto; width: 44px; min-width: 16px; height: 44px; }      /* مساحة اللمس ٤٤×٤٤ */
#scene-story .story-dot::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--bg-1);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .75);
}
#scene-story .story-dot::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--gold-1);
  box-shadow: 0 0 10px 1px rgba(var(--gold-rgb), .55);
  opacity: 0; transform: scale(.4);
  transition: opacity .35s ease, transform .5s var(--ease-out);
}
#scene-story .story-dot.is-past::after { opacity: .6; transform: scale(.62); }
#scene-story .story-dot.is-on::after { opacity: 1; transform: scale(1.5); }

/* ── التلميح ── */
#scene-story .story-hint { margin-top: clamp(0px, calc(var(--vh) * .7), 8px); min-height: calc(var(--fs-sm) * 1.7); }

/* صورة واحدة فقط: لا نقاط ولا تلميح */
#scene-story.is-single .story-dots, #scene-story.is-single .story-hint { display: none; }

/* شاشات متوسطة الارتفاع (أغلب الجوالات وأشرطة المتصفح ظاهرة): هوامش أضيق فتبلغ الصورة عرضها الكامل */
@media (max-height: 700px) {
  #scene-story { --story-room: calc(var(--vh) * 100 - var(--safe-t) - var(--safe-b) - 304px); padding-top: calc(var(--safe-t) + 12px); }
  #scene-story .story-title { margin-bottom: 6px; }
  #scene-story .story-caps { margin-top: 8px; }
  #scene-story .story-cap-title { font-size: calc(var(--fs-lg) * 1.1); }
  #scene-story .story-cap-text { line-height: 1.6; }
  #scene-story .story-dots { margin-top: 2px; }
  #scene-story .story-hint { margin-top: 0; }
}
/* شاشات قصيرة (آيفون SE وأمثاله): عنوان أصغر أيضًا */
@media (max-height: 600px) {
  #scene-story { --story-room: calc(var(--vh) * 100 - var(--safe-t) - var(--safe-b) - 286px); }
  #scene-story .story-title { font-size: var(--fs-xl); line-height: 1.5; margin-bottom: 4px; }
  #scene-story .story-dots { margin-top: 0; }
}

/* على الحاسوب المسرح أضيق من الشاشة: طرفا الشريط يذوبان في الخلفية بدل أن ينقطعا */
@media (min-width: 600px) {
  #scene-story .story-film {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 9%, #000 91%, rgba(0, 0, 0, 0));
            mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 9%, #000 91%, rgba(0, 0, 0, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  #scene-story .story-strip { transform: none; }
  #scene-story .story-cell { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ٨ — الأسباب (بطاقة فاخرة تنقلب مع كل لمسة)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── الخلفية: مخمل + توهّج مركزي + شبكة قلوب دمشقية بالكاد تُرى ── */
#bg-reasons {
  background: radial-gradient(125% 80% at 50% 45%, var(--bg-2) 0%, var(--bg-1) 48%, var(--bg-0) 100%);
}
#bg-reasons .reasons-bg-lattice {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  color: var(--gold-1);
  opacity: .055;
}
#bg-reasons .reasons-bg-glow {
  position: absolute; left: -15%; right: -15%; top: 15%; height: 60%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--glow-rgb), .15) 0%, rgba(var(--glow-rgb), .05) 46%, rgba(var(--glow-rgb), 0) 72%);
  animation: reasons-breathe 9s ease-in-out infinite;
}
@keyframes reasons-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ── المقاسات: عرض البطاقة = min(80% من المسرح، 330px) بنسبة 3:4.
      على الشاشات القصيرة يقصر ارتفاعها ليبقى كل شيء ظاهرًا بلا تمرير، ويضيق عرضها معه
      (حتى نسبة 4:5، ولا يقل عن 236px ما دامت البطاقة أطول من عرضها) ── */
#scene-reasons {
  --rs-head: clamp(74px, calc(var(--vh) * 13.5), 118px);
  --rs-foot: 44px;
  --rs-gap: clamp(13px, calc(var(--vh) * 2.6), 30px);
  --rs-w: min(calc(var(--vw) * 80), 330px);
  --rs-hmax: calc(var(--vh) * 100 - var(--safe-t) - var(--safe-b) - var(--next-zone) - 28px - var(--rs-head) - var(--rs-foot) - var(--rs-gap) * 2);
  --rs-h: max(200px, min(calc(var(--rs-w) * 4 / 3), var(--rs-hmax)));
  --rs-cw: min(var(--rs-w), max(calc(var(--rs-h) * .8), min(calc(var(--rs-h) * .94), 236px)));
}

/* ── العنوان ── */
#scene-reasons .reasons-head {
  flex: none;
  height: var(--rs-head);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#scene-reasons .reasons-title { font-size: clamp(27px, min(calc(var(--vw) * 9.6), calc(var(--vh) * 5.6)), 44px); line-height: 1.5; }
#scene-reasons .reasons-sub {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(16px, min(calc(var(--vw) * 4.9), calc(var(--vh) * 3.1)), 22px); line-height: 1.5;
  color: rgba(var(--ink-rgb), .88);
}
#scene-reasons .reasons-sub::before,
#scene-reasons .reasons-sub::after {
  content: ""; flex: none; width: 26px; height: 1px; margin: 4px 12px 0;
  background: linear-gradient(90deg, rgba(var(--gold-rgb), 0), rgba(var(--gold-rgb), .85));
}
#scene-reasons .reasons-sub::before { transform: scaleX(-1); }

/* ── البطاقة ── */
#scene-reasons .reasons-deck {
  position: relative; flex: none;
  width: var(--rs-cw); height: var(--rs-h);
  margin: var(--rs-gap) 0;
}
#scene-reasons .reasons-shadow {
  position: absolute; left: 4%; right: 4%; bottom: -21px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--vig-rgb), .42) 0%, rgba(var(--vig-rgb), 0) 72%);
  pointer-events: none;
}
#scene-reasons .reasons-card {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: block; margin: 0; padding: 0;
  border-radius: 18px;
  color: var(--paper-ink);
  font-family: var(--font-body);
  text-align: center; white-space: normal; line-height: inherit;
  -webkit-perspective: calc(var(--rs-cw) * 5.2);
  perspective: calc(var(--rs-cw) * 5.2);
}
#scene-reasons.is-done .reasons-card { cursor: default; }

/* العنصر الذي يدور (نصف دورة مع كل لمسة) */
#scene-reasons .reasons-flip {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: block;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform .72s cubic-bezier(.4, 0, .15, 1);
}
#scene-reasons .reasons-flip.is-peek { transition-duration: .5s; transition-timing-function: cubic-bezier(.45, 0, .35, 1); }

/* ارتفاع خفيف في منتصف الانقلاب + ظل يضيق معه */
#scene-reasons .reasons-deck.is-flipping .reasons-card { animation: reasons-lift .72s cubic-bezier(.33, 0, .3, 1); }
#scene-reasons .reasons-deck.is-flipping .reasons-shadow { animation: reasons-shadow .72s cubic-bezier(.33, 0, .3, 1); }
@keyframes reasons-lift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40% { transform: translate3d(0, -2px, 0) scale(1.03); }
}
@keyframes reasons-shadow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  40% { transform: translate3d(0, 6px, 0) scale(.46, .82); opacity: .55; }
}

/* الوجهان: ورق كريمي بإطار ذهبي مزدوج */
#scene-reasons .reasons-face {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: block;
  border-radius: 18px;
  background:
    radial-gradient(115% 85% at 20% 4%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(156deg, var(--paper) 12%, var(--paper-2) 100%);
  box-shadow:
    0 0 0 1px rgba(var(--gold-rgb), .5),
    0 1px 3px rgba(var(--vig-rgb), .26),
    0 16px 36px rgba(var(--vig-rgb), .32);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  visibility: hidden;
  transform: rotateY(0deg);
}
#scene-reasons .reasons-face--b { transform: rotateY(180deg); }
#scene-reasons .reasons-face.is-on { visibility: visible; }

#scene-reasons .reasons-frame {
  position: absolute; top: 9px; right: 9px; bottom: 9px; left: 9px;
  border: 1px solid var(--gold-3);
  border-radius: 10px;
  color: var(--gold-3);
  opacity: .82;
  pointer-events: none;
}
#scene-reasons .reasons-frame::before {
  content: ""; position: absolute; top: 4px; right: 4px; bottom: 4px; left: 4px;
  border: 1px solid var(--gold-3);
  border-radius: 2px;
  opacity: .62;
}
#scene-reasons .reasons-corner { position: absolute; width: 22px; height: 22px; opacity: .9; }
#scene-reasons .reasons-corner--tl { top: 4px; left: 4px; }
#scene-reasons .reasons-corner--tr { top: 4px; right: 4px; transform: scaleX(-1); }
#scene-reasons .reasons-corner--bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
#scene-reasons .reasons-corner--br { bottom: 4px; right: 4px; transform: scale(-1, -1); }

/* محتوى الوجه: واحد فقط من الثلاثة يظهر حسب data-kind */
#scene-reasons .reasons-cover,
#scene-reasons .reasons-reason,
#scene-reasons .reasons-end {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: none; flex-direction: column; align-items: center;
  padding: calc(var(--rs-cw) * .115) calc(var(--rs-cw) * .11) calc(var(--rs-cw) * .105);
}
#scene-reasons .reasons-face[data-kind="cover"] .reasons-cover,
#scene-reasons .reasons-face[data-kind="reason"] .reasons-reason,
#scene-reasons .reasons-face[data-kind="end"] .reasons-end { display: flex; }

/* الغلاف */
#scene-reasons .reasons-cover { justify-content: center; }
#scene-reasons .reasons-cover-pat {
  position: absolute; top: 19px; left: 19px; width: calc(100% - 38px); height: calc(100% - 38px);
  color: var(--gold-3);
}
#scene-reasons .reasons-cover-lines { opacity: .2; }
#scene-reasons .reasons-clear-a { stop-color: var(--paper); stop-opacity: 1; }
#scene-reasons .reasons-clear-b { stop-color: var(--paper); stop-opacity: 0; }
#scene-reasons .reasons-emblem {
  position: relative; flex: none;
  width: calc(var(--rs-cw) * .35); height: calc(var(--rs-cw) * .35);
  color: var(--gold-3);
  overflow: visible;
}
#scene-reasons .reasons-heart-fill { fill: var(--accent); }
#scene-reasons.is-cover .reasons-heart { animation: reasons-beat 2.6s ease-in-out infinite; }
@keyframes reasons-beat { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.09); } 22% { transform: scale(1); } 34% { transform: scale(1.06); } 48% { transform: scale(1); } }
#scene-reasons .reasons-hint {
  position: relative;
  display: block; margin-top: calc(var(--rs-cw) * .07);
  font-size: clamp(17px, calc(var(--rs-cw) * .062), 21px); line-height: 1.6;
  color: var(--paper-ink);
}
#scene-reasons.is-cover .reasons-hint { animation: reasons-pulse 2.6s ease-in-out infinite; }
@keyframes reasons-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* وجه السبب */
#scene-reasons .reasons-reason { justify-content: space-between; }
#scene-reasons .reasons-medal {
  flex: none;
  width: calc(var(--rs-cw) * .148); height: calc(var(--rs-cw) * .148);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--gold-hi) 0%, var(--gold-1) 40%, var(--gold-2) 78%, var(--gold-3) 100%);
  box-shadow: 0 0 0 1px var(--gold-3), 0 0 0 4px var(--paper), 0 0 0 5px rgba(var(--gold-rgb), .75), 0 5px 10px rgba(0, 0, 0, .14);
}
#scene-reasons .reasons-num {
  font-family: var(--font-title); font-weight: 700;
  font-size: calc(var(--rs-cw) * .08); line-height: 1;
  color: var(--bg-2);          /* عكس لون الذهب في كل ثيم: داكن على الذهب الفاتح، وفاتح على الذهب الغامق */
}
#scene-reasons .reasons-num.is-long { font-size: calc(var(--rs-cw) * .056); }
#scene-reasons .reasons-body {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  margin: calc(var(--rs-cw) * .024) 0 calc(var(--rs-cw) * .07);
  overflow: hidden;
}
#scene-reasons .reasons-text {
  display: block; width: 100%;
  font-size: clamp(19px, calc(var(--rs-cw) * .082), 27px); line-height: 1.78;
  color: var(--paper-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
#scene-reasons .reasons-flourish { flex: none; width: calc(var(--rs-cw) * .265); height: calc(var(--rs-cw) * .0424); color: var(--gold-3); }

/* الخاتمة */
#scene-reasons .reasons-end { justify-content: space-between; }
#scene-reasons .reasons-infinity {
  flex: none;
  width: calc(var(--rs-cw) * .236); height: calc(var(--rs-cw) * .1062);
  margin-top: calc(var(--rs-cw) * .031);
  color: var(--gold-3);
}
#scene-reasons .reasons-end-text {
  position: relative;
  display: block; width: 100%;
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(31px, calc(var(--rs-cw) * .13), 45px); line-height: 1.6;
  color: var(--gold-3);                     /* ذهب غامق يُقرأ على الورق الفاتح */
  text-wrap: balance;
}
#scene-reasons .reasons-end-solid { display: block; }
/* لمعة تمرّ فوق النص الثابت؛ لا يعتمد ظهور النص عليها */
#scene-reasons .reasons-end-sheen {
  position: absolute; top: 0; left: 0; width: 100%;
  display: block; margin: 0; padding: 0;
  background-image: linear-gradient(100deg, rgba(var(--gold-rgb), 0) 0%, rgba(var(--gold-rgb), 0) 39%, rgba(var(--gold-rgb), 1) 50%, rgba(var(--gold-rgb), 0) 61%, rgba(var(--gold-rgb), 0) 100%);
}

/* ── العدّاد وخط التقدّم ── */
#scene-reasons .reasons-foot {
  flex: none; height: var(--rs-foot);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
#scene-reasons .reasons-counter {
  min-height: 1.5em;
  font-size: var(--fs-sm); line-height: 1.5;
  color: rgba(var(--ink-rgb), .84);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .6s ease;
}
#scene-reasons .reasons-counter.is-on { opacity: 1; }
#scene-reasons .reasons-progress { position: relative; width: calc(var(--rs-cw) * .62); height: 10px; margin-top: 6px; }
#scene-reasons .reasons-progress::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 2px;
  background: rgba(var(--gold-rgb), .24);
}
#scene-reasons .reasons-progress-fill {
  position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 2px;
  background: linear-gradient(270deg, var(--gold-2), var(--gold-1));
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .7s var(--ease-out);
}
#scene-reasons .reasons-progress-tip {
  position: absolute; left: 0; right: 0; top: 0; height: 10px;
  opacity: 0;
  transition: transform .7s var(--ease-out), opacity .5s ease;
}
#scene-reasons .reasons-progress.is-on .reasons-progress-tip { opacity: 1; }
#scene-reasons .reasons-progress-tip::after {
  content: ""; position: absolute; right: -3px; top: 2px; width: 6px; height: 6px;
  transform: rotate(45deg);
  background: var(--gold-1);
  box-shadow: 0 0 8px rgba(var(--gold-rgb), .7);
}

/* نص لقارئات الشاشة فقط */
#scene-reasons .reasons-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── تقليل الحركة: لا دوران ثلاثي الأبعاد — يتلاشى وجه إلى وجه ── */
@media (prefers-reduced-motion: reduce) {
  #scene-reasons .reasons-flip { transform: none !important; transition: none !important; }
  #scene-reasons .reasons-face,
  #scene-reasons .reasons-face--b { transform: none; visibility: visible; opacity: 0; transition: opacity .2s ease; }
  #scene-reasons .reasons-face.is-on { opacity: 1; }
  #scene-reasons .reasons-face.is-top { z-index: 2; }
  #scene-reasons .reasons-deck.is-flipping .reasons-card,
  #scene-reasons .reasons-deck.is-flipping .reasons-shadow,
  #scene-reasons.is-cover .reasons-heart,
  #scene-reasons.is-cover .reasons-hint,
  #bg-reasons .reasons-bg-glow { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ٩ — الرسالة (ظرف مختوم ← ورقة تُكتب حرفًا حرفًا)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── الخلفية: مكتب كتابة دافئ ── */
#bg-letter {
  background:
    radial-gradient(130% 95% at 104% 106%, rgba(var(--vig-rgb), calc(var(--vig-a) * .62)) 0%, rgba(var(--vig-rgb), 0) 64%),
    linear-gradient(156deg, var(--bg-2) -42%, var(--bg-1) 36%, var(--bg-0) 104%);
}
/* نسيج كتّان: خيوط أفقية وعمودية رفيعة جدًّا */
#bg-letter .letter-bg-linen {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(var(--ink-rgb), .026) 0, rgba(var(--ink-rgb), .026) 1px, rgba(var(--ink-rgb), 0) 1px, rgba(var(--ink-rgb), 0) 3px),
    repeating-linear-gradient(90deg, rgba(var(--ink-rgb), .018) 0, rgba(var(--ink-rgb), .018) 1px, rgba(var(--ink-rgb), 0) 1px, rgba(var(--ink-rgb), 0) 3px),
    repeating-linear-gradient(0deg, rgba(var(--ink-rgb), 0) 0, rgba(var(--ink-rgb), .012) 23px, rgba(var(--ink-rgb), 0) 47px),
    repeating-linear-gradient(90deg, rgba(var(--ink-rgb), 0) 0, rgba(var(--ink-rgb), .009) 31px, rgba(var(--ink-rgb), 0) 61px);
}
/* بركة ضوء الشمعة من الزاوية العليا */
#bg-letter .letter-bg-glow {
  position: absolute; top: -40%; left: -62%; width: 156%; height: 98%;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .36) 0%, rgba(var(--gold-rgb), .2) 30%, rgba(var(--gold-rgb), .07) 64%, rgba(var(--gold-rgb), 0) 100%);
  transform-origin: 40% 40%;
  animation: letter-candle 7s ease-in-out infinite;
}
#bg-letter .letter-bg-flame {
  position: absolute; top: -22%; left: -36%; width: 88%; height: 52%;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .3) 0%, rgba(var(--glow-rgb), .1) 50%, rgba(var(--glow-rgb), 0) 100%);
  animation: letter-flicker 3.7s ease-in-out infinite;
}
@keyframes letter-candle { 0%, 100% { opacity: .86; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes letter-flicker { 0%, 100% { opacity: .72; } 18% { opacity: 1; } 31% { opacity: .8; } 47% { opacity: .96; } 63% { opacity: .68; } 81% { opacity: .92; } }

/* ── التخطيط ── */
#scene-letter {
  --env-w: min(calc(var(--vw) * 76), calc(var(--vh) * 46), 340px);
  --env-h: calc(var(--env-w) * .68);
  justify-content: flex-start;
  padding-top: calc(var(--safe-t) + var(--hud-top) + 6px);
}
#scene-letter.is-reset *, #scene-letter.is-reset *::before, #scene-letter.is-reset *::after { transition: none !important; }
#scene-letter .letter-rig { position: relative; flex: 1 1 auto; width: 100%; max-width: 26.5rem; min-height: 0; }
#scene-letter .letter-intro, #scene-letter .letter-read {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* ── المرحلة ١: العنوان والظرف والتلميح ── */
#scene-letter .letter-intro { padding-top: calc(var(--vh) * 2.4); }
#scene-letter .letter-title { margin: 0; }
#scene-letter .letter-hint { margin: 0; }
#scene-letter.is-opening .letter-title, #scene-letter.is-opening .letter-hint { opacity: 0; transition: opacity .45s ease; }
#scene-letter.is-gone .letter-intro { visibility: hidden; }
#scene-letter.is-gone .letter-hint .hint { animation: none; }

/* صندوق الظرف يظهر بتلاشٍ وتكبير خفيف. بعد اكتمال الظهور لا يبقى عليه transform ولا opacity،
   فتستطيع الورقة أن تقع بين طبقتيه (خلف الجيب وأمام ظهر الظرف). */
#scene-letter .letter-envbox {
  position: relative; flex: none;
  width: var(--env-w); height: var(--env-h);
  margin: calc(var(--vh) * 3.8) 0 calc(var(--vh) * 5.4);
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.95);
  transition: opacity 1.1s ease, transform 1.4s var(--ease-out);
}
#scene-letter.is-env .letter-envbox { opacity: 1; transform: none; }
#scene-letter.is-opening .letter-envbox { transition: none; }
/* مجموعتان متطابقتان (خلف الورقة / أمامها) تطفوان معًا ببطء شديد */
#scene-letter .letter-envb, #scene-letter .letter-env {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  animation: letter-float 7.5s ease-in-out infinite;
}
#scene-letter .letter-envb { z-index: 1; pointer-events: none; }
#scene-letter .letter-env { z-index: 3; display: block; border-radius: 6px; }
#scene-letter.is-opening .letter-env { pointer-events: none; }
#scene-letter.is-held .letter-envb, #scene-letter.is-held .letter-env,
#scene-letter.is-held .letter-envshadow span, #scene-letter.is-held .letter-seal { animation-play-state: paused; }
@keyframes letter-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
/* توقيت الفتح كله بتأخيرات CSS من لحظة اللمس: الختم 0 ← اللسان .25s ← الورقة تنسلّ .56s (JS) وتخرج كلها ~1.0s
   ← تعبر أمام الظرف ~1.01s وتكبر حتى 1.64s ← الظرف يهبط من .96s ويتلاشى خلفها 1.06s–1.5s */
#scene-letter .letter-envb-in, #scene-letter .letter-env-in {
  position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;
}
#scene-letter.is-away .letter-envb-in, #scene-letter.is-away .letter-env-in {
  opacity: 0; transform: translate3d(0, 64px, 0) scale(.95);
  transition: opacity .44s ease 1.06s, transform .72s cubic-bezier(.5, 0, .75, .45) .96s;
}

/* ظلّ الظرف على المكتب: يبتعد ويخفّ كلما ارتفع الظرف */
/* الصندوق أصغر من الظرف ومخبّأ تحته دائمًا؛ ما يُرى هو ظلّه الخارجي الناعم فقط */
#scene-letter .letter-envshadow {
  position: absolute; z-index: 0; top: 14%; left: 10%; width: 80%; height: 72%;
  pointer-events: none;
}
#scene-letter .letter-envshadow span {
  display: block; width: 100%; height: 100%; border-radius: 10px;
  box-shadow: 0 0 calc(var(--env-w) * .13) calc(var(--env-w) * .075) rgba(var(--vig-rgb), calc(var(--vig-a) * .9));
  transform: translate3d(6px, 15px, 0);
  animation: letter-shadow 7.5s ease-in-out infinite;
}
#scene-letter.is-away .letter-envshadow { opacity: 0; transition: opacity .44s ease 1s; }
@keyframes letter-shadow {
  0%, 100% { transform: translate3d(6px, 15px, 0); opacity: 1; }
  50% { transform: translate3d(8px, 21px, 0); opacity: .78; }
}

/* ظهر الظرف (يُرى من فتحته بعد رفع اللسان) */
#scene-letter .letter-env-back {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .12) 44%, rgba(0, 0, 0, .05) 100%), var(--paper-2);
}
#scene-letter .letter-env-front { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }

/* ألوان الرسم */
#scene-letter .letter-st-p1 { stop-color: var(--paper); }
#scene-letter .letter-st-p2 { stop-color: var(--paper-2); }
#scene-letter .letter-st-g1 { stop-color: var(--gold-1); }
#scene-letter .letter-st-g2 { stop-color: var(--gold-2); }
#scene-letter .letter-st-g3 { stop-color: var(--gold-3); }
#scene-letter .letter-paper-in { fill: var(--paper-2); }
#scene-letter .letter-edge { fill: none; stroke: var(--paper-ink); stroke-opacity: .2; stroke-width: 1; vector-effect: non-scaling-stroke; }
#scene-letter .letter-crease { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 1; }
#scene-letter .letter-sh { fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; }
#scene-letter .letter-sh--1 { stroke-width: 2.4; stroke-opacity: .1; }
#scene-letter .letter-sh--2 { stroke-width: 6; stroke-opacity: .06; }
#scene-letter .letter-sh--3 { stroke-width: 11; stroke-opacity: .04; }
#scene-letter .letter-gold-line { fill: none; stroke: var(--gold-3); stroke-width: 1.2; stroke-linejoin: round; }
#scene-letter .letter-gold-line--thin { stroke-width: .7; stroke-opacity: .6; }

/* اللسان: وجه خارجي (أمام الجيب) ووجه داخلي (خلف الورقة) يدوران معًا.
   منحنى الدوران متناظر، فيبلغ اللسان ٩٠° عند منتصف المدة تمامًا — وهناك يتبادل الوجهان الظهور. */
#scene-letter .letter-flap {
  position: absolute; top: 0; left: 0; width: 100%; height: 65.686%;
  transform-origin: 50% 0;
  transform: perspective(calc(var(--env-w) * 3.2)) rotateX(0deg);
  transition: transform .6s cubic-bezier(.6, 0, .4, 1) .25s, opacity .6s steps(2, jump-none) .25s;
}
#scene-letter .letter-flap svg { width: 100%; height: 100%; overflow: visible; }
#scene-letter .letter-flap--in { opacity: 0; }
#scene-letter.is-open .letter-flap { transform: perspective(calc(var(--env-w) * 3.2)) rotateX(180deg); }
#scene-letter.is-open .letter-flap--out { opacity: 0; }
#scene-letter.is-open .letter-flap--in { opacity: 1; }

/* ختم الشمع */
#scene-letter .letter-seal {
  position: absolute; top: 55%; left: 50%;
  width: 23%; height: 0; padding-top: 23%; margin: -11.5% 0 0 -11.5%;
  animation: letter-seal-beat 3.4s ease-in-out 2.6s infinite;
}
@keyframes letter-seal-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.045); } 26% { transform: scale(1); } }
#scene-letter .letter-seal-shadow {
  position: absolute; top: -7%; left: -9%; width: 124%; height: 124%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5) 54%, rgba(0, 0, 0, .22) 74%, rgba(0, 0, 0, 0) 100%);
  transition: opacity .28s ease;
}
#scene-letter .letter-seal-half { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#scene-letter .letter-seal-half svg { width: 100%; height: 100%; overflow: visible; }
#scene-letter .letter-seal-half--b {
  -webkit-clip-path: polygon(120% -20%, 54% -20%, 54% 0, 46% 17%, 56% 34%, 44% 52%, 55% 68%, 47% 84%, 52% 100%, 52% 120%, 120% 120%);
  clip-path: polygon(120% -20%, 54% -20%, 54% 0, 46% 17%, 56% 34%, 44% 52%, 55% 68%, 47% 84%, 52% 100%, 52% 120%, 120% 120%);
}
#scene-letter .letter-wax { fill: var(--accent); }
#scene-letter .letter-seal-ch { font-family: var(--font-title); font-weight: 700; text-anchor: middle; }
#scene-letter .letter-seal-ch--lo { fill: rgba(0, 0, 0, .46); }
#scene-letter .letter-seal-ch--hi { fill: rgba(255, 255, 255, .55); }
#scene-letter .letter-seal-ch--mid { fill: var(--accent); }
/* الكسر: شقّ يظهر أولًا، ثم يفترق النصفان ويرتفعان ويتلاشيان */
#scene-letter.is-cracked .letter-seal-shadow { opacity: 0; }
#scene-letter.is-cracked .letter-seal-half--a {
  -webkit-clip-path: polygon(-20% -20%, 54% -20%, 54% 0, 46% 17%, 56% 34%, 44% 52%, 55% 68%, 47% 84%, 52% 100%, 52% 120%, -20% 120%);
  clip-path: polygon(-20% -20%, 54% -20%, 54% 0, 46% 17%, 56% 34%, 44% 52%, 55% 68%, 47% 84%, 52% 100%, 52% 120%, -20% 120%);
  animation: letter-crack-a .56s cubic-bezier(.3, .1, .3, 1) both;
}
#scene-letter.is-cracked .letter-seal-half--b { animation: letter-crack-b .56s cubic-bezier(.3, .1, .3, 1) both; }
@keyframes letter-crack-a {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; }
  16% { transform: translate3d(-2.5%, 1%, 0) rotate(-1.6deg) scale(.98); opacity: 1; }
  36% { transform: translate3d(-5%, -1%, 0) rotate(-3.4deg) scale(1); opacity: 1; }
  100% { transform: translate3d(-36%, -48%, 0) rotate(-18deg) scale(1.16); opacity: 0; }
}
@keyframes letter-crack-b {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; }
  16% { transform: translate3d(2.5%, 1%, 0) rotate(1.8deg) scale(.98); opacity: 1; }
  36% { transform: translate3d(5.5%, -2%, 0) rotate(4deg) scale(1); opacity: 1; }
  100% { transform: translate3d(40%, -56%, 0) rotate(21deg) scale(1.16); opacity: 0; }
}

/* ── المرحلة ٢: الورقة ── */
#scene-letter .letter-read { visibility: hidden; pointer-events: none; }
#scene-letter.is-sheet .letter-read { visibility: visible; }
#scene-letter.is-reading .letter-read { pointer-events: auto; }

#scene-letter .letter-sheet {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; flex: 0 1 auto;
  width: 100%; min-height: 0;
  border-radius: 6px;
  color: var(--paper-ink);
  text-align: start;
  background:
    radial-gradient(120% 60% at 10% 0%, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(174deg, var(--paper) 0%, var(--paper) 48%, var(--paper-2) 132%);
  box-shadow:
    0 calc(var(--vw) * 5) calc(var(--vw) * 11) rgba(var(--vig-rgb), calc(var(--vig-a) * .8)),
    0 2px 7px rgba(0, 0, 0, .2),
    inset 0 0 calc(var(--vw) * 13) rgba(var(--gold-rgb), .11);
  transform-origin: 50% 0;
}
/* إطار ذهبي رفيع + زخرفة صغيرة أعلى الورقة: يظهران حين تستقر الورقة */
#scene-letter .letter-sheet::before {
  content: ""; position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px;
  border: 1px solid var(--gold-3); border-radius: 3px;
  opacity: 0; transition: opacity .8s ease; pointer-events: none;
}
#scene-letter .letter-orn {
  flex: none; width: 104px; height: 17px; margin: 19px auto 0;
  color: var(--gold-3);
  opacity: 0; transition: opacity .8s ease .1s;
}
#scene-letter.is-reading .letter-sheet::before { opacity: .5; }
#scene-letter.is-reading .letter-orn { opacity: .85; }

/* النص يُمرَّر داخل الورقة؛ حافتاه تتلاشيان (--letter-ft يكبر مع التمرير فلا يُقصّ السطر الأول وهو في مكانه) */
#scene-letter .letter-scroll {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  scrollbar-width: thin; scrollbar-color: rgba(var(--gold-rgb), .55) transparent;
  padding: 8px clamp(22px, calc(var(--vw) * 6.6), 32px) 26px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--letter-ft, 0px) * .22), #000 var(--letter-ft, 0px), #000 calc(100% - 24px), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--letter-ft, 0px) * .22), #000 var(--letter-ft, 0px), #000 calc(100% - 24px), rgba(0, 0, 0, 0) 100%);
}
#scene-letter .letter-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.94; }
#scene-letter .letter-p { margin: 0 0 .4em; }
#scene-letter .letter-greet { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-xl); line-height: 1.75; margin-bottom: .1em; }
#scene-letter .letter-sign { font-family: var(--font-title); font-size: var(--fs-lg); line-height: 1.9; text-align: end; margin: .55em 0 0; }
/* رسالة أطول من ورقتها: fit() تضيف هذه الدرجات واحدةً بعد أخرى (تراكمية) حتى تتّسع لها — وإلا فلا شيء يتغيّر.
   الحشوة السفلى (26px) تبقى أكبر من تدرّج الحافة (24px) في كل درجة، والخط لا يصغر عن 16px */
#scene-letter.is-tight-1 .letter-body { line-height: 1.76; }
#scene-letter.is-tight-1 .letter-par { margin-bottom: .26em; }
#scene-letter.is-tight-1 .letter-greet { line-height: 1.5; }
#scene-letter.is-tight-1 .letter-sign { line-height: 1.6; margin-top: .3em; }
#scene-letter.is-tight-2 .letter-body { line-height: 1.66; font-size: max(16px, calc(var(--fs-body) * .95)); }
#scene-letter.is-tight-3 .letter-body { line-height: 1.6; font-size: max(16px, calc(var(--fs-body) * .9)); }
#scene-letter.is-tight-3 .letter-scroll { padding-top: 4px; }
#scene-letter.is-tight-3 .letter-orn { margin-top: 14px; }
/* مع تقليل الحركة تمدّ النواة كل انتقال إلى .2s (والخاصية الافتراضية all)، فتنتقل الدرجات ببطء ويقيس fit() طولًا قديمًا:
   نصّ الرسالة لا ينتقل فيه شيء سوى الشفافية، فيتغيّر التخطيط فورًا */
#scene-letter .letter-scroll, #scene-letter .letter-body, #scene-letter .letter-w, #scene-letter .letter-w-g, #scene-letter .letter-w-i { transition-property: none; }
#scene-letter .letter-p { transition-property: opacity; }

/* كل كلمة صندوق ثابت العرض: نسخة مخفية تحجز المكان + نسخة ظاهرة تُكتب فوقها */
#scene-letter .letter-w { position: relative; display: inline-block; white-space: nowrap; }
#scene-letter .letter-w-g { visibility: hidden; }
#scene-letter .letter-w-i { position: absolute; top: 0; right: 0; white-space: nowrap; }
#scene-letter .letter-w.is-ltr { direction: ltr; unicode-bidi: isolate; }
#scene-letter .letter-w.is-ltr .letter-w-i { right: auto; left: 0; }

/* المؤشّر */
#scene-letter .letter-caret {
  position: relative; display: inline-block; width: 0; height: 1.25em; vertical-align: -.3em;
  transition: opacity .6s ease;
}
#scene-letter .letter-caret::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; border-radius: 1px;
  background: var(--accent);
  animation: letter-blink 1.05s ease-in-out infinite;
}
#scene-letter .letter-caret.is-out { opacity: 0; }
@keyframes letter-blink { 0%, 46% { opacity: .95; } 62%, 86% { opacity: .1; } 100% { opacity: .95; } }

/* تقليل الحركة: الفقرات تظهر واحدة بعد أخرى (النسخة الحاجزة هي النص نفسه) */
#scene-letter.is-plain .letter-w-g { visibility: visible; }
#scene-letter.is-plain .letter-w-i { display: none; }
#scene-letter.is-plain .letter-p { opacity: 0; transition: opacity .5s ease; }
#scene-letter.is-plain .letter-p.is-in { opacity: 1; }

/* زر إعادة الاستماع */
#scene-letter .letter-replay {
  display: none; flex: none; margin-top: 12px; gap: 10px;
  opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0);
  transition: opacity .8s ease, transform .9s var(--ease-out), visibility 0s linear .8s, background-color .25s ease;
}
#scene-letter.has-voice .letter-replay { display: inline-flex; }
#scene-letter .letter-replay.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
#scene-letter .letter-replay.is-on:active { transform: scale(.96); }
#scene-letter .letter-replay.is-on.is-playing { opacity: .6; }
#scene-letter .letter-replay-ic { display: inline-flex; align-items: center; gap: 3px; height: 16px; color: var(--gold-1); }
#scene-letter .letter-replay-ic i { display: block; width: 2.5px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.38); transform-origin: 50% 50%; }
#scene-letter .letter-replay-ic i:nth-child(2) { transform: scaleY(.78); }
#scene-letter .letter-replay-ic i:nth-child(3) { transform: scaleY(.52); }
#scene-letter .letter-replay.is-playing .letter-replay-ic i { animation: letter-bar .9s ease-in-out infinite; }
#scene-letter .letter-replay.is-playing .letter-replay-ic i:nth-child(2) { animation-delay: -.3s; }
#scene-letter .letter-replay.is-playing .letter-replay-ic i:nth-child(3) { animation-delay: -.6s; }
@keyframes letter-bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ── تقليل الحركة: لا دوران ولا انزلاق، فقط تلاشٍ هادئ ── */
@media (prefers-reduced-motion: reduce) {
  #bg-letter .letter-bg-glow, #bg-letter .letter-bg-flame { animation: none; }
  #scene-letter .letter-envb, #scene-letter .letter-env, #scene-letter .letter-envshadow span, #scene-letter .letter-seal { animation: none; }
  #scene-letter .letter-envbox, #scene-letter.is-away .letter-envb-in, #scene-letter.is-away .letter-env-in { transform: none; }
  #scene-letter .letter-sheet { opacity: 0; transition: opacity .2s ease; }
  #scene-letter.is-reading .letter-sheet { opacity: 1; }
  #scene-letter .letter-replay, #scene-letter .letter-replay.is-on { transform: none; }
  #scene-letter .letter-replay.is-playing .letter-replay-ic i { animation: none; }
  #scene-letter .letter-caret { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ١٠ — لحظة التحوّل (عتمة + بقعة ضوء واحدة + نبضة)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── الخلفية: شبه سواد، وضوء واحد يسقط من الأعلى على الوسط ── */
#bg-turn {
  /* مركز المساحة التي فوق زر «أنا جاهزة» = مركز محتوى المشهد */
  --turn-cy: calc((var(--vh) * 100 + var(--safe-t) - var(--safe-b) - var(--next-zone) + 20px) / 2);
  /* مركز بقعة الضوء = مركز الحلقة. هذه المعادلة تطابق تخطيط المحتوى حين يكون كل سطر سطرًا واحدًا
     (نصف ارتفاع السطرين + نصف الفراغات − نصف حشو التوازن)، والكود يؤكّدها بالقياس عند الدخول. */
  --turn-py: calc(var(--turn-cy) + var(--fs-2xl) * .775 + var(--fs-lg) * .9 + var(--vh) * .8);
  --turn-top: calc(var(--vh) * 9);                               /* ارتفاع مصدر الضوء فوق حافة الشاشة */
  --turn-rx: calc((var(--turn-py) + var(--turn-top)) * .325);    /* نصف عرض البقعة = اتّساع المخروط عند الأرض (ظلّ ١٨°) */
  background:
    linear-gradient(rgba(var(--bg-rgb), .72), rgba(var(--bg-rgb), .72)),
    radial-gradient(ellipse 130% 60% at 50% 46%, var(--bg-1) 0%, var(--bg-0) 74%);
}

/* كل الضوء في حاوية واحدة بعرض المسرح: مُطفأ أصلًا (ينطفئ فورًا بلا انتقال)، ويُضاء ببطء مع is-lit */
#bg-turn .turn-bg-light {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: calc(var(--vw) * 150);
  margin-left: calc(var(--vw) * -75);
  opacity: 0;
}
#bg-turn.is-lit .turn-bg-light { opacity: 1; transition: opacity 2.8s cubic-bezier(.4, 0, .2, 1); }
#bg-turn.is-lit.is-leaving .turn-bg-light { opacity: .6; transition: opacity 1.1s ease; }

/* مخروط الضوء: رأسه فوق الشاشة، يتّسع نزولًا ويذوب داخل البقعة (ثابت: يُرسم مرة واحدة) */
#bg-turn .turn-bg-beam {
  position: absolute; left: 0; right: 0;
  top: calc(var(--turn-top) * -1);
  height: calc(var(--turn-py) + var(--turn-top));
  background: conic-gradient(from 160deg at 50% 0,
    rgba(var(--glow-rgb), 0) 0deg,
    rgba(var(--glow-rgb), .014) 3.5deg,
    rgba(var(--glow-rgb), .06) 8deg,
    rgba(var(--glow-rgb), .102) 12.5deg,
    rgba(var(--glow-rgb), .124) 20deg,
    rgba(var(--glow-rgb), .102) 27.5deg,
    rgba(var(--glow-rgb), .06) 32deg,
    rgba(var(--glow-rgb), .014) 36.5deg,
    rgba(var(--glow-rgb), 0) 40deg,
    rgba(var(--glow-rgb), 0) 360deg);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .8) 54%, rgba(0, 0, 0, .54) 84%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .8) 54%, rgba(0, 0, 0, .54) 84%, rgba(0, 0, 0, 0) 100%);
}

/* بقعة الضوء البيضاوية على «الأرض» — تتنفّس بهدوء شديد (للشاشات الطويلة حدّ أقصى من عرض المسرح) */
#bg-turn .turn-bg-pool {
  position: absolute; left: 50%; top: var(--turn-py);
  width: calc(var(--turn-rx) * 2);
  max-width: calc(var(--vw) * 76);
  height: calc(var(--turn-rx) * .62);
  max-height: calc(var(--vw) * 23.56);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(var(--gold-rgb), .16) 0%, rgba(var(--gold-rgb), .07) 46%, rgba(var(--gold-rgb), 0) 78%),
    radial-gradient(closest-side,
      rgba(var(--glow-rgb), .3) 0%,
      rgba(var(--glow-rgb), .24) 32%,
      rgba(var(--glow-rgb), .12) 64%,
      rgba(var(--glow-rgb), .035) 87%,
      rgba(var(--glow-rgb), 0) 100%);
  animation: turn-breathe 8s ease-in-out infinite;
}
/* هالة أوسع وأخفت حول البقعة */
#bg-turn .turn-bg-pool::before {
  content: "";
  position: absolute; top: -45%; right: -32%; bottom: -45%; left: -32%;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .07) 0%, rgba(var(--glow-rgb), .03) 55%, rgba(var(--glow-rgb), 0) 100%);
}
@keyframes turn-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(.975); opacity: .84; }
  50% { transform: translate(-50%, -50%) scale(1.035); opacity: 1; }
}

/* غبار الضوء: ذرّات تظهر، تنجرف ببطء، ثم تذوب */
#bg-turn .turn-bg-dust { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#bg-turn .turn-mote {
  position: absolute;
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: rgb(var(--glow-rgb));
  box-shadow: 0 0 4px rgba(var(--glow-rgb), .55);
  opacity: var(--a0);                       /* الحالة الساكنة (تقليل الحركة) */
  animation: turn-dust 16s linear infinite;
}
#bg-turn .turn-mote--soft {
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .95), rgba(var(--glow-rgb), .4) 52%, rgba(var(--glow-rgb), 0));
  box-shadow: none;
}
@keyframes turn-dust {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  24% { opacity: var(--a); }
  76% { opacity: var(--a); }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0); }
}

/* ── المحتوى ── */
/* قطر الحلقة: مضاعفات ٤ بكسل فقط (٢٤/٢٨/٣٢) حتى تبقى الحلقة وصداها (×٢٫٥) على شبكة البكسل نفسها، متّحدتَي المركز تمامًا */
#scene-turn { --turn-ring: 28px; }
@media (max-width: 374px) { #scene-turn { --turn-ring: 24px; } }
@media (min-width: 420px) { #scene-turn { --turn-ring: 32px; } }

#scene-turn .turn-stack {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: var(--max-w);
  padding-bottom: calc(var(--vh) * 4.8);    /* توازن بصري: البقعة تمتدّ تحت الحلقة */
}

/* السطر الأول: تلاشٍ بطيء بلا حركة */
#scene-turn .turn-line1 { position: relative; transition: opacity 1.4s ease; }
/* ذهبٌ مُضاء من الأعلى: تدرّج ثابت (بلا لمعان متحرّك — السكون هو المقصود). الحشو يمنع قصّ أطراف خط الرقعة. */
#scene-turn .turn-line1 > span {
  display: inline-block;
  position: relative;
  padding: .32em .3em .46em;
  margin: -.32em -.3em -.46em;
  color: var(--gold-1);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #scene-turn .turn-line1 > span {
    background-image: linear-gradient(180deg, var(--gold-hi) 16%, var(--gold-1) 48%, var(--gold-2) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
/* وهج خافت خلف العنوان */
#scene-turn .turn-line1::before {
  content: "";
  position: absolute; top: -18%; right: 6%; bottom: -18%; left: 6%;
  background: radial-gradient(closest-side, rgba(var(--gold-rgb), .13), rgba(var(--gold-rgb), .05) 55%, rgba(var(--gold-rgb), 0));
  pointer-events: none;
}

#scene-turn .turn-line2 {
  margin-top: calc(var(--vh) * .6);
  color: rgba(var(--ink-rgb), .94);
  transform: translate3d(0, 8px, 0);
  transition: opacity 1.3s ease, transform 1.7s var(--ease-out);
}
#scene-turn .turn-line2.is-in { transform: none; }

/* ── النبضة: حلقة ذهبية رفيعة تخفق «لُب ـ دُب» بمعدّل ٦٤ نبضة في الدقيقة ── */
#scene-turn .turn-pulse {
  position: relative;
  width: var(--turn-ring); height: var(--turn-ring);
  margin-top: calc(var(--vh) * 5.8);
  transform: scale(.72);
  transition: opacity 1.1s ease, transform 1.5s var(--ease-out);
  pointer-events: none;
}
#scene-turn .turn-pulse.is-in { transform: none; }
#scene-turn .turn-pulse > span { position: absolute; top: 50%; left: 50%; border-radius: 50%; }

#scene-turn .turn-pulse-ring {
  width: var(--turn-ring); height: var(--turn-ring);
  margin: calc(var(--turn-ring) / -2) 0 0 calc(var(--turn-ring) / -2);
  border: 1.5px solid var(--gold-1);
  box-shadow: 0 0 calc(var(--turn-ring) * .46) rgba(var(--gold-rgb), .4), inset 0 0 calc(var(--turn-ring) * .22) rgba(var(--gold-rgb), .22);
}
/* الصدى: يبدأ بحجم الحلقة تمامًا (scale .4) ثم يتّسع ويذوب */
#scene-turn .turn-pulse-echo {
  width: calc(var(--turn-ring) * 2.5); height: calc(var(--turn-ring) * 2.5);
  margin: calc(var(--turn-ring) * -1.25) 0 0 calc(var(--turn-ring) * -1.25);
  border: 1px solid var(--gold-1);
  opacity: 0;
  transform: scale(.4);
}
/* وهج ذهبي على الأرض تحت الحلقة، يشتدّ مع كل خفقة */
#scene-turn .turn-pulse-glow {
  width: calc(var(--turn-ring) * 6.4); height: calc(var(--turn-ring) * 2.2);
  margin: calc(var(--turn-ring) * -1.1) 0 0 calc(var(--turn-ring) * -3.2);
  background: radial-gradient(closest-side, rgba(var(--gold-rgb), .34), rgba(var(--gold-rgb), .12) 48%, rgba(var(--gold-rgb), 0));
  opacity: .5;
}

#scene-turn .turn-pulse.is-beating .turn-pulse-ring { animation: turn-beat .9375s linear infinite; }
#scene-turn .turn-pulse.is-beating .turn-pulse-echo--a { animation: turn-echo-a .9375s linear infinite; }
#scene-turn .turn-pulse.is-beating .turn-pulse-echo--b { animation: turn-echo-b .9375s linear infinite; }
#scene-turn .turn-pulse.is-beating .turn-pulse-glow { animation: turn-glow .9375s linear infinite; }

@keyframes turn-beat {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  8% { transform: scale(1.2); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  22% { transform: scale(1.02); animation-timing-function: ease-in-out; }
  31% { transform: scale(1); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  39% { transform: scale(1.12); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  56%, 100% { transform: scale(1); }
}
@keyframes turn-echo-a {
  0% { transform: scale(.4); opacity: 0; animation-timing-function: cubic-bezier(.25, .46, .45, .94); }
  5% { opacity: .6; }
  74%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes turn-echo-b {
  0%, 31% { transform: scale(.4); opacity: 0; animation-timing-function: cubic-bezier(.25, .46, .45, .94); }
  36% { opacity: .34; }
  96%, 100% { transform: scale(.8); opacity: 0; }
}
@keyframes turn-glow {
  0% { opacity: .42; transform: scale(.94); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  8% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-in-out; }
  26% { opacity: .56; transform: scale(.97); }
  31% { opacity: .52; transform: scale(.96); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  39% { opacity: .84; transform: scale(1.02); animation-timing-function: ease-in-out; }
  62%, 100% { opacity: .42; transform: scale(.94); }
}

/* ── الخروج: الكلمات تنسحب وتبقى النبضة وحدها لحظةً ── */
#scene-turn.is-leaving .turn-line1,
#scene-turn.is-leaving .turn-line2 { opacity: 0; transition: opacity .75s ease; }

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ١١ — السؤال (علبة الخاتم، «تتزوجيني؟»، وزر «لا» الهارب)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── الخلفية: مخمل + بقعة ضوء دافئة + غبار لامع ── */
#bg-question {
  background: radial-gradient(125% 86% at 50% 43%, var(--bg-2) 0%, var(--bg-1) 46%, var(--bg-0) 100%);
}
#bg-question .question-bg-folds {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .26) 5.5%, rgba(255, 255, 255, .05) 9%, rgba(0, 0, 0, 0) 14.2857%);
  -webkit-mask-image: radial-gradient(74% 60% at 50% 44%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 1) 100%);
  mask-image: radial-gradient(74% 60% at 50% 44%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 1) 100%);
  opacity: .7;
}
#bg-question.is-light .question-bg-folds { opacity: .22; }
#bg-question .question-bg-beam {
  position: absolute; top: -6%; left: -30%; width: 160%; height: 66%;
  background: conic-gradient(from 160deg at 50% 0%, rgba(var(--glow-rgb), 0) 0deg, rgba(var(--glow-rgb), .1) 11deg, rgba(var(--glow-rgb), .13) 20deg, rgba(var(--glow-rgb), .1) 29deg, rgba(var(--glow-rgb), 0) 40deg, rgba(var(--glow-rgb), 0) 360deg);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .85) 55%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .85) 55%, rgba(0, 0, 0, 0) 100%);
}
#bg-question .question-bg-spot {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(62% 40% at 50% 45%, rgba(var(--glow-rgb), .2) 0%, rgba(var(--glow-rgb), .08) 44%, rgba(var(--glow-rgb), 0) 76%);
}
#bg-question .question-bg-dust { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#bg-question .question-bg-dust i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 6px 1px rgba(var(--gold-rgb), .75);
  opacity: .4;
  animation: question-dust var(--t) ease-in-out var(--d) infinite;
}
@keyframes question-dust {
  0%   { transform: translate3d(0, 28px, 0) scale(.5); opacity: 0; }
  18%  { opacity: .85; }
  50%  { transform: translate3d(var(--dx), -14px, 0) scale(1); opacity: .38; }
  78%  { opacity: .8; }
  100% { transform: translate3d(0, -58px, 0) scale(.5); opacity: 0; }
}

/* ── المشهد ──
   --q-w عرض العلبة، --q-u وحدة الرسم (العلبة 200 وحدة عرضًا)، --q-s2 تصغير العلبة حين يظهر الكلام.
   لا يوجد زر «التالي» هنا، فالحشوة السفلية بقدر العلوية تقريبًا: التكوين في المركز البصري
   (أسفل منطقة الزوايا العلوية بقليل)، ويبقى فوقه وتحته متّسع يهرب إليه زر «لا». */
#scene-question {
  --q-w: min(clamp(150px, calc(var(--vw) * 47), 214px), calc(var(--vh) * 27));
  --q-u: calc(var(--q-w) / 200);
  --q-s2: .84;
  --q-velvet: var(--accent);
  padding-bottom: calc(var(--safe-b) + 18px);
  touch-action: none;
}
@media (min-height: 760px) {
  #scene-question { --q-s2: .92; }
}
#scene-question.is-reset, #scene-question.is-reset *, #scene-question.is-reset *::before, #scene-question.is-reset *::after { transition: none !important; }

/* المستطيل الآمن الذي يتحرك داخله زر «لا» (يُقرأ من الكود) */
#scene-question .question-safe {
  position: absolute; visibility: hidden; pointer-events: none;
  top: calc(var(--safe-t) + var(--hud-top) + 6px);
  right: calc(var(--safe-r) + 12px);
  bottom: calc(var(--safe-b) + 12px);
  left: calc(var(--safe-l) + 12px);
}

/* ── العلبة ── */
#scene-question .question-set {
  position: relative; flex: none;
  width: calc(var(--q-w) * var(--q-s2));
  height: calc(var(--q-u) * 272 * var(--q-s2));
}
#scene-question .question-kit {
  position: absolute; top: 0; left: 50%;
  width: var(--q-w); height: calc(var(--q-u) * 272);
  margin-left: calc(var(--q-w) / -2);
  transform-origin: 50% 0;
  transform: translate3d(0, var(--q-lift, 0px), 0) scale(1);
  transition: transform 1.35s var(--ease-in-out);
  will-change: transform;
}
/* حين تنفتح العلبة تهبط قليلًا (الغطاء يرتفع فوقها فيبقى الشكل متوسطًا)، ثم تصعد وتصغر حين يظهر الكلام */
#scene-question.is-open .question-kit { transform: translate3d(0, calc(var(--q-lift, 0px) + var(--q-u) * 24), 0) scale(1); }
#scene-question.is-asked .question-kit { transform: translate3d(0, 0, 0) scale(var(--q-s2)); }
#scene-question .question-pop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#scene-question.is-swap .question-pop { opacity: 0; }
#scene-question .question-box { position: absolute; left: -5%; width: 110%; top: calc(var(--q-u) * 82); height: calc(var(--q-u) * 196); z-index: 9; display: block; border-radius: 16px; }
#scene-question.is-open .question-box { pointer-events: none; }
#scene-question .question-float { position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: question-float 4.6s ease-in-out infinite alternate; }
#scene-question.is-open .question-float { animation-play-state: paused; }
@keyframes question-float { from { transform: translate3d(0, 3px, 0); } to { transform: translate3d(0, -5px, 0); } }

#scene-question .question-defs { position: absolute; top: 0; left: 0; width: 0; height: 0; }
#scene-question .question-c-g1 { stop-color: var(--gold-1); }
#scene-question .question-c-g2 { stop-color: var(--gold-2); }
#scene-question .question-c-g3 { stop-color: var(--gold-3); }
#scene-question .question-c-hi { stop-color: var(--gold-hi); }
#scene-question .question-f-velvet { fill: var(--q-velvet); }
/* ثيم لونه المميّز ذهبي (سينما): مخمل داكن، وإلا ضاع الإطار الذهبي والخاتم على علبة ذهبية */
#scene-question.is-noir { --q-velvet: var(--bg-2); }
#scene-question .question-f-satin { fill: var(--paper); }
#scene-question .question-f-g3 { fill: var(--gold-3); }
#scene-question .question-s-g2 { stroke: var(--gold-2); }
#scene-question .question-s-g3 { stroke: var(--gold-3); }

/* قطع العلبة: كلها بوحدات الرسم. الغطاء ثلاث قطع يحرّكها الكود حول مفصل الحافة الخلفية (الخط 138). */
#scene-question .question-p { position: absolute; left: 0; width: 100%; overflow: visible; }
#scene-question .question-lid-in { left: 4%; width: 92%; top: calc(var(--q-u) * 14); height: calc(var(--q-u) * 124); z-index: 1; transform-origin: 50% 100%; transform: scaleY(0); will-change: transform; }
#scene-question .question-cushion { top: calc(var(--q-u) * 138); height: calc(var(--q-u) * 62); z-index: 2; }
#scene-question .question-lid-top { top: calc(var(--q-u) * 76); height: calc(var(--q-u) * 62); z-index: 5; transform-origin: 50% 100%; transform: translate3d(0, 23%, 0) scaleY(1); will-change: transform; }
#scene-question .question-lid-front { top: calc(var(--q-u) * 82); height: calc(var(--q-u) * 56); z-index: 7; transform-origin: 50% 100%; transform: translate3d(0, 110.71%, 0) scale(1, .866); will-change: transform; }
#scene-question .question-base { top: calc(var(--q-u) * 199.6); height: calc(var(--q-u) * 70.4); z-index: 6; }

#scene-question .question-shadow {
  position: absolute; left: -10%; width: 120%;
  top: calc(var(--q-u) * 254); height: calc(var(--q-u) * 32);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .24) 55%, rgba(0, 0, 0, 0) 100%);
}
#scene-question.is-light .question-shadow { opacity: .42; }

/* الضوء الدافئ الخارج من العلبة */
#scene-question .question-halo {
  position: absolute; left: 50%; top: calc(var(--q-u) * 146);
  width: calc(var(--q-u) * 480); height: calc(var(--q-u) * 480);
  margin: calc(var(--q-u) * -240) 0 0 calc(var(--q-u) * -240);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .5) 0%, rgba(var(--gold-rgb), .22) 34%, rgba(var(--gold-rgb), .07) 62%, rgba(var(--gold-rgb), 0) 100%);
  opacity: 0; transform: scale(.55);
  transition: opacity 1.2s ease .25s, transform 1.7s var(--ease-out) .25s;
  pointer-events: none;
}
#scene-question.is-open .question-halo { opacity: 1; transform: scale(1); }
#scene-question.is-lit .question-halo { animation: question-breathe 4.4s ease-in-out 1.2s infinite alternate; }
@keyframes question-breathe { from { opacity: 1; } to { opacity: .72; } }
#scene-question .question-light {
  position: absolute; left: 50%; top: calc(var(--q-u) * 150);
  width: calc(var(--q-u) * 216); height: calc(var(--q-u) * 156);
  margin: calc(var(--q-u) * -96) 0 0 calc(var(--q-u) * -108);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .6) 0%, rgba(var(--glow-rgb), .22) 52%, rgba(var(--glow-rgb), 0) 100%);
  opacity: 0; z-index: 3;
  transition: opacity 1s ease .3s;
  pointer-events: none;
}
#scene-question.is-open .question-light { opacity: 1; }

/* ── الخاتم ── */
#scene-question .question-ring-clip {
  position: absolute; left: 7.5%; width: 85%;
  top: calc(var(--q-u) * 20); height: calc(var(--q-u) * 149);
  overflow: hidden; z-index: 4; pointer-events: none;
}
#scene-question .question-ring {
  position: absolute; left: 50%; bottom: calc(var(--q-u) * -31.9);
  width: calc(var(--q-u) * 110); height: calc(var(--q-u) * 140.8);
  margin-left: calc(var(--q-u) * -55);
  transform-origin: 50% 70%;
  transform: translate3d(0, 80%, 0) rotate(-12deg);
  transition: transform 1.25s cubic-bezier(.2, 1.12, .34, 1) .5s;
  will-change: transform;
}
#scene-question.is-open .question-ring { transform: translate3d(0, 0, 0) rotate(0deg); }
#scene-question .question-ring-art { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }

/* لمعة تمرّ على الحجر (مقصوصة على شكل الماسة: الطاولة 38.5–61.5 عند 20.5، الحزام 30–70 عند 30، القاع 50,51.5 من 100×128) */
#scene-question .question-sweep {
  position: absolute; left: 30%; top: 16.02%; width: 40%; height: 24.22%;
  overflow: hidden;
  -webkit-clip-path: polygon(21.25% 0, 78.75% 0, 100% 30.65%, 50% 100%, 0 30.65%);
  clip-path: polygon(21.25% 0, 78.75% 0, 100% 30.65%, 50% 100%, 0 30.65%);
}
/* هالة بيضاء ناعمة خلف الحجر حين يلمع */
#scene-question .question-bloom {
  position: absolute; left: 50%; top: 25.8%;
  width: calc(var(--q-u) * 84); height: calc(var(--q-u) * 84);
  margin: calc(var(--q-u) * -42) 0 0 calc(var(--q-u) * -42);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .28) 42%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 1.1s ease;
}
#scene-question.is-lit .question-bloom { opacity: 1; }
#scene-question .question-sweep i {
  position: absolute; top: -10%; left: 0; width: 46%; height: 120%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0));
  transform: translate3d(-140%, 0, 0) skewX(-18deg);
  opacity: 0;
}
#scene-question.is-lit .question-sweep i { opacity: 1; animation: question-sweep 3.8s ease-in-out .15s infinite; }
@keyframes question-sweep {
  0% { transform: translate3d(-140%, 0, 0) skewX(-18deg); }
  24%, 100% { transform: translate3d(340%, 0, 0) skewX(-18deg); }
}

/* نجوم رباعية تتلألأ عند الحجر */
#scene-question .question-glint {
  position: absolute;
  width: calc(var(--q-u) * 38); height: calc(var(--q-u) * 38);
  margin: calc(var(--q-u) * -19) 0 0 calc(var(--q-u) * -19);
  opacity: 0; transform: scale(0) rotate(0deg);
}
#scene-question .question-glint::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: #fff;
  -webkit-clip-path: polygon(50% 0, 56.5% 43.5%, 100% 50%, 56.5% 56.5%, 50% 100%, 43.5% 56.5%, 0 50%, 43.5% 43.5%);
  clip-path: polygon(50% 0, 56.5% 43.5%, 100% 50%, 56.5% 56.5%, 50% 100%, 43.5% 56.5%, 0 50%, 43.5% 43.5%);
}
#scene-question .question-glint::after {
  content: ""; position: absolute; top: 26%; left: 26%; width: 48%; height: 48%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95) 0%, rgba(var(--glow-rgb), .5) 45%, rgba(var(--glow-rgb), 0) 100%);
}
#scene-question .question-glint--a { left: 38.5%; top: 16.1%; }
#scene-question .question-glint--b { left: 69.6%; top: 23.4%; width: calc(var(--q-u) * 25); height: calc(var(--q-u) * 25); margin: calc(var(--q-u) * -12.5) 0 0 calc(var(--q-u) * -12.5); }
#scene-question .question-glint--c { left: 56.5%; top: 14.6%; width: calc(var(--q-u) * 16); height: calc(var(--q-u) * 16); margin: calc(var(--q-u) * -8) 0 0 calc(var(--q-u) * -8); }
#scene-question.is-lit .question-glint { animation: question-twinkle 2.9s ease-in-out infinite; }
#scene-question.is-lit .question-glint--b { animation-duration: 3.5s; animation-delay: .9s; }
#scene-question.is-lit .question-glint--c { animation-duration: 2.5s; animation-delay: 1.7s; }
@keyframes question-twinkle {
  0%, 60%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  17% { opacity: 1; transform: scale(1) rotate(24deg); }
  33% { opacity: .9; transform: scale(.7) rotate(42deg); }
  47% { opacity: 0; transform: scale(0) rotate(58deg); }
}

/* وميض الحجر: عند وصول الخاتم، ثم عند «نعم» */
#scene-question .question-flash {
  position: absolute; left: 50%; top: calc(var(--q-u) * 96);
  width: calc(var(--q-u) * 170); height: calc(var(--q-u) * 170);
  margin: calc(var(--q-u) * -85) 0 0 calc(var(--q-u) * -85);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95) 0%, rgba(var(--glow-rgb), .5) 28%, rgba(var(--glow-rgb), 0) 100%);
  opacity: 0; transform: scale(.3); z-index: 4;
  pointer-events: none;
}
#scene-question.is-lit .question-flash { animation: question-flash 1.15s ease-out 1; }
#scene-question.is-yes .question-flash { animation: question-flash-yes .95s ease-out 1; }
@keyframes question-flash { 0% { opacity: 0; transform: scale(.25); } 26% { opacity: .85; } 100% { opacity: 0; transform: scale(1); } }
@keyframes question-flash-yes { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(2.1); } }

#scene-question .question-hint { position: absolute; left: -40%; width: 180%; top: calc(var(--q-u) * 288); text-align: center; }
#scene-question.is-open .question-hint { opacity: 0; transition-duration: .45s; }
#scene-question.is-open .question-hint .hint { animation: none; }

/* ── الكلام ── */
#scene-question .question-words { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--vh) * 1.2); }
#scene-question .question-line { max-width: 100%; }
#scene-question .question-ask { max-width: 100%; font-size: var(--fs-3xl); line-height: 1.5; margin-top: calc(var(--vh) * -.4); }
#scene-question .question-ask-in { display: inline-block; }

/* ── الزران ── */
#scene-question .question-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: calc(var(--vh) * 2.2); pointer-events: none; }
#scene-question.is-armed .question-actions { pointer-events: auto; }
#scene-question.is-yes .question-actions { pointer-events: none; }
#scene-question .question-yes-slot, #scene-question .question-no-slot { display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* «نعم» ينبض كقلب (الغلاف الخارجي) ويكبر مع كل محاولة (الغلاف الداخلي) — حركتان مستقلتان تُضربان معًا.
   التكبير تحويل ثنائي الأبعاد بلا will-change: بعد انتهاء حركته يُرسم الزر بحجمه الجديد داخل طبقة النبض،
   فيبقى النص حادًّا على كل المتصفحات (طبقة مكبَّرة بالـ GPU قد تبدو مغبّشة على آيفون). */
#scene-question .question-yes-beat { display: inline-flex; position: relative; z-index: 2; }
#scene-question.is-armed .question-yes-beat { animation: question-beat 1.1s ease-in-out infinite; }
#scene-question .question-yes-grow { display: inline-flex; transform: translate(0, 0) scale(1); transition: transform .55s var(--ease-spring); }
@keyframes question-beat {
  0%, 56%, 100% { transform: scale(1); }
  14% { transform: scale(1.09); }
  28% { transform: scale(1); }
  42% { transform: scale(1.05); }
}
/* في الثيمات الفاتحة: نص الزر الذهبي بأفتح لون ليبقى مقروءًا */
#scene-question.is-light .question-yes, #scene-question.is-light .question-no.is-twin { color: var(--bg-2); text-shadow: 0 1px 1px rgba(0, 0, 0, .22); }
/* «لا» يظهر بصنف is-in مثل عناصر rv، لكن بلا الصنف rv نفسه: مكانه يُضبط بـ transform،
   وقاعدة «تقليل الحركة» في الأساس تلغي transform عن كل عنصر rv */
#scene-question .question-no { white-space: nowrap; opacity: 0; transition: opacity .9s ease, transform .18s ease, background-color .25s ease, box-shadow .25s ease; }
#scene-question .question-no.is-in { opacity: 1; }
#scene-question .question-no.is-free {
  position: absolute; top: 0; left: 0; margin: 0; z-index: 4;
  max-width: calc(100% - 24px - var(--safe-l) - var(--safe-r));      /* عبارة طويلة جدًّا تنكسر على سطرين بدل أن تخرج من الشاشة */
  white-space: normal; text-wrap: balance;
  transition: transform .26s var(--ease-spring), opacity .5s ease, background-color .25s ease, box-shadow .25s ease;
}
#scene-question .question-no.is-still { transition: none !important; }
#scene-question.is-yes .question-no:not(.is-twin) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #scene-question .question-no.is-free { transition: none !important; }
  #scene-question.is-lit .question-glint--a { opacity: .95; transform: scale(.85) rotate(18deg); }
  #scene-question.is-lit .question-glint--b { opacity: .8; transform: scale(.8) rotate(30deg); }
}

/* ════════════════════════════════════════════════════════════════════════════
   المشهد ١٢ — الختام (فانوس كبير بين عشرات الفوانيس + كلمات ذهبية + ألعاب نارية)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── الخلفية: سماء ليل، ووهج دافئ يصعد من الأفق كأنه من مدينة مليئة بالفوانيس ── */
#bg-finale {
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 58%, var(--bg-2) 134%);
}
#bg-finale .finale-bg-stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#bg-finale .finale-bg-glow {
  position: absolute; left: -20%; right: -20%; bottom: -6%; height: 56%;
  background:
    radial-gradient(56% 100% at 50% 100%, rgba(var(--gold-rgb), .3) 0%, rgba(var(--gold-rgb), .11) 40%, rgba(var(--gold-rgb), 0) 74%),
    radial-gradient(84% 64% at 50% 100%, rgba(var(--accent-rgb), .24) 0%, rgba(var(--accent-rgb), 0) 72%);
  animation: finale-city 9s ease-in-out infinite;
}
@keyframes finale-city { 0%, 100% { opacity: .76; } 50% { opacity: 1; } }
#bg-finale .finale-bg-lanterns,
#bg-finale .finale-bg-fire { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ── التخطيط: الفانوس في الأعلى، الكلمات في الوسط، الزرّان في الأسفل (لا يوجد زر «التالي» هنا) ── */
#scene-finale {
  --lw: clamp(130px, min(calc(var(--vw) * 49), calc(var(--vh) * 29.5)), 250px);               /* عرض الفانوس الكبير (≈ نصف عرض المسرح) */
  --said: clamp(52px, min(calc(var(--vw) * 20.5), calc(var(--vh) * 12.5)), 104px);            /* أكبر كلمة في الموقع */
  justify-content: flex-start;
  padding-top: calc(var(--safe-t) + 14px);
  padding-bottom: calc(var(--safe-b) + clamp(16px, calc(var(--vh) * 3), 30px));
}
/* فواصل مرنة توزّع الفراغ: فوق الفانوس، بينه وبين الكلمات، وبين الكلمات والزرّين */
#scene-finale .finale-sp { flex: 1 1 0px; width: 1px; min-height: 0; }
#scene-finale .finale-sp--a { flex-grow: 30; min-height: 20px; }
#scene-finale .finale-sp--b { flex-grow: 20; min-height: 4px; }
#scene-finale .finale-sp--c { flex-grow: 50; min-height: 8px; }

/* ── الفانوس الكبير ── */
#scene-finale .finale-hero { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
#scene-finale .finale-lantern {
  position: relative;
  width: var(--lw);
  height: calc(var(--lw) * 1.3636);
  opacity: 0;
  transform: translate3d(0, var(--finale-rise, calc(var(--vh) * 106)), 0);     /* يبدأ تحت حافة الشاشة تمامًا (الكود يضبط المسافة) */
  will-change: transform, opacity;
}
#scene-finale .finale-lantern.is-up {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 4.5s cubic-bezier(.3, .38, .25, 1), opacity 1s ease;
}
/* تقليل الحركة: يظهر في مكانه النهائي بتلاشٍ قصير، مستقيمًا بلا تمايل */
#scene-finale.is-calm .finale-lantern { transform: none; }
#scene-finale.is-calm .finale-bob { animation: none; }

#scene-finale .finale-bob {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  transform-origin: 50% 10%;
  animation: finale-bob 7.2s ease-in-out infinite;
}
@keyframes finale-bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.1deg); }
  50% { transform: translate3d(0, -8px, 0) rotate(1.1deg); }
}

#scene-finale .finale-halo {
  position: absolute; left: 50%; top: 56%;
  width: calc(var(--lw) * 2.3); height: calc(var(--lw) * 2.3);
  margin: calc(var(--lw) * -1.15) 0 0 calc(var(--lw) * -1.15);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb), .46) 0%, rgba(var(--gold-rgb), .26) 36%, rgba(var(--gold-rgb), .09) 66%, rgba(var(--gold-rgb), 0) 100%);
  animation: finale-halo 5.4s ease-in-out infinite;
}
@keyframes finale-halo { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

#scene-finale .finale-paper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
#scene-finale .fl-w  { stop-color: #fff; }
#scene-finale .fl-c0 { stop-color: rgb(var(--glow-rgb)); }
#scene-finale .fl-c1 { stop-color: var(--gold-hi); }
#scene-finale .fl-c2 { stop-color: var(--gold-1); }
#scene-finale .fl-c3 { stop-color: var(--gold-2); }
#scene-finale .fl-c4 { stop-color: var(--gold-3); }
#scene-finale .fl-a0 { stop-color: var(--accent); stop-opacity: 0; }
#scene-finale .fl-a1 { stop-color: var(--accent); stop-opacity: .08; }
#scene-finale .fl-a2 { stop-color: var(--accent); stop-opacity: .36; }
#scene-finale .fl-sh0 { stop-color: #fff; stop-opacity: 0; }
#scene-finale .fl-sh1 { stop-color: #fff; stop-opacity: .2; }
#scene-finale .fl-ribs path { fill: none; stroke: var(--gold-3); stroke-opacity: .44; stroke-width: 1.3; }
#scene-finale .fl-outline { fill: none; stroke: var(--gold-3); stroke-opacity: .6; stroke-width: 1.2; }
#scene-finale .fl-mouth { stroke: var(--gold-3); stroke-width: 2.2; }
#scene-finale .fl-knot { fill: var(--gold-3); }

/* وهج اللهب عند القاعدة */
#scene-finale .finale-flame {
  position: absolute; left: 21%; top: 74%; width: 58%; height: 27%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9) 0%, rgba(var(--glow-rgb), .66) 18%, rgba(var(--gold-rgb), .3) 50%, rgba(var(--gold-rgb), 0) 100%);
  animation: finale-flame 2.7s ease-in-out infinite;
}
@keyframes finale-flame {
  0%, 100% { opacity: .86; transform: scale(1); }
  22% { opacity: 1; transform: scale(1.06); }
  41% { opacity: .78; transform: scale(.96); }
  63% { opacity: .97; transform: scale(1.04); }
  82% { opacity: .84; transform: scale(.98); }
}

/* الجملة على الفانوس: حبر داكن دافئ فوق الورق المضيء (السطور يقسمها الكود ويضبط حجمها) */
#scene-finale .finale-ltext {
  position: absolute; left: 13%; right: 13%; top: 19%; height: 42%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-title); font-weight: 700;
  font-size: calc(var(--lw) * .142);
  line-height: 1.5;
  color: var(--paper-ink);
  text-shadow: 0 1px 0 rgba(var(--glow-rgb), .42);
}
#scene-finale .finale-line { display: block; white-space: nowrap; }

/* ── الكلمات ── */
#scene-finale .finale-words { position: relative; flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; }
/* عتمة ناعمة خلف الكلمات لتبقى مقروءة فوق الفوانيس والألعاب النارية */
#scene-finale .finale-words::before {
  content: ""; position: absolute; left: -14%; right: -14%; top: -30%; bottom: -26%;
  background: radial-gradient(closest-side, rgba(var(--bg-rgb), .66) 0%, rgba(var(--bg-rgb), .42) 54%, rgba(var(--bg-rgb), 0) 100%);
  opacity: 0;
  transition: opacity 1.8s ease;
  pointer-events: none;
}
#scene-finale.is-words .finale-words::before { opacity: 1; }
#scene-finale .finale-birthday { position: relative; margin-bottom: .2em; font-size: clamp(25px, calc(var(--vw) * 7.6), 36px); line-height: 1.6; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
#scene-finale .finale-said {
  position: relative;
  margin: -.04em 0 0;
  font-family: var(--font-title); font-weight: 700;
  font-size: var(--said);
  line-height: 1.3;
  white-space: nowrap;
}
#scene-finale .finale-said.rv { transition-duration: 1.3s, 1.5s; }
/* حشو أوسع حول الكلمة الكبرى حتى لا تُقصّ أطراف خط الرقعة مهما كان النص */
#scene-finale .finale-said .gold-text { padding: .42em .32em .52em; margin: -.42em -.32em -.52em; }

/* ── الزرّان ── */
#scene-finale .finale-actions { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; }
/* مخفيان تمامًا (لا لمس ولا تركيز) حتى يظهرا */
#scene-finale .finale-act { width: 100%; display: flex; justify-content: center; visibility: hidden; transition: opacity 1s ease, transform 1.1s var(--ease-out), visibility 0s linear 1.1s; }
#scene-finale .finale-act.is-in { visibility: visible; transition-delay: 0s; }
#scene-finale .finale-act + .finale-act { margin-top: 10px; }
#scene-finale .finale-wa { position: relative; min-width: min(76%, 270px); }
/* حلقة ذهبية تتنفّس حول زر الواتساب (transform/opacity فقط) */
#scene-finale .finale-wa::after {
  content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px;
  border: 1px solid var(--gold-1);
  border-radius: 999px;
  opacity: 0;
  animation: finale-ring 3s ease-out 1.4s infinite;
  pointer-events: none;
}
@keyframes finale-ring {
  0% { opacity: .7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.14, 1.42); }
}