/* ═══════════════════════════════════════════════════════════
   R32 — لایه‌بندی نور Hero و Story
   ═══════════════════════════════════════════════════════════ */
.experience-flow {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
}

/* Hero و Story نباید یک stacking-context مات روی نور بسازند. */
.experience-flow > .hero,
.experience-flow > .path-intro,
.experience-flow > .story-sequence {
  position: relative;
  z-index: auto;
  background: transparent;
}

.ambient-field {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.ambient-orb,
.ambient-image-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: left, top, width, height, opacity, filter, background;
}

/* نور متحرک پایین Hero که وارد Story می‌شود. */
.ambient-orb {
  --orb-rgb: 240, 180, 41;
  --orb-alpha: .21;
  --orb-size: clamp(28rem, 42vw, 38rem);
  z-index: 2;
  width: var(--orb-size);
  height: var(--orb-size);
  opacity: 1;
  background: radial-gradient(circle,
    rgba(var(--orb-rgb), calc(var(--orb-alpha) * .84)) 0%,
    rgba(var(--orb-rgb), calc(var(--orb-alpha) * .46)) 24%,
    rgba(var(--orb-rgb), calc(var(--orb-alpha) * .20)) 49%,
    rgba(var(--orb-rgb), calc(var(--orb-alpha) * .07)) 69%,
    transparent 87%);
  filter: blur(20px) saturate(1.08);
}

/* نور ثابت Hero فقط داخل hero__bg و پشت کل اسلایدر است. */
.ambient-image-orb {
  --image-orb-rgb: 240, 180, 41;
  --image-orb-alpha: .40;
  --image-orb-size: clamp(35rem, 54vw, 50rem);
  z-index: 0;
  width: var(--image-orb-size);
  height: var(--image-orb-size);
  opacity: 1;
  background: radial-gradient(circle,
    rgba(var(--image-orb-rgb), calc(var(--image-orb-alpha) * .80)) 0%,
    rgba(var(--image-orb-rgb), calc(var(--image-orb-alpha) * .42)) 24%,
    rgba(var(--image-orb-rgb), calc(var(--image-orb-alpha) * .17)) 52%,
    rgba(var(--image-orb-rgb), calc(var(--image-orb-alpha) * .055)) 73%,
    transparent 88%);
  filter: blur(22px) saturate(1.07);
}

.ambient-field__grain,
.ambient-field__vignette {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ambient-field__grain {
  opacity: .018;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.14) 0 .42px, transparent .72px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08) 0 .38px, transparent .68px);
  background-size: 23px 27px, 31px 35px;
  mix-blend-mode: soft-light;
}
.ambient-field__vignette {
  opacity: .11;
  background: radial-gradient(ellipse at center, transparent 67%, rgba(0,0,0,.05) 100%);
}

/* محتوای Hero بالاتر از نور متحرک است. */
.hero__inner {
  position: relative;
  z-index: 5;
}

/* Story sticky شفاف اما بالاتر از نور است؛ زمینه روی خود Story قرار می‌گیرد. */
.story-sequence__sticky {
  z-index: 4;
  background: transparent !important;
}

.hero__bg {
  z-index: 0;
  overflow: visible;
}
.hero__bg .ambient-image-orb { z-index: 0; }
.hero-slide__media,
.hero-slide__vector-wrap {
  position: relative;
  z-index: 2;
  isolation: isolate;
}
.hero-slide__media img,
.hero-slide__vector-wrap img {
  position: relative;
  z-index: 2;
}

.experience-flow .hero__bg::before,
.experience-flow .hero__bg::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 720px) {
  .ambient-orb { --orb-size: clamp(23rem, 96vw, 31rem); }
  .ambient-image-orb { --image-orb-size: clamp(25rem, 108vw, 35rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-orb,
  .ambient-image-orb { filter: blur(16px); }
}

/* ═══════════════════════════════════════════════════════════
   R33 — در حالت بدون انیمیشن نور Hero در خود Hero ثابت می‌ماند
   ═══════════════════════════════════════════════════════════ */
[data-animation-enabled="false"] .ambient-field {
  position: absolute;
  inset: 0 0 auto;
  height: 100svh;
}
[data-animation-enabled="false"] .ambient-orb,
[data-animation-enabled="false"] .ambient-image-orb {
  transition: none !important;
}