/* ==========================================================================
   CULTURE ATLAS — ONBOARDING TOUR
   "Discover Culture in 60 Seconds"

   Uses the existing Culture Atlas token system (discover/tokens.css) —
   every color, font, radius, shadow and easing curve below is a var()
   reference, nothing hand-picked. This file adds zero new brand
   decisions; it only arranges existing ones into a guided sequence.
   ========================================================================== */

/* ---------------------------------------------------------------------
   SCRIM
   A single soft dim behind everything — never pure black, always the
   ink surface at low opacity so it reads as "the room went quiet",
   not "a modal blocked the page."
   --------------------------------------------------------------------- */
.atlas-tour-scrim{
  position:fixed; inset:0; z-index:9990;
  background:rgba(27,36,48,0.42);
  backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px);
  opacity:0; pointer-events:none;
  transition:opacity var(--t-slow) var(--ease-soft);
}
.atlas-tour-scrim.is-active{ opacity:1; pointer-events:auto; }

/* ---------------------------------------------------------------------
   SPOTLIGHT
   A cut-out ring drawn around the live element being explained, using
   a giant box-shadow trick — no SVG mask, no third library. The ring
   itself breathes gently so it reads as alive, not a static outline.
   --------------------------------------------------------------------- */
.atlas-tour-spotlight{
  position:fixed; z-index:9991;
  border-radius:var(--radius-sharp);
  pointer-events:none;
  transition:top var(--t-slow) var(--ease-out), left var(--t-slow) var(--ease-out),
             width var(--t-slow) var(--ease-out), height var(--t-slow) var(--ease-out),
             border-radius var(--t-base) var(--ease-out);
}
/* the guide ring itself: a soft dashed outline, not a solid block-out —
   the element inside is never darkened, only outlined and lifted */
.atlas-tour-spotlight::after{
  content:""; position:absolute; inset:-5px;
  border:1.5px dashed var(--color-ochre-light);
  border-radius:inherit;
  opacity:0.75;
  animation:atlasTourBreathe 2.4s var(--ease-soft) infinite;
}
/* lifts the spotlighted element itself above the dimmed backdrop —
   a real brightness/contrast boost, not just a ring drawn around it,
   so low-contrast icons (e.g. the mic button) stay clearly visible */
.atlas-tour-spotlight::before{
  content:""; position:absolute; inset:-9px;
  border-radius:inherit;
  background:radial-gradient(ellipse at center, rgba(244,236,216,0.10), transparent 70%);
}
@keyframes atlasTourBreathe{
  0%,100%{ opacity:0.5; }
  50%{ opacity:0.9; }
}

/* Pill-shaped spotlight variant for round elements (mic button, chips) */
.atlas-tour-spotlight.is-pill{ border-radius:var(--radius-pill); }

/* the spotlighted element itself is lifted above the dimmed scrim and
   gets a real brightness boost so dim icons (e.g. the mic SVG, which
   uses stroke="currentColor" at low-contrast dim opacity by default)
   are unmistakably visible rather than sitting in shadow */
.atlas-tour-target-lift{
  position:relative; z-index:9993;
  filter:brightness(1.35) drop-shadow(0 0 10px rgba(212,147,79,0.35));
}

/* ---------------------------------------------------------------------
   CARD
   The one piece of UI the visitor actually reads. Glassmorphic on the
   ink surface — frosted, not flat — echoing the same visual language
   as .entity-top / panel surfaces already in the product.
   --------------------------------------------------------------------- */
.atlas-tour-card{
  position:fixed; z-index:9992;
  width:min(360px, calc(100vw - 40px));
  background:rgba(27,36,48,0.82);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--color-ink-line);
  border-radius:var(--radius-sharp);
  box-shadow:var(--shadow-panel);
  padding:var(--sp-3);
  opacity:0; transform:translateY(10px) scale(0.98);
  transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out),
             top var(--t-slow) var(--ease-out), left var(--t-slow) var(--ease-out);
  pointer-events:none;
}
.atlas-tour-card.is-active{
  opacity:1; transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* small triangular pointer, positioned per-step via data-side */
.atlas-tour-card::before{
  content:""; position:absolute; width:12px; height:12px;
  background:inherit; border:inherit; border-right:none; border-bottom:none;
  transform:rotate(45deg);
}
.atlas-tour-card[data-side="bottom"]::before{ top:-7px; left:32px; }
.atlas-tour-card[data-side="top"]::before{ bottom:-7px; left:32px; transform:rotate(225deg); }
.atlas-tour-card[data-side="right"]::before{ left:-7px; top:28px; transform:rotate(-45deg); }
.atlas-tour-card[data-side="left"]::before{ right:-7px; top:28px; transform:rotate(135deg); }
.atlas-tour-card[data-side="center"]::before{ display:none; }

.atlas-tour-eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-mono); text-transform:uppercase;
  color:var(--color-ochre-light); margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.atlas-tour-eyebrow .atlas-tour-step-count{
  color:var(--color-text-on-ink-dim); font-weight:400;
}

