/* ── Logo wordmark ────────────────────────────────────── */
#wordmark {
  font-weight: var(--font-weight-light);
  font-size: 28px;
  color: var(--color-text);
  letter-spacing: -0.5px;
  line-height: 1;
  white-space: nowrap;
}

#wordmark span {
  color: var(--color-teal);
}

/* ── Logo line ────────────────────────────────────────── */
#logo-line {
  height: 1px;
  background: var(--color-teal);
  width: 100%;
  transition: width 0.8s var(--ease-smooth) 0.1s;
}

#logo-line.contracted {
  width: 24px;
}

/* ── Bubble entrance ──────────────────────────────────── */
@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Typing bounce ────────────────────────────────────── */
@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── Fade in ─────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}