/* ---------- Intro overlay ---------- */
/* Deliberately brief and plain: pick a market, get into the app. The
   previous version had a hand-animated pixel-art runner sprinting down a
   drawn road toward a bursting "portal," ~3s of choreography for a single
   selection. Cut per the redesign — this keeps only what's purposeful. */
.no-intro #intro { display: none; }
#intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 34px;
  transition: opacity 0.35s ease;
}
#intro.leaving { opacity: 0; pointer-events: none; }

.intro-word { display: flex; gap: 4px; }
.intro-word span {
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: 0.12em; line-height: 1;
  color: var(--text);
  opacity: 0; transform: translateY(14px);
  animation: rise 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
}

.intro-signpost { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sign {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600;
  font-size: 13px; letter-spacing: 0.06em;
  color: var(--muted-2); cursor: pointer;
  padding: 12px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.15s, color 0.15s;
}
.sign[data-market="crypto"] { --sc: #f7931a; }
.sign[data-market="forex"]  { --sc: #38bdf8; }
.sign[data-market="stocks"] { --sc: #34d399; }
.sign .ic { color: var(--sc); font-size: 14px; }
.sign:hover, .sign:focus-visible { border-color: var(--sc); color: var(--text); }
.sign.picked { border-color: var(--sc); color: var(--text); }

.intro-hint {
  font-size: 12px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase;
}
.intro-skip {
  position: absolute; bottom: 30px; right: 34px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 12px; font-family: var(--font-body);
  letter-spacing: 0.08em; transition: color 0.25s;
}
.intro-skip:hover { color: var(--muted-2); }

/* pause main-page entrance animations while the intro is up */
.pre header, .pre .panel-base, .pre .empty-state, .pre .ticker-bar { animation-play-state: paused !important; }