.atlas-tour-title{
  font-family:var(--font-display); font-weight:450; font-size:19px;
  color:var(--color-text-on-ink); line-height:var(--lh-tight);
  margin-bottom:8px;
}

.atlas-tour-body{
  font-family:var(--font-body); font-size:var(--fs-body);
  line-height:var(--lh-body); color:var(--color-text-on-ink-dim);
  margin-bottom:var(--sp-2);
}

/* progress dots — small, quiet, never a numbered "3 of 8" bar */
.atlas-tour-dots{
  display:flex; gap:5px; margin-bottom:14px;
}
.atlas-tour-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--color-ink-line);
  transition:all var(--t-base) var(--ease-soft);
}
.atlas-tour-dot.is-done{ background:var(--color-ochre-light); opacity:0.55; }
.atlas-tour-dot.is-current{ background:var(--color-ochre-light); width:16px; border-radius:3px; }

.atlas-tour-controls{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.atlas-tour-controls-right{ display:flex; align-items:center; gap:8px; }

.atlas-tour-skip{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-mono);
  text-transform:uppercase; color:var(--color-text-on-ink-dim);
  background:none; border:none; cursor:pointer; padding:6px 0;
  transition:color var(--t-fast);
}
.atlas-tour-skip:hover{ color:var(--color-text-on-ink); }

.atlas-tour-prev{
  width:30px; height:30px; border-radius:var(--radius-pill);
  border:1px solid var(--color-ink-line); background:none;
  color:var(--color-text-on-ink-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t-fast);
}
.atlas-tour-prev:hover{ color:var(--color-text-on-ink); border-color:rgba(244,236,216,0.4); }
.atlas-tour-prev:disabled{ opacity:0; pointer-events:none; }

.atlas-tour-next{
  padding:8px 18px; border-radius:var(--radius-pill); border:none;
  background:var(--color-ochre); color:var(--color-parchment);
  font-family:var(--font-body); font-size:13px; font-weight:600;
  cursor:pointer; transition:background var(--t-fast), transform var(--t-fast);
  box-shadow:var(--shadow-cta);
}
.atlas-tour-next:hover{ background:var(--color-ochre-light); box-shadow:var(--shadow-cta-hover); }
.atlas-tour-next:active{ transform:scale(0.97); }

/* ---------------------------------------------------------------------
   MICRO-DEMO SLOT
   Each stop can host a tiny inline animation illustrating the concept
   (pulsing map pins, a scratch shimmer, a connection trail) — kept
   small and quiet so it never competes with the live spotlighted
   element for attention.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   CHIP PREVIEW
   Shows the actual homepage chip pill — same shape, same label — inside
   the tour card, so "this is what you're looking for" is never left to
   memory or a spotlight alone. Sits above the body copy for every step
   that refers to a chip the person will need to find again later.
   --------------------------------------------------------------------- */
.atlas-tour-chip-preview{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--color-ochre-light); background:rgba(212,147,79,0.12);
  color:var(--color-text-on-ink);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-mono);
  text-transform:uppercase; margin-bottom:12px;
}
.atlas-tour-chip-preview-label{
  font-family:var(--font-mono); font-size:9px; letter-spacing:var(--tracking-mono);
  text-transform:uppercase; color:var(--color-text-on-ink-dim);
  margin-bottom:6px;
}
.atlas-tour-chip-preview + .atlas-tour-chip-preview{ margin-left:6px; }

.atlas-tour-demo{
  height:54px; margin-bottom:var(--sp-2);
  border-radius:var(--radius-sharp);
  background:rgba(244,236,216,0.04);
  border:1px solid var(--color-ink-line);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}

