/* ============================================
   THREADLINE — animations.css
   Keyframes and animation utilities
   ============================================ */

/* ---- Page load fade-up stagger ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-fade-up {
  animation: fadeUp 0.65s var(--ease-out) both;
}

.anim-delay-1 { animation-delay: 0.08s; }
.anim-delay-2 { animation-delay: 0.18s; }
.anim-delay-3 { animation-delay: 0.28s; }
.anim-delay-4 { animation-delay: 0.40s; }
.anim-delay-5 { animation-delay: 0.52s; }

/* ---- Scroll reveal (JS-driven) ---- */
/* .reveal class added in tokens.css via JS observer */

/* ---- Nav scroll shadow ---- */
.nav--scrolled {
  box-shadow: 0 1px 20px rgba(14, 14, 13, .08);
}

/* ---- Pulse dot (live indicator) ---- */
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

.pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--thread);
  animation: pulse 2s ease-in-out infinite;
}

/* ---- Number count-up (triggered by JS) ---- */
.stat__num { transition: opacity 0.4s; }

/* ---- Who-preview fade swap ---- */
@keyframes previewFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.who-preview__title.is-animating,
.who-preview__body.is-animating {
  animation: previewFade 0.3s var(--ease-out) both;
}

/* ---- Diff highlight ---- */
@keyframes highlightLine {
  0%   { background-color: rgba(82,183,136,.3); }
  100% { background-color: rgba(82,183,136,.1); }
}

.diff-line--added.highlight {
  animation: highlightLine 1.2s var(--ease-out) forwards;
}

/* ---- Typing cursor ---- */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--thread);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink-cursor 0.9s step-end infinite;
}

/* ---- Smooth tab indicator ---- */
.pricing-toggle {
  display: inline-flex;
  background: var(--paper-3);
  border-radius: 6px;
  padding: 3px;
  margin-bottom: 40px;
}

.pricing-toggle__btn {
  padding: 7px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.pricing-toggle__btn.is-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(14,14,13,.1);
}

/* ---- Mobile menu slide ---- */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav__mobile-menu.is-open {
  animation: slideDown 0.2s var(--ease-out) both;
}