/* "How it works" diagram: AI agent <-> mailbox, with the audit log under the mailbox, with one slow, quiet loop that tells the story:
   a new email arrives, the mailbox tells the agent, the agent asks to read it, the email and its file are
   read (each read goes to the audit log), and the extracted data goes back to the agent. */
:root { --rd-flow-loop:16s; }
.rd-flow { --flow-loop:var(--rd-flow-loop); --flow-link:34px; --flow-line:color-mix(in srgb,var(--rd-accent) 35%,transparent); --flow-tint:color-mix(in srgb,var(--rd-accent-soft) 65%,transparent); align-self:center; min-width:0; margin:0; container:rd-flow / inline-size; color:var(--rd-ink); font:400 13px/1.45 var(--rd-font); }
.rd-flow * { box-sizing:border-box; }
.rd-flow p { margin:0; }
.rd-flow__grid { display:grid; grid-template-columns:auto var(--flow-link) minmax(0,1fr); grid-template-areas:"agent in mail" ". . out" ". . audit"; align-items:center; }
.rd-flow__agent { grid-area:agent; }
.rd-flow__link--in { grid-area:in; }
.rd-flow__mailbox { grid-area:mail; }
.rd-flow__link--out { grid-area:out; }
.rd-flow__audit { grid-area:audit; }

/* Only the face takes up space, so the face itself sits on the arrow line. The name hangs under it and
   the status pill (what the agent is doing now) floats over it, starting at the face's left edge. */
.rd-flow__agent { position:relative; display:flex; padding-right:4px; font-size:12px; white-space:nowrap; }
.rd-flow__name { position:absolute; top:calc(100% + 6px); left:calc(50% - 2px); transform:translateX(-50%); }
.rd-flow__face { display:block; width:48px; height:48px; }
.rd-flow__face-bg { fill:var(--rd-accent-soft); stroke:var(--rd-accent); stroke-opacity:.4; stroke-width:1.5; animation:rd-flow-agent var(--flow-loop) ease-in-out infinite; }
.rd-flow__eye { fill:var(--rd-accent); }
.rd-flow__smile { fill:none; stroke:var(--rd-accent); stroke-width:1.8; stroke-linecap:round; }
.rd-flow__status { position:absolute; bottom:calc(100% + 8px); left:0; display:grid; justify-items:start; }
.rd-flow__status span { grid-area:1 / 1; padding:0 7px; border-radius:8px; background:var(--rd-accent-soft); color:var(--rd-accent); font:500 10.5px/17px var(--rd-font); opacity:0; animation:var(--flow-loop) ease-in-out infinite; }
.rd-flow__status span:nth-child(1) { animation-name:rd-flow-status-1; }
.rd-flow__status span:nth-child(2) { animation-name:rd-flow-status-2; }
.rd-flow__status span:nth-child(3) { animation-name:rd-flow-status-3; }

/* Dashed link with an arrowhead; the dot travels along it. The agent link carries traffic both ways,
   so it also has an arrowhead (b) pointing back at the agent. */
.rd-flow__link { --tx:var(--flow-link); --ty:0px; position:relative; height:12px; }
.rd-flow__link::before { content:""; position:absolute; top:50%; left:3px; right:3px; border-top:1.5px dashed var(--flow-line); }
.rd-flow__link::after { content:""; position:absolute; top:calc(50% - 3.5px); right:3px; width:7px; height:7px; border-top:1.5px solid var(--flow-line); border-right:1.5px solid var(--flow-line); transform:rotate(45deg); }
.rd-flow__link b { position:absolute; top:calc(50% - 3.5px); left:3px; width:7px; height:7px; border-bottom:1.5px solid var(--flow-line); border-left:1.5px solid var(--flow-line); transform:rotate(45deg); }
.rd-flow__link i { position:absolute; top:calc(50% - 2.5px); left:-2.5px; width:5px; height:5px; border-radius:50%; background:var(--rd-accent); opacity:0; animation:var(--flow-loop) linear infinite; }
.rd-flow__link--in i { animation-name:rd-flow-in; }
.rd-flow__link--out i { animation-name:rd-flow-out; }

