/* ==========================================================================
   tour.css — صحنه تور ۳۶۰، نوار کنترل، بارگذاری و راهنمای بار اول
   ========================================================================== */

.stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-tour);
  background: var(--zereshki);
}
.stage[hidden] {
  display: none;
}

.stage__frame {
  position: absolute;
  inset: 0;
}

/* پیش‌نمای کم‌حجم تور، تا وقتی خود تور بالا بیاید.
   همان preview.jpg ریشه پوشه تور است. */
.stage__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(0.5);
  transform: scale(1.08); /* لبه‌های تار بیرون از قاب بماند */
  opacity: 0;
  transition: opacity var(--dur-motevaset) linear;
}
.stage.has-poster .stage__poster {
  opacity: 1;
}
.stage.is-live .stage__poster {
  opacity: 0;
}

.stage__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity var(--dur-motevaset) linear;
}
.stage.is-live .stage__iframe {
  opacity: 1;
}

/* ── بارگذاری ─────────────────────────────────────────────────────────── */

.stage__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  pointer-events: none;
  transition: opacity var(--dur-motevaset) linear;
}
.stage.is-live .stage__loading {
  opacity: 0;
}
/* ── نشان چرخان ───────────────────────────────────────────────────────
   جای اسپینر عمومی را می‌گیرد. سه حرکت که هر کدام دوره‌ای متفاوت دارند،
   تا هیچ‌وقت مکانیکی به‌نظر نرسد:
     ۱. سکه می‌چرخد و بین دو چرخش یک لحظه رو به شما مکث می‌کند
     ۲. یک باریکه نور روی طلا رد می‌شود، مثل برقِ فلز هنگام چرخیدن
     ۳. کل نشان آرام بالا و پایین می‌رود و یک حلقه نازک دورش می‌گردد
   -------------------------------------------------------------------- */

.loader-mark {
  position: relative;
  width: 130px;
  height: 130px;
  display: grid;
  place-items: center;
  perspective: 800px;
  animation: mark-float 3.6s ease-in-out infinite;
}

/* حلقه نازکی که دور نشان می‌گردد */
.loader-mark__orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  border-block-start-color: var(--tala);
  border-inline-end-color: var(--marz-por);
  animation: mark-orbit 2.4s cubic-bezier(0.6, 0.05, 0.35, 0.95) infinite;
}

.loader-mark__coin {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  animation: mark-flip 4.6s cubic-bezier(0.62, 0, 0.2, 1) infinite;
}
.loader-mark__coin img {
  width: 90px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
}

/* برقِ فلز: یک باریکه روشن که از روی نشان رد می‌شود.
   با همان تصویر ماسک می‌شود تا فقط روی خودِ طلا بیفتد. */
.loader-mark__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 252, 245, 0.9) 48%,
    rgba(255, 255, 255, 0.95) 52%,
    transparent 62%
  );
  background-size: 260% 100%;
  -webkit-mask: url('../img/logo-mark-160.webp') center / contain no-repeat;
  mask: url('../img/logo-mark-160.webp') center / contain no-repeat;
  animation: mark-shine 4.6s cubic-bezier(0.62, 0, 0.2, 1) infinite;
}

@keyframes mark-flip {
  0%,
  16% {
    transform: rotateY(0deg);
  }
  46%,
  58% {
    transform: rotateY(180deg);
  }
  88%,
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes mark-shine {
  0%,
  10% {
    background-position: 170% 0;
    opacity: 0;
  }
  26% {
    opacity: 1;
  }
  42% {
    background-position: -70% 0;
    opacity: 0;
  }
  100% {
    background-position: -70% 0;
    opacity: 0;
  }
}
@keyframes mark-float {
  0%,
  100% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-11px);
  }
}
@keyframes mark-orbit {
  0% {
    transform: rotate(0deg);
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader-mark,
  .loader-mark__coin,
  .loader-mark__shine,
  .loader-mark__orbit {
    animation: none;
  }
  .loader-mark__shine {
    opacity: 0;
  }
}

.stage__loading-text {
  margin: 0;
  font-size: var(--fs-riz);
  color: var(--shir-kam);
}

/* ── نوار کنترل تور ───────────────────────────────────────────────────
   داخل نوار بالای سایت زندگی می‌کند، نه به‌عنوان نوار دوم.
   -------------------------------------------------------------------- */

.bar__tour {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.bar__tour[hidden] {
  display: none;
}
.bar__tour-btn {
  min-height: 38px;
  padding: var(--s2) var(--s4);
}
.bar__tour-name {
  margin: 0;
  font-family: var(--font-titr);
  font-size: 1.2rem;
  background-image: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

@media (max-width: 46rem) {
  .bar__tour-name {
    display: none;
  }
  #stageNext {
    display: none; /* روی موبایل، رفتن به نمایشگاه بعدی از نقشه انجام می‌شود */
  }
  .bar__tour-btn {
    font-size: var(--fs-riz);
    padding: var(--s2) var(--s3);
  }
}

/* ── راهنمای بار اول ──────────────────────────────────────────────────── */

.hint {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: rgba(33, 0, 0, 0.62);
  backdrop-filter: blur(3px);
  animation: hint-in var(--dur-motevaset) var(--ease-narm);
}
.hint[hidden] {
  display: none;
}
@keyframes hint-in {
  from {
    opacity: 0;
  }
}

.hint__card {
  max-width: 28rem;
  padding: var(--s6);
  background: var(--zereshki);
  border: 1px solid var(--tala-saye);
  border-radius: var(--radius);
  text-align: center;
}
.hint__card::before {
  /* نشان کوچک بیضی، هم‌خانواده مدال */
  content: '';
  display: block;
  width: 34px;
  height: 44px;
  margin: 0 auto var(--s4);
  border-radius: 50%;
  border: 1px solid var(--tala);
  box-shadow: inset 0 0 0 3px var(--gerdoo-roshan), inset 0 0 0 4px var(--marz-por);
}
.hint__title {
  font-size: var(--fs-h2);
  margin-block-end: var(--s3);
}
.hint__body {
  color: var(--shir-kam);
  font-size: var(--fs-kootah);
  line-height: var(--lh-kootah);
  margin-block-end: var(--s5);
}