/* ═══ اشتعال النيون (المواصفات ٥.٢) ═══ */

/* المسارات مرسومة بالكامل افتراضياً — تُقصّ فقط عند تفعيل الحركة */
#hero.is-animating [data-neon] {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  animation: draw 900ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes draw { to { stroke-dashoffset: 0; } }

/* الرمشة ثم الاستقرار */
#hero-logo { transition: opacity 200ms linear; }
#hero.is-drawing #hero-logo { opacity: 1; }

#hero.is-lit #hero-logo {
  opacity: 1;
  animation: flicker 420ms steps(1) 1, breathe 4s var(--ease-inout) 420ms infinite;
  filter: drop-shadow(0 0 calc(6px * var(--logo-glow)) var(--brand))
          drop-shadow(0 0 calc(22px * var(--logo-glow))
                      rgba(240, 182, 98, calc(0.55 * var(--logo-glow))));
}

/* نهاراً لا نيون: الشعار خط نظيف بلا توهج ولا تنفّس */
:root[data-theme="light"] #hero.is-lit #hero-logo {
  animation: none;
  filter: none;
}

@keyframes flicker {
  0%, 18%, 36% { opacity: 1; }
  9%, 27%      { opacity: 0.25; }
  100%         { opacity: 1; }
}

@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 6px var(--brand))
                     drop-shadow(0 0 22px rgba(240,182,98,0.55)); }
  50%      { filter: drop-shadow(0 0 8px var(--brand-strong))
                     drop-shadow(0 0 30px rgba(240,182,98,0.68)); }
}

/* الورقة تتنفس */
#hero.is-lit [data-leaf] {
  animation: sway 3s var(--ease-inout) infinite;
}
@keyframes sway {
  0%, 100% { rotate: -2deg; }
  50%      { rotate: 2deg; }
}

/* التوهج الخلفي والنصوص تدخل بعد الاشتعال */
#hero.is-lit::before { opacity: 1; transition: opacity var(--d-hero) var(--ease-out); }

#hero-est, #hero-tagline { translate: 0 12px; }

#hero.is-lit #hero-est,
#hero.is-lit #hero-tagline {
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--d-enter) var(--ease-out) 600ms,
              translate var(--d-enter) var(--ease-out) 600ms;
}

#hero.is-lit #hero-cue {
  opacity: 1;
  transition: opacity var(--d-enter) var(--ease-out) 1400ms;
  animation: cue 2s var(--ease-inout) 1800ms infinite;
}
@keyframes cue {
  0%, 100% { translate: 0 0;    opacity: 0.35; }
  50%      { translate: 0 10px; opacity: 1; }
}

/* ═══ خروج الافتتاحية بالبارالاكس (المواصفات ٥.٣) ═══ */
#hero-logo,
#hero-est,
#hero-tagline {
  scale: calc(1 - var(--hero-progress) * 0.1);
}
#hero::before {
  scale: calc(1 - var(--hero-progress) * 0.25);
}

/* ═══ دخول الأقسام (المواصفات ٥.٦) ═══ */
.menu-section.is-in .section-title span {
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--d-enter) var(--ease-out) calc(var(--i) * 60ms),
              translate var(--d-enter) var(--ease-out) calc(var(--i) * 60ms);
}

.grid .card {
  opacity: 0;
  translate: 0 20px;
  scale: 0.96;
}
.menu-section.is-in .grid .card {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: opacity var(--d-enter) var(--ease-out) calc(var(--i, 0) * 50ms),
              translate var(--d-enter) var(--ease-out) calc(var(--i, 0) * 50ms),
              scale var(--d-enter) var(--ease-out) calc(var(--i, 0) * 50ms);
}

/* ═══ وميض هيكلي أثناء تحميل الصور (المواصفات ٥.٩) ═══ */
.card-media::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 20%, rgba(240,182,98,0.07) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
/* الصورة حين تُحمّل تغطي الوميض تماماً */
.card-img { position: relative; z-index: 1; }

@keyframes shimmer {
  from { background-position: 220% 0; }
  to   { background-position: -120% 0; }
}

/* ═══ استجابة اللمس (المواصفات ٥.٧) ═══ */
.card:active { scale: 0.97; }

@media (hover: hover) {
  .card:hover .card-img { scale: 1.06; }
  .card:hover { border-color: var(--accent); }
}

/* ═══ احترام تقليل الحركة ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* كل شيء يظهر فوراً في مكانه النهائي */
  #hero-logo, #hero-est, #hero-tagline, #hero-cue, #hero::before,
  .section-title span, .grid .card {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
  #hero.is-animating [data-neon] { stroke-dashoffset: 0 !important; }
}