/* ==========================================================================
   home.css — نوار بالا، نمای هوایی، خطوط دور ساختمان‌ها،
              و دو حرکت سایت: ابر و مدال
   ========================================================================== */

/* ── نمای هوایی ────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 100vh;
  /* --wp-bar را base.css وقتی نوار مدیریت وردپرس هست پر می‌کند */
  height: calc(100dvh - var(--wp-bar, 0px));
  min-height: 26rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__img,
.hero__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__img img {
  object-fit: cover;
  /* باید با preserveAspectRatio="xMidYMid slice" روی SVG یکی باشد */
  object-position: center center;
}

/* سایه‌بان پایین — فقط آن‌قدر که ریل نام‌ها خوانا بماند */
.hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 30%;
  /* پردهٔ خوانایی، عمداً سیاهِ خنثی: زرشکیِ نیمه‌شفاف روی عکس
     مثل یک هالهٔ قرمز دیده می‌شد. */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.42) 46%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── خطوط دور ساختمان‌ها ──────────────────────────────────────────────
   lines.png فقط ماسک است؛ رنگ و نور را CSS می‌سازد.
   mask-size: cover دقیقاً همان بریدگی object-fit: cover تصویر را می‌دهد،
   پس خطوط در هر ابعادی روی خودِ ساختمان می‌مانند.
   -------------------------------------------------------------------- */

.hero__lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: url('../img/lines-mask.webp') center / cover no-repeat;
  mask: url('../img/lines-mask.webp') center / cover no-repeat;
  /* لبه تیره نازک، تا خط روی بام روشن هم دیده شود */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85));
  opacity: 0;
}
/* ── نور روی خطوط ساختمان‌ها ──────────────────────────────────────────
   الگو: حاشیهٔ نورانیِ دکمهٔ هوشمند کروم — یک نقطهٔ روشن با دنبالهٔ
   رنگی که دور خط می‌دود و پشتش محو می‌شود.

   نکتهٔ کلیدی: هر ساختمان نور خودش را دارد. یک گرادیان واحد روی کل
   صفحه، رنگ‌ها را هم‌زمان عوض می‌کند و «دور زدن» دیده نمی‌شود؛ اما
   یک مخروطیِ چرخان که مرکزش روی خودِ ساختمان است، دقیقاً همان
   حرکتِ دور زدن را می‌سازد. جای هر نور را helishot.js از روی
   چندضلعی همان ساختمان حساب می‌کند.

   ماسکِ lines.png این لایه را فقط روی خطِ دور ساختمان‌ها نشان می‌دهد.
   ------------------------------------------------------------------- */
.hero.is-ready .hero__lines {
  opacity: 1;
}

/* رنگِ پایه: خط همیشه دیده می‌شود، حتی وقتی نور آن‌طرف ساختمان است */
.hero__lines-glow {
  position: absolute;
  inset: 0;
  background: rgb(var(--tala-rgb) / 0.5);
}

/* نورِ دونده. هر ساختمان یکی دارد؛ helishot.js جایش را می‌گذارد. */
.hero__lines-sweep {
  display: none; /* لایهٔ قدیمی، جایش را نورهای تک‌تک گرفتند */
}

.comet {
  position: absolute;
  /* کمی بزرگ‌تر از ساختمان، تا قوسِ نور از گوشه‌ها هم رد شود */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  will-change: transform;
  animation: comet-spin var(--spin, 5s) linear infinite;
  animation-delay: var(--lag, 0s);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 190deg,
    hsl(var(--hue) 90% 55% / 0.15) 235deg,
    hsl(calc(var(--hue) + 40) 95% 60% / 0.45) 285deg,
    hsl(calc(var(--hue) + 80) 100% 68% / 0.85) 322deg,
    hsl(calc(var(--hue) + 110) 100% 84% / 1) 344deg,
    #fff 353deg,
    transparent 357deg,
    transparent 360deg
  );
}

@keyframes comet-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* رنگِ خودِ نور هم آرام می‌چرخد، تا هیچ دوری شبیه دور قبل نباشد */
.hero.is-ready .hero__lines {
  animation: lines-hue 26s linear infinite;
}
@keyframes lines-hue {
  from {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) hue-rotate(0deg);
  }
  to {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) hue-rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .comet {
    animation: none;
  }
  .hero.is-ready .hero__lines {
    animation: none;
  }
}

