/* The welcome tour: three slides in a sheet, each a picture over a few lines
   of text, with dots and Back / Next underneath. The pictures are drawn here. */

.sheet--tour {
  width: min(760px, calc(100vw - 32px));
}

.sheet--tour .sheet__panel {
  gap: 0;
  padding: 0;
}

.tour {
  display: flex;
  flex-direction: column;
}

.tour__viewport {
  overflow: hidden;
}

.tour__track {
  display: flex;
  transition: transform 0.5s var(--ease);
}

.tour.is-still .tour__track {
  transition: none;
}

.tour__slide {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  min-width: 0;
}

.tour__art {
  position: relative;
  height: 300px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.tour__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 48px 6px;
  text-align: center;
}

.tour__kicker {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tour__title {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

.tour__text {
  max-width: 540px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
  text-wrap: pretty;
}

.tour__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 22px 24px 24px;
}

.tour__skip {
  justify-self: start;
}

.tour__skip.is-gone {
  visibility: hidden;
}

.tour__dots {
  display: flex;
  gap: 8px;
}

.tour__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--soft-3);
  cursor: pointer;
  transition: width 0.3s var(--ease), background 0.2s;
}

.tour__dot.is-active {
  width: 24px;
  background: var(--ink);
}

.tour__nav {
  display: flex;
  justify-self: end;
  gap: 8px;
}

/* -------------------------------------------------------------- 1: welcome */

.tour__art--welcome {
  background: radial-gradient(circle at 50% 50%, var(--soft-2), transparent 62%), var(--bg);
}

.tour__orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 124px;
  height: 124px;
  transform: translate(-50%, -50%);
}

.tour__card {
  position: absolute;
  width: 150px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--card-color, var(--tile));
  box-shadow: var(--shadow-tile);
  animation: tour-float 7s ease-in-out infinite;
}

.tour__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour__card--1 {
  top: 26px;
  left: 6%;
  rotate: -4deg;
}

.tour__card--2 {
  bottom: 30px;
  left: 13%;
  rotate: 3deg;
  animation-delay: -2s;
}

.tour__card--3 {
  top: 34px;
  right: 7%;
  rotate: 4deg;
  animation-delay: -4s;
}

.tour__card--4 {
  right: 14%;
  bottom: 26px;
  rotate: -3deg;
  animation-delay: -1s;
}

.tour__card--5 {
  top: -34px;
  left: 37%;
  rotate: 2deg;
  animation-delay: -3s;
}

.tour__card--6 {
  right: 36%;
  bottom: -40px;
  rotate: -2deg;
  animation-delay: -5s;
}

@keyframes tour-float {
  50% {
    translate: 0 -7px;
  }
}

/* --------------------------------------------------------------- 2: search */

.tour__art--search {
  --step: 2.6s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 12%, var(--bg)), var(--bg) 70%);
}

/* What each search found, lit up in turn with its scene below. */
.tour__chips {
  display: flex;
  gap: 6px;
}

.tour__chip {
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-pill);
  color: var(--muted);
  font-size: 12px;
  line-height: 26px;
}

.tour__slide.is-current .tour__chip {
  animation: tour-chip calc(var(--step) * var(--scenes)) infinite;
  animation-delay: calc(var(--step) * var(--i));
}

@keyframes tour-chip {
  0%,
  19% {
    background: var(--ink);
    color: var(--bg);
  }
  21%,
  100% {
    background: var(--surface);
    color: var(--muted);
  }
}

/* The queries and their results take turns in one place. */
.tour__queries,
.tour__scenes {
  display: grid;
}

.tour__queries {
  flex: 1 1 auto;
  min-width: 0;
}

.tour__step {
  grid-area: 1 / 1;
  opacity: 0;
}

.tour__slide.is-current .tour__step {
  animation: tour-step calc(var(--step) * var(--scenes)) infinite both;
  animation-delay: calc(var(--step) * var(--i));
}

@keyframes tour-step {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  3%,
  18% {
    opacity: 1;
    transform: none;
  }
  21%,
  100% {
    opacity: 0;
    transform: none;
  }
}

.tour__scene {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Drawn like the real search palette: dark glass. */
.tour__search {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 330px;
  padding: 8px;
  border-radius: 24px;
  background: #1f1f20;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  color: #fff;
}

.tour__search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px;
  font-size: 15px;
}

.tour__search-bar svg {
  width: 17px;
  height: 17px;
  opacity: 0.7;
}

.tour__search-bar kbd {
  margin-left: auto;
  font: inherit;
  font-size: 12px;
  opacity: 0.45;
}

.tour__typed::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: tour-caret 1.1s steps(1) infinite;
}

