/* Onboarding v1 — first-run welcome card (see js/features/onboarding-card/, issue #298) */

/* Hidden by default — the "How Lancong works" account-menu item lives in
   always-loaded core index.html (present before the flag is even known),
   same convention as .feature-email-intake's booking-kind-picker tile. The
   card body itself needs no such class: it only ever exists as markup
   onboarding-card.js writes into an empty mount div, which is naturally
   invisible until that script (itself gated on the flag) fills it. */
.feature-onboarding-card {
  display: none;
}

.onboarding-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-lg);
}

.onboarding-card-dismiss {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: none;
  background: none;
  color: var(--df-ink-soft, var(--text-secondary));
  font-size: var(--fs-lg);
  cursor: pointer;
  border-radius: 50%;
}
.onboarding-card-dismiss:hover {
  background: var(--surface-2);
}

.onboarding-card-title {
  font-family: var(--df-display, inherit);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 var(--space-md);
  padding-right: calc(var(--tap-min) + var(--space-sm)); /* clears the dismiss button */
}

.onboarding-card-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.onboarding-card-point {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-xs) 0;
  min-height: var(--tap-min);
  color: var(--text-primary);
  font-size: var(--fs-md);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-feedback) var(--ease-out);
}
.onboarding-card-point:hover {
  text-decoration-color: currentColor;
}

.onboarding-card-point-text {
  display: block;
  padding: var(--space-xs) 0;
  color: var(--text-primary);
  font-size: var(--fs-md);
}

.onboarding-card-point-lead {
  font-weight: 700;
}

/* Issue #2311 — the journey's entrance and dismiss, behind
   FEATURE_ONBOARDING_JOURNEY. onboarding-card.js adds --enter on a real
   arrival only and schedules its removal in the same call (`both` fill holds
   a delayed point invisible). Motion tokens only; the stagger is half a
   --dur-feedback per point. The reduced-motion answer lives at the end of
   style.css and resolves to the finished state. */
@keyframes onboarding-card-in {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes onboarding-point-in {
  from { opacity: 0; transform: translateY(6px); }
}
@keyframes onboarding-card-out {
  to { opacity: 0; transform: translateY(-6px); }
}

.onboarding-card--enter {
  animation: onboarding-card-in var(--dur-view) var(--ease-out) both;
}
.onboarding-card--enter .onboarding-card-points li {
  animation: onboarding-point-in var(--dur-state) var(--ease-out) both;
  animation-delay: calc(var(--ob-i, 0) * var(--dur-feedback) / 2);
}
.onboarding-card--leave {
  animation: onboarding-card-out var(--dur-state) var(--ease-out) both;
  pointer-events: none;
}