/* =====================================================================
   Chat reveal — question then answer, once per pair, on entering view.
   Separate motion layer. Not linked from index.html until integration.

   Progressive enhancement:
   - Without JS nothing here applies (.chat never gets .cr-on).
   - Only opacity + transform are animated → no reflow, no height change,
     the text stays in the accessibility tree the whole time (never
     display:none / visibility:hidden), no live region.
   - Reduced motion: the hidden start state is scoped to
     (prefers-reduced-motion: no-preference), and JS doesn't enable it either.
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .chat.cr-on .chat-pair:not(.cr-in) .message {
    opacity: 0;
    transform: translateY(12px);
  }
  .chat.cr-on .chat-pair .message {
    transition:
      opacity 380ms ease-out,
      transform 380ms cubic-bezier(.2, .7, .2, 1);
  }
  /* answer follows its question by 160ms (brief: ≤ 180ms) */
  .chat.cr-on .chat-pair .message.answer { transition-delay: calc(var(--cr-stagger, 0ms) + 160ms); }
  .chat.cr-on .chat-pair .message.question { transition-delay: var(--cr-stagger, 0ms); }

  /* pairs revealed instantly (already passed / focused / printing) */
  .chat.cr-on .chat-pair.cr-instant .message { transition: none; }
}

@media print {
  .chat.cr-on .chat-pair .message { opacity: 1 !important; transform: none !important; }
}