/* map pins demo */
.atlas-tour-demo-pins{ display:flex; gap:16px; align-items:flex-end; }
.atlas-tour-pin{
  width:6px; height:6px; border-radius:50%; background:var(--color-ochre-light);
  position:relative;
  animation:atlasTourPinPulse 1.8s var(--ease-soft) infinite;
}
.atlas-tour-pin::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--color-ochre-light); opacity:0;
  animation:atlasTourPinRing 1.8s var(--ease-out) infinite;
}
.atlas-tour-pin:nth-child(2){ animation-delay:0.3s; }
.atlas-tour-pin:nth-child(2)::after{ animation-delay:0.3s; }
.atlas-tour-pin:nth-child(3){ animation-delay:0.6s; }
.atlas-tour-pin:nth-child(3)::after{ animation-delay:0.6s; }
@keyframes atlasTourPinPulse{ 0%,100%{opacity:0.5;} 50%{opacity:1;} }
@keyframes atlasTourPinRing{
  0%{ transform:scale(0.4); opacity:0.7; }
  100%{ transform:scale(2.2); opacity:0; }
}

/* scratch shimmer demo */
.atlas-tour-demo-scratch{
  width:100%; height:100%;
  background:linear-gradient(120deg, transparent 30%, rgba(212,147,79,0.35) 50%, transparent 70%);
  background-size:200% 100%;
  animation:atlasTourShimmer 2.2s ease-in-out infinite;
}
@keyframes atlasTourShimmer{
  0%{ background-position:200% 0; } 100%{ background-position:-50% 0; }
}

/* quiz/fact flip demo */
.atlas-tour-demo-flip{
  font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-mono);
  text-transform:uppercase; color:var(--color-ochre-light);
  animation:atlasTourFlip 2.4s var(--ease-soft) infinite;
}
@keyframes atlasTourFlip{
  0%,45%{ content:"Did you know?"; opacity:1; }
  50%{ opacity:0; }
  55%,95%{ opacity:1; }
  100%{ opacity:1; }
}

/* constellation graph demo — small nodes connected by lines */
.atlas-tour-demo-graph{ width:100%; height:100%; }
.atlas-tour-demo-graph svg{ width:100%; height:100%; }
.atlas-tour-graph-edge{
  stroke:var(--color-ochre-light); stroke-width:1; opacity:0;
  animation:atlasTourEdgeDraw 2.4s var(--ease-soft) infinite;
}
.atlas-tour-graph-edge:nth-child(2){ animation-delay:0.4s; }
.atlas-tour-graph-edge:nth-child(3){ animation-delay:0.8s; }
@keyframes atlasTourEdgeDraw{
  0%{ opacity:0; } 30%{ opacity:0.7; } 70%{ opacity:0.7; } 100%{ opacity:0; }
}
.atlas-tour-graph-node{ fill:var(--color-ochre-light); }
.atlas-tour-graph-node.is-center{ fill:var(--color-ochre); }

/* connection trail demo: Festival → Artist → Instrument → City */
.atlas-tour-trail{
  display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.04em;
  color:var(--color-text-on-ink-dim); white-space:nowrap;
}
.atlas-tour-trail-node{
  padding:4px 8px; border-radius:var(--radius-pill);
  border:1px solid var(--color-ink-line); background:rgba(244,236,216,0.03);
  opacity:0.3; transition:opacity var(--t-base) var(--ease-soft);
}
.atlas-tour-trail-node.is-lit{ opacity:1; border-color:var(--color-ochre-light); color:var(--color-text-on-ink); }
.atlas-tour-trail-arrow{ color:var(--color-ochre-light); opacity:0.5; font-size:11px; }

/* ---------------------------------------------------------------------
   WELCOME MODAL (Stop 0) & FINAL SCREEN — centered, larger, no spotlight
   --------------------------------------------------------------------- */
.atlas-tour-card.is-welcome,
.atlas-tour-card.is-final{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%, -50%) scale(0.96);
  width:min(420px, calc(100vw - 40px));
  text-align:center; padding:var(--sp-4) var(--sp-3);
}
.atlas-tour-card.is-welcome.is-active,
.atlas-tour-card.is-final.is-active{
  transform:translate(-50%, -50%) scale(1);
}
.atlas-tour-card.is-welcome::before,
.atlas-tour-card.is-final::before{ display:none; }