@keyframes tour-caret {
  50% {
    opacity: 0;
  }
}

.tour__result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 16px;
}

.tour__scene > .tour__result:first-child {
  background: rgba(255, 255, 255, 0.09);
}

.tour__thumb {
  display: flex;
  flex: 0 0 auto;
  overflow: hidden;
  width: 66px;
  aspect-ratio: 16 / 9;
  padding: 6px 8px 0;
  border-radius: 6px;
  background: #f7f1e9;
}

/* A deck's cover, a photo, a logo, the way to logos online. */
.tour__thumb:has(.tour__cover, .tour__photo, .tour__logo),
.tour__result--web .tour__thumb {
  padding: 0;
}

.tour__cover {
  width: 100%;
  height: 100%;
  background: var(--card-color, #ddd);
}

.tour__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour__photo {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, transparent 52%, #f4f7fb 52%, #f4f7fb 56%, transparent 56%) 0 0 / 100% 100%,
    linear-gradient(to top right, #3d5a80 50%, transparent 50.5%) 0 100% / 60% 70% no-repeat,
    linear-gradient(to top left, #293d5a 50%, transparent 50.5%) 100% 100% / 65% 85% no-repeat,
    linear-gradient(#ffb36b, #ffd9a8);
}

.tour__photo--dusk {
  background:
    linear-gradient(to top right, #2a1f4d 50%, transparent 50.5%) 0 100% / 70% 80% no-repeat,
    linear-gradient(to top left, #3b2b66 50%, transparent 50.5%) 100% 100% / 60% 65% no-repeat,
    linear-gradient(#f2709c, #ff9472);
}

.tour__thumb .tour__logo {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

.tour__result--web .tour__thumb {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
}

.tour__result--web .tour__thumb svg {
  width: 18px;
  height: 18px;
}

.tour__found {
  display: flex;
  gap: 8px;
  padding: 6px 8px 8px;
}

.tour__logo--sm {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.tour__logo--sm .tour__mark {
  scale: 0.75;
}

.tour__chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
}

.tour__chart i {
  flex: 1;
  height: calc(var(--v) * 100%);
  border-radius: 1.5px 1.5px 0 0;
  background: var(--bar, #ff5a1f);
}

.tour__result-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 13.5px;
}

.tour__result-text b {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour__result-text small {
  font-size: 12px;
  opacity: 0.55;
}

/* ------------------------------------------------------------------ 3: add */

.tour__art--add {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  justify-content: center;
  gap: 18px 26px;
  background: linear-gradient(160deg, color-mix(in srgb, #ffb340 16%, var(--bg)), var(--bg) 70%);
}

.tour__drop {
  display: flex;
  grid-row: span 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 270px;
  height: 180px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--muted);
  font-size: 12.5px;
}

.tour__file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-pill);
  color: var(--ink);
  font-size: 13px;
  animation: tour-drop 3.2s var(--ease) infinite;
}

.tour__file svg {
  width: 18px;
  height: 18px;
  color: #d24726;
}

@keyframes tour-drop {
  0% {
    opacity: 0;
    translate: 46px -64px;
    rotate: 8deg;
  }
  28%,
  82% {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
  }
  100% {
    opacity: 0;
  }
}

.tour__logos {
  display: flex;
  align-self: end;
  gap: 10px;
}

.tour__logo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-tile);
}

.tour__mark--circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #db0a40;
}

.tour__mark--bolt {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #5b5bd6;
  rotate: 45deg;
}

.tour__mark--wave {
  width: 30px;
  height: 15px;
  border-radius: 15px 15px 0 0;
  background: #0891b2;
}

.tour__copied {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: #1f1f20;
  color: #fff;
  font-size: 13px;
}

.tour__copied svg {
  width: 16px;
  height: 16px;
}

/* ----------------------------------------------------------------- phones */

@media (max-width: 640px) {
  .tour__art {
    height: 230px;
  }

  .tour__copy {
    padding: 22px 22px 4px;
  }

  .tour__title {
    font-size: 22px;
  }

  .tour__text {
    font-size: 15px;
  }

  /* The dots get a row of their own, so Skip, Back and Next have room. */
  .tour__foot {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'dots dots'
      'skip nav';
    gap: 14px 8px;
    padding: 16px 16px 20px;
  }

  .tour__dots {
    grid-area: dots;
    justify-self: center;
  }

  .tour__skip {
    grid-area: skip;
  }

  .tour__skip.is-gone {
    display: none;
  }

  .tour__nav {
    grid-area: nav;
  }

  .tour__card {
    width: 112px;
  }

  .tour__card--5,
  .tour__card--6 {
    display: none;
  }

  .tour__orb {
    width: 104px;
    height: 104px;
  }

  /* The search rises from the bottom edge, clear of the close button. */
  .tour__art--search {
    justify-content: flex-end;
    gap: 10px;
  }

  .tour__chip {
    padding: 0 8px;
    font-size: 11px;
  }

  .tour__search {
    width: min(300px, calc(100vw - 88px));
    margin-bottom: -40px;
  }

  .tour__art--add {
    grid-template-columns: auto;
  }

  .tour__drop {
    grid-row: auto;
    width: 230px;
    height: 132px;
  }

  .tour__logos {
    display: none;
  }

  .tour__copied {
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour__card,
  .tour__file,
  .tour__typed::after,
  .tour__slide.is-current .tour__chip,
  .tour__slide.is-current .tour__step {
    animation: none;
  }

  /* Still: the first search (decks), as it is. */
  .tour__step:first-child {
    opacity: 1;
  }

  .tour__chip:first-child {
    background: var(--ink);
    color: var(--bg);
  }
}

/* ------------------------------------------------------------ 4: workspaces */

.tour__art--ws {
  --ws-loop: 9s;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, color-mix(in srgb, #db0a40 10%, var(--bg)), var(--bg) 70%);
}

/* Drawn like the real switcher panel. */
.tour__wspanel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 280px;
  padding: 12px 10px 10px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-pill);
  font-size: 14px;
}

.tour__wspanel small {
  padding: 0 8px 4px;
  color: var(--muted);
  font-size: 11.5px;
}

.tour__wsrow,
.tour__wsnew {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.tour__wsbox {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  background: var(--ink);
}

.tour__wsbox::after {
  content: '';
  width: 7px;
  height: 3.5px;
  border: 1.5px solid var(--bg);
  border-top: 0;
  border-right: 0;
  transform: translateY(-1px) rotate(-45deg);
}

/* Oliver unticks, then Sport Gastein, and both come back. */
.tour__slide.is-current .tour__wsrow--2 .tour__wsbox {
  animation: tour-untick var(--ws-loop) infinite;
}

.tour__slide.is-current .tour__wsrow--3 .tour__wsbox {
  animation: tour-untick var(--ws-loop) infinite;
  animation-delay: calc(var(--ws-loop) * 0.12);
}

@keyframes tour-untick {
  0%,
  10%,
  42%,
  100% {
    background: var(--ink);
  }
  14%,
  38% {
    background: transparent;
  }
}

.tour__slide.is-current .tour__wsrow--2,
.tour__slide.is-current .tour__wsrow--3 {
  animation: tour-dim var(--ws-loop) infinite;
}

.tour__slide.is-current .tour__wsrow--3 {
  animation-delay: calc(var(--ws-loop) * 0.12);
}

@keyframes tour-dim {
  0%,
  10%,
  42%,
  100% {
    opacity: 1;
  }
  14%,
  38% {
    opacity: 0.45;
  }
}

/* Then a new workspace: the row lights up and its name is typed. */
.tour__wsnew {
  position: relative;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  color: var(--muted);
}

.tour__wsplus {
  width: 16px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.tour__wstyped {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 34px;
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
  color: var(--ink);
  opacity: 0;
}

.tour__slide.is-current .tour__wsname {
  animation: tour-new-hide var(--ws-loop) infinite;
}

.tour__slide.is-current .tour__wstyped {
  animation: tour-new-type var(--ws-loop) infinite steps(9, end);
}

.tour__slide.is-current .tour__wsnew {
  animation: tour-new-row var(--ws-loop) infinite;
}

@keyframes tour-new-hide {
  0%,
  55%,
  96%,
  100% {
    opacity: 1;
  }
  58%,
  93% {
    opacity: 0;
  }
}

@keyframes tour-new-type {
  0%,
  58% {
    width: 0;
    opacity: 1;
  }
  75%,
  93% {
    width: 9ch;
    opacity: 1;
  }
  96%,
  100% {
    width: 9ch;
    opacity: 0;
  }
}

@keyframes tour-new-row {
  0%,
  55%,
  96%,
  100% {
    background: transparent;
  }
  58%,
  93% {
    background: var(--soft-2);
  }
}

@media (max-width: 640px) {
  .tour__wspanel {
    width: min(230px, calc(100vw - 140px));
    padding: 8px 8px 6px;
    font-size: 13px;
  }

  .tour__wsrow,
  .tour__wsnew {
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour__slide.is-current .tour__wsrow,
  .tour__slide.is-current .tour__wsbox,
  .tour__slide.is-current .tour__wsname,
  .tour__slide.is-current .tour__wstyped,
  .tour__slide.is-current .tour__wsnew {
    animation: none;
  }
}