/* =============================================
   Color Wagon - interior tour
   A map with pins. The overview shows the whole interior at once; tapping a
   pin transports you into a full photo of that feature in the same frame.
   The frame never changes size between scenes, which is what makes the
   move feel like travel rather than a layout jump.
   ============================================= */

.tour {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #10201a;
  box-shadow: var(--shadow-md);
}

/* One frame, every scene absolutely positioned inside it.
   The overview is a wide band and the detail shots are close to 4:3, so a
   single height would either crop the close-ups or strand the map in a sea
   of empty plate. The frame grows on the way in and shrinks on the way out,
   which also sells the move. Browsers that will not interpolate
   aspect-ratio simply snap, which is fine. */
.tour-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 31;
  max-height: 640px;
  overflow: hidden;
  transition: aspect-ratio 0.4s ease;
}
.tour.is-detail .tour-stage { aspect-ratio: 16 / 9; }

@supports not (aspect-ratio: 1) {
  .tour-stage { height: clamp(180px, 31vw, 340px); transition: height 0.4s ease; }
  .tour.is-detail .tour-stage { height: clamp(300px, 56vw, 620px); }
}

.tour-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.38s ease, transform 0.38s ease;
  transform: scale(1.06);
}
.tour-scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}
/* the outgoing scene pulls back slightly, so you feel like you moved */
.tour-scene.is-leaving {
  opacity: 0;
  visibility: visible;
  transform: scale(0.97);
  z-index: 1;
}

/* ---- overview: the whole interior at once, nothing to drag ----
   The wide shot is 4200x935, so it cannot fill a 16/9 frame without losing
   most of the van. It sits as a band across the middle of the plate and the
   space left over carries the instruction, which is why the plate does not
   read as empty. Pins live inside this band, so their percentages are
   measured against the photo and hold at every width. */
.tour-scene-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  background: #10201a;
}
.tour-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4200 / 935;
  border-radius: var(--radius-md, 12px);
  overflow: visible;
}
.tour-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md, 12px);
}
.tour-map-hint {
  margin: 0;
  color: rgba(255, 249, 239, 0.78);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.tour-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem 0.28rem 0.3rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(16, 74, 47, 0.92);
  color: #FFF9EF;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
  transition: transform 0.16s ease, background 0.16s ease;
}
.tour-pin-num {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold, #E8A33D);
  color: #16261d;
  font-size: 0.76rem;
  flex: none;
}
.tour-pin:hover,
.tour-pin:focus-visible {
  background: var(--gold, #E8A33D);
  color: #16261d;
  transform: translate(-50%, -50%) scale(1.06);
  outline: none;
}
.tour-pin:hover .tour-pin-num,
.tour-pin:focus-visible .tour-pin-num { background: #16261d; color: var(--gold, #E8A33D); }

/* a soft halo so pins read against a busy photo */
.tour-pin::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  animation: tour-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
.tour-pin:hover::after, .tour-pin:focus-visible::after { opacity: 0; animation: none; }
@keyframes tour-pulse {
  0%   { transform: scale(0.86); opacity: 0.85; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { opacity: 0; }
}

/* ---- detail scenes ---- */
.tour-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tour-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.4rem 1.25rem;
  background: linear-gradient(to top, rgba(9, 26, 18, 0.95) 45%, rgba(9, 26, 18, 0));
  color: #FFF9EF;
}
.tour-info-step {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #E8A33D);
  margin-bottom: 0.3rem;
}
.tour-info h4 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0 0 0.35rem;
  color: #FFF9EF;
}
.tour-info p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 249, 239, 0.92);
  max-width: 62ch;
}

.tour-back {
  position: absolute;
  top: 0.85rem; left: 0.85rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255, 249, 239, 0.5);
  border-radius: 999px;
  background: rgba(9, 26, 18, 0.72);
  color: #FFF9EF;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.tour-back:hover, .tour-back:focus-visible {
  background: var(--gold, #E8A33D);
  color: #16261d;
  outline: none;
}

.tour-arrows {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 0.6rem;
  pointer-events: none;
}
.tour-arrow {
  pointer-events: auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 249, 239, 0.45);
  background: rgba(9, 26, 18, 0.6);
  color: #FFF9EF;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.tour-arrow:hover, .tour-arrow:focus-visible {
  background: var(--gold, #E8A33D);
  color: #16261d;
  outline: none;
}

/* ---- stop strip ----
   Lives inside .tour, directly under the stage, so it reads as part of the
   same instrument and the script can find it from the tour root. */
.tour-strip {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.75rem;
  background: #0d1b15;
  border-top: 1px solid rgba(255, 249, 239, 0.1);
}
.tour-chip {
  flex: 0 0 auto;
  width: 128px;
  border: 2px solid transparent;
  border-radius: var(--radius-md, 12px);
  background: var(--white, #fff);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tour-chip img { display: block; width: 100%; height: 74px; object-fit: cover; }
.tour-chip span {
  display: block;
  padding: 0.4rem 0.5rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.tour-chip:hover { transform: translateY(-2px); }
.tour-chip.is-active { border-color: var(--green, #1E7A46); }
.tour-chip:focus-visible { outline: 2px solid var(--green, #1E7A46); outline-offset: 2px; }

@media (max-width: 640px) {
  /* The band is short at phone widths, so the plate is trimmed back to it
     and the pins lose their labels to stay clear of each other. */
  .tour-stage { aspect-ratio: 100 / 35; }
  /* Square on the way in: at 4:3 the caption took over half the frame and
     left a sliver of the actual thing you tapped. */
  .tour.is-detail .tour-stage { aspect-ratio: 1 / 1; }
  .tour-scene-overview { padding: 0.6rem; gap: 0.55rem; }
  .tour-pin-label { display: none; }
  .tour-pin { padding: 0.28rem; }
  .tour-map-hint { font-size: 0.72rem; }
  .tour-info { padding: 2.2rem 1rem 1rem; }
  .tour-info h4 { font-size: 1.1rem; }
  .tour-info p { font-size: 0.82rem; line-height: 1.45; }
  /* Sit the arrows in the clear photo band, above the caption. */
  .tour-arrows { top: 34%; padding: 0 0.4rem; }
  .tour-arrow { width: 34px; height: 34px; font-size: 1.1rem; }
  .tour-chip { width: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-scene { transition: opacity 0.2s ease; transform: none; }
  .tour-scene.is-active, .tour-scene.is-leaving { transform: none; }
  .tour-pin::after { animation: none; }
}