/* ============================================================
 * animations.css — keyframes, transitions, reduced-motion
 * ============================================================ */

/* --- Split-flap / airport-board state ---------------------- */

p.flapping {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.93rem;
  line-height: 1.85;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  text-wrap: auto;
  hyphens: none;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.flap-ch {
  display: inline-block;
  min-width: 0.58ch;
  text-align: center;
  color: var(--branch);
  transition: color 0.18s ease;
  font-variant-numeric: tabular-nums;
}

.flap-ch.settled {
  color: var(--ink);
}

.flap-ch:not(.settled) {
  text-shadow: 0 0 0.5px rgba(139, 58, 46, 0.25);
}

@media (max-width: 720px) {
  .flap-ch { min-width: 0.55ch; }
}

/* --- Pulse (rewriting indicator) --------------------------- */

@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* --- Coda 11ms tick (Easter egg) --------------------------- */

@keyframes coda-tick-in {
  0%   { opacity: 0; transform: translateY(4px); }
  20%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* --- Paragraph stagger reveal (page load) ------------------ */

.stagger-reveal > p {
  opacity: 0;
  transform: translateY(4px);
  animation: stagger-in 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.stagger-reveal > p:nth-child(1)  { animation-delay:  0ms; }
.stagger-reveal > p:nth-child(2)  { animation-delay: 30ms; }
.stagger-reveal > p:nth-child(3)  { animation-delay: 60ms; }
.stagger-reveal > p:nth-child(4)  { animation-delay: 90ms; }
.stagger-reveal > p:nth-child(5)  { animation-delay: 120ms; }
.stagger-reveal > p:nth-child(6)  { animation-delay: 150ms; }
.stagger-reveal > p:nth-child(7)  { animation-delay: 180ms; }
.stagger-reveal > p:nth-child(8)  { animation-delay: 210ms; }

@keyframes stagger-in {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Fork-paragraph highlight on commit -------------------- */

.fork-flash {
  animation: fork-flash 1.4s ease-out;
}
@keyframes fork-flash {
  0%   { background-color: transparent; }
  20%  { background-color: var(--paper-deep); }
  100% { background-color: transparent; }
}

/* --- Page transitions (View Transitions API) --------------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-fade-out 250ms ease-out;
}
::view-transition-new(root) {
  animation: page-fade-in 250ms ease-in 100ms backwards;
}

@keyframes page-fade-out {
  to { opacity: 0; }
}
@keyframes page-fade-in {
  from { opacity: 0; }
}

/* --- Reduced motion ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .stagger-reveal > p {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Split-flap should snap rather than animate; the JS detects
     this query and falls through to direct innerHTML swap. */
  p.flapping {
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink);
  }
}