.atlas-tour-wordmark{
  font-family:var(--font-logo); font-weight:700; font-size:14px;
  letter-spacing:0.02em; color:var(--color-text-on-ink);
  margin-bottom:var(--sp-2);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.atlas-tour-mark-svg{ width:22px; height:22px; flex-shrink:0; }
.atlas-tour-mark-svg .tour-mark-edge{ fill:none; stroke:var(--color-ochre-light); stroke-width:1.4; }
.atlas-tour-mark-svg .tour-mark-node{ fill:var(--color-ochre-light); }
.atlas-tour-mark-svg .tour-mark-center{ fill:var(--color-ochre); }

.atlas-tour-card.is-welcome .atlas-tour-title,
.atlas-tour-card.is-final .atlas-tour-title{
  font-size:26px; margin-bottom:14px;
}
.atlas-tour-card.is-welcome .atlas-tour-body,
.atlas-tour-card.is-final .atlas-tour-body{
  font-size:14.5px; margin-bottom:var(--sp-3);
}

.atlas-tour-welcome-cta{
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.atlas-tour-start-btn{
  width:100%; padding:13px 24px; border-radius:var(--radius-pill); border:none;
  background:var(--color-ochre); color:var(--color-parchment);
  font-family:var(--font-body); font-size:15px; font-weight:600;
  cursor:pointer; box-shadow:var(--shadow-cta);
  transition:background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.atlas-tour-start-btn:hover{ background:var(--color-ochre-light); box-shadow:var(--shadow-cta-hover); transform:translateY(-1px); }
.atlas-tour-skip-link{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:var(--tracking-mono);
  text-transform:uppercase; color:var(--color-text-on-ink-dim);
  background:none; border:none; cursor:pointer;
}
.atlas-tour-skip-link:hover{ color:var(--color-text-on-ink); }

/* final screen — three large choice buttons */
.atlas-tour-final-choices{
  display:flex; flex-direction:column; gap:10px;
}
.atlas-tour-choice-btn{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-radius:var(--radius-sharp);
  border:1px solid var(--color-ink-line); background:rgba(244,236,216,0.04);
  color:var(--color-text-on-ink); font-family:var(--font-body); font-size:14.5px; font-weight:600;
  cursor:pointer; text-align:left; width:100%;
  transition:all var(--t-fast);
}
.atlas-tour-choice-btn:hover{
  border-color:var(--color-ochre-light); background:rgba(212,147,79,0.08);
  transform:translateX(3px);
}
.atlas-tour-choice-icon{ font-size:19px; flex-shrink:0; }

/* ---------------------------------------------------------------------
   ENTRY ANIMATION
   The very first frame: everything fades and scales up together so
   the modal feels like it's arriving, not popping.
   --------------------------------------------------------------------- */
@keyframes atlasTourRise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------------------------------------------------------------------
   "Take the Tour Again" — permanent help menu entry
   Styled to match .nav-drawer a already in the product (page.css).
   --------------------------------------------------------------------- */
.atlas-tour-replay-btn{
  display:flex; align-items:center; gap:8px;
}
.atlas-tour-replay-btn svg{ width:13px; height:13px; opacity:0.7; flex-shrink:0; }

/* ---------------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .atlas-tour-spotlight::after,
  .atlas-tour-pin, .atlas-tour-pin::after,
  .atlas-tour-demo-scratch, .atlas-tour-graph-edge{
    animation:none !important;
  }
  .atlas-tour-scrim, .atlas-tour-card, .atlas-tour-spotlight{
    transition-duration:80ms !important;
  }
}

/* ---------------------------------------------------------------------
   MOBILE
   Card becomes a bottom sheet — spotlight logic stays the same, only
   the card's own position changes to anchor at the bottom of the
   viewport, which is always reachable with a thumb.
   --------------------------------------------------------------------- */
@media (max-width: 640px){
  .atlas-tour-card:not(.is-welcome):not(.is-final){
    left:12px !important; right:12px; width:auto;
    top:auto !important; bottom:16px;
    transform:translateY(10px);
  }
  .atlas-tour-card.is-active:not(.is-welcome):not(.is-final){
    transform:translateY(0);
  }
  .atlas-tour-card[data-side]::before{ display:none; }
  .atlas-tour-card.is-welcome, .atlas-tour-card.is-final{
    width:calc(100vw - 32px);
  }
}