/* ── صفحه عمودی: عکس کامل، با کشیدن افقی ─────────────────────────────
   عکس هلی‌شات پهن است و صفحهٔ موبایل بلند. سه راه داشتیم: عکسِ کوچکِ
   وسطِ دو نوار خالی، یا عکسِ تمام‌قد که دو سرش بریده شود، یا عکسِ
   تمام‌قد که با انگشت به چپ و راست برود.

   سومی را انتخاب کردیم: هیچ فضای خالی نمی‌ماند، هیچ ساختمانی هم از
   دست نمی‌رود. عکس به قدِ صفحه بزرگ می‌شود و خودِ .hero افقی اسکرول
   می‌کند؛ عکس، خطوط و ناحیه‌های کلیک هر سه یک اندازه‌اند و با هم
   حرکت می‌کنند، پس نقطهٔ کلیک هیچ‌وقت از ساختمان جدا نمی‌افتد.
   ------------------------------------------------------------------ */
@media (max-aspect-ratio: 1 / 1) {
  .hero {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .hero::-webkit-scrollbar {
    display: none;
  }

  .hero .hero__img,
  .hero .hero__lines,
  .hero .hero__medals {
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    margin: 0;
    height: 100%;
    /* پهنای کاملِ عکس در این ارتفاع. نسبت را helishot.js از خودِ
       فایل عکس می‌خواند، پس با عوض‌شدن هلی‌شات هم درست می‌ماند. */
    width: calc((100dvh - var(--wp-bar, 0px)) * var(--hero-ar-num, 1.7917));
    /* ★ بازنشانیِ عمومیِ max-width:100% روی img/picture/svg، عکس و
       لایهٔ ناحیه‌ها را به عرضِ صفحه می‌چسباند و از لایهٔ خطوط جدا
       می‌کند — یعنی نقطهٔ کلیک از ساختمان می‌لغزد. */
    max-width: none;
    aspect-ratio: auto;
  }
  .hero .hero__img img {
    object-fit: cover;
  }
  .hero .hero__lines {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  /* نام‌ها و راهنما با عکس جابه‌جا نمی‌شوند */
  .hero .hero__rail,
  .hero .hero__scroll {
    position: fixed;
    inset-inline: 0;
  }
  .hero .hero__rail {
    inset-block-end: calc(var(--s6) + var(--s4));
    inset-block-start: auto;
  }
  .hero::after {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    height: 34%;
  }

}


/* ── ناحیه کلیک هر ساختمان ─────────────────────────────────────────────
   SVG روی عکس می‌نشیند و دقیقاً همان کادر را دارد. خودِ خط را لایهٔ
   ماسک‌شده می‌کشد؛ اینجا فقط سطحِ کلیک و بازخوردِ هاور است.
   -------------------------------------------------------------------- */

.hero__medals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.bshape {
  cursor: pointer;
}
.bshape__hit {
  fill: transparent;
  stroke: none;
  transition: fill var(--dur-motevaset) var(--ease-narm);
}
/* بازخورد هاور: یک روشناییِ نرم روی خودِ ساختمان.
   عمداً سطح است نه خط — با خطوط دقیقِ lines.png رقابت نمی‌کند. */
.bshape:hover .bshape__hit,
.bshape.is-lit .bshape__hit {
  fill: rgba(245, 237, 221, 0.13);
}

/* ── ریل نام‌ها ────────────────────────────────────────────────────────
   افقی و در یک خط، پایین صفحه. عمداً پله‌ای و کنار ساختمان‌ها نیست:
   فهرستِ پله‌ای، چشم را از خودِ نما می‌دزدید.
   -------------------------------------------------------------------- */

.hero__rail {
  position: absolute;
  z-index: 4;
  inset-inline: 0;
  inset-block-end: calc(var(--s6) + var(--s4));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s1) var(--s3);
  padding-inline: var(--s5);
}

.rail__item {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  min-height: 42px;
  padding: var(--s2) var(--s4);
  color: var(--shir-kam);
  font-family: var(--font-titr);
  font-size: 1.3rem;
  line-height: 1.4;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
  transition: color var(--dur-kotah) var(--ease-narm);
}
.rail__item::after {
  content: '';
  position: absolute;
  inset-inline: var(--s4);
  inset-block-end: 6px;
  height: 1px;
  background-image: var(--gold-rule);
  transform: scaleX(0);
  transition: transform var(--dur-motevaset) var(--ease-narm);
}
.rail__item:hover,
.rail__item:focus-visible,
.rail__item.is-lit {
  color: var(--sadaf);
}
.rail__item:hover::after,
.rail__item:focus-visible::after,
.rail__item.is-lit::after {
  transform: scaleX(1);
}
.rail__soon {
  font-family: var(--font-matn);
  font-size: var(--fs-riz);
  color: var(--tala-saye);
}

/* ── راهنمای پایین ───────────────────────────────────────────────────── */

.hero__scroll {
  position: absolute;
  z-index: 4;
  inset-inline: 0;
  inset-block-end: var(--s5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin: 0;
  color: var(--shir-kam);
  font-size: var(--fs-riz);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 700ms var(--ease-narm) 900ms;
  pointer-events: none;
}
.hero.is-ready .hero__scroll {
  opacity: 0.8;
  pointer-events: auto;
  cursor: pointer;
}
.hero__scroll svg {
  animation: scroll-nudge 2.6s var(--ease-narm) infinite;
}
@keyframes scroll-nudge {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll svg {
    animation: none;
  }
}

@media (max-width: 46rem) {
  .rail__item {
    font-size: 1.1rem;
    padding: var(--s2) var(--s3);
  }
  .hero__rail {
    inset-block-end: calc(var(--s6) + var(--s2));
    gap: 0 var(--s2);
  }
}

/* نام‌ها روی خودِ عکس می‌نشینند: کوچک، اما با ارتفاع لمسیِ کافی. */
@media (max-aspect-ratio: 1 / 1) and (max-width: 46rem) {
  .hero__rail {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s2);
    padding-inline: var(--s4);
    inset-inline: 0;
  }
  .rail__item {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    font-size: var(--fs-kootah);
    border: 1px solid var(--marz-kam);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(8px);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   مدال — تنها حرکت انتقالی سایت
   بیضی نشان برند از مختصات همان ساختمانِ کلیک‌شده باز می‌شود تا تمام صفحه.
   می‌گشاید، نمی‌پوشاند: مقصد از لحظه اول دیده می‌شود.
   ══════════════════════════════════════════════════════════════════════ */

.medal {
  position: fixed;
  inset: 0;
  z-index: var(--z-medal);
  pointer-events: none;
}

/* قاب طلایی که همراه بیضی بزرگ می‌شود و بعد محو می‌شود.
   عمداً border است نه SVG: عرض خط با بزرگ‌شدن عنصر کش نمی‌آید،
   و left/top/width/height همان حسابی است که clip-path می‌کند. */
.medal__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 1.5px solid var(--tala);
  opacity: 0;
  pointer-events: none;
}
.medal__ring::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--tala-saye);
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .medal__ring {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ابرها — فقط اولین ورود در هر نشست

   مه حجیم صفحه را پر می‌کند، بعد نازک می‌شود، از هم باز می‌شود و
   محو می‌گردد؛ نمای هوایی از پشتش بیرون می‌آید. هفت لایه با سرعت و
   جهت متفاوت حرکت می‌کنند تا مثل ابر واقعی به‌نظر برسد، نه چند لکه.

   همه‌اش گرادیان CSS است — هیچ تصویری دانلود نمی‌شود.
   ══════════════════════════════════════════════════════════════════════ */

.clouds {
  position: fixed;
  inset: 0;
  z-index: var(--z-clouds);
  pointer-events: none;
  background: radial-gradient(130% 95% at 50% 42%, #52282a 0%, #35100f 48%, var(--zereshki) 100%);
  transition: opacity 1500ms ease 1100ms;
}

.clouds__puff {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  transition: transform 2800ms cubic-bezier(0.32, 0, 0.2, 1),
    opacity 2400ms cubic-bezier(0.4, 0, 0.6, 1);
}

/* هر لایه سه هسته نور دارد تا لبه‌اش صاف و توپی نباشد */
.clouds__puff--1 {
  inset-block-start: -12%;
  inset-inline-start: -18%;
  width: 82%;
  height: 78%;
  filter: blur(54px);
  opacity: 0.9;
  background:
    radial-gradient(closest-side at 38% 44%, rgba(246, 232, 220, 0.95), transparent 72%),
    radial-gradient(closest-side at 68% 60%, rgba(226, 200, 190, 0.8), transparent 74%),
    radial-gradient(closest-side at 52% 26%, rgba(255, 246, 238, 0.7), transparent 70%);
}
.clouds__puff--2 {
  inset-block-start: -6%;
  inset-inline-end: -20%;
  width: 88%;
  height: 84%;
  filter: blur(62px);
  opacity: 0.88;
  background:
    radial-gradient(closest-side at 55% 40%, rgba(240, 222, 210, 0.92), transparent 72%),
    radial-gradient(closest-side at 30% 66%, rgba(214, 184, 176, 0.75), transparent 76%);
}
.clouds__puff--3 {
  inset-block-end: -22%;
  inset-inline-start: -10%;
  width: 78%;
  height: 72%;
  filter: blur(58px);
  opacity: 0.85;
  background:
    radial-gradient(closest-side at 45% 55%, rgba(232, 210, 200, 0.9), transparent 74%),
    radial-gradient(closest-side at 72% 38%, rgba(250, 238, 230, 0.7), transparent 70%);
}
.clouds__puff--4 {
  inset-block-end: -18%;
  inset-inline-end: -14%;
  width: 84%;
  height: 70%;
  filter: blur(66px);
  opacity: 0.82;
  background:
    radial-gradient(closest-side at 50% 48%, rgba(238, 218, 208, 0.9), transparent 73%),
    radial-gradient(closest-side at 24% 62%, rgba(206, 174, 168, 0.7), transparent 76%);
}
.clouds__puff--5 {
  inset-block-start: 18%;
  inset-inline-start: 14%;
  width: 62%;
  height: 58%;
  filter: blur(42px);
  opacity: 0.95;
  background:
    radial-gradient(closest-side at 48% 50%, rgba(255, 250, 244, 0.95), transparent 70%),
    radial-gradient(closest-side at 70% 34%, rgba(236, 214, 204, 0.72), transparent 74%);
}
.clouds__puff--6 {
  inset-block-start: 6%;
  inset-inline-end: 8%;
  width: 54%;
  height: 52%;
  filter: blur(38px);
  opacity: 0.9;
  background: radial-gradient(closest-side at 50% 50%, rgba(250, 240, 232, 0.92), transparent 72%);
}
.clouds__puff--7 {
  inset-block-end: 4%;
  inset-inline-start: 28%;
  width: 58%;
  height: 46%;
  filter: blur(46px);
  opacity: 0.86;
  background: radial-gradient(closest-side at 50% 50%, rgba(240, 224, 214, 0.9), transparent 74%);
}

/* کنار رفتن: هر لایه جهت خودش را دارد، پس مه از هم باز می‌شود */
.clouds.is-parting {
  opacity: 0;
}
.clouds.is-parting .clouds__puff {
  opacity: 0;
}
.clouds.is-parting .clouds__puff--1 {
  transform: translate3d(-46%, -34%, 0) scale(1.5);
}
.clouds.is-parting .clouds__puff--2 {
  transform: translate3d(48%, -28%, 0) scale(1.55);
}
.clouds.is-parting .clouds__puff--3 {
  transform: translate3d(-40%, 40%, 0) scale(1.45);
}
.clouds.is-parting .clouds__puff--4 {
  transform: translate3d(44%, 38%, 0) scale(1.5);
}
.clouds.is-parting .clouds__puff--5 {
  transform: translate3d(-16%, -52%, 0) scale(1.7);
}
.clouds.is-parting .clouds__puff--6 {
  transform: translate3d(34%, -46%, 0) scale(1.6);
}
.clouds.is-parting .clouds__puff--7 {
  transform: translate3d(-8%, 56%, 0) scale(1.65);
}
.clouds.is-done {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .clouds {
    transition: opacity var(--dur-motevaset) linear;
  }
  .clouds__puff {
    transition: none;
  }
  .clouds.is-parting .clouds__puff {
    transform: none;
  }
}