/* ============================================================
   First login: the transition, and the six-step tour.

   Budget: under two seconds before anything is interactive, and
   every animation is transform and opacity only. A welcome that
   makes a shop owner wait is a welcome that teaches them the
   software is slow.
   ============================================================ */

.welcome {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s5);
  overflow: hidden;
  isolation: isolate;
  background: var(--canvas);
  transition: opacity var(--base) var(--ease);
}
.welcome.is-leaving { opacity: 0; }

.welcome::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(50% 45% at 80% 100%, color-mix(in oklab, #b8763f 14%, transparent), transparent 72%);
  filter: blur(70px);
  pointer-events: none;
}

/* ----------------------------------------------------------- intro */

.welcome-intro {
  max-width: 620px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.welcome-intro.is-on { opacity: 1; transform: none; }
.welcome-intro.is-out { opacity: 0; transform: translateY(-8px); }

.welcome-mark {
  display: grid;
  place-items: center;
  width: 78px; height: 78px;
  margin: 0 auto var(--s5);
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--lift-3), var(--edge-top);
  color: var(--accent);
  animation: mark-in 620ms var(--ease-out) both;
}
@keyframes mark-in {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
}

.welcome-kicker {
  font-family: var(--font-brand);
  font-size: var(--t-12);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s3);
  animation: rise 520ms 120ms var(--ease-out) both;
}

.welcome-title {
  font-family: var(--font-brand);
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.04;
  margin-bottom: var(--s4);
  animation: rise 560ms 200ms var(--ease-out) both;
}

.welcome-lede {
  font-size: var(--t-15);
  color: var(--text-2);
  line-height: var(--lh-body);
  max-width: 48ch;
  margin: 0 auto;
  animation: rise 560ms 320ms var(--ease-out) both;
}

@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.welcome-skip {
  position: absolute;
  top: var(--s5);
  right: var(--s5);
  animation: rise 400ms 700ms var(--ease-out) both;
}

/* ------------------------------------------------------------ tour */

.tour {
  width: min(100%, 940px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: var(--lift-4), var(--edge-top);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  transition: opacity 340ms var(--ease-out), transform 340ms var(--ease-out);
}
.tour.is-on { opacity: 1; transform: none; }
.tour.is-out { opacity: 0; transform: translateY(-8px); }

.tour-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
}
.tour-head .mark { color: var(--accent); }
.tour-brand {
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.tour-main {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  min-height: 368px;
}

.tour-art {
  display: grid;
  place-items: center;
  padding: var(--s6);
  background: var(--surface-2);
  border-right: 1px solid var(--line);
}
.tour-art.is-in { animation: rise 420ms var(--ease-out) both; }

.tour-body {
  padding: var(--s7) var(--s6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s3);
}
.tour-body.is-in { animation: rise 420ms 70ms var(--ease-out) both; }

.tour-step {
  font-size: var(--t-11);
  font-weight: 650;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
}
.tour-title { font-size: var(--t-27); letter-spacing: var(--track-title); }
.tour-copy { font-size: var(--t-14); color: var(--text-2); line-height: var(--lh-body); }

.tour-points { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s2); }
.tour-points li { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-13); color: var(--text-2); }
.tour-points svg { color: var(--won-text); flex: none; margin-top: 3px; }

.tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.tour-dots { display: flex; gap: 6px; }
.tour-dot {
  width: 22px; height: 4px;
  border-radius: var(--r-full);
  background: var(--line-2);
  transition: background var(--base) var(--ease), width var(--base) var(--ease);
}
.tour-dot.is-done { background: var(--line-3); }
.tour-dot.is-on { background: var(--accent); width: 30px; }

/* ------------------------------------------------- the tour's art */

/* A small browser-ish frame so the miniature reads as "your screen"
   rather than as an illustration floating in space. */
.tour-frame {
  width: 100%;
  max-width: 400px;
  border-radius: var(--r-card);
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--lift-3), var(--edge-top);
  overflow: hidden;
}
.tour-frame-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.tour-frame-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-3); }
.tour-frame-label {
  margin-left: auto;
  font-size: var(--t-11);
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.tour-frame-body { padding: var(--s4); }

.tour-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); }
.tour-flow-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--s2);
  border-radius: var(--r-chip);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--t-11);
  font-weight: 550;
  animation: rise 380ms var(--delay, 0ms) var(--ease-out) both;
}
.tour-flow-glyph { color: var(--accent-text); display: grid; place-items: center; }
.tour-flow-arrow { color: var(--text-3); animation: rise 380ms var(--delay, 0ms) var(--ease-out) both; }

