/* Discover your new AI Control Tower (/ai-adoption-platform/#control-tower): nine chapters on what the leader does once
   the three steps are complete, each a crop of a real screen (several chapters can share one screen).
   Every chapter has its own crop of the screen (.tour-shot), shown below the text on narrow screens and without
   JavaScript. From 1001 px, tour.js clones the crops into one sticky stage on the right: the screen changes with the
   chapter in the middle of the window and the view glides to the part the chapter describes. The numbered dots on
   the screen match the numbered notes in the text. A crop is --tour-x and --tour-y (its top left corner, in percent
   of the screen) and --tour-s (the zoom); every screen is 1440 by 900, the same 16:10 as the frame. */
@property --tour-x { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tour-y { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tour-s { syntax: '<number>'; inherits: true; initial-value: 1; }

.tour { padding-top: 40px; padding-bottom: 104px; scroll-margin-top: 24px; }
/* The AI Control Tower comes once the three steps are complete: the eyebrow says so above the heading. */
.tour-heading .tour-after { display: inline-block; max-width: none; margin-top: 0; padding: 5px 11px; border-radius: 999px; background: #d9f6e4; color: #11624a; font-size: 13px; line-height: 1.4; }
.tour-heading h2 { max-width: 20ch; text-wrap: balance; }
.tour-heading p { max-width: 52ch; margin-top: 16px; color: #3c4d47; font-size: 19px; line-height: 1.55; text-wrap: pretty; }
.tour-story { margin-top: 48px; }
.tour-steps { display: grid; gap: 72px; margin: 0; padding: 0; list-style: none; }

.tour-when { color: #20846a; font-size: 15px; font-weight: 500; line-height: 1.4; }
.tour-step h3 { max-width: 22ch; margin-top: 10px; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.tour-text { max-width: 44ch; margin-top: 14px; color: #3f5650; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.tour-text a { color: var(--ink); text-decoration: underline; text-decoration-color: rgb(18 44 43 / .35); text-underline-offset: 3px; }
.tour-text a:hover { text-decoration-color: currentColor; }
.tour-notes { display: grid; gap: 12px; max-width: 46ch; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgb(18 44 43 / .1); list-style: none; counter-reset: tour-note; }
.tour-notes li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; gap: 12px; color: var(--ink); font-size: 16px; line-height: 1.5; counter-increment: tour-note; text-wrap: pretty; }
.tour-notes li::before { content: counter(tour-note); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; line-height: 1; translate: 0 5px; }

/* The screen on its painted field, cut to the chapter's crop. */
.tour-shot { margin: 28px 0 0; }
.tour-field { padding: clamp(14px, 2vw, 26px); border-radius: 24px; background: #e6eee4 url('screens/backgrounds/tower.webp?v=ce006eac251c') center / cover no-repeat; }
.tour-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 12px; background: #eef4f1; box-shadow: 0 0 0 1px rgb(16 54 57 / .08), 0 24px 48px -28px rgb(16 54 57 / .45); }
.tour-cam { position: absolute; inset: 0; transform-origin: 0 0; transform: scale(var(--tour-s)) translate(calc(var(--tour-x) * -1%), calc(var(--tour-y) * -1%)); }
.tour-cam img, .tour-screen img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; }
.tour-screen { position: absolute; inset: 0; }
/* The dots keep their size whatever the zoom. */
.tour-dot { position: absolute; left: calc(var(--dx) * 1%); top: calc(var(--dy) * 1%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; line-height: 1; box-shadow: 0 0 0 3px #fff, 0 6px 16px rgb(16 54 57 / .35); transform: translate(-50%, -50%) scale(calc(1 / var(--tour-s))); }

.tour-stage { display: none; }

/* Stacked chapters: the screen comes right after the text, and its numbered notes right under the screen. */
@media (max-width: 1000px) {
  .tour-step { display: flex; flex-direction: column; align-items: flex-start; }
  .tour-copy { display: contents; }
  .tour-shot { order: 1; align-self: stretch; }
  .tour-notes { order: 2; margin-top: 18px; padding-top: 0; border-top: 0; }
}

@media (min-width: 1001px) {
  /* Without JavaScript each chapter keeps its screen beside the text. */
  .tour-story:not(.is-ready) .tour-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 0 56px; }
  .tour-story:not(.is-ready) .tour-shot { margin: 0; }
  .tour-story.is-ready { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 56px; }
  .is-ready .tour-steps { gap: 0; }
  .is-ready .tour-step { display: flex; flex-direction: column; justify-content: center; min-height: 82vh; opacity: .3; transition: opacity .45s var(--ease); }
  .is-ready .tour-step:first-child { min-height: 62vh; justify-content: flex-start; padding-top: 6vh; }
  .is-ready .tour-step.is-active { opacity: 1; }
  /* The chapter crops stay readable by screen readers; the stage shows the same images. */
  .is-ready .tour-shot { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .is-ready .tour-stage { display: block; position: sticky; top: max(calc(24px + var(--header-offset)), calc(50vh - 300px + var(--header-offset) / 2)); align-self: start; }
  .tour-stage .tour-cam { transition: --tour-x 1s var(--ease), --tour-y 1s var(--ease), --tour-s 1s var(--ease); }
  .tour-stage .tour-screen { opacity: 0; transition: opacity .55s ease; }
  .tour-stage .tour-screen.is-active { opacity: 1; }
  .tour-stage .tour-dot { opacity: 0; scale: .6; transition: opacity .2s, scale .2s; }
  .tour-stage .tour-screen.is-active .tour-dot { opacity: 1; scale: 1; transition: opacity .3s .75s, scale .45s var(--ease) .75s; }
  .tour-stage .tour-screen.is-active .tour-dot:nth-of-type(2) { transition-delay: .85s; }
  .tour-stage .tour-screen.is-active .tour-dot:nth-of-type(3) { transition-delay: .95s; }
}

@media (max-width: 650px) {
  .tour { padding-top: 24px; padding-bottom: 72px; }
  .tour-heading p { font-size: 17px; }
  .tour-story { margin-top: 36px; }
  .tour-steps { gap: 56px; }
  .tour-text { font-size: 17px; }
  .tour-field { border-radius: 16px; }
  .tour-frame { border-radius: 8px; }
  .tour-when { font-size: 16px; }
  .tour-dot { width: 18px; height: 18px; font-size: 11px; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgb(16 54 57 / .3); }
}

@media (prefers-reduced-motion: reduce) {
  .tour-stage .tour-cam, .tour-stage .tour-screen, .tour-stage .tour-dot, .is-ready .tour-step { transition: none !important; }
}