.rd-flow__card { min-width:0; border:1px solid var(--rd-line); border-radius:5px; background:var(--rd-paper); }
.rd-flow__head { display:flex; align-items:center; gap:7px; min-height:38px; padding:8px 12px; border-bottom:1px solid var(--rd-line); border-radius:4px 4px 0 0; background:var(--rd-soft); font-size:12.5px; }
.rd-flow__head svg { width:15px; height:15px; flex:none; fill:none; stroke:var(--rd-muted); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.rd-flow__address { min-width:0; font:400 10.5px/1.4 var(--rd-mono); overflow-wrap:anywhere; }
.rd-flow__head .rd-flow__arrive { width:16px; height:16px; margin-left:auto; stroke:var(--rd-accent); opacity:0; animation:rd-flow-arrive var(--flow-loop) ease-in infinite; }

.rd-flow__mail { padding:9px 12px; }
.rd-flow__mail+.rd-flow__mail { border-top:1px solid var(--rd-line); opacity:.55; }
.rd-flow__mail--new { animation:rd-flow-mail var(--flow-loop) ease-in-out infinite; }
.rd-flow__from { overflow:hidden; color:var(--rd-muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.rd-flow__mail--new .rd-flow__from { display:flex; align-items:center; justify-content:space-between; gap:6px; line-height:16px; }
.rd-flow__mail--new .rd-flow__from span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.rd-flow__new { flex:none; padding:0 6px; border-radius:8px; background:var(--rd-accent-soft); color:var(--rd-accent); font:500 9.5px/15px var(--rd-font); opacity:0; animation:rd-flow-new var(--flow-loop) ease-in-out infinite; }
.rd-flow__subject { font-size:13px; font-weight:500; }
.rd-flow__file { display:inline-flex; align-items:center; gap:5px; margin-top:6px!important; padding:2px 7px; border:1px solid var(--rd-line); border-radius:4px; background:var(--rd-soft); color:var(--rd-muted); font:400 10.5px/1.5 var(--rd-mono); animation:rd-flow-file var(--flow-loop) ease-in-out infinite; }
.rd-flow__file svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.rd-flow__audit ol { margin:0; padding:0; list-style:none; }
.rd-flow__audit li { margin:0; padding:7px 12px; opacity:.6; animation:var(--flow-loop) ease-in-out infinite; }
.rd-flow__audit li+li { border-top:1px solid var(--rd-line); }
.rd-flow__audit li:nth-child(1) { animation-name:rd-flow-row-1; }
.rd-flow__audit li:nth-child(2) { animation-name:rd-flow-row-2; }
.rd-flow__action { display:flex; align-items:baseline; gap:5px; font-size:12px; font-weight:500; }
.rd-flow__action code { padding:0; border:0; background:none; color:var(--rd-muted); font:400 10.5px/1.4 var(--rd-mono); }
.rd-flow__action code::before,.rd-flow__action code::after { content:none; }
.rd-flow__check { margin-left:auto; color:var(--rd-accent); font-weight:400; }
.rd-flow__reason { overflow:hidden; color:var(--rd-muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }

/* One loop:
   1) 0-10%   a new email drops into the mailbox (New badge).
   2) 12-18%  the mailbox tells the agent: a dot goes to the agent, the face lights up, "New email".
   3) 26-32%  the agent asks to read it: a dot goes to the mailbox, "Reading…".
   4) 35-55%  the email is read (35%), then brief.pdf (46%); each read goes to the audit log.
   5) 57-64%  the extracted data goes back to the agent, the face lights up, "Got the data".
   84-96% rest, 96-100% reset. */
@keyframes rd-flow-arrive {
  0% { opacity:0; transform:translateY(-16px); }
  2% { opacity:.55; transform:translateY(-16px); }
  7% { opacity:.55; transform:translateY(0); }
  10%,100% { opacity:0; transform:translateY(0); }
}
@keyframes rd-flow-mail {
  0%,6% { opacity:0; transform:translateY(-3px); background:transparent; }
  10% { opacity:1; transform:none; background:var(--flow-tint); }
  16%,32% { background:transparent; }
  35% { background:var(--flow-tint); }
  40%,96% { opacity:1; transform:none; background:transparent; }
  100% { opacity:0; transform:none; }
}
@keyframes rd-flow-new { 0%,8% { opacity:0; } 10%,32% { opacity:1; } 35%,100% { opacity:0; } }
@keyframes rd-flow-file { 0%,43%,52%,100% { background:var(--rd-soft); color:var(--rd-muted); } 46% { background:var(--rd-accent-soft); color:var(--rd-accent); } }
@keyframes rd-flow-in {
  0%,11% { opacity:0; transform:translate(var(--tx),var(--ty)); }
  12% { opacity:.45; transform:translate(var(--tx),var(--ty)); }
  18% { opacity:.45; transform:translate(0,0); }
  19%,25% { opacity:0; transform:translate(0,0); }
  26% { opacity:.45; transform:translate(0,0); }
  32% { opacity:.45; transform:translate(var(--tx),var(--ty)); }
  33%,56% { opacity:0; transform:translate(var(--tx),var(--ty)); }
  57% { opacity:.45; transform:translate(var(--tx),var(--ty)); }
  64% { opacity:.45; transform:translate(0,0); }
  65%,100% { opacity:0; transform:translate(0,0); }
}
@keyframes rd-flow-out {
  0%,35% { opacity:0; transform:translate(0,0); }
  36%,47% { opacity:.45; transform:translate(0,0); }
  42%,53% { opacity:.45; transform:translate(var(--tx),var(--ty)); }
  43% { opacity:0; transform:translate(var(--tx),var(--ty)); }
  46% { opacity:0; transform:translate(0,0); }
  54%,100% { opacity:0; transform:translate(var(--tx),var(--ty)); }
}
@keyframes rd-flow-agent { 0%,17%,25%,63%,72%,100% { stroke-opacity:.4; } 19%,65% { stroke-opacity:1; } }
@keyframes rd-flow-status-1 { 0%,17%,27%,100% { opacity:0; } 19%,25% { opacity:1; } }
@keyframes rd-flow-status-2 { 0%,26%,64%,100% { opacity:0; } 28%,62% { opacity:1; } }
@keyframes rd-flow-status-3 { 0%,63%,87%,100% { opacity:0; } 65%,84% { opacity:1; } }
@keyframes rd-flow-row-1 { 0%,42%,100% { opacity:.6; background:transparent; } 44% { opacity:1; background:var(--flow-tint); } 50%,96% { opacity:1; background:transparent; } }
@keyframes rd-flow-row-2 { 0%,53%,100% { opacity:.6; background:transparent; } 55% { opacity:1; background:var(--flow-tint); } 61%,96% { opacity:1; background:transparent; } }

/* Every 8s (38-47% and 84-93% of the loop): a light sweeps across the hero's main button, inviting
   the visitor to create their own inbox. It lives in this file so it shares the flow's clock. */
.rd-cta--shine { position:relative; overflow:hidden; }
.rd-cta--shine::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / 28%) 50%,transparent 70%); transform:translateX(-110%); animation:rd-cta-shine var(--rd-flow-loop) ease-in-out infinite; pointer-events:none; }
@keyframes rd-cta-shine {
  0%,38% { transform:translateX(-110%); }
  47% { transform:translateX(110%); }
  47.01%,84% { transform:translateX(-110%); }
  93%,100% { transform:translateX(110%); }
}

/* The mailbox -> audit log link points down: the dot travels from the mailbox to the log under it. */
.rd-flow__link--out { --tx:0px; --ty:26px; justify-self:center; width:12px; height:26px; }
.rd-flow__link--out::before { top:3px; bottom:3px; left:50%; right:auto; border-top:0; border-left:1.5px dashed var(--flow-line); }
.rd-flow__link--out::after { top:auto; bottom:3px; left:calc(50% - 3.5px); right:auto; transform:rotate(135deg); }
.rd-flow__link--out i { top:-2.5px; left:calc(50% - 2px); }

/* Narrow: stack top to bottom. The face stays centered over the link; the name and, under it, the status
   pill sit to its right. The agent link points down too, and its dot travels down and back up. */
@container rd-flow (max-width:419px) {
  .rd-flow__grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"agent" "in" "mail" "out" "audit"; }
  .rd-flow__agent { justify-self:center; padding:0; font-size:13px; }
  .rd-flow__name { top:calc(50% - 9px); left:calc(100% + 10px); transform:translateY(-50%); }
  .rd-flow__status { top:calc(50% + 2px); bottom:auto; left:calc(100% + 10px); }
  .rd-flow__face { width:40px; height:40px; }
  .rd-flow__link--in { --tx:0px; --ty:32px; justify-self:center; width:12px; height:32px; }
  .rd-flow__link--in::before { top:3px; bottom:3px; left:50%; right:auto; border-top:0; border-left:1.5px dashed var(--flow-line); }
  .rd-flow__link--in::after { top:auto; bottom:3px; left:calc(50% - 3.5px); right:auto; transform:rotate(135deg); }
  .rd-flow__link--in b { top:3px; left:calc(50% - 3.5px); transform:rotate(135deg); }
  .rd-flow__link--in i { top:-2.5px; left:calc(50% - 2px); }
}

@media(max-width:800px) { .rd-flow { width:100%; max-width:520px; margin-inline:auto; } }
@media(prefers-reduced-motion:reduce) {
  .rd-flow__link i,.rd-flow__status { display:none; }
  .rd-flow__mail--new,.rd-flow__audit li { animation:none; opacity:1; }
  .rd-flow__file,.rd-flow__face-bg { animation:none; }
  .rd-flow__head .rd-flow__arrive,.rd-flow__new { display:none; }
  .rd-cta--shine::after { display:none; }
}