/* طبقة الحياة المتقدمة — «يعجّ بالحياة دون إزعاج» (§4).
 * كل حركة تحاكي الطبيعة: بذور تسبح، صوت ينتشر، ضوء يمشي، نبتة تنمو.
 * transform/opacity فقط، وreduce-motion يطفئ كل شيء. */

/* ===== 1) بذور الضوء السابحة (يزرعها nooda.js) ===== */
.motes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mote {
  position: absolute;
  bottom: -12px;
  width: var(--size, 5px);
  height: var(--size, 5px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--nooda-primary-light) 0%, transparent 70%);
  opacity: 0;
  will-change: transform, opacity;
  animation: mote-drift var(--dur, 20s) linear var(--delay, 0s) infinite;
}
.mote--gold { background: radial-gradient(circle, var(--nooda-secondary) 0%, transparent 70%); }
@keyframes mote-drift {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  8%   { opacity: var(--o, 0.4); }
  85%  { opacity: var(--o, 0.4); }
  100% { transform: translate3d(var(--sway, 30px), -110vh, 0) scale(1.05); opacity: 0; }
}

/* ===== 2) موجات الصوت — الشعار حياً خلف البطل (يبنيها nooda.js) ===== */
.sonic {
  position: absolute;
  inset-inline-start: 50%;
  top: 34%;
  width: min(72vmin, 680px);
  aspect-ratio: 1;
  transform: translate(50%, -50%);
  pointer-events: none;
  z-index: -1;
}
.sonic i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--nooda-primary-glow);
  opacity: 0;
  will-change: transform, opacity;
  animation: sonic-ripple 7.5s ease-out infinite;
  animation-delay: calc(var(--i) * 2.5s);
}
@keyframes sonic-ripple {
  0%   { transform: scale(0.22); opacity: 0; }
  10%  { opacity: 0.55; }
  100% { transform: scale(1); opacity: 0; }
}

/* ===== 3) رمز العلامة يتنفس — الحلقة المنقطة تدور كنبض دائم ===== */
.brand-mark circle:last-of-type {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: slow-orbit 80s linear infinite;
}
@keyframes slow-orbit { to { transform: rotate(360deg); } }

/* ===== 4) العنوان يُنطق كلمة كلمة (يقسّمه nooda.js) ===== */
.split-ready .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  animation: word-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--wi) * 110ms);
}
@keyframes word-in {
  to { opacity: 1; transform: none; }
}

/* ===== 5) الفانوس — ضوء يرافق المؤشر كمشيك في المزرعة (nooda.js) ===== */
.lantern {
  position: fixed;
  top: 0;
  left: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 174, 128, 0.09) 0%, transparent 62%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.lantern.lit { opacity: 1; }

/* ===== 6) الكرمة — تقدّم القراءة ينمو كغصن أعلى الصفحة ===== */
.vine {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--gradient-cta);
  transform-origin: 100% 50%;
  transform: scaleX(0);
  z-index: 60;
  will-change: transform;
}
[dir="ltr"] .vine { transform-origin: 0% 50%; }

/* ===== 7) تموّج الماء عند النقر (يزرعه nooda.js) ===== */
.ripple-drop {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 248, 245, 0.35) 0%, transparent 70%);
  transform: scale(0);
  pointer-events: none;
  animation: ripple-out 0.7s ease-out forwards;
}
@keyframes ripple-out {
  to { transform: scale(2.4); opacity: 0; }
}

/* ===== 8) الزر الأساسي حي: توهج يتنفس + لمعة تعبر كل بضع ثوانٍ ===== */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.28) 50%, transparent 68%);
  transform: translateX(160%);
  pointer-events: none;
  animation: sheen-pass 8s ease-in-out infinite;
}
@keyframes sheen-pass {
  0%, 70%  { transform: translateX(160%); }
  86%, 100% { transform: translateX(-160%); }
}
.hero .btn-primary,
.wazima-band .btn-primary {
  animation: cta-breathe 6s ease-in-out infinite;
}
@keyframes cta-breathe {
  0%, 100% { box-shadow: var(--shadow-soft); }
  50%      { box-shadow: var(--shadow-glow); }
}

/* ===== 9) بذور القوائم تنبت عند الكشف ===== */
html.js .reveal .seed-mark { transform: scale(0); }
html.js .reveal.in .seed-mark {
  animation: seed-sprout 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--stagger, 0ms) + 180ms);
}
@keyframes seed-sprout {
  to { transform: scale(1); }
}

/* ===== 10) النبتة تنمو رسماً (قصة نودا) ===== */
.sprout {
  width: 104px;
  margin-inline: auto;
  display: block;
  margin-bottom: var(--space-xl);
}
.sprout path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.sprout .bud {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(0);
}
html.js .reveal.in .sprout .d1, html:not(.js) .sprout .d1 { animation: sprout-draw 1.4s ease-out forwards; }
html.js .reveal.in .sprout .d2, html:not(.js) .sprout .d2 { animation: sprout-draw 1.1s ease-out 0.9s forwards; }
html.js .reveal.in .sprout .d3, html:not(.js) .sprout .d3 { animation: sprout-draw 1.1s ease-out 1.25s forwards; }
html.js .reveal.in .sprout .bud, html:not(.js) .sprout .bud { animation: bud-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2s forwards; }
@keyframes sprout-draw { to { stroke-dashoffset: 0; } }
@keyframes bud-pop { to { transform: scale(1); } }

/* ===== 11) الرصيف يحطّ بلطف عند الدخول ===== */
.dock {
  animation: dock-drop 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes dock-drop {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ===== 12) هالة شريط الدعوة تدور ببطء — ضوء يمسح المكان ===== */
.wazima-band::before {
  animation: halo-sway 14s ease-in-out infinite;
}
@keyframes halo-sway {
  0%, 100% { transform: translateX(0) scale(1); }
  50%      { transform: translateX(-4%) scale(1.06); }
}

/* ===== 13) عمق التمرير — حيث تتوفر scroll-driven animations (كروم/إيدج) ===== */
@supports (animation-timeline: scroll()) {
  .aurora-focus {
    animation-name: focus-descend;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
  }
  @keyframes focus-descend {
    to { transform: translateX(50%) translateY(16vh) scale(1.18); opacity: 0.5; }
  }
  .footer {
    animation: footer-lift linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
  @keyframes footer-lift {
    from { transform: translateY(28px); opacity: 0.4; }
  }
}

/* ===== الإطفاء الكامل مع تفضيل تقليل الحركة ===== */
@media (prefers-reduced-motion: reduce) {
  .mote, .sonic, .lantern, .vine { display: none; }
  .btn-primary::after { animation: none; }
  .hero .btn-primary, .wazima-band .btn-primary { animation: none; }
  .brand-mark circle:last-of-type { animation: none; }
  .dock { animation: none; }
  .wazima-band::before { animation: none; }
  html.js .reveal .seed-mark { transform: none; animation: none; }
  .sprout path { stroke-dashoffset: 0; }
  .sprout .bud { transform: none; }
  .aurora-focus, .footer { animation: none !important; }
}