/* falcon.com home page: Graphic B's entry points (POST through its request map, Email, SMS,
   WhatsApp, Chat, Call, Connector, Event) and the messages that run from them into the agent. Same
   rules as graphics.css: classes only, the base style is the final frame, and graphics.css starts
   the motion only when the visitor allows it. */

.g-src-box {
  fill: var(--surface);
  stroke: var(--warm-300);
}
.g-src-on,
.g-src-flash {
  fill: var(--red-100);
  stroke: var(--red-400);
  opacity: 0;
}
.g-src-on.c1 {
  opacity: 1;
}
.graphic .g-src-t {
  font-size: 10.5px;
  font-weight: 600;
}
.graphic .g-src-sub {
  fill: var(--warm-600);
  font-size: 9.5px;
}
.g-icon-soon {
  stroke: var(--warm-600);
}
.g-soon rect {
  fill: var(--next-bg);
  stroke: var(--next-line);
}
.graphic .g-soon text {
  fill: var(--next-text);
  font-size: 9.5px;
  font-weight: 600;
}
.g-wire-soon {
  stroke-dasharray: 3 3;
}
.g-src-wire {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 2.5;
  opacity: 0;
}
.g-src-wire.c1 {
  opacity: 1;
}
.g-src-msg {
  fill: var(--accent-line);
  stroke: var(--surface);
  stroke-width: 2;
  opacity: 0;
}
.g-rm-loose {
  opacity: 0;
}
/* The path each message takes, as offsets from its node: down, along the bus, into the agent. */
.g-src-msg.c1 {
  --ma-y: 12px;
  --mb-y: 62px;
  --mc-y: 82px;
  --md-x: 120px;
  --md-y: 82px;
  --me-x: 120px;
  --me-y: 176px;
}
.g-src-msg.c2 {
  --m1-y: 82px;
  --m2-x: -40px;
  --m2-y: 82px;
  --m3-x: -40px;
  --m3-y: 176px;
  --m4-x: -40px;
  --m4-y: 176px;
}
.g-src-msg.c3 {
  --m1-y: 82px;
  --m2-x: -200px;
  --m2-y: 82px;
  --m3-x: -200px;
  --m3-y: 176px;
  --m4-x: -200px;
  --m4-y: 176px;
}

@keyframes src-msg {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  1% {
    opacity: 1;
    transform: translate(0, 0);
  }
  2.5% {
    transform: translate(var(--m1-x, 0px), var(--m1-y, 0px));
  }
  5% {
    transform: translate(var(--m2-x, 0px), var(--m2-y, 0px));
  }
  6.5% {
    transform: translate(var(--m3-x, 0px), var(--m3-y, 0px));
  }
  8% {
    opacity: 1;
    transform: translate(var(--m4-x, 0px), var(--m4-y, 0px));
  }
  9%,
  100% {
    opacity: 0;
    transform: translate(var(--m4-x, 0px), var(--m4-y, 0px));
  }
}
@keyframes src-msg-post {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  1% {
    opacity: 1;
    transform: translate(0, 0);
  }
  2% {
    opacity: 1;
    transform: translate(var(--ma-x, 0px), var(--ma-y, 0px));
  }
  2.4% {
    opacity: 0;
    transform: translate(var(--ma-x, 0px), var(--ma-y, 0px));
  }
  4% {
    opacity: 0;
    transform: translate(var(--mb-x, 0px), var(--mb-y, 0px));
  }
  4.4% {
    opacity: 1;
    transform: translate(var(--mb-x, 0px), var(--mb-y, 0px));
  }
  5.2% {
    transform: translate(var(--mc-x, 0px), var(--mc-y, 0px));
  }
  6.8% {
    transform: translate(var(--md-x, 0px), var(--md-y, 0px));
  }
  8.5% {
    opacity: 1;
    transform: translate(var(--me-x, 0px), var(--me-y, 0px));
  }
  9.5%,
  100% {
    opacity: 0;
    transform: translate(var(--me-x, 0px), var(--me-y, 0px));
  }
}
@keyframes src-lit {
  0% {
    opacity: 0;
  }
  0.5%,
  39% {
    opacity: 1;
  }
  41%,
  100% {
    opacity: 0;
  }
}
@keyframes src-flash {
  0%,
  2% {
    opacity: 0;
  }
  2.4%,
  4.2% {
    opacity: 1;
  }
  5%,
  100% {
    opacity: 0;
  }
}
@keyframes rm-tidy {
  0%,
  2.4% {
    opacity: 0;
  }
  3.4%,
  96% {
    opacity: 1;
  }
  99%,
  100% {
    opacity: 0;
  }
}
@keyframes rm-loose {
  0%,
  2.4% {
    opacity: 1;
  }
  3.4%,
  96% {
    opacity: 0;
  }
  99%,
  100% {
    opacity: 1;
  }
}