/* ============================================================
   INVOICE FLOW (Hero) — PDF invoice → Agent → ERP booking
   ============================================================ */
.aa-conveyor-wrap {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--bone);
}
.aa-conveyor { display: block; width: 100%; height: 100%; }

/* Base / reduced-motion fallback: a completed booking (a quiet finished state) */
.aa-conveyor .inv-hl,
.aa-conveyor .erp-new-bg,
.aa-conveyor .inv-particle,
.aa-conveyor .inv-scan { opacity: 0; }
.aa-conveyor .erp-cell,
.aa-conveyor .erp-stamp,
.aa-conveyor .inv-tick { opacity: 1; }

/* One 8s cycle tells the full story */

/* Scanning line sweeps from top to bottom of the PDF */
@keyframes inv-scan {
  0%   { opacity: 0; transform: translateY(0); }
  5%   { opacity: 0.55; transform: translateY(0); }
  48%  { opacity: 0.55; transform: translateY(254px); }
  52%  { opacity: 0; transform: translateY(254px); }
  100% { opacity: 0; transform: translateY(254px); }
}
.aa-conveyor .inv-scan { animation: inv-scan 8s linear infinite; }

/* Field highlights light up as the agent reads each field */
@keyframes inv-field-f1 {
  0%, 6%  { opacity: 0; }
  10%     { opacity: 0.14; }
  18%     { opacity: 0.14; }
  22%     { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes inv-field-f2 {
  0%, 21% { opacity: 0; }
  25%     { opacity: 0.14; }
  33%     { opacity: 0.14; }
  37%     { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes inv-field-f3 {
  0%, 36% { opacity: 0; }
  40%     { opacity: 0.14; }
  48%     { opacity: 0.14; }
  52%     { opacity: 0; }
  100%    { opacity: 0; }
}
.aa-conveyor .f1 .inv-hl { animation: inv-field-f1 8s ease-in-out infinite; }
.aa-conveyor .f2 .inv-hl { animation: inv-field-f2 8s ease-in-out infinite; }
.aa-conveyor .f3 .inv-hl { animation: inv-field-f3 8s ease-in-out infinite; }

/* Particles: source field → agent (250, 195) → ERP cell */
@keyframes inv-p1 {
  0%, 13%   { transform: translate(175px, 137px); opacity: 0; }
  15%       { transform: translate(175px, 137px); opacity: 1; }
  19%       { transform: translate(240px, 195px); opacity: 1; }
  23%       { transform: translate(345px, 203px); opacity: 1; }
  26%, 100% { transform: translate(345px, 203px); opacity: 0; }
}
@keyframes inv-p2 {
  0%, 28%   { transform: translate(175px, 181px); opacity: 0; }
  30%       { transform: translate(175px, 181px); opacity: 1; }
  34%       { transform: translate(240px, 195px); opacity: 1; }
  38%       { transform: translate(425px, 203px); opacity: 1; }
  41%, 100% { transform: translate(425px, 203px); opacity: 0; }
}
@keyframes inv-p3 {
  0%, 43%   { transform: translate(175px, 225px); opacity: 0; }
  45%       { transform: translate(175px, 225px); opacity: 1; }
  49%       { transform: translate(240px, 195px); opacity: 1; }
  53%       { transform: translate(467px, 203px); opacity: 1; }
  56%, 100% { transform: translate(467px, 203px); opacity: 0; }
}
.aa-conveyor .inv-particle.p1 { animation: inv-p1 8s linear infinite; }
.aa-conveyor .inv-particle.p2 { animation: inv-p2 8s linear infinite; }
.aa-conveyor .inv-particle.p3 { animation: inv-p3 8s linear infinite; }

/* ERP cells appear as their value is booked */
@keyframes inv-cell-c1 {
  0%, 21% { opacity: 0; }
  25%     { opacity: 1; }
  92%     { opacity: 1; }
  100%    { opacity: 0; }
}
@keyframes inv-cell-c2 {
  0%, 36% { opacity: 0; }
  40%     { opacity: 1; }
  92%     { opacity: 1; }
  100%    { opacity: 0; }
}
@keyframes inv-cell-c3 {
  0%, 51% { opacity: 0; }
  55%     { opacity: 1; }
  92%     { opacity: 1; }
  100%    { opacity: 0; }
}
.aa-conveyor .erp-cell.c1 { animation: inv-cell-c1 8s ease-out infinite; }
.aa-conveyor .erp-cell.c2 { animation: inv-cell-c2 8s ease-out infinite; }
.aa-conveyor .erp-cell.c3 { animation: inv-cell-c3 8s ease-out infinite; }

/* Ochre row flash as the new entry is confirmed */
@keyframes inv-row-flash {
  0%, 55% { opacity: 0; }
  60%     { opacity: 0.16; }
  72%     { opacity: 0.08; }
  92%     { opacity: 0.08; }
  100%    { opacity: 0; }
}
.aa-conveyor .erp-new-bg { animation: inv-row-flash 8s ease-out infinite; }

/* VERBUCHT stamp slides in once all fields are booked */
@keyframes inv-stamp {
  0%, 55% { opacity: 0; transform: translate(300px, 244px); }
  62%     { opacity: 1; transform: translate(300px, 238px); }
  92%     { opacity: 1; transform: translate(300px, 238px); }
  100%    { opacity: 0; transform: translate(300px, 238px); }
}
.aa-conveyor .erp-stamp { animation: inv-stamp 8s cubic-bezier(0.2, 0, 0, 1) infinite; }

/* Agent heartbeat — one pulse per field being processed */
@keyframes inv-agent-pulse {
  0%, 12%, 28%, 43%, 100% { stroke-opacity: 0.3; }
  17%, 32%, 48%           { stroke-opacity: 1; }
}
.aa-conveyor .agent-glyph { animation: inv-agent-pulse 8s linear infinite; }

@keyframes inv-agent-ring {
  0%   { r: 22; opacity: 0.55; }
  100% { r: 40; opacity: 0; }
}
.aa-conveyor .agent-ring { animation: inv-agent-ring 2.67s ease-out infinite; }

/* Status ticks turn on progressively */
@keyframes inv-tick-1 {
  0%, 10%  { opacity: 0.22; }
  14%, 92% { opacity: 1; }
  95%, 100% { opacity: 0.22; }
}
@keyframes inv-tick-2 {
  0%, 25%  { opacity: 0.22; }
  29%, 92% { opacity: 1; }
  95%, 100% { opacity: 0.22; }
}
@keyframes inv-tick-3 {
  0%, 55%  { opacity: 0.22; }
  62%, 92% { opacity: 1; }
  95%, 100% { opacity: 0.22; }
}
.aa-conveyor .inv-tick.t1 { animation: inv-tick-1 8s linear infinite; }
.aa-conveyor .inv-tick.t2 { animation: inv-tick-2 8s linear infinite; }
.aa-conveyor .inv-tick.t3 { animation: inv-tick-3 8s linear infinite; }

/* ============================================================
   SERVICE DIAGRAMS
   ============================================================ */
.aa-diag { width: 80px; height: 60px; margin-bottom: 20px; }

/* 01 Agent */
@keyframes aa-agent-in  { 0%, 20% { opacity:0; } 30% { opacity:1; } 55% { opacity:1; } 65% { opacity:0.2; } 100% { opacity:0.2; } }
@keyframes aa-agent-out { 0%, 45% { opacity:0.2; } 60% { opacity:1; } 85% { opacity:1; } 100% { opacity:0.2; } }
@keyframes aa-agent-core { 0%, 100% { r: 6; } 50% { r: 7.5; } }
.aa-diag-agent .in-1 { animation: aa-agent-in 3.2s ease-in-out infinite; }
.aa-diag-agent .in-2 { animation: aa-agent-in 3.2s ease-in-out infinite; animation-delay: 0.4s; }
.aa-diag-agent .in-3 { animation: aa-agent-in 3.2s ease-in-out infinite; animation-delay: 0.8s; }
.aa-diag-agent .out-1 { animation: aa-agent-out 3.2s ease-in-out infinite; }
.aa-diag-agent .out-2 { animation: aa-agent-out 3.2s ease-in-out infinite; animation-delay: 0.3s; }
.aa-diag-agent .core { animation: aa-agent-core 3.2s ease-in-out infinite; }

/* 02 Code */
@keyframes aa-code-grow {
  0%, 5% { stroke-dashoffset: var(--len); }
  25%    { stroke-dashoffset: 0; }
  100%   { stroke-dashoffset: 0; }
}
.aa-diag-code .line {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: aa-code-grow 4s ease-out infinite;
}
.aa-diag-code .ln-2 { animation-delay: 0.5s; }
.aa-diag-code .ln-3 { animation-delay: 1s; }
.aa-diag-code .ln-4 { animation-delay: 1.5s; }

/* 03 Scale */
@keyframes aa-tip {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
.aa-diag-scale .beam {
  animation: aa-tip 6s ease-in-out infinite;
  transform-origin: 40px 22px;
}

/* 04 Flow */
@keyframes aa-flow-draw {
  0%, 10% { stroke-dashoffset: var(--len); }
  35%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; }
}
@keyframes aa-flow-fill {
  0%, 35% { fill: var(--paper); }
  55%     { fill: var(--ochre); }
  100%    { fill: var(--ochre); }
}
.aa-diag-flow .edge {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: aa-flow-draw 5s ease-in-out infinite;
}
.aa-diag-flow .e2 { animation-delay: 0.3s; }
.aa-diag-flow .e3 { animation-delay: 0.6s; }
.aa-diag-flow .e4 { animation-delay: 0.9s; }
.aa-diag-flow .node-end { animation: aa-flow-fill 5s ease-in-out infinite; }

/* ============================================================
   TIMELINE MARKER (Approach)
   ============================================================ */
@keyframes aa-timeline-sweep {
  0%   { left: 0%; }
  22%  { left: 25%; }
  28%  { left: 25%; }
  47%  { left: 50%; }
  53%  { left: 50%; }
  72%  { left: 75%; }
  78%  { left: 75%; }
  97%  { left: 100%; }
  100% { left: 100%; }
}
@keyframes aa-timeline-fill {
  0%   { width: 0%; }
  22%  { width: 25%; }
  47%  { width: 50%; }
  72%  { width: 75%; }
  97%  { width: 100%; }
  100% { width: 100%; }
}
.aa-timeline-marker {
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ochre);
  transform: translateX(-50%);
  animation: aa-timeline-sweep 16s cubic-bezier(.6,0,.4,1) infinite;
  box-shadow: 0 0 0 4px rgba(184, 136, 74, 0.15);
  pointer-events: none;
}
.aa-timeline-fill {
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  background: var(--ochre);
  animation: aa-timeline-fill 16s cubic-bezier(.6,0,.4,1) infinite;
  pointer-events: none;
}

/* ============================================================
   TRIAGE (Versicherung) — 3 sequential routings per 8s cycle
   ============================================================ */

/* Reduced-motion fallback: quiet end state, nothing moving */
.aa-triage .tri-hl,
.aa-triage .tri-dept-bg,
.aa-triage .tri-class-box,
.aa-triage .tri-class-text,
.aa-triage .tri-plus,
.aa-triage .tri-particle { opacity: 0; }
.aa-triage .tri-tick { opacity: 1; }

/* Channel highlights — one at a time, sequential */
@keyframes tri-ch-c1 { 0%,3% { opacity:0; } 6%,13% { opacity:0.14; } 16%,100% { opacity:0; } }
@keyframes tri-ch-c2 { 0%,28% { opacity:0; } 31%,38% { opacity:0.14; } 41%,100% { opacity:0; } }
@keyframes tri-ch-c4 { 0%,53% { opacity:0; } 56%,63% { opacity:0.14; } 66%,100% { opacity:0; } }
.aa-triage .c1 .tri-hl { animation: tri-ch-c1 8s ease-in-out infinite; }
.aa-triage .c2 .tri-hl { animation: tri-ch-c2 8s ease-in-out infinite; }
.aa-triage .c4 .tri-hl { animation: tri-ch-c4 8s ease-in-out infinite; }

/* Classification label — one per particle arrival at agent */
@keyframes tri-cls-1 { 0%,10% { opacity:0; } 13%,20% { opacity:1; } 23%,100% { opacity:0; } }
@keyframes tri-cls-2 { 0%,35% { opacity:0; } 38%,45% { opacity:1; } 48%,100% { opacity:0; } }
@keyframes tri-cls-3 { 0%,60% { opacity:0; } 63%,70% { opacity:1; } 73%,100% { opacity:0; } }
.aa-triage .tri-class-box.l1,
.aa-triage .tri-class-text.l1 { animation: tri-cls-1 8s ease-in-out infinite; }
.aa-triage .tri-class-box.l2,
.aa-triage .tri-class-text.l2 { animation: tri-cls-2 8s ease-in-out infinite; }
.aa-triage .tri-class-box.l3,
.aa-triage .tri-class-text.l3 { animation: tri-cls-3 8s ease-in-out infinite; }

/* Particles — source row → agent → target dept */
@keyframes tri-p1 {
  0%, 8%   { transform: translate(175px, 136px); opacity: 0; }
  10%      { transform: translate(175px, 136px); opacity: 1; }
  14%      { transform: translate(240px, 195px); opacity: 1; }
  20%      { transform: translate(400px, 236px); opacity: 1; }
  23%, 100% { transform: translate(400px, 236px); opacity: 0; }
}
@keyframes tri-p2 {
  0%, 33%  { transform: translate(175px, 186px); opacity: 0; }
  35%      { transform: translate(175px, 186px); opacity: 1; }
  39%      { transform: translate(240px, 195px); opacity: 1; }
  45%      { transform: translate(400px, 136px); opacity: 1; }
  48%, 100% { transform: translate(400px, 136px); opacity: 0; }
}
@keyframes tri-p3 {
  0%, 58%  { transform: translate(175px, 276px); opacity: 0; }
  60%      { transform: translate(175px, 276px); opacity: 1; }
  64%      { transform: translate(240px, 195px); opacity: 1; }
  70%      { transform: translate(400px, 274px); opacity: 1; }
  73%, 100% { transform: translate(400px, 274px); opacity: 0; }
}
.aa-triage .tri-particle.p1 { animation: tri-p1 8s linear infinite; }
.aa-triage .tri-particle.p2 { animation: tri-p2 8s linear infinite; }
.aa-triage .tri-particle.p3 { animation: tri-p3 8s linear infinite; }

/* Department row highlights when particle arrives */
@keyframes tri-dept-kfz { 0%,18% { opacity:0; } 22%,28% { opacity:0.18; } 34%,100% { opacity:0; } }
@keyframes tri-dept-hp  { 0%,43% { opacity:0; } 47%,53% { opacity:0.18; } 59%,100% { opacity:0; } }
@keyframes tri-dept-geb { 0%,68% { opacity:0; } 72%,92% { opacity:0.18; } 100% { opacity:0; } }
.aa-triage .kfz .tri-dept-bg { animation: tri-dept-kfz 8s ease-out infinite; }
.aa-triage .hp  .tri-dept-bg { animation: tri-dept-hp  8s ease-out infinite; }
.aa-triage .geb .tri-dept-bg { animation: tri-dept-geb 8s ease-out infinite; }

/* +1 counters — appear just after routing completes */
@keyframes tri-plus-kfz { 0%,22% { opacity:0; } 26%,92% { opacity:1; } 100% { opacity:0; } }
@keyframes tri-plus-hp  { 0%,47% { opacity:0; } 51%,92% { opacity:1; } 100% { opacity:0; } }
@keyframes tri-plus-geb { 0%,72% { opacity:0; } 76%,92% { opacity:1; } 100% { opacity:0; } }
.aa-triage .kfz .tri-plus { animation: tri-plus-kfz 8s ease-out infinite; }
.aa-triage .hp  .tri-plus { animation: tri-plus-hp  8s ease-out infinite; }
.aa-triage .geb .tri-plus { animation: tri-plus-geb 8s ease-out infinite; }

/* Agent pulses once per routing (3 heartbeats) */
@keyframes tri-agent-pulse {
  0%, 11%, 36%, 61%, 100% { stroke-opacity: 0.3; }
  14%, 39%, 64% { stroke-opacity: 1; }
}
.aa-triage .agent-glyph { animation: tri-agent-pulse 8s linear infinite; }
.aa-triage .agent-ring  { animation: inv-agent-ring 2.67s ease-out infinite; }

/* Status ticks — progressive */
@keyframes tri-tick-1 { 0%,8% { opacity:0.22; } 12%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
@keyframes tri-tick-2 { 0%,12% { opacity:0.22; } 16%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
@keyframes tri-tick-3 { 0%,20% { opacity:0.22; } 24%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
.aa-triage .tri-tick.t1 { animation: tri-tick-1 8s linear infinite; }
.aa-triage .tri-tick.t2 { animation: tri-tick-2 8s linear infinite; }
.aa-triage .tri-tick.t3 { animation: tri-tick-3 8s linear infinite; }

/* ============================================================
   LIEFERANTEN (Handel) — 3 emails → agent → context panel grows
   ============================================================ */

/* Reduced-motion fallback: final state (all items filled) */
.aa-lief .lief-hl,
.aa-lief .lief-particle { opacity: 0; }
.aa-lief .lief-item,
.aa-lief .lief-stamp,
.aa-lief .lief-tick { opacity: 1; }

/* Email highlights — sequential */
@keyframes lief-m1 { 0%,5% { opacity:0; } 8%,15% { opacity:0.14; } 18%,100% { opacity:0; } }
@keyframes lief-m2 { 0%,30% { opacity:0; } 33%,40% { opacity:0.14; } 43%,100% { opacity:0; } }
@keyframes lief-m3 { 0%,55% { opacity:0; } 58%,65% { opacity:0.14; } 68%,100% { opacity:0; } }
.aa-lief .m1 .lief-hl { animation: lief-m1 8s ease-in-out infinite; }
.aa-lief .m2 .lief-hl { animation: lief-m2 8s ease-in-out infinite; }
.aa-lief .m3 .lief-hl { animation: lief-m3 8s ease-in-out infinite; }

/* Particles: email → agent → context item on right */
@keyframes lief-p1 {
  0%, 10%  { transform: translate(175px, 144px); opacity: 0; }
  12%      { transform: translate(175px, 144px); opacity: 1; }
  16%      { transform: translate(240px, 195px); opacity: 1; }
  21%      { transform: translate(400px, 152px); opacity: 1; }
  24%, 100% { transform: translate(400px, 152px); opacity: 0; }
}
@keyframes lief-p2 {
  0%, 35%  { transform: translate(175px, 204px); opacity: 0; }
  37%      { transform: translate(175px, 204px); opacity: 1; }
  41%      { transform: translate(240px, 195px); opacity: 1; }
  46%      { transform: translate(400px, 192px); opacity: 1; }
  49%, 100% { transform: translate(400px, 192px); opacity: 0; }
}
@keyframes lief-p3 {
  0%, 60%  { transform: translate(175px, 264px); opacity: 0; }
  62%      { transform: translate(175px, 264px); opacity: 1; }
  66%      { transform: translate(240px, 195px); opacity: 1; }
  71%      { transform: translate(400px, 230px); opacity: 1; }
  74%, 100% { transform: translate(400px, 230px); opacity: 0; }
}
.aa-lief .lief-particle.p1 { animation: lief-p1 8s linear infinite; }
.aa-lief .lief-particle.p2 { animation: lief-p2 8s linear infinite; }
.aa-lief .lief-particle.p3 { animation: lief-p3 8s linear infinite; }

/* Context items fade in as particles arrive */
@keyframes lief-i1 { 0%,20% { opacity:0; transform: translateY(4px); } 24%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
@keyframes lief-i2 { 0%,45% { opacity:0; transform: translateY(4px); } 49%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
@keyframes lief-i3 { 0%,70% { opacity:0; transform: translateY(4px); } 74%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
.aa-lief .lief-item.i1 { animation: lief-i1 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }
.aa-lief .lief-item.i2 { animation: lief-i2 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }
.aa-lief .lief-item.i3 { animation: lief-i3 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }

/* Summary stamp — appears once all items are in */
@keyframes lief-stamp {
  0%, 75%  { opacity: 0; transform: translate(310px, 276px); }
  80%, 92% { opacity: 1; transform: translate(310px, 270px); }
  100%     { opacity: 0; transform: translate(310px, 270px); }
}
.aa-lief .lief-stamp { animation: lief-stamp 8s cubic-bezier(0.2, 0, 0, 1) infinite; }

/* Agent heartbeat — 3 pulses */
@keyframes lief-agent-pulse {
  0%, 13%, 38%, 63%, 100% { stroke-opacity: 0.3; }
  16%, 41%, 66% { stroke-opacity: 1; }
}
.aa-lief .agent-glyph { animation: lief-agent-pulse 8s linear infinite; }
.aa-lief .agent-ring  { animation: inv-agent-ring 2.67s ease-out infinite; }

/* Status ticks */
@keyframes lief-tick-1 { 0%,10% { opacity:0.22; } 14%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
@keyframes lief-tick-2 { 0%,16% { opacity:0.22; } 20%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
@keyframes lief-tick-3 { 0%,24% { opacity:0.22; } 28%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
.aa-lief .lief-tick.t1 { animation: lief-tick-1 8s linear infinite; }
.aa-lief .lief-tick.t2 { animation: lief-tick-2 8s linear infinite; }
.aa-lief .lief-tick.t3 { animation: lief-tick-3 8s linear infinite; }

/* ============================================================
   REGAL (Lagertechnik) — 3 handwritten entries → agent → 3 documents
   ============================================================ */

/* Reduced-motion fallback: final state (all documents visible) */
.aa-regal .rg-hl,
.aa-regal .rg-particle { opacity: 0; }
.aa-regal .rg-doc,
.aa-regal .rg-stamp,
.aa-regal .rg-tick { opacity: 1; }

/* Entry highlights — sequential */
@keyframes rg-e1 { 0%,5% { opacity:0; } 8%,15% { opacity:0.14; } 18%,100% { opacity:0; } }
@keyframes rg-e2 { 0%,30% { opacity:0; } 33%,40% { opacity:0.14; } 43%,100% { opacity:0; } }
@keyframes rg-e3 { 0%,55% { opacity:0; } 58%,65% { opacity:0.14; } 68%,100% { opacity:0; } }
.aa-regal .e1 .rg-hl { animation: rg-e1 8s ease-in-out infinite; }
.aa-regal .e2 .rg-hl { animation: rg-e2 8s ease-in-out infinite; }
.aa-regal .e3 .rg-hl { animation: rg-e3 8s ease-in-out infinite; }

/* Particles: handwriting row → agent → document card */
@keyframes rg-p1 {
  0%, 10%  { transform: translate(175px, 138px); opacity: 0; }
  12%      { transform: translate(175px, 138px); opacity: 1; }
  16%      { transform: translate(240px, 195px); opacity: 1; }
  21%      { transform: translate(390px, 140px); opacity: 1; }
  24%, 100% { transform: translate(390px, 140px); opacity: 0; }
}
@keyframes rg-p2 {
  0%, 35%  { transform: translate(175px, 186px); opacity: 0; }
  37%      { transform: translate(175px, 186px); opacity: 1; }
  41%      { transform: translate(240px, 195px); opacity: 1; }
  46%      { transform: translate(390px, 190px); opacity: 1; }
  49%, 100% { transform: translate(390px, 190px); opacity: 0; }
}
@keyframes rg-p3 {
  0%, 60%  { transform: translate(175px, 234px); opacity: 0; }
  62%      { transform: translate(175px, 234px); opacity: 1; }
  66%      { transform: translate(240px, 195px); opacity: 1; }
  71%      { transform: translate(390px, 240px); opacity: 1; }
  74%, 100% { transform: translate(390px, 240px); opacity: 0; }
}
.aa-regal .rg-particle.p1 { animation: rg-p1 8s linear infinite; }
.aa-regal .rg-particle.p2 { animation: rg-p2 8s linear infinite; }
.aa-regal .rg-particle.p3 { animation: rg-p3 8s linear infinite; }

/* Document cards fade in as they're generated */
@keyframes rg-d1 { 0%,20% { opacity:0; transform: translateY(6px); } 24%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
@keyframes rg-d2 { 0%,45% { opacity:0; transform: translateY(6px); } 49%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
@keyframes rg-d3 { 0%,70% { opacity:0; transform: translateY(6px); } 74%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
.aa-regal .rg-doc.d1 { animation: rg-d1 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }
.aa-regal .rg-doc.d2 { animation: rg-d2 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }
.aa-regal .rg-doc.d3 { animation: rg-d3 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }

/* FERTIG stamp — drops in after all documents are ready */
@keyframes rg-stamp {
  0%, 75%  { opacity: 0; transform: translate(310px, 292px); }
  80%, 92% { opacity: 1; transform: translate(310px, 286px); }
  100%     { opacity: 0; transform: translate(310px, 286px); }
}
.aa-regal .rg-stamp { animation: rg-stamp 8s cubic-bezier(0.2, 0, 0, 1) infinite; }

/* Agent heartbeat */
@keyframes rg-agent-pulse {
  0%, 13%, 38%, 63%, 100% { stroke-opacity: 0.3; }
  16%, 41%, 66% { stroke-opacity: 1; }
}
.aa-regal .agent-glyph { animation: rg-agent-pulse 8s linear infinite; }
.aa-regal .agent-ring  { animation: inv-agent-ring 2.67s ease-out infinite; }

/* Status ticks */
@keyframes rg-tick-1 { 0%,10% { opacity:0.22; } 14%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
@keyframes rg-tick-2 { 0%,16% { opacity:0.22; } 20%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
@keyframes rg-tick-3 { 0%,24% { opacity:0.22; } 28%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
.aa-regal .rg-tick.t1 { animation: rg-tick-1 8s linear infinite; }
.aa-regal .rg-tick.t2 { animation: rg-tick-2 8s linear infinite; }
.aa-regal .rg-tick.t3 { animation: rg-tick-3 8s linear infinite; }

/* ============================================================
   LINKEDIN (Beratung) — 3 topic pillars → agent → 3 scheduled posts
   ============================================================ */

/* Reduced-motion fallback: final state */
.aa-li .li-hl,
.aa-li .li-particle { opacity: 0; }
.aa-li .li-slot,
.aa-li .li-stamp,
.aa-li .li-tick { opacity: 1; }

/* Topic highlights — sequential */
@keyframes li-t1 { 0%,5% { opacity:0; } 8%,15% { opacity:0.14; } 18%,100% { opacity:0; } }
@keyframes li-t2 { 0%,30% { opacity:0; } 33%,40% { opacity:0.14; } 43%,100% { opacity:0; } }
@keyframes li-t3 { 0%,55% { opacity:0; } 58%,65% { opacity:0.14; } 68%,100% { opacity:0; } }
.aa-li .t1 .li-hl { animation: li-t1 8s ease-in-out infinite; }
.aa-li .t2 .li-hl { animation: li-t2 8s ease-in-out infinite; }
.aa-li .t3 .li-hl { animation: li-t3 8s ease-in-out infinite; }

/* Particles: topic → agent → calendar slot */
@keyframes li-p1 {
  0%, 10%  { transform: translate(175px, 144px); opacity: 0; }
  12%      { transform: translate(175px, 144px); opacity: 1; }
  16%      { transform: translate(240px, 195px); opacity: 1; }
  21%      { transform: translate(390px, 140px); opacity: 1; }
  24%, 100% { transform: translate(390px, 140px); opacity: 0; }
}
@keyframes li-p2 {
  0%, 35%  { transform: translate(175px, 204px); opacity: 0; }
  37%      { transform: translate(175px, 204px); opacity: 1; }
  41%      { transform: translate(240px, 195px); opacity: 1; }
  46%      { transform: translate(390px, 190px); opacity: 1; }
  49%, 100% { transform: translate(390px, 190px); opacity: 0; }
}
@keyframes li-p3 {
  0%, 60%  { transform: translate(175px, 266px); opacity: 0; }
  62%      { transform: translate(175px, 266px); opacity: 1; }
  66%      { transform: translate(240px, 195px); opacity: 1; }
  71%      { transform: translate(390px, 240px); opacity: 1; }
  74%, 100% { transform: translate(390px, 240px); opacity: 0; }
}
.aa-li .li-particle.p1 { animation: li-p1 8s linear infinite; }
.aa-li .li-particle.p2 { animation: li-p2 8s linear infinite; }
.aa-li .li-particle.p3 { animation: li-p3 8s linear infinite; }

/* Calendar slots fade in sequentially */
@keyframes li-s1 { 0%,20% { opacity:0; transform: translateY(6px); } 24%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
@keyframes li-s2 { 0%,45% { opacity:0; transform: translateY(6px); } 49%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
@keyframes li-s3 { 0%,70% { opacity:0; transform: translateY(6px); } 74%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
.aa-li .li-slot.s1 { animation: li-s1 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }
.aa-li .li-slot.s2 { animation: li-s2 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }
.aa-li .li-slot.s3 { animation: li-s3 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }

/* GEPLANT stamp — after all three slots populated */
@keyframes li-stamp {
  0%, 75%  { opacity: 0; transform: translate(310px, 292px); }
  80%, 92% { opacity: 1; transform: translate(310px, 286px); }
  100%     { opacity: 0; transform: translate(310px, 286px); }
}
.aa-li .li-stamp { animation: li-stamp 8s cubic-bezier(0.2, 0, 0, 1) infinite; }

/* Agent heartbeat */
@keyframes li-agent-pulse {
  0%, 13%, 38%, 63%, 100% { stroke-opacity: 0.3; }
  16%, 41%, 66% { stroke-opacity: 1; }
}
.aa-li .agent-glyph { animation: li-agent-pulse 8s linear infinite; }
.aa-li .agent-ring  { animation: inv-agent-ring 2.67s ease-out infinite; }

/* Status ticks */
@keyframes li-tick-1 { 0%,10% { opacity:0.22; } 14%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
@keyframes li-tick-2 { 0%,16% { opacity:0.22; } 20%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
@keyframes li-tick-3 { 0%,24% { opacity:0.22; } 28%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
.aa-li .li-tick.t1 { animation: li-tick-1 8s linear infinite; }
.aa-li .li-tick.t2 { animation: li-tick-2 8s linear infinite; }
.aa-li .li-tick.t3 { animation: li-tick-3 8s linear infinite; }

/* ============================================================
   TELEKOM (Shop-CRM) — 4 source systems → CRM → 4 dashboard tiles
   ============================================================ */

/* Reduced-motion fallback */
.aa-tk .tk-hl,
.aa-tk .tk-particle { opacity: 0; }
.aa-tk .tk-tile,
.aa-tk .tk-stamp,
.aa-tk .tk-tick { opacity: 1; }

/* Source row highlights — 4 sequential, each ~17% of cycle */
@keyframes tk-s1 { 0%,3% { opacity:0; } 6%,12% { opacity:0.14; } 15%,100% { opacity:0; } }
@keyframes tk-s2 { 0%,23% { opacity:0; } 26%,32% { opacity:0.14; } 35%,100% { opacity:0; } }
@keyframes tk-s3 { 0%,43% { opacity:0; } 46%,52% { opacity:0.14; } 55%,100% { opacity:0; } }
@keyframes tk-s4 { 0%,63% { opacity:0; } 66%,72% { opacity:0.14; } 75%,100% { opacity:0; } }
.aa-tk .s1 .tk-hl { animation: tk-s1 8s ease-in-out infinite; }
.aa-tk .s2 .tk-hl { animation: tk-s2 8s ease-in-out infinite; }
.aa-tk .s3 .tk-hl { animation: tk-s3 8s ease-in-out infinite; }
.aa-tk .s4 .tk-hl { animation: tk-s4 8s ease-in-out infinite; }

/* Particles: source → agent → tile
   Source Y centres: 134 · 178 · 222 · 266
   Tile centres: (349, 142), (431, 142), (349, 200), (431, 200) */
@keyframes tk-p1 {
  0%, 8%   { transform: translate(175px, 134px); opacity: 0; }
  10%      { transform: translate(175px, 134px); opacity: 1; }
  13%      { transform: translate(240px, 195px); opacity: 1; }
  17%      { transform: translate(349px, 142px); opacity: 1; }
  20%, 100% { transform: translate(349px, 142px); opacity: 0; }
}
@keyframes tk-p2 {
  0%, 28%  { transform: translate(175px, 178px); opacity: 0; }
  30%      { transform: translate(175px, 178px); opacity: 1; }
  33%      { transform: translate(240px, 195px); opacity: 1; }
  37%      { transform: translate(431px, 142px); opacity: 1; }
  40%, 100% { transform: translate(431px, 142px); opacity: 0; }
}
@keyframes tk-p3 {
  0%, 48%  { transform: translate(175px, 222px); opacity: 0; }
  50%      { transform: translate(175px, 222px); opacity: 1; }
  53%      { transform: translate(240px, 195px); opacity: 1; }
  57%      { transform: translate(349px, 200px); opacity: 1; }
  60%, 100% { transform: translate(349px, 200px); opacity: 0; }
}
@keyframes tk-p4 {
  0%, 68%  { transform: translate(175px, 266px); opacity: 0; }
  70%      { transform: translate(175px, 266px); opacity: 1; }
  73%      { transform: translate(240px, 195px); opacity: 1; }
  77%      { transform: translate(431px, 200px); opacity: 1; }
  80%, 100% { transform: translate(431px, 200px); opacity: 0; }
}
.aa-tk .tk-particle.p1 { animation: tk-p1 8s linear infinite; }
.aa-tk .tk-particle.p2 { animation: tk-p2 8s linear infinite; }
.aa-tk .tk-particle.p3 { animation: tk-p3 8s linear infinite; }
.aa-tk .tk-particle.p4 { animation: tk-p4 8s linear infinite; }

/* Dashboard tiles fade in as particles arrive */
@keyframes tk-t1 { 0%,16% { opacity:0; transform: translateY(6px); } 20%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
@keyframes tk-t2 { 0%,36% { opacity:0; transform: translateY(6px); } 40%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
@keyframes tk-t3 { 0%,56% { opacity:0; transform: translateY(6px); } 60%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
@keyframes tk-t4 { 0%,76% { opacity:0; transform: translateY(6px); } 80%,92% { opacity:1; transform: translateY(0); } 100% { opacity:0; } }
.aa-tk .tk-tile.t1 { animation: tk-t1 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }
.aa-tk .tk-tile.t2 { animation: tk-t2 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }
.aa-tk .tk-tile.t3 { animation: tk-t3 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }
.aa-tk .tk-tile.t4 { animation: tk-t4 8s ease-out infinite; transform-box: fill-box; transform-origin: left; }

/* AKTUELL stamp — once all tiles populated */
@keyframes tk-stamp {
  0%, 82%  { opacity: 0; transform: translate(310px, 256px); }
  86%, 94% { opacity: 1; transform: translate(310px, 250px); }
  100%     { opacity: 0; transform: translate(310px, 250px); }
}
.aa-tk .tk-stamp { animation: tk-stamp 8s cubic-bezier(0.2, 0, 0, 1) infinite; }

/* Agent heartbeat — 4 pulses */
@keyframes tk-agent-pulse {
  0%, 10%, 30%, 50%, 70%, 100% { stroke-opacity: 0.3; }
  13%, 33%, 53%, 73% { stroke-opacity: 1; }
}
.aa-tk .agent-glyph { animation: tk-agent-pulse 8s linear infinite; }
.aa-tk .agent-ring  { animation: inv-agent-ring 2s ease-out infinite; }

/* Status ticks */
@keyframes tk-tick-1 { 0%,8% { opacity:0.22; } 12%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
@keyframes tk-tick-2 { 0%,16% { opacity:0.22; } 20%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
@keyframes tk-tick-3 { 0%,26% { opacity:0.22; } 30%,92% { opacity:1; } 95%,100% { opacity:0.22; } }
.aa-tk .tk-tick.t1 { animation: tk-tick-1 8s linear infinite; }
.aa-tk .tk-tick.t2 { animation: tk-tick-2 8s linear infinite; }
.aa-tk .tk-tick.t3 { animation: tk-tick-3 8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .aa-conveyor *,
  .aa-diag *,
  .aa-timeline-marker,
  .aa-timeline-fill {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}