/* Product tour — tabbed window of product screens (hero).
   Frame: rounded, inside border (same treatment as .screenshot).
   Screen change: the new screen slides in from the right and comes into
   focus; the old one slides out to the left. */

.product-tour {
  position: relative;
  overflow: hidden;
  border-radius: var(--screenshot-radius);
  background: var(--color-surface-page);
}
.product-tour::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--screenshot-border-width) var(--color-border-default);
  pointer-events: none;
}

/* ---------- Window bar with tabs ---------- */
.product-tour__bar {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  height: 44px;
  padding-inline: var(--space-16);
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border-default);
}
.product-tour__dots { display: flex; gap: var(--space-6); }
.product-tour__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border-divider);
}

.product-tour__tabs {
  display: flex;
  gap: var(--space-4);
  min-width: 0;
  overflow-x: auto; /* very narrow screens: tabs scroll, the active one is kept in view (JS) */
  scrollbar-width: none;
}
.product-tour__tabs::-webkit-scrollbar { display: none; }
.product-tour__tab {
  position: relative;
  padding: var(--space-6) var(--space-12);
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}
.product-tour__tab:hover { color: var(--color-text-primary); }
.product-tour__tab.is-active {
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  box-shadow: 0 1px 2px rgba(21, 33, 43, 0.06);
}

/* Progress line: fills during --tour-interval, then the next tab opens */
.product-tour__progress {
  position: absolute;
  left: var(--space-12);
  right: var(--space-12);
  bottom: 2px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-brand-primary);
  transform: scaleX(0);
  transform-origin: left;
}
.product-tour__tab.is-active .product-tour__progress {
  animation: tour-progress var(--tour-interval) linear forwards;
}
.product-tour.is-paused .product-tour__progress { animation-play-state: paused; }

@keyframes tour-progress {
  to { transform: scaleX(1); }
}

/* ---------- Small screens: compact bar ---------- */
@media (max-width: 1023px) {
  .product-tour__bar { gap: var(--space-8); height: 34px; padding-inline: var(--space-6); }
  .product-tour__dots { display: none; }
  .product-tour__tab { flex-shrink: 0; padding: var(--space-4) var(--space-8); border-radius: 6px; font-size: 11px; }
  .product-tour__progress { left: var(--space-8); right: var(--space-8); bottom: 1px; }
}

/* ---------- Screens ---------- */
.product-tour__screens {
  border-radius: 0; /* the outer frame does the rounding */
}
.product-tour__screens::after { display: none; } /* outer frame draws the border */
.product-tour__screens img {
  opacity: 0;
  transform: scale(1.01) translateX(24px);
  filter: blur(6px);
  transition:
    opacity var(--tour-change-duration) var(--ease-out-soft),
    transform var(--tour-change-duration) var(--ease-out-soft),
    filter var(--tour-change-duration) var(--ease-out-soft);
}
.product-tour__screens img.is-active {
  opacity: 1;
  transform: scale(1.01);
  filter: none;
}
.product-tour__screens img.is-leaving {
  opacity: 0;
  transform: scale(1.01) translateX(-24px);
  filter: blur(6px);
}

/* ---------- Content that follows the active tab: [data-tour-swap] ---------- */
[data-tour-swap] { display: grid; }
[data-tour-swap] > * {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  visibility: hidden;
  transition:
    opacity 500ms var(--ease-out-soft),
    transform 500ms var(--ease-out-soft),
    visibility 0s linear 500ms;
}
[data-tour-swap] > .is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 150ms, 150ms, 0s; /* follows the screen change slightly */
}

/* ---------- Reduced motion: no sliding, no auto-advance bar ---------- */
@media (prefers-reduced-motion: reduce) {
  .product-tour__screens img,
  .product-tour__screens img.is-leaving { transform: scale(1.01); filter: none; }
  .product-tour__tab.is-active .product-tour__progress { animation: none; transform: scaleX(1); }
}