/* First-run site tour: a spotlight that glides between parts of the page, with an explanation card. */

.site-tour {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  display: none; background: transparent; color: var(--ink); overflow: hidden; border-radius: 0;
}
.site-tour[open] { display: block; animation: tour-fade .35s ease both; }
/* The site blurs and tints other dialogs' backdrops; the spotlight needs the page behind it sharp. */
.site-tour::backdrop { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* With no spotlight (welcome, finish, or a target that is not visible) the whole page is dimmed softly. */
.site-tour[data-placement="center"] { display: grid; place-items: center; background: color-mix(in srgb, var(--bg-main, #000) 62%, transparent); backdrop-filter: blur(6px); }

.tour-spot {
  position: fixed; box-sizing: border-box; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 100vmax color-mix(in srgb, #05050c 68%, transparent);
  outline: 2px solid var(--accent-color, #fff); outline-offset: 0;
  transition: left .55s cubic-bezier(.3, .8, .2, 1), top .55s cubic-bezier(.3, .8, .2, 1), width .55s cubic-bezier(.3, .8, .2, 1), height .55s cubic-bezier(.3, .8, .2, 1);
}
.tour-spot[hidden] { display: none; }
.tour-spot i { position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--accent-color, #fff); animation: tour-pulse 2s ease-out infinite; }

.tour-card {
  box-sizing: border-box; width: min(420px, calc(100vw - 24px)); padding: 22px 24px 18px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--bg-surface, var(--bg-card, Canvas)); color: var(--ink);
  box-shadow: 0 30px 80px -20px #000a, 0 0 0 1px color-mix(in srgb, var(--accent-color, transparent) 25%, transparent);
  display: grid; gap: 10px; overflow: hidden;
}
.tour-card[data-placement="below"], .tour-card[data-placement="above"], .tour-card[data-placement="bottom"] {
  position: fixed; transition: left .55s cubic-bezier(.3, .8, .2, 1), top .55s cubic-bezier(.3, .8, .2, 1);
}
.site-tour[data-step="welcome"] .tour-card, .site-tour[data-step="done"] .tour-card { width: min(480px, calc(100vw - 24px)); text-align: center; padding-top: 30px; }
.site-tour[data-step="welcome"] .tour-card::before, .site-tour[data-step="done"] .tour-card::before {
  content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 4px; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 55%, var(--accent-color, #5b62aa)), var(--accent-color, #5b62aa) 62%);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color, #5b62aa) 60%, transparent), 0 0 36px color-mix(in srgb, var(--accent-color, #5b62aa) 65%, transparent);
  animation: tour-pop .8s cubic-bezier(.3, 1.5, .5, 1) both, tour-ripple 2.6s ease-out .6s infinite;
}
.site-tour:is([data-step="welcome"], [data-step="done"]) .tour-progress { display: none; }
.site-tour:is([data-step="welcome"], [data-step="done"]) .tour-nav { margin: 0; }
.tour-progress { height: 3px; margin: -22px -24px 6px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.tour-progress i { display: block; height: 100%; background: var(--accent-color, var(--ink)); transition: width .5s cubic-bezier(.3, .8, .2, 1); }
.tour-count { margin: 0; min-height: 1em; font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-color, var(--muted)); }
.tour-step { display: grid; gap: 8px; animation: tour-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.tour-step h2 { margin: 0; font: 400 clamp(1.45rem, 4vw, 1.85rem)/1.12 var(--studio-serif, Georgia, serif); letter-spacing: -.01em; outline: none; }
.tour-step p { margin: 0; font-size: .975rem; line-height: 1.55; color: var(--muted); }

.tour-illustration { display: grid; gap: 12px; margin-top: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg-main, transparent) 55%, transparent); text-align: start; }
.tour-bars { gap: 3px; }
.tour-bars .accord-bar { min-height: 22px; padding: 2px 8px; font-size: .75rem; }
.tour-meters { display: grid; gap: 7px; }
.tour-meters span { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 10px; font-size: .75rem; color: var(--muted); }
.tour-meters b { font-weight: 600; }
.tour-meters i { display: block; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); position: relative; overflow: hidden; }
.tour-meters i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill); border-radius: inherit; background: var(--accent-color, currentColor); transform-origin: left; animation: tour-fill 1.2s cubic-bezier(.2, .8, .2, 1) .35s both; }

.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.tour-actions [hidden] { display: none; }
.site-tour[data-step="welcome"] .tour-actions { flex-direction: column-reverse; align-items: stretch; }
.site-tour[data-step="welcome"] .tour-nav, .site-tour[data-step="done"] .tour-nav { display: grid; }
.tour-nav { display: flex; gap: 8px; margin-inline-start: auto; }
.site-tour :is(.tour-skip, .tour-back, .tour-next) { min-height: 44px; padding: 8px 18px; border-radius: 99px; font: inherit; font-size: .9rem; cursor: pointer; }
.tour-skip { border: 0; background: transparent; color: var(--muted); }
.tour-skip:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.tour-back { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.tour-next { border: 0; background: var(--ink); color: var(--bg-main, Canvas); font-weight: 650; }
.tour-next:hover { box-shadow: 0 10px 26px -12px var(--accent-color, #000); }
.site-tour :is(.tour-skip, .tour-back, .tour-next):focus-visible { outline: 2px solid var(--accent-color, currentColor); outline-offset: 3px; }

@keyframes tour-fade { from { opacity: 0; } }
@keyframes tour-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes tour-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes tour-pulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.35); } }
@keyframes tour-ripple { to { box-shadow: 0 0 0 26px transparent, 0 0 36px transparent; } }
@keyframes tour-fill { from { transform: scaleX(0); } }

@media (max-width: 520px) {
  .tour-card { padding: 20px 18px 16px; }
  .tour-progress { margin: -20px -18px 6px; }
  .tour-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .site-tour, .site-tour * { animation: none !important; transition: none !important; }
}
html[data-motion="off"] .site-tour, html[data-motion="off"] .site-tour * { animation: none !important; transition: none !important; }