/* falcon.com home page: "Build on what your team already made" (graphic G). A base agent's locked
   rules flow into the agents built on it, the agents share company skills, and a panel shows who
   can reach what. Same rules as the other sheets: classes only, the base style is the final
   frame, and motion runs only when the visitor allows it. The canvas is 320 units wide at every
   size, so its smallest text (10 units) still renders at 11px or more on a 390px screen. */

.extend {
  border-top: 1px solid var(--line);
}
.graphic-ext {
  max-width: 26rem;
}
.graphic-ext .g-eyebrow {
  font-size: 10px;
}
.graphic-ext .g-small {
  font-size: 10.5px;
}
.graphic-ext .g-soon text {
  font-size: 10px;
}
.graphic-ext .g-name {
  font-size: 13px;
}

/* The base agent's locked rules */
.x-rule {
  fill: var(--red-50);
  stroke: var(--red-200);
}
.x-rule-hl {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 2;
  opacity: 0;
}
.graphic .x-rule-t {
  fill: var(--red-900);
  font-size: 11px;
  font-weight: 600;
}

/* The agents built on it */
.graphic .x-kid {
  font-size: 11.5px;
  font-weight: 600;
}
.graphic .x-own-t {
  fill: var(--red-900);
  font-size: 10.5px;
  font-weight: 600;
}
.x-tok {
  fill: var(--red-600);
  opacity: 0;
}
.x-tok.k1 {
  --dx: -107px;
}
.x-tok.k2 {
  --dx: 0px;
}
.x-tok.k3 {
  --dx: 107px;
}

/* Company skills */
.graphic .x-skill {
  font-size: 11.5px;
  font-weight: 600;
}
.graphic .x-muted {
  fill: var(--text-muted);
  font-size: 11px;
}
.x-skill-hl {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 2;
  opacity: 0;
}
.x-up {
  fill: var(--red-600);
  opacity: 0;
}

/* Who can reach what */
.graphic .x-who {
  font-size: 12px;
  font-weight: 600;
}
.graphic .x-role {
  fill: var(--red-900);
  font-size: 10.5px;
  font-weight: 600;
}
.x-row-hl {
  fill: var(--red-50);
  stroke: var(--red-200);
  opacity: 0;
}
.x-shared rect {
  fill: var(--fill);
}
.graphic .x-shared text {
  fill: var(--on-primary);
  font-size: 10.5px;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  /* G: the rules flow down, each agent adds its own part, the skills are drawn on, then access
     lights up row by row. 16s loop. */
  .x-rule-hl,
  .x-tok,
  .x-inh,
  .x-own,
  .x-skill-hl,
  .x-up,
  .x-row-hl,
  .x-shared {
    animation-duration: 16s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
  .x-rule-hl {
    animation-name: x-rule-hl;
  }
  .x-tok {
    animation-name: x-tok;
  }
  .x-inh {
    animation-name: x-inh;
  }
  .x-own {
    transform-box: fill-box;
    animation-name: x-own;
  }
  .x-skill-hl {
    animation-name: x-skill-hl;
  }
  .x-up {
    animation-name: x-up;
  }
  .x-row-hl {
    animation-name: x-row-hl;
  }
  .x-shared {
    transform-box: fill-box;
    transform-origin: center;
    animation-name: x-shared;
  }
  .x-tok.k2,
  .x-inh.k2,
  .x-own.k2,
  .x-skill-hl.s2,
  .x-up.k2,
  .x-row-hl.r2 {
    animation-delay: 0.5s;
  }
  .x-tok.k3,
  .x-inh.k3,
  .x-own.k3,
  .x-up.k3,
  .x-row-hl.r3 {
    animation-delay: 1s;
  }
  .x-row-hl.r4 {
    animation-delay: 1.5s;
  }
}

@keyframes x-rule-hl {
  0%,
  1% {
    opacity: 0;
  }
  4%,
  10% {
    opacity: 1;
  }
  14%,
  100% {
    opacity: 0;
  }
}
@keyframes x-tok {
  0%,
  3% {
    opacity: 0;
    transform: translate(0, 0);
  }
  5% {
    opacity: 1;
    transform: translate(0, 0);
  }
  10% {
    transform: translate(0, 14px);
  }
  16% {
    transform: translate(var(--dx), 14px);
  }
  22% {
    opacity: 1;
    transform: translate(var(--dx), var(--dy, 80px));
  }
  25%,
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy, 80px));
  }
}
@keyframes x-inh {
  0%,
  21% {
    opacity: 0;
  }
  25%,
  95% {
    opacity: 1;
  }
  99%,
  100% {
    opacity: 0;
  }
}
@keyframes x-own {
  0%,
  27% {
    opacity: 0;
    transform: translateY(10px);
  }
  32%,
  95% {
    opacity: 1;
    transform: none;
  }
  99%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes x-skill-hl {
  0%,
  36% {
    opacity: 0;
  }
  39%,
  48% {
    opacity: 1;
  }
  52%,
  100% {
    opacity: 0;
  }
}
@keyframes x-up {
  0%,
  39% {
    opacity: 0;
    transform: translate(0, 0);
  }
  41% {
    opacity: 1;
    transform: translate(0, 0);
  }
  47% {
    opacity: 1;
    transform: translate(0, -26px);
  }
  49%,
  100% {
    opacity: 0;
    transform: translate(0, -26px);
  }
}
@keyframes x-row-hl {
  0%,
  53% {
    opacity: 0;
  }
  56%,
  62% {
    opacity: 1;
  }
  65%,
  100% {
    opacity: 0;
  }
}
@keyframes x-shared {
  0%,
  72% {
    opacity: 0;
    transform: scale(0.8);
  }
  76%,
  95% {
    opacity: 1;
    transform: none;
  }
  99%,
  100% {
    opacity: 0;
    transform: none;
  }
}