/* ──────────────────────────────────────────────────────────────────────
   صحنه‌ی شاخه — ظرف، نور، و رنگِ اجزا

   ⚠ رنگ‌ها اینجا هستند نه در جاوااسکریپت. هر شکل فقط یک `class` می‌گیرد
     و رنگش را از همین فایل برمی‌دارد؛ نتیجه این است که تمِ تیره بدون
     یک خط کد روی صحنه می‌نشیند.

   ⚠ نورِ خورشید با فیلترِ SVG ساخته نمی‌شود، با سه لایه‌ی CSS. فیلترِ
     زنده روی محتوایی که هر فریم عوض می‌شود هر فریم از نو حساب می‌شود؛
     این لایه‌ها ثابت‌اند و مرورگر روی GPU نگهشان می‌دارد — یعنی
     انیمیشنشان عملاً رایگان است.
   ────────────────────────────────────────────────────────────────────── */

#scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s var(--ease-calm, ease);

}
#scene.ready {
  opacity: 0.62;
  /* صحنه بالاتر از قابِ دید می‌نشیند تا تنه‌ی شاخه زیرِ هدر بماند و
     تاج پایین‌تر بیفتد. پایینِ قاب هم به‌هرحال محو شده، پس این ۲۰۰
     پیکسلِ خالیِ زیر، جایی دیده نمی‌شود. */
  margin-top: -200px;
}
@media (max-height: 700px) {
  #scene.ready { margin-top: -120px; }
}
#scene svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* پایینِ قاب نرم محو می‌شود تا نقاشی با متنِ بخش‌های پایین دعوا نکند */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,0.45) 66%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,0.45) 66%, transparent 88%);
}

/* ── پوستِ چوبی ─────────────────────────────────────────────────── */

.bk-body  { fill: var(--s-bark); }
.bk-shade { fill: var(--s-bark-dark); opacity: 0.9; }
.bk-lit   { fill: var(--s-bark-lite); opacity: 0.8; }
.bk-rim   { fill: var(--s-bark-rim); opacity: 0.7; }
.bk-crack {
  fill: none;
  stroke: var(--s-bark-dark);
  stroke-linecap: round;
  opacity: 0.42;
}
.bk-grain {
  fill: none;
  stroke: var(--s-bark-rim);
  stroke-linecap: round;
  opacity: 0.34;
}

/* ── برگ ───────────────────────────────────────────────────────── */

