/* falcon.com home page: phone layouts for the diagrams. Below 560px each wide diagram gives way to
   a narrow twin drawn on a 320-unit canvas, so its smallest text still renders at 11px or more on
   a 390px screen. Same rules as the other sheets: classes only, the base style is the final frame,
   motion only when the visitor allows it. */

.graphic-narrow {
  display: none;
}
@media (max-width: 559.98px) {
  .graphic-wide {
    display: none;
  }
  .graphic-narrow {
    display: block;
    max-width: 26rem;
  }

  /* Graphic A keeps its layout; it spans the column and its small labels grow. */
  .hero-graphic .graphic,
  .hero-graphic figcaption {
    max-width: none;
  }
  .graphic-slots .g-role,
  .graphic-slots .g-chip-name,
  .graphic-slots .g-status text,
  .graphic-slots .g-av-sm {
    font-size: 12.5px;
  }
}

/* Shared sizes on the narrow canvases: nothing below 10 units. */
.graphic-narrow .g-eyebrow,
.graphic-narrow .g-av-xs,
.graphic-narrow .e-next text {
  font-size: 10px;
}
.graphic-narrow .g-cap,
.graphic-narrow .g-small {
  font-size: 10.5px;
}

/* Graphic B: the agent on top, two open lines under it, the shelf as a row of three. */
.graphic .g-slot-t {
  fill: var(--warm-600);
  font-size: 10.5px;
}
.graphic-ids-n .g-name {
  font-size: 12px;
}
.graphic-ids-n .g-idcard.id1 {
  --dx: 40px;
  --dy: -152px;
}
.graphic-ids-n .g-idcard.id2 {
  --dx: 70px;
  --dy: -152px;
}
.graphic-ids-n .g-idcard.id3 {
  --dx: -180px;
  --dy: -152px;
}
.graphic-ids-n .g-src-t,
.graphic-ids-n .g-src-sub,
.graphic-ids-n .g-soon text {
  font-size: 10px;
}
.graphic-ids-n .g-src-msg.c1 {
  --ma-y: 6px;
  --mb-x: 46px;
  --mb-y: 28px;
  --mc-x: 53px;
  --mc-y: 28px;
  --md-x: 53px;
  --md-y: 166px;
  --me-x: 53px;
  --me-y: 166px;
}
.graphic-ids-n .g-src-msg.c2 {
  --m1-x: 7px;
  --m1-y: 0px;
  --m2-x: 7px;
  --m2-y: 130px;
  --m3-x: -205px;
  --m3-y: 130px;
  --m4-x: -205px;
  --m4-y: 186px;
}
.graphic-ids-n .g-src-msg.c3 {
  --m1-x: 7px;
  --m1-y: 0px;
  --m2-x: 7px;
  --m2-y: 82px;
  --m3-x: -205px;
  --m3-y: 82px;
  --m4-x: -205px;
  --m4-y: 138px;
}

/* Graphic E: the run token follows the longer gaps of the stacked layout. */
.graphic-wf-n .e-dot.d2 {
  --ey: 72px;
}
.graphic-wf-n .e-dot.d3 {
  --e3x: 0px;
}
.graphic-wf-n .e-dot.d5 {
  --ey: 208px;
}
.graphic-wf-n .e-dot.d8 {
  --d8x: 16px;
}

/* Graphic D: the noticed words fly from the narrower bubble; events fan out to the webhooks. */
.graphic-memory-n .g-fly.f1 {
  --fx: -132px;
  --fy: -198px;
}
.graphic-memory-n .g-fly.f2 {
  --fx: -132px;
  --fy: -210px;
}
.graphic-memory-n .g-fly.f3 {
  --fx: -132px;
  --fy: -222px;
}
.graphic-memory-n .g-hook.k1 {
  --hx: 20px;
  --hy: -26px;
}
.graphic-memory-n .g-hook.k2 {
  --hx: 20px;
  --hy: 26px;
}

@media (prefers-reduced-motion: no-preference) {
  /* Graphic C: requests run down the spine into the map; tool calls run out to the systems. */
  .graphic-flow-n .g-in-n {
    --oy: 134px;
    animation-name: dot-in-n;
  }
  .graphic-flow-n .g-in-n.db {
    --oy: 86px;
  }
  .graphic-flow-n .g-out-n {
    --tx: -229px;
    animation-name: dot-out-n;
  }
  .graphic-flow-n .g-out-n.db {
    --tx: -63px;
  }
}

@keyframes dot-in-n {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  1% {
    opacity: 1;
  }
  10% {
    opacity: 1;
    transform: translate(0, var(--oy));
  }
  12%,
  100% {
    opacity: 0;
    transform: translate(0, var(--oy));
  }
}
@keyframes dot-out-n {
  0%,
  26% {
    opacity: 0;
    transform: translate(0, 0);
  }
  27% {
    opacity: 1;
    transform: translate(0, 0);
  }
  29% {
    transform: translate(8px, 0);
  }
  31% {
    transform: translate(8px, 118px);
  }
  33% {
    opacity: 1;
    transform: translate(var(--tx), 118px);
  }
  35%,
  100% {
    opacity: 0;
    transform: translate(var(--tx), 126px);
  }
}