.animflow-svg-wrap {
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) {
  .animflow-svg-wrap { max-width: 520px; }
}
@media (min-width: 1024px) {
  .animflow-svg-wrap { max-width: 720px; }
}
.animflow-svg { width: 100%; height: auto; display: block; }
.animflow-phase { pointer-events: none; }
.animflow-caption {
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
  margin: 0;
}

.animflow-captions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 0.35rem;
  max-width: 42rem;
  margin: 1.25rem auto 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .animflow-captions {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Phone interior layers: 5 phases of 20% each (10s loop) */
  @keyframes animflow-phase-a-vis {
    0%, 19.9% { opacity: 1; }
    20%, 100% { opacity: 0; }
  }
  @keyframes animflow-phase-b-vis {
    0%, 19.9% { opacity: 0; }
    20%, 39.9% { opacity: 1; }
    40%, 100% { opacity: 0; }
  }
  @keyframes animflow-phase-c-vis {
    0%, 39.9% { opacity: 0; }
    40%, 59.9% { opacity: 1; }
    60%, 100% { opacity: 0; }
  }
  /* Phone "Done" overlay stays visible from D onward */
  @keyframes animflow-phase-d-vis {
    0%, 59.9% { opacity: 0; }
    60%, 100% { opacity: 1; }
  }

  @keyframes animflow-bubble-in {
    0% { transform: translateX(40px); opacity: 0; }
    8% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
  }
  @keyframes animflow-cursor-tap {
    0%, 25% { transform: translateY(0); }
    27% { transform: translateY(-8px); }
    30% { transform: translateY(0); }
    33% { transform: translateY(-5px); }
    36%, 100% { transform: translateY(0); }
  }
  @keyframes animflow-tick-stroke {
    0% { stroke-dashoffset: 20; }
    100% { stroke-dashoffset: 0; }
  }
  @keyframes animflow-check-pop {
    0% { opacity: 0; transform: scale(0.7); }
    8% { opacity: 1; transform: scale(1.05); }
    14% { transform: scale(1); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* Desktop row 2 (the active reply): pending dash visible until phase E,
     then a green tick draws and the row glows briefly. */
  @keyframes animflow-row-pending-vis {
    0%, 79.9% { opacity: 1; }
    80%, 100% { opacity: 0; }
  }
  @keyframes animflow-row-tick-vis {
    0%, 79.9% { opacity: 0; }
    80%, 100% { opacity: 1; }
  }
  @keyframes animflow-row-glow {
    0%, 79.9% { fill: white; }
    80% { fill: #ecfdf5; }
    92% { fill: #ecfdf5; }
    100% { fill: white; }
  }
  @keyframes animflow-counter-old {
    0%, 79.9% { opacity: 1; }
    80%, 100% { opacity: 0; }
  }
  @keyframes animflow-counter-new {
    0%, 79.9% { opacity: 0; }
    80%, 100% { opacity: 1; }
  }
  /* Pulse travelling from phone → desktop when reply lands */
  @keyframes animflow-pulse-fly {
    0%, 76% { opacity: 0; transform: translateX(0); }
    80% { opacity: 1; transform: translateX(0); }
    92% { opacity: 1; transform: translateX(220px); }
    96%, 100% { opacity: 0; transform: translateX(220px); }
  }

  /* Caption highlights track the phase progression */
  @keyframes animflow-cap-a {
    0%, 19.9% { color: rgb(15 23 42); font-weight: 600; }
    20%, 100% { color: rgb(148 163 184); font-weight: 400; }
  }
  @keyframes animflow-cap-b {
    0%, 19.9% { color: rgb(148 163 184); font-weight: 400; }
    20%, 39.9% { color: rgb(15 23 42); font-weight: 600; }
    40%, 100% { color: rgb(148 163 184); font-weight: 400; }
  }
  @keyframes animflow-cap-c {
    0%, 39.9% { color: rgb(148 163 184); font-weight: 400; }
    40%, 59.9% { color: rgb(15 23 42); font-weight: 600; }
    60%, 100% { color: rgb(148 163 184); font-weight: 400; }
  }
  @keyframes animflow-cap-d {
    0%, 59.9% { color: rgb(148 163 184); font-weight: 400; }
    60%, 79.9% { color: rgb(15 23 42); font-weight: 600; }
    80%, 100% { color: rgb(148 163 184); font-weight: 400; }
  }
  @keyframes animflow-cap-e {
    0%, 79.9% { color: rgb(148 163 184); font-weight: 400; }
    80%, 100% { color: rgb(5 150 105); font-weight: 600; }
  }

  .animflow-layer-a { animation: animflow-phase-a-vis 10s linear infinite; }
  .animflow-layer-b { animation: animflow-phase-b-vis 10s linear infinite; }
  .animflow-layer-c { animation: animflow-phase-c-vis 10s linear infinite; }
  .animflow-layer-d { animation: animflow-phase-d-vis 10s linear infinite; }

  .animflow-bubble { animation: animflow-bubble-in 10s linear infinite; }
  .animflow-cursor { animation: animflow-cursor-tap 10s linear infinite; transform-origin: center; }
  .animflow-tick-1 { animation: animflow-tick-stroke 0.55s ease-out 4s forwards; stroke-dasharray: 20; stroke-dashoffset: 20; }
  .animflow-tick-2 { animation: animflow-tick-stroke 0.55s ease-out 4.4s forwards; stroke-dasharray: 20; stroke-dashoffset: 20; }
  .animflow-tick-3 { animation: animflow-tick-stroke 0.55s ease-out 4.8s forwards; stroke-dasharray: 20; stroke-dashoffset: 20; }
  .animflow-check { animation: animflow-check-pop 10s linear infinite; transform-origin: 124px 188px; }

  .animflow-row-pending { animation: animflow-row-pending-vis 10s linear infinite; }
  .animflow-row-tick { animation: animflow-row-tick-vis 10s linear infinite; }
  .animflow-row-bg { animation: animflow-row-glow 10s linear infinite; }
  .animflow-counter-old { animation: animflow-counter-old 10s linear infinite; }
  .animflow-counter-new { animation: animflow-counter-new 10s linear infinite; }
  .animflow-pulse { animation: animflow-pulse-fly 10s linear infinite; }

  .animflow-cap-a { animation: animflow-cap-a 10s linear infinite; }
  .animflow-cap-b { animation: animflow-cap-b 10s linear infinite; }
  .animflow-cap-c { animation: animflow-cap-c 10s linear infinite; }
  .animflow-cap-d { animation: animflow-cap-d 10s linear infinite; }
  .animflow-cap-e { animation: animflow-cap-e 10s linear infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .animflow-layer-a,
  .animflow-layer-b,
  .animflow-layer-c { opacity: 0 !important; }
  .animflow-layer-d { opacity: 1 !important; }
  .animflow-bubble,
  .animflow-cursor,
  .animflow-check,
  .animflow-pulse { animation: none !important; transform: none !important; }
  .animflow-pulse { opacity: 0 !important; }
  .animflow-tick-1,
  .animflow-tick-2,
  .animflow-tick-3 { stroke-dashoffset: 0 !important; animation: none !important; }
  .animflow-row-pending { opacity: 0 !important; animation: none !important; }
  .animflow-row-tick { opacity: 1 !important; animation: none !important; }
  .animflow-row-bg { fill: white !important; animation: none !important; }
  .animflow-counter-old { opacity: 0 !important; animation: none !important; }
  .animflow-counter-new { opacity: 1 !important; animation: none !important; }
  .animflow-cap-a,
  .animflow-cap-b,
  .animflow-cap-c,
  .animflow-cap-d { color: rgb(148 163 184) !important; font-weight: 400 !important; animation: none !important; }
  .animflow-cap-e { color: rgb(5 150 105) !important; font-weight: 600 !important; animation: none !important; }
}