/* falcon.com home page: the animated diagrams. Inline SVG styled only through classes, using the
   red scale and warm neutrals defined in home.css. Every diagram's base style is its final frame;
   the animations run only when the visitor allows motion, so reduced motion shows that frame. */

.figs {
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 960px) {
  .figs {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem 4rem;
  }
}
.fig {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.fig h3 {
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
}
.fig figcaption {
  margin-top: 1.25rem;
  color: var(--text-muted);
  font-size: 0.9875rem;
}
.graphic {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.graphic text {
  font-family: var(--font);
  font-size: 12px;
  fill: var(--text);
}

/* Shared pieces */
.g-card {
  fill: var(--surface);
  stroke: var(--line-strong);
}
.g-person-box {
  fill: var(--surface);
  stroke: var(--warm-300);
}
.graphic .g-name,
.graphic .g-title {
  font-size: 13px;
  font-weight: 600;
}
.graphic .g-title {
  font-size: 15px;
}
.graphic .g-role,
.graphic .g-small {
  fill: var(--warm-600);
}
.graphic .g-small {
  font-size: 10.5px;
}
.g-av {
  stroke: none;
}
.av1 {
  fill: var(--av-1);
}
.av2 {
  fill: var(--av-2);
}
.av3 {
  fill: var(--av-3);
}
.av4 {
  fill: var(--av-4);
}
.graphic .g-av-t {
  font-size: 13px;
  font-weight: 600;
  fill: #ffffff;
}
.graphic .g-av-t.av3-t {
  fill: var(--on-av-3);
}
.graphic .g-av-sm {
  font-size: 10px;
}
.g-link {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.g-divider {
  stroke: var(--line);
}
.g-icon {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.g-lock {
  fill: var(--red-600);
}
.g-shackle {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 1.5;
}

/* Graphic A: many people, one agent */
.g-slot {
  fill: var(--red-50);
  stroke: var(--red-200);
}
.graphic .g-label {
  font-size: 12.5px;
}
.graphic .g-skill-tag {
  fill: var(--red-600);
  font-weight: 600;
}
.g-skill-bar {
  fill: var(--accent-line);
}
.g-chip-bg {
  fill: var(--red-100);
  stroke: var(--red-200);
}
.graphic .g-chip-name {
  fill: var(--red-900);
  font-weight: 600;
}
.g-card-live {
  fill: none;
  stroke: var(--red-700);
  stroke-width: 2;
}
.graphic .g-status text {
  font-weight: 600;
}
.st-draft rect {
  fill: var(--surface-high);
  stroke: var(--line-strong);
}
.graphic .st-draft text {
  fill: var(--text-muted);
}
.st-review rect {
  fill: var(--red-100);
  stroke: var(--red-200);
}
.graphic .st-review text {
  fill: var(--red-900);
}
.st-live rect {
  fill: var(--fill);
}
.graphic .st-live text {
  fill: var(--on-primary);
}
.st-draft,
.st-review {
  opacity: 0;
}

/* Graphic B: identities attach to one agent */
.g-wire {
  fill: none;
  stroke: var(--warm-300);
  stroke-width: 1.5;
}
.g-wire-live {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 2.5;
  opacity: 0;
}
.g-wire-live.w1 {
  opacity: 1;
}
.g-agent {
  fill: var(--red-700);
}
.g-spark {
  fill: #ffffff;
}
/* Identities: round badges with a person, headset or storefront; the agent is a square spark. */
.graphic .g-eyebrow {
  fill: var(--warm-600);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.g-ico {
  fill: #ffffff;
}
.g-ico-line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.av3-ico .g-ico {
  fill: var(--on-av-3);
}
.av3-ico .g-ico-line {
  stroke: var(--on-av-3);
}
.g-av-ring {
  fill: #ffffff;
}
.g-hit {
  fill: var(--red-100);
  stroke: var(--red-400);
  opacity: 0;
}
.g-snippet rect {
  fill: var(--surface-high);
  stroke: var(--line);
}
.graphic .g-snippet text {
  fill: var(--text-muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 8px;
}
@media (max-width: 480px) {
  .g-snippet {
    display: none;
  }
}
.g-socket,
.g-shelf-slot {
  fill: none;
  stroke: var(--warm-300);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}
.g-idcard {
  --dx: 0px;
  --dy: 0px;
}
.g-idcard.id1 {
  --dx: 64px;
  --dy: -204px;
  transform: translate(var(--dx), var(--dy));
}
.g-idcard.id2 {
  --dx: 66px;
  --dy: -204px;
}
.g-idcard.id3 {
  --dx: -196px;
  --dy: -204px;
}
.g-badge-bg {
  fill: var(--fill);
}
.graphic .g-badge text {
  fill: var(--on-primary);
  font-size: 11px;
  font-weight: 600;
}
.graphic .g-rule {
  fill: var(--red-900);
  font-size: 11px;
  font-weight: 500;
}
.g-badge,
.g-rule {
  opacity: 0;
}
.id1 .g-badge,
.id1 .g-hit,
.id1 .g-rule {
  opacity: 1;
}
.g-conv-out rect {
  fill: var(--fill);
}
.graphic .g-conv-out text {
  fill: var(--on-primary);
  font-size: 11px;
  font-weight: 600;
}
.g-conv-out {
  opacity: 0;
}
.g-conv-out.c1 {
  opacity: 1;
}

/* Graphic B: shorter place names fit the shelf cards */
.graphic-ids .g-small {
  font-size: 10px;
}
.graphic-ids .g-role {
  font-size: 11px;
}

@media (prefers-reduced-motion: no-preference) {
  /* A: owners slide into their slots in turn, then Draft, In review, Live. 14s loop. */
  .g-chip {
    --from: -56px;
    animation: 14s ease-in-out infinite both;
  }
  .g-chip.from-bottom {
    --from: 56px;
  }
  .g-chip.c1 {
    animation-name: chip-1;
  }
  .g-chip.c2 {
    animation-name: chip-2;
  }
  .g-chip.c3 {
    animation-name: chip-3;
  }
  .g-chip.c4 {
    animation-name: chip-4;
  }
  .g-chip.c5 {
    animation-name: chip-5;
  }
  .g-chip.c6 {
    animation-name: chip-6;
  }
  .st-draft {
    animation: st-draft 14s ease-in-out infinite;
  }
  .st-review {
    animation: st-review 14s ease-in-out infinite;
  }
  .st-live,
  .g-card-live {
    animation: st-live 14s ease-in-out infinite;
  }

  /* B: three conversations over an 18s loop; the second overlaps the first. */
  .g-idcard,
  .g-wire-live,
  .g-badge,
  .g-hit,
  .g-rule,
  .g-conv-out,
  .g-src-msg,
  .g-src-on,
  .g-src-wire,
  .g-src-flash,
  .g-rm-loose,
  .g-rm-tidy {
    animation-duration: 18s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
  .g-idcard {
    animation-name: id-attach;
  }
  .g-wire-live,
  .g-badge,
  .g-hit,
  .g-rule {
    animation-name: id-badge;
  }
  .g-src-msg {
    animation-name: src-msg;
  }
  .g-src-msg.c1 {
    animation-name: src-msg-post;
  }
  .g-src-on,
  .g-src-wire {
    animation-name: src-lit;
  }
  .g-src-flash {
    animation-name: src-flash;
  }
  .g-rm-loose {
    animation-name: rm-loose;
  }
  .g-rm-tidy {
    animation-name: rm-tidy;
  }
  .g-conv-out {
    animation-name: conv-out;
  }
  .id2,
  .id2 .g-badge,
  .id2 .g-hit,
  .id2 .g-rule,
  .w2,
  .g-src-msg.c2,
  .g-src-on.c2,
  .g-src-wire.c2,
  .g-conv-out.c2 {
    animation-delay: 4s;
  }
  .id3,
  .id3 .g-badge,
  .id3 .g-hit,
  .id3 .g-rule,
  .w3,
  .g-src-msg.c3,
  .g-src-on.c3,
  .g-src-wire.c3,
  .g-conv-out.c3 {
    animation-delay: 10.5s;
  }
}

@keyframes chip-1 {
  0%,
  4% {
    opacity: 0;
    transform: translateY(var(--from));
  }
  9%,
  94% {
    opacity: 1;
    transform: none;
  }
  98%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes chip-2 {
  0%,
  10% {
    opacity: 0;
    transform: translateY(var(--from));
  }
  15%,
  94% {
    opacity: 1;
    transform: none;
  }
  98%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes chip-3 {
  0%,
  16% {
    opacity: 0;
    transform: translateY(var(--from));
  }
  21%,
  94% {
    opacity: 1;
    transform: none;
  }
  98%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes chip-4 {
  0%,
  22% {
    opacity: 0;
    transform: translateY(var(--from));
  }
  27%,
  94% {
    opacity: 1;
    transform: none;
  }
  98%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes chip-5 {
  0%,
  28% {
    opacity: 0;
    transform: translateY(var(--from));
  }
  33%,
  94% {
    opacity: 1;
    transform: none;
  }
  98%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes chip-6 {
  0%,
  34% {
    opacity: 0;
    transform: translateY(var(--from));
  }
  39%,
  94% {
    opacity: 1;
    transform: none;
  }
  98%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes st-draft {
  0%,
  44% {
    opacity: 1;
  }
  47%,
  96% {
    opacity: 0;
  }
  99%,
  100% {
    opacity: 1;
  }
}
@keyframes st-review {
  0%,
  44% {
    opacity: 0;
  }
  47%,
  59% {
    opacity: 1;
  }
  62%,
  100% {
    opacity: 0;
  }
}
@keyframes st-live {
  0%,
  59% {
    opacity: 0;
  }
  62%,
  94% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes id-attach {
  0%,
  5% {
    transform: translate(0, 0);
  }
  11%,
  40% {
    transform: translate(var(--dx), var(--dy));
  }
  46%,
  100% {
    transform: translate(0, 0);
  }
}
@keyframes id-badge {
  0%,
  10% {
    opacity: 0;
  }
  12%,
  39% {
    opacity: 1;
  }
  41%,
  100% {
    opacity: 0;
  }
}
@keyframes conv-out {
  0%,
  17% {
    opacity: 0;
    transform: translate(-30px, 30px);
  }
  20%,
  31% {
    opacity: 1;
    transform: translate(0, 0);
  }
  33%,
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}