.tour-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.tour-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s3);
  border-radius: var(--r-control);
  background: var(--surface-2);
  border: 1px solid var(--line);
  animation: rise 380ms var(--delay, 0ms) var(--ease-out) both;
}
.tour-tile-value { font-size: var(--t-21); font-weight: 600; font-variant-numeric: tabular-nums; }
.tour-tile .chip { align-self: flex-start; }

.tour-lead { display: flex; flex-direction: column; gap: var(--s3); }
.tour-caption { font-size: var(--t-11); color: var(--text-3); text-align: center; }

.tour-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tour-col { display: flex; flex-direction: column; gap: 5px; }
.tour-col-head {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 600; color: var(--text-3);
  animation: rise 360ms var(--delay, 0ms) var(--ease-out) both;
}
.tour-col-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--tone-neutral); flex: none; }
.tour-col[data-tone="action"] .tour-col-dot { background: var(--tone-action); }
.tour-col[data-tone="trust"] .tour-col-dot { background: var(--tone-trust); }
.tour-col[data-tone="gold"] .tour-col-dot { background: var(--tone-gold); }
.tour-col[data-tone="go"] .tour-col-dot { background: var(--tone-go); }
.tour-card {
  height: 22px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  animation: rise 360ms var(--delay, 0ms) var(--ease-out) both;
}
.tour-card.is-lifted {
  background: var(--surface-3);
  border-color: var(--accent-line);
  box-shadow: var(--lift-2);
  transform: rotate(-1.5deg);
}

.tour-agenda, .tour-team { display: flex; flex-direction: column; gap: var(--s2); }
.tour-agenda-row, .tour-team-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2);
  border-radius: var(--r-control);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--t-12);
  animation: rise 380ms var(--delay, 0ms) var(--ease-out) both;
}
.tour-agenda-rule { width: 3px; align-self: stretch; border-radius: var(--r-full); background: var(--trust); flex: none; }
.tour-agenda-name { font-weight: 550; }
.tour-agenda-row .chip, .tour-team-row .chip { flex: none; }

/* ------------------------------------------------------ responsive */

@media (max-width: 860px) {
  .tour-main { grid-template-columns: 1fr; min-height: 0; }
  .tour-art { border-right: none; border-bottom: 1px solid var(--line); padding: var(--s5); }
  .tour-body { padding: var(--s5); }
  .tour-title { font-size: var(--t-21); }
  .tour { max-height: 92dvh; overflow-y: auto; }
  .tour-foot { position: sticky; bottom: 0; }
}

@media (max-width: 560px) {
  .welcome { padding: 0; align-items: stretch; }
  .tour { border-radius: 0; border: none; min-height: 100dvh; }
  .tour-foot { flex-direction: column-reverse; align-items: stretch; gap: var(--s3); }
  .tour-foot .row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s2); }
  .tour-foot .btn { height: 42px; }
  .tour-dots { justify-content: center; }
  .welcome-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* The quote step: price, approve, book, arriving in that order so the
   flow reads as a sequence rather than three unrelated pictures. */
.tour-quote { display: grid; gap: var(--s3); }

.tour-quote-step {
  display: flex;
  align-items: center;
  gap: var(--s3);
  animation: rise 380ms var(--delay, 0ms) var(--ease-out) both;
}
.tour-quote-step .chip { flex: none; }

.tour-quote-amount { font-size: var(--t-20, 1.25rem); font-weight: 700; letter-spacing: -0.02em; }

.tour-quote-btn {
  padding: 7px 14px;
  border-radius: var(--r-control);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--t-12);
  font-weight: 600;
}

.tour-quote-times { display: flex; gap: 5px; flex-wrap: wrap; min-width: 0; }

.tour-quote-slot {
  padding: 5px 9px;
  border-radius: var(--r-control);
  border: 1px solid var(--line-2);
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--text-2);
}
.tour-quote-slot.is-on { border-color: var(--tone-go); color: var(--tone-go); }

@media (prefers-reduced-motion: reduce) {
  .tour-quote-step { animation: none; }
}