/* ============================================================
   Virtual tour — cinematic store walkthrough
   ============================================================ */
.tour-body { background: #06121a; }
.walk { display: flex; flex-direction: column; }

/* ---------- Stage ---------- */
.walk-stage {
  position: relative; width: 100%;
  height: calc(100vh - 68px); min-height: 420px; overflow: hidden;
  background: #06121a; outline-offset: -4px;
}
.walk-stage.zoomed { cursor: zoom-out; }
.walk-stage:not(.zoomed) .walk-layer.is-active { cursor: zoom-in; }

/* Crossfade layers */
.walk-layer {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  transition: opacity .7s ease;
}
.walk-layer.is-active { opacity: 1; }

/* Ken Burns drift */
@keyframes kenburns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1.2%, -1%); }
}
.walk-layer.is-active.kb { animation: kenburns 6s ease-out forwards; }
.walk-stage.zoomed .walk-layer.is-active { animation: none; transform: scale(2); transition: transform .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .walk-layer { transition: opacity .2s ease; }
  .walk-layer.is-active.kb { animation: none; }
}

/* ---------- Intro ---------- */
.walk-intro {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; color: #fff;
  background: radial-gradient(120% 90% at 50% 40%, rgba(14,93,112,.55), rgba(6,18,26,.9));
  transition: opacity .5s ease;
}
.walk-intro.hide { opacity: 0; pointer-events: none; }
.walk-intro-eyebrow { color: var(--amber-500); }
.walk-intro-title { color: #fff; font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 0 0 .4em; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.walk-intro-sub { color: rgba(255,255,255,.9); font-size: 1.1rem; max-width: 34ch; margin: 0 0 2rem; }
.walk-start { font-size: 1.1rem; padding: 1em 2em; }
.walk-intro-hint { color: rgba(255,255,255,.6); font-size: .85rem; margin-top: 1.4rem; }

/* ---------- Cute percentage ---------- */
.walk-progress {
  position: absolute; top: 22px; left: 24px; z-index: 4; color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.6); pointer-events: none;
  display: flex; align-items: baseline; gap: 8px;
}
.walk-progress-num { font-family: var(--ff-display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1; color: var(--amber-500); }
.walk-progress-label { font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.9); }

/* ---------- Step counter ---------- */
.walk-step {
  position: absolute; top: 26px; right: 24px; z-index: 4;
  background: rgba(6,18,26,.55); color: #fff; backdrop-filter: blur(6px);
  padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600;
}

/* ---------- Nav arrows ---------- */
.walk-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px); color: #fff;
  font-size: 2.2rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s, transform .15s;
}
.walk-nav:hover { background: rgba(255,255,255,.3); transform: translateY(-50%) scale(1.06); }
.walk-nav.prev { left: 18px; } .walk-nav.next { right: 18px; }

/* ---------- Controls ---------- */
.walk-controls { display: flex; align-items: center; gap: 14px; padding: 14px clamp(16px, 4vw, 40px); background: #0a1c26; }
.wc-btn {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--teal-700); color: #fff; font-size: 1.1rem; display: flex;
  align-items: center; justify-content: center; transition: background-color .2s, transform .15s;
}
.wc-btn:hover { background: var(--teal-800); transform: scale(1.06); }
.wc-scrub { flex: 1; height: 6px; -webkit-appearance: none; appearance: none; background: rgba(255,255,255,.2); border-radius: 999px; cursor: pointer; }
.wc-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--amber-500); cursor: pointer; box-shadow: 0 0 0 4px rgba(240,168,40,.3); }
.wc-scrub::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--amber-500); cursor: pointer; box-shadow: 0 0 0 4px rgba(240,168,40,.3); }

/* ---------- Filmstrip ---------- */
.walk-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px clamp(16px, 4vw, 40px); background: #071720; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.strip-thumb { flex: 0 0 auto; width: 86px; height: 58px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; padding: 0; background: #0a1c26; opacity: .55; transition: opacity .2s, border-color .2s, transform .15s; }
.strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip-thumb:hover { opacity: .85; transform: translateY(-2px); }
.strip-thumb[aria-selected="true"] { opacity: 1; border-color: var(--amber-500); }

/* ---------- Fullscreen ---------- */
.walk:fullscreen { background: #06121a; }
.walk:fullscreen .walk-stage { height: calc(100vh - 140px); }

@media (max-width: 560px) {
  .walk-stage { height: calc(100vh - 200px); }
  .walk-nav { width: 46px; height: 46px; font-size: 1.8rem; }
  .walk-nav.prev { left: 8px; } .walk-nav.next { right: 8px; }
  .walk-progress { top: 16px; left: 16px; }
  .walk-step { top: 18px; right: 16px; }
}