/* falcon.com home page: the mediation diagram (two parties' agents meet in a clean room) and its
   step in the patterns strip. Classes only; the base style is the final frame, where both sides
   have agreed and the contact is released. Motion runs only when the visitor allows it. */

.mediate {
  margin-top: -1rem;
}
.mediate-title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}
.mediate-title .tag {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  vertical-align: middle;
}
.mediate-lede {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
}
.graphic-med {
  max-width: 24rem;
}
.graphic-med .g-name {
  font-size: 12px;
}
.graphic-med .g-eyebrow {
  font-size: 10px;
}
.m-room {
  fill: var(--red-50);
  stroke: var(--red-200);
}
.m-room-hl {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 2;
  opacity: 0;
}
.m-ok {
  fill: var(--red-600);
}
.m-no {
  stroke: var(--warm-600);
  stroke-width: 1.5;
}
.graphic .m-item {
  fill: var(--red-900);
  font-size: 11px;
  font-weight: 600;
}
.graphic .m-held {
  fill: var(--warm-600);
  font-size: 11px;
}
.m-msg rect {
  fill: var(--surface);
  stroke: var(--accent-line);
  stroke-width: 1.5;
}
.m-msg.b2 rect,
.m-msg.b4 rect {
  fill: var(--red-100);
  stroke: var(--red-200);
}
.graphic .m-msg text {
  font-size: 11px;
  font-weight: 600;
}
.graphic .m-msg .m-private {
  fill: var(--warm-600);
  font-weight: 500;
}
.graphic .m-state text {
  font-size: 11px;
  font-weight: 600;
}
.st-talk rect {
  fill: var(--surface-high);
  stroke: var(--line-strong);
}
.graphic .st-talk text {
  fill: var(--text-muted);
}
.st-agree rect {
  fill: var(--red-100);
  stroke: var(--red-200);
}
.graphic .st-agree text {
  fill: var(--red-900);
}
.st-release rect {
  fill: var(--fill);
}
.graphic .st-release text {
  fill: var(--on-primary);
}
.m-msg.b3,
.m-msg.b4,
.st-talk,
.st-agree {
  opacity: 0;
}
/* Released: the held-back lock stands open. */
.m-shackle {
  transform: translateY(-3px);
}

/* The Mediate step in the patterns strip */
.p-room {
  fill: var(--red-50);
  stroke: var(--accent-line);
  stroke-width: 2;
}
.p-lock {
  fill: var(--red-700);
}
.p-shackle {
  fill: none;
  stroke: var(--red-700);
  stroke-width: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  .m-msg,
  .m-state,
  .m-room-hl,
  .m-shackle {
    animation: 16s ease-in-out infinite both;
  }
  .m-msg.b1 {
    animation-name: m-b1;
  }
  .m-msg.b2 {
    animation-name: m-b2;
  }
  .m-msg.b3 {
    animation-name: m-b3;
  }
  .m-msg.b4 {
    animation-name: m-b4;
  }
  .m-room-hl {
    animation-name: m-room;
  }
  .st-talk {
    animation-name: m-talk;
  }
  .st-agree {
    animation-name: m-agree;
  }
  .st-release {
    animation-name: m-release;
  }
  .m-shackle {
    animation-name: m-open;
  }
  .p-tok.t7a {
    animation: p-t7a 8s linear infinite both;
  }
  .p-tok.t7b {
    animation: p-t7b 8s linear infinite both;
  }
}

/* An offer goes in from the left and a filtered copy comes out on the right; then a counter. */
@keyframes m-b1 {
  0%,
  3% {
    opacity: 0;
    transform: translateY(-8px);
  }
  6%,
  16% {
    opacity: 1;
    transform: none;
  }
  22%,
  100% {
    opacity: 0;
    transform: translateY(40px);
  }
}
@keyframes m-b2 {
  0%,
  22% {
    opacity: 0;
    transform: translateY(40px);
  }
  27%,
  42% {
    opacity: 1;
    transform: none;
  }
  45%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes m-b3 {
  0%,
  44% {
    opacity: 0;
    transform: translateY(-8px);
  }
  47%,
  54% {
    opacity: 1;
    transform: none;
  }
  60%,
  100% {
    opacity: 0;
    transform: translateY(40px);
  }
}
@keyframes m-b4 {
  0%,
  60% {
    opacity: 0;
    transform: translateY(40px);
  }
  65%,
  76% {
    opacity: 1;
    transform: none;
  }
  79%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes m-room {
  0%,
  18% {
    opacity: 0;
  }
  21%,
  25% {
    opacity: 1;
  }
  28%,
  56% {
    opacity: 0;
  }
  59%,
  63% {
    opacity: 1;
  }
  66%,
  100% {
    opacity: 0;
  }
}
@keyframes m-talk {
  0%,
  78% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}
@keyframes m-agree {
  0%,
  79% {
    opacity: 0;
  }
  81%,
  87% {
    opacity: 1;
  }
  89%,
  100% {
    opacity: 0;
  }
}
@keyframes m-release {
  0%,
  87% {
    opacity: 0;
  }
  89%,
  97% {
    opacity: 1;
  }
  99%,
  100% {
    opacity: 0;
  }
}
@keyframes m-open {
  0%,
  87% {
    transform: none;
  }
  89%,
  97% {
    transform: translateY(-3px);
  }
  99%,
  100% {
    transform: none;
  }
}
@keyframes p-t7a {
  0%,
  5% {
    opacity: 0;
    transform: translate(0, 0);
  }
  5.5% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    transform: translate(46px, 0px);
  }
  45%,
  100% {
    opacity: 0;
    transform: translate(46px, 0px);
  }
}
@keyframes p-t7b {
  0%,
  48% {
    opacity: 0;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
  }
  85% {
    transform: translate(46px, 0px);
  }
  89.5% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(46px, 0px);
  }
}