/* Dashboard tour: the real Zineps dashboard with app features on both sides.
   Values come from system/tokens.css only. */

.tour {
  container-type: inline-size;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--s-10) var(--s-8) var(--s-11);
}

.tour-head {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
  text-align: center;
}
.tour-head .lede { max-width: var(--measure-tour); }
/* Each sentence stays whole where there is room, so the line breaks between them. */
.tour-head .lede span { display: inline-block; text-wrap: balance; }

.tour-stage {
  /* Dashboard width in mapped layout: what is left after both pointer columns, capped. */
  --dash: min(var(--dash-max), calc(100cqi - 2 * (var(--pointer-w) + var(--tour-gap))));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "frame frame" "left right";
  gap: var(--s-7) var(--s-6);
}

.tour-frame {
  grid-area: frame;
  justify-self: center;
  width: 100%;
  max-width: var(--dash-stacked);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--g-0);
  /* No shadow (captain's call); a hairline inside the edge keeps the white screenshot from melting into the page. */
  outline: var(--hairline) solid var(--g-200);
  outline-offset: calc(var(--hairline) * -1);
}

.tour-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--shot-ratio);
}

.pointers {
  display: grid;
  align-content: start;
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pointers-left { grid-area: left; }
.pointers-right { grid-area: right; }

/* Mapped: features sit beside the dashboard, each tied to its edge by a short hairline and a node. */

.tour-stage[data-layout="mapped"] {
  grid-template-columns: minmax(0, 1fr) var(--dash) minmax(0, 1fr);
  --dash-stacked: none;
  grid-template-areas: "left frame right";
  gap: 0;
}

.tour-stage[data-layout="mapped"] .pointers {
  position: relative;
  z-index: var(--z-art-control);
  display: block;
}

.tour-stage[data-layout="mapped"] .pointer {
  position: absolute;
  top: calc(var(--y) * 100%);
  width: var(--pointer-w);
  transform: var(--pointer-lift);
  transition: opacity var(--dur-base) var(--ease-out);
}

.tour-stage[data-layout="mapped"] .pointers-left .pointer {
  --reach: calc(var(--tour-gap) + var(--x) * var(--dash));
  right: var(--tour-gap);
  flex-direction: row-reverse;
  text-align: right;
}

.tour-stage[data-layout="mapped"] .pointers-right .pointer {
  --reach: calc(var(--tour-gap) + (1 - var(--x)) * var(--dash));
  left: var(--tour-gap);
}

.tour-stage[data-layout="mapped"] .pointer::before,
.tour-stage[data-layout="mapped"] .pointer::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* The line leaves from the icon's outer edge and ends under the node on the dashboard's edge. */
.tour-stage[data-layout="mapped"] .pointer::before {
  top: calc(var(--pointer-mid) - var(--hairline) / 2);
  width: var(--reach);
  height: var(--hairline);
  background: var(--g-300);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.tour-stage[data-layout="mapped"] .pointer::after {
  top: calc(var(--pointer-mid) - var(--beacon) / 2);
  width: var(--beacon);
  height: var(--beacon);
  border-radius: 50%;
  background: var(--m-600);
  box-shadow: var(--beacon-ring);
}

.tour-stage[data-layout="mapped"] .pointers-left .pointer::before { left: 100%; transform-origin: left center; }
.tour-stage[data-layout="mapped"] .pointers-left .pointer::after { left: calc(100% + var(--reach) - var(--beacon) / 2); }
.tour-stage[data-layout="mapped"] .pointers-right .pointer::before { right: 100%; transform-origin: right center; }
.tour-stage[data-layout="mapped"] .pointers-right .pointer::after { right: calc(100% + var(--reach) - var(--beacon) / 2); }

.tour-stage[data-layout="mapped"]:has(.pointer:hover) .pointer:not(:hover) { opacity: var(--dim); }
.tour-stage[data-layout="mapped"] .pointer:hover::before { background: var(--m-600); }
.tour-stage[data-layout="mapped"] .pointer:hover::after { animation: beacon-pulse var(--dur-pulse) var(--ease-out) infinite; }

@keyframes beacon-pulse {
  from { box-shadow: var(--beacon-pulse-from); }
  to { box-shadow: var(--beacon-pulse-to); }
}

/* Entrance, set by tour.js only when motion is allowed: pending, then in, then settled. */

.tour-stage[data-reveal="pending"] .pointer { opacity: 0; translate: var(--rise); }
.tour-stage[data-reveal="pending"] .pointer::before { transform: scaleX(0); }
.tour-stage[data-reveal="pending"] .pointer::after { transform: scale(0); }

.tour-stage[data-reveal="in"] .pointer {
  transition:
    opacity var(--dur-draw) var(--ease-out) calc(var(--i) * var(--stagger)),
    translate var(--dur-draw) var(--ease-out) calc(var(--i) * var(--stagger));
}
.tour-stage[data-reveal="in"] .pointer::before {
  transition: transform var(--dur-draw) var(--ease-in-out) calc(var(--i) * var(--stagger));
}
.tour-stage[data-reveal="in"] .pointer::after {
  transition: transform var(--dur-base) var(--ease-out) calc(var(--i) * var(--stagger) + var(--dur-draw));
}

@media (prefers-reduced-motion: reduce) {
  .tour .pointer,
  .tour .pointer::before,
  .tour .pointer::after {
    transition: none;
    animation: none;
  }
}

@media (max-width: 960px) {
  .tour { padding-inline: var(--s-5); }
}

@media (max-width: 560px) {
  .tour { padding: var(--s-9) var(--s-4) var(--s-10); }
  .tour-head { margin-bottom: var(--s-7); }

  .tour-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "frame" "left" "right";
    row-gap: var(--s-6);
  }

  /* Zoom into the part of the dashboard with readable text. Browsers without object-view-box
     fall back to a top-left cover crop of the same box. */
  .tour-shot {
    aspect-ratio: var(--crop-ratio);
    object-fit: cover;
    object-position: left top;
    object-view-box: var(--crop-box);
  }
}