.blade { stroke: var(--s-leaf-deep); stroke-width: 1.1; stroke-opacity: 0.4; }
.blade.t0 { fill: url(#gLeaf0); }
.blade.t1 { fill: url(#gLeaf1); }
.blade.t2 { fill: url(#gLeaf2); }
.blade.t3 { fill: url(#gLeaf3); }

.veins {
  fill: none;
  stroke: var(--s-vein);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.6;
}

/* ── شکوفه ─────────────────────────────────────────────────────── */

.petals {
  fill: url(#gBloom);
  stroke: var(--s-bloom-deep);
  stroke-width: 0.6;
  stroke-opacity: 0.4;
}
.stamen {
  fill: var(--s-stamen);
  stroke: var(--s-stamen);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* ── درزِ نور ───────────────────────────────────────────────────── */

.glint { }

/* ── تلالوِ خورشید ───────────────────────────────────────────────
   سه لایه:
     ۱ هاله‌ی گرم در بالا-راست — منبعِ نور
     ۲ باریکه‌های موازیِ نور، **پشتِ** شاخه؛ چون شاخ‌وبرگ رویشان
       می‌افتد، نور از «لای» برگ‌ها بیرون می‌زند
     ۳ مهِ بسیار کم‌رنگ، جلوی همه — همان درخششی که روی لنز می‌نشیند */

/* ⚠ هر سه لایه `translateZ(0)` می‌گیرند تا مرورگر برایشان لایه‌ی
   ترکیبیِ جدا بسازد، و **فقط `transform`** انیمیت می‌شود.
   انیمیتِ `opacity` روی لایه‌ای به اندازه‌ی کلِ صفحه، هر فریم کلِ
   پس‌زمینه را دوباره رنگ می‌کند — تنها همین سه لایه نرخ فریم را از
   ۶۰ به ۲۸ می‌آوردند. `transform` روی GPU جابه‌جا می‌شود و رایگان است. */
#scene .sun-glow,
#scene .sun-rays,
#scene .sun-haze {
  position: absolute;
  inset: -14%;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#scene .sun-glow {
  background: radial-gradient(
    46% 42% at 86% 4%,
    color-mix(in srgb, var(--s-sun-warm) 62%, transparent) 0%,
    color-mix(in srgb, var(--s-sun) 30%, transparent) 34%,
    transparent 72%
  );
}

#scene .sun-rays {
  /* ⚠ فقط ناحیه‌ی بالا-راست، نه کلِ صفحه: هزینه‌ی یک لایه‌ی متحرک با
     مساحتش بالا می‌رود، و پرتوها هرگز به پایین-چپِ قاب نمی‌رسند. */
  inset: -18% -18% 34% 26%;
  background: repeating-linear-gradient(
    104deg,
    transparent 0px,
    var(--s-ray) 34px,
    transparent 70px,
    transparent 96px,
    var(--s-ray-2) 132px,
    transparent 168px,
    transparent 210px
  );
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(78% 78% at 88% -6%, #000 0%, rgba(0,0,0,0.45) 42%, transparent 76%);
  mask-image: radial-gradient(78% 78% at 88% -6%, #000 0%, rgba(0,0,0,0.45) 42%, transparent 76%);
  animation: rays-drift 21s ease-in-out infinite;
  will-change: transform, opacity;
}

#scene .sun-haze {
  background: radial-gradient(
    58% 48% at 82% 2%,
    var(--s-haze) 0%,
    transparent 66%
  );
  opacity: 0.85;
  /* ⚠ این تنها لایه‌ای است که **جلوی** SVG می‌نشیند. اگر انیمیت شود،
     مرورگر مجبور است هر فریم کلِ ناحیه‌ی زیرش — یعنی تمامِ شاخ و برگ —
     را دوباره ترکیب کند. اندازه‌گیری: با انیمیشن ۲۰ فریم، بدونش ۶۰.
     پس ثابت می‌ماند؛ نفسِ نور را دو لایه‌ی پشتی می‌دهند. */
}

/* هر دو فقط جابه‌جایی و مقیاس‌اند — نه شفافیت. حسِ «نفس‌کشیدنِ نور»
   از حرکتِ آرامِ لبه‌ی هاله روی برگ‌ها می‌آید، نه از کم‌وزیادشدنِ آن. */
@keyframes glow-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-2.2%, 1.4%, 0) scale(1.07); }
}
@keyframes rays-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  35%  { transform: translate3d(-2.4%, 1.2%, 0) rotate(-0.9deg); }
  70%  { transform: translate3d(1.8%, -0.9%, 0) rotate(0.6deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* تمِ تیره: نور باید سرد و کم‌جان‌تر باشد، وگرنه صفحه‌ی تیره را
   می‌شوید و کنتراست متن می‌پرد. */
:root[data-theme="dark"] #scene .sun-rays,
:root[data-theme="dark"] #scene .sun-haze {
  mix-blend-mode: screen;
  opacity: 0.4;
}
:root[data-theme="dark"] #scene .sun-glow { opacity: 0.55; }
:root[data-theme="dark"] #scene.ready { opacity: 0.5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #scene .sun-rays,
  :root:not([data-theme="light"]) #scene .sun-haze {
    mix-blend-mode: screen;
    opacity: 0.4;
  }
  :root:not([data-theme="light"]) #scene .sun-glow { opacity: 0.55; }
  :root:not([data-theme="light"]) #scene.ready { opacity: 0.5; }
}

/* روی صفحه‌ی باریک متن تمام عرض را می‌گیرد؛ نقاشی باید عقب‌تر بنشیند. */
@media (max-width: 980px) {
  #scene.ready {
    opacity: 0.5;
    /* قاب از سمت راست باز می‌شود تا نقاشی بزرگ‌تر بیفتد و شاخ‌وبرگِ
       سمت راست — جایی که متنِ فارسی شروع می‌شود — از قاب بیرون برود؛
       و ۴۰ پیکسل هم بالاتر می‌نشیند. */
    margin-right: -100px;
    margin-top: -40px;
  }
}

/* حالتِ سبک — وقتی خودِ صحنه تشخیص داد دستگاه کند است */
#scene.lite .sun-rays { animation: none; }
#scene.lite .bk-grain,
#scene.lite .bk-crack { display: none; }

@media (prefers-reduced-motion: reduce) {
  #scene .sun-glow,
  #scene .sun-rays,
  #scene .sun-haze { animation: none; }
}