/* ==========================================================================
   شعار الهيدر المتحرك — views/partials/logo-mark.ejs
   الخط الذهبي يرسم نفسه كقلم: الجمل ثم النخلة ثم الشمس وأشعتها، ثم يظهر الاسم
   بخط القراءة وتتجمع حروف DIGITAL OASIS. بعدها لمعة خفيفة تمر على الخط كل 10 ثوانٍ
   ومع المرور بالماوس. كل الحركة داخل no-preference: مع الحركة المخففة يظهر الشعار ثابتًا.
   القناع مكوّن من خطوط وسطية مستخرجة من الشعار نفسه؛ الرسم النهائي هو مسار الشعار الأصلي.
   ========================================================================== */
.logo--live .lw { width: 100%; height: 100%; display: block; overflow: visible; }
.lw__ink { fill: none; stroke: #fff; stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.lw__all { fill: #fff; }
.lw__sparks use, .lw__sparks path, .lw__glint use {
  fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; pointer-events: none;
}
.lw__spark--halo { stroke: #F5C96B; stroke-width: 58; stroke-opacity: .3; --T: 110px; }
.lw__spark--core { stroke: #FFF8E4; stroke-width: 17; --T: 34px; }
.lw__glint-halo { stroke: #F5C96B; stroke-width: 42; stroke-opacity: .26; --T: 130px; }
.lw__glint-core { stroke: #FFF6DA; stroke-width: 12; --T: 80px; }
.logo--live:hover .lw { filter: brightness(1.12); }
.logo--live .logo__tag > span > span { display: inline-block; }
/* الحروف المنفصلة تفقد التقنين (kerning) فتزيد ~1px؛ نعيد العرض كما كان حتى لا يتحرك شريط التنقل. */
.logo--live .logo__tag > span { margin-inline-end: -.115em; }

@media (prefers-reduced-motion: no-preference) {
  /* القلم: كل خط يُكشف من أوله لآخره بنفس المنحنى الذي تتبعه شرارته. */
  .lw__ink > * {
    stroke-dasharray: calc(var(--L) * 1px + 14px) calc(var(--L) * 1px + 60px);
    animation: lw-ink var(--du) cubic-bezier(.6, .05, .3, 1) var(--dl) backwards;
  }
  .lw__ink > .lw__out { animation-timing-function: cubic-bezier(.2, .6, .3, 1); }
  .lw__all { animation: lw-fade-in .35s linear 1.55s backwards; }

  .lw__spark {
    stroke-dasharray: var(--T) calc(var(--L) * 1px + 400px);
    animation: lw-spark var(--du) cubic-bezier(.6, .05, .3, 1) var(--dl) backwards,
               lw-spark-fade var(--du) linear var(--dl) backwards;
  }
  .lw__spark.lw__out { animation-timing-function: cubic-bezier(.2, .6, .3, 1), linear; }

  /* توهج واحد عند اكتمال الرسم. */
  .logo--live .lw { animation: lw-glow 1.3s ease-out 1.45s backwards; }

  /* لمعة تمر على الخط كل 10 ثوانٍ، وفورًا عند المرور أو التركيز بلوحة المفاتيح. */
  .lw__glint use {
    stroke-dasharray: var(--T) calc(var(--L) * 1px + 400px);
    animation: lw-glint 10s cubic-bezier(.45, .05, .35, 1) 3.4s infinite;
  }
  .logo--live:hover .lw__glint use,
  .logo--live:focus-visible .lw__glint use { animation: lw-glint-now 1.1s cubic-bezier(.45, .05, .35, 1) both; }

  /* الاسم يظهر بخط القراءة بدءًا من جهة الرمز. الحشو يُبقي حركات الحروف داخل القناع. */
  .logo--live .logo__name {
    padding: .22em .14em; margin: -.22em -.14em;
    -webkit-mask: linear-gradient(90deg, transparent 45%, #000 55%) 100% 0 / 300% 100% no-repeat;
            mask: linear-gradient(90deg, transparent 45%, #000 55%) 100% 0 / 300% 100% no-repeat;
    animation: lw-name-rtl .85s cubic-bezier(.3, .1, .2, 1) .7s backwards;
  }
  html[dir='ltr'] .logo--live .logo__name {
    -webkit-mask-image: linear-gradient(270deg, transparent 45%, #000 55%);
            mask-image: linear-gradient(270deg, transparent 45%, #000 55%);
    -webkit-mask-position: 0 0; mask-position: 0 0;
    animation-name: lw-name-ltr;
  }

  /* حروف DIGITAL OASIS تبدأ متباعدة ثم تتجمع في مكانها. */
  .logo--live .logo__tag > span > span { animation: lw-tag .9s cubic-bezier(.2, .7, .2, 1) 1.05s backwards; }
}

@keyframes lw-ink { from { stroke-dashoffset: calc(var(--L) * 1px + 28px); } to { stroke-dashoffset: 0; } }
@keyframes lw-spark {
  from { stroke-dashoffset: calc(var(--T) + 14px); }
  to { stroke-dashoffset: calc(var(--T) - var(--L) * 1px - 14px); }
}
@keyframes lw-spark-fade { 0% { opacity: 0; } 6%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lw-fade-in { from { opacity: 0; } }
@keyframes lw-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 201, 107, 0)); }
  35% { filter: drop-shadow(0 0 4px rgba(245, 201, 107, .7)); }
}
@keyframes lw-glint {
  0% { stroke-dashoffset: calc(var(--T) + 14px); opacity: 0; }
  2%, 12% { opacity: 1; }
  14%, 100% { stroke-dashoffset: calc(var(--T) - var(--L) * 1px - 14px); opacity: 0; }
}
@keyframes lw-glint-now {
  0% { stroke-dashoffset: calc(var(--T) + 14px); opacity: 0; }
  12%, 85% { opacity: 1; }
  100% { stroke-dashoffset: calc(var(--T) - var(--L) * 1px - 14px); opacity: 0; }
}
@keyframes lw-name-rtl {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; filter: blur(3px); opacity: .3; }
  to { -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(0); opacity: 1; }
}
@keyframes lw-name-ltr {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(3px); opacity: .3; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; filter: blur(0); opacity: 1; }
}
@keyframes lw-tag {
  from { opacity: 0; transform: translateX(calc(var(--x) * .6em)); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}