/* The on-demand guide (js/tour.js), ported from bestcar.bg's tour.css onto this tool's tokens (app.css).
   One layer over the page: the page is dimmed with the scrim, and the lit controls are holes in it
   that a finger reaches through. What arrives settles on out-soft; what leaves goes quicker on in-soft. */

.tour { position: fixed; inset: 0; z-index: var(--z-tour); pointer-events: none; transition: opacity var(--d-base) var(--ease-out); }
/* A sheet the reader opened: the guide steps aside until it closes, quicker than it comes back. */
.tour[data-away] { opacity: 0; transition-duration: var(--d-fast); transition-timing-function: var(--ease-in); }
.tour[data-away] * { pointer-events: none !important; }

.tour-scrim { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
/* The filled part catches a stray tap; the holes, which are not filled, let the page have it. */
.tour-scrim path { fill: var(--scrim); pointer-events: auto; }
.tour-ring { fill: none; stroke: var(--marigold); stroke-width: 2; }
.tour-pulse { fill: none; stroke: var(--marigold); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: tour-pulse 1.4s var(--ease-out) infinite; }
@keyframes tour-pulse { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.07); } }
.tour[data-leaving] :is(.tour-scrim, .tour-card) { opacity: 0; transition: opacity var(--d-fast) var(--ease-in); }

/* ---- The card ---- */
.tour-card {
  position: absolute; top: 0; left: 0; width: min(22rem, calc(100vw - 1.5rem));
  border: 1px solid var(--glass-2); border-radius: var(--r-4); background: var(--night-glass);
  padding: .85rem 1rem 1rem; color: #ffffff; box-shadow: var(--sh-overlay); backdrop-filter: blur(18px);
  pointer-events: auto; touch-action: pan-y;
  /* A new step's place is reached with the holes, on the same glide. */
  transition: transform var(--d-glide) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.tour[data-device="phone"] .tour-card { width: calc(100vw - 1.5rem); }
.tour-card[data-follow="true"] { transition: opacity var(--d-base) var(--ease-out); }
.tour-card[data-pending="true"] { opacity: 0; }

.tour-card-top { display: flex; align-items: center; gap: .6rem; }
/* The progress: one dot a step, lit in marigold; all of them pop on at the end. */
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--glass-3); transition: background var(--d-fast) var(--ease-std); }
.tour-dots i[data-on] { background: var(--marigold); }
.tour-dots[data-burst] i { animation: tour-burst var(--d-spring) var(--ease-spring) backwards; }
.tour-dots[data-burst] i:nth-child(2) { animation-delay: 40ms; } .tour-dots[data-burst] i:nth-child(3) { animation-delay: 80ms; }
.tour-dots[data-burst] i:nth-child(4) { animation-delay: 120ms; } .tour-dots[data-burst] i:nth-child(n+5) { animation-delay: 160ms; }
@keyframes tour-burst { from { transform: scale(.3); } }
.tour-count { font-size: .78rem; color: rgb(255 255 255 / 62%); font-variant-numeric: tabular-nums; }
.tour-close { display: grid; width: 2.4rem; height: 2.4rem; flex: none; place-items: center; margin-left: auto; margin-right: -.35rem; border: 0; border-radius: 50%; background: var(--glass-1); color: rgb(255 255 255 / 80%); cursor: pointer; transition: background var(--d-fast) var(--ease-std), color var(--d-fast) var(--ease-std); }
.tour-close:hover { background: var(--glass-2); color: #ffffff; }

.tour-title { margin: .7rem 0 0; font: 650 1.2rem/1.2 var(--font-display); letter-spacing: -.01em; text-wrap: balance; color: #ffffff; }
.tour-text { margin: .3rem 0 0; font-size: .95rem; line-height: 1.5; color: rgb(255 255 255 / 84%); text-wrap: pretty; }

/* «Опитай»: the lit control can be tried. A tick once it has been. */
.tour-try { display: flex; align-items: center; gap: .45rem; margin: .8rem 0 0; font: 650 .9rem var(--font-ui); color: var(--marigold); }
.tour-try svg { animation: tour-tap 1.4s var(--ease-out) infinite; }
@keyframes tour-tap { 0%, 55%, 100% { transform: none; } 25% { transform: translateY(2px) scale(.92); } }
button.tour-try { border: 0; background: none; border-radius: var(--r-pill); margin-left: -.35rem; padding: .2rem .35rem; cursor: pointer; transition: background var(--d-fast) var(--ease-std); }
button.tour-try:hover { background: var(--glass-1); }
.tour-try[data-done] { color: var(--mint); }
.tour-try[data-done] svg { animation: tour-tick var(--d-spring) var(--ease-spring); }
@keyframes tour-tick { from { transform: scale(.4); opacity: 0; } }

.tour-card-foot { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.tour-back { border: 0; background: none; padding: .6rem .2rem; font: 600 .92rem var(--font-ui); color: rgb(255 255 255 / 70%); cursor: pointer; transition: color var(--d-fast) var(--ease-std); }
.tour-back:hover { color: #ffffff; }
.tour-primary { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: var(--r-pill); background: #ffffff; padding: .65rem 1.15rem; font: 700 .92rem var(--font-ui); color: var(--night); cursor: pointer; transition: background var(--d-fast) var(--ease-std), transform var(--d-instant) var(--ease-std); }
.tour-primary:hover { background: var(--linen); }
.tour-primary:active { transform: scale(.97); }
.tour-next { margin-left: auto; }

/* ---- The finger (a pointer on a desktop) that shows where to press ---- */
.tour-finger {
  position: absolute; top: 0; left: 0; width: 2.2rem; height: 2.2rem; z-index: 1;
  border: 2px solid #ffffff; border-radius: 50%; background: var(--night-glass); box-shadow: var(--sh-float);
  opacity: 0; pointer-events: none; transition: opacity var(--d-base) var(--ease-std), scale var(--d-instant) var(--ease-std);
}
.tour-finger[data-on="true"] { opacity: 1; }
.tour-finger[data-glide="true"] { transition: opacity var(--d-base) var(--ease-std), scale var(--d-instant) var(--ease-std), transform 700ms var(--ease-out); }
.tour-finger[data-pointer] { width: 1.15rem; height: 1.15rem; background: var(--night); }
.tour-finger[data-press] { scale: .78; }

@media (prefers-reduced-motion: reduce) {
  .tour-pulse, .tour-try svg, .tour-try[data-done] svg, .tour-dots[data-burst] i { animation: none; }
  .tour-card, .tour-finger { transition: none; }
}