/* خلفية البطل: كسوف. كوكب أسود يطلّ من الأسفل وحافته تشتعل، نجوم دقيقة، وهالة خلف لورا.
   الأسود هو الغالب دائماً؛ الضوء يحيط بالمشهد ولا ينافس الشخصية. */
@property --ig { syntax: "<number>"; inherits: true; initial-value: 0; }
.lx-scene { position: absolute !important; inset: 0 0 auto 0 !important; height: 100svh; min-height: 560px; z-index: 0; overflow: hidden;
  pointer-events: none !important; background: #000; --mx: 50%; --crest: 84%; --D: max(190vw, 2000px); }
.lx-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.5s ease .6s; }
.lx-scene.on canvas { opacity: 1; }

/* هالة ناعمة خلف وجه لورا */
.lx-halo { position: absolute; left: 50%; top: -120px; width: 760px; height: 520px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, #b9a6ff1f, #ffdcae0d 55%, transparent); filter: blur(10px); animation: lx-halo 8s ease-in-out infinite; }
@keyframes lx-halo { 50% { opacity: .65; scale: 1.06; } }

/* ---------- الكسوف ---------- */
.lx-eclipse { position: absolute; inset: 0; translate: 0 22vh; opacity: 0; --ig: 0;
  transition: translate 2.6s cubic-bezier(.16,1,.3,1), opacity 1.6s ease, --ig 2.4s cubic-bezier(.65,0,.35,1) 1s; }
.lx-scene.on .lx-eclipse { translate: 0 0; opacity: 1; --ig: 1; }
.lx-eclipse > i { position: absolute; left: 50%; top: var(--crest); width: var(--D); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; display: block; }

/* الحافة: دائرة ملوّنة خلف الكوكب ومرفوعة قليلاً، فيظهر منها هلال رفيع */
.lx-rim { top: calc(var(--crest) - 2.5px) !important;
  background: linear-gradient(90deg, #6b5bff 0%, #b48cff 22%, #ffd7a0 44%, #fff3e0 50%, #ffd7a0 56%, #b48cff 78%, #6b5bff 100%) 0 0 / 200% 100%;
  animation: lx-hue 16s ease-in-out infinite alternate;
  -webkit-mask: linear-gradient(90deg, transparent calc(50% - var(--ig) * 50%), #000 calc(50% - var(--ig) * 34%), #000 calc(50% + var(--ig) * 34%), transparent calc(50% + var(--ig) * 50%));
  mask: linear-gradient(90deg, transparent calc(50% - var(--ig) * 50%), #000 calc(50% - var(--ig) * 34%), #000 calc(50% + var(--ig) * 34%), transparent calc(50% + var(--ig) * 50%)); }
@keyframes lx-hue { to { background-position: 100% 0; } }
/* الغلاف الجوي: نسخة ضبابية من الحافة ترفع الضوء للأعلى */
.lx-atmo { top: calc(var(--crest) - 26px) !important; filter: blur(46px); opacity: calc(var(--ig) * .85);
  background: linear-gradient(90deg, transparent 8%, #7f6bff 26%, #ffb867 50%, #7f6bff 74%, transparent 92%);
  animation: lx-breath 7s ease-in-out infinite; }
@keyframes lx-breath { 50% { opacity: calc(var(--ig) * .6); } }
.lx-planet { background: radial-gradient(70% 12% at 50% 0%, #121019 0%, #050507 40%, #000 70%); box-shadow: 0 -1px 0 #ffffff14 inset; }

/* نقطة ضوء على الحافة تتبع المؤشر */
.lx-spark { width: 340px !important; height: 70px; aspect-ratio: auto !important; translate: -50% -50% !important; left: var(--sx, 50%) !important; top: var(--sy, var(--crest)) !important;
  background: radial-gradient(closest-side, #fff8ee 0%, #ffe2b8aa 18%, #c9a6ff33 50%, transparent 100%); filter: blur(4px); opacity: calc(var(--ig) * .95);
  mix-blend-mode: screen; transition: left .9s cubic-bezier(.16,1,.3,1), top .9s cubic-bezier(.16,1,.3,1); }

@media (max-width: 699px) {
  .lx-scene { --crest: 86%; --D: 260vw; }
  .lx-halo { width: 420px; height: 340px; }
  .lx-spark { width: 200px !important; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-eclipse { transition: none; translate: 0 0; opacity: 1; --ig: 1; }
  .lx-rim, .lx-atmo, .lx-halo { animation: none; }
}