/*
 * Homepage section 05: one story across two panels.
 *
 * Static by default (reduced motion, print): the whole inbox and the whole
 * conversation on screen. When motion is allowed it replays on one 16 s loop:
 *
 *   4-23%    three leads arrive overnight, scored (31, 74, 92)
 *   30-34%   the 92 is picked
 *   36-65%   the chat plays: the question, the AI hands off, Andre joins and answers
 *   54-58%   the lead's label changes to "Andre has this"
 *   72-75%   "AI paused while a human is handling this"
 *
 * Pure CSS, no script.
 */
.ow-t { display: block; margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--text-muted); }
.ow-label { display: grid; justify-items: end; font-family: var(--mono); font-size: 11px; }
.ow-label > span { grid-area: 1 / 1; }
.ow-lab-b { opacity: 0; }
.ow-row { border-radius: 10px; }
/* The shared lead-row wraps the score onto its own line on a phone, where it
   stretches full width. Keep name, label and score on one line. */
@media (max-width: 480px) {
  .lead-row.ow-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
  .ow-label { font-size: 10px; }
}

@media (prefers-reduced-motion: no-preference) {
  .ow-row-1 { animation: ow-row-1 16s infinite both, ow-pick 16s infinite both; }
  .ow-row-2 { animation: ow-row-2 16s infinite both; }
  .ow-row-3 { animation: ow-row-3 16s infinite both; }
  .ow-c-1 { animation: ow-c-1 16s infinite both; }
  .ow-c-2 { animation: ow-c-2 16s infinite both; }
  .ow-c-3 { animation: ow-c-3 16s infinite both; }
  .ow-c-4 { animation: ow-c-4 16s infinite both; }
  .ow-c-5 { animation: ow-c-5 16s infinite both; }
  .ow-lab-a { animation: ow-lab-a 16s infinite both; }
  .ow-lab-b { animation: ow-lab-b 16s infinite both; }

  @keyframes ow-row-3 { 0%, 4% { opacity: 0; transform: translateY(8px); } 7%, 96% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
  @keyframes ow-row-2 { 0%, 12% { opacity: 0; transform: translateY(8px); } 15%, 96% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
  @keyframes ow-row-1 { 0%, 20% { opacity: 0; transform: translateY(8px); } 23%, 96% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
  @keyframes ow-c-1 { 0%, 36% { opacity: 0; transform: translateY(8px); } 39%, 96% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
  @keyframes ow-c-2 { 0%, 44% { opacity: 0; transform: translateY(8px); } 47%, 96% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
  @keyframes ow-c-3 { 0%, 54% { opacity: 0; transform: translateY(8px); } 57%, 96% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
  @keyframes ow-c-4 { 0%, 62% { opacity: 0; transform: translateY(8px); } 65%, 96% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
  @keyframes ow-c-5 { 0%, 72% { opacity: 0; transform: translateY(8px); } 75%, 96% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
  @keyframes ow-pick {
    0%, 29% { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
    32%, 96% { background-color: rgba(18, 181, 166, .10); box-shadow: 0 0 0 8px rgba(18, 181, 166, .10); }
    98%, 100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
  }
  @keyframes ow-lab-a { 0%, 55% { opacity: 1; } 58%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
  @keyframes ow-lab-b { 0%, 55% { opacity: 0; } 58%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
}