/* falcon.com home page: the How steps fit together strip. Each mini diagram's base style is its
   still frame; tokens move only when the visitor allows motion. */

/* The patterns strip: two columns on phones, four on wide screens. */
.patterns-title {
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
}
.patterns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 960px) {
  .patterns {
    grid-template-columns: repeat(4, 1fr);
  }
}
.pattern {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.pattern-svg {
  display: block;
  width: 100%;
  max-width: 10rem;
  height: auto;
  margin-bottom: 0.75rem;
}
.pattern h4 {
  margin: 0 0 0.25rem;
  font-size: 0.9875rem;
  line-height: 1.35;
}
.pattern .tag {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
}
.pattern p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.p-line {
  fill: none;
  stroke: var(--warm-300);
  stroke-width: 2;
}
.p-node {
  fill: var(--surface);
  stroke: var(--red-700);
  stroke-width: 2;
}
.p-node.p-diamond,
.p-node.p-side {
  stroke: var(--accent-line);
}
.p-node.p-person {
  fill: var(--red-100);
  stroke: var(--red-200);
}
.p-hand {
  fill: none;
  stroke: var(--red-700);
  stroke-width: 1.5;
}
.p-tok {
  fill: var(--accent-line);
  opacity: 0;
}
.p-ring {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 2;
  opacity: 0;
}
.p-ring.r2 {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .p-tok.t1 {
    animation: p-t1 6s linear infinite both;
  }
  .p-tok.t2a {
    animation: p-t2a 6s linear infinite both;
  }
  .p-tok.t2b {
    animation: p-t2b 6s linear infinite both;
  }
  .p-tok.t3a {
    animation: p-t3a 8s linear infinite both;
  }
  .p-tok.t3b {
    animation: p-t3b 8s linear infinite both;
  }
  .p-tok.t4a {
    animation: p-t4a 6s linear infinite both;
  }
  .p-tok.t4b {
    animation: p-t4b 6s linear infinite both;
  }
  .p-tok.t5 {
    animation: p-t5 7s linear infinite both;
  }
  .p-tok.t6 {
    animation: p-t6 8s linear infinite both;
  }
  .p-ring.r1 {
    animation: p-r1 9s linear infinite both;
  }
  .p-ring.r2 {
    animation: p-r2 9s linear infinite both;
  }
  .p-ring.r3 {
    animation: p-r3 9s linear infinite both;
  }
}

@keyframes p-t1 {
  0%,
  5% {
    opacity: 0;
    transform: translate(0, 0);
  }
  5.5% {
    opacity: 1;
  }
  45% {
    transform: translate(46px, 0px);
  }
  55% {
    transform: translate(46px, 0px);
  }
  89.5% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(92px, 0px);
  }
}
@keyframes p-t2a {
  0%,
  5% {
    opacity: 0;
    transform: translate(0, 0);
  }
  5.5% {
    opacity: 1;
  }
  40% {
    transform: translate(46px, -16px);
  }
  55% {
    transform: translate(46px, -16px);
  }
  89.5% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(92px, 0px);
  }
}
@keyframes p-t2b {
  0%,
  5% {
    opacity: 0;
    transform: translate(0, 0);
  }
  5.5% {
    opacity: 1;
  }
  40% {
    transform: translate(46px, 16px);
  }
  55% {
    transform: translate(46px, 16px);
  }
  89.5% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(92px, 0px);
  }
}
@keyframes p-t3a {
  0%,
  3% {
    opacity: 0;
    transform: translate(0, 0);
  }
  3.5% {
    opacity: 1;
  }
  20% {
    transform: translate(36px, 0px);
  }
  40% {
    transform: translate(86px, -16px);
  }
  46.5% {
    opacity: 1;
  }
  47%,
  100% {
    opacity: 0;
    transform: translate(86px, -16px);
  }
}
@keyframes p-t3b {
  0%,
  53% {
    opacity: 0;
    transform: translate(0, 0);
  }
  53.5% {
    opacity: 1;
  }
  70% {
    transform: translate(36px, 0px);
  }
  90% {
    transform: translate(86px, 16px);
  }
  96.5% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
    transform: translate(86px, 16px);
  }
}
@keyframes p-t4a {
  0%,
  5% {
    opacity: 0;
    transform: translate(0, 0);
  }
  5.5% {
    opacity: 1;
  }
  40% {
    transform: translate(46px, 0px);
  }
  89.5% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(92px, 0px);
  }
}
@keyframes p-t4b {
  0%,
  40% {
    opacity: 0;
    transform: translate(0, 0);
  }
  40.5% {
    opacity: 1;
  }
  60% {
    transform: translate(0px, 24px);
  }
  89.5% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(46px, 24px);
  }
}
@keyframes p-t5 {
  0%,
  5% {
    opacity: 0;
    transform: translate(0, 0);
  }
  5.5% {
    opacity: 1;
  }
  25% {
    transform: translate(34px, 0px);
  }
  70% {
    transform: translate(34px, 0px);
  }
  89.5% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(92px, 0px);
  }
}
@keyframes p-t6 {
  0%,
  5% {
    opacity: 0;
    transform: translate(0, 0);
  }
  6% {
    opacity: 1;
  }
  20% {
    transform: translate(46px, 0px);
  }
  28% {
    transform: translate(40px, 14px);
  }
  36% {
    transform: translate(23px, 19px);
  }
  44% {
    transform: translate(6px, 14px);
  }
  50% {
    transform: translate(0px, 0px);
  }
  66% {
    transform: translate(46px, 0px);
  }
  86% {
    opacity: 1;
    transform: translate(92px, 0px);
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(92px, 0px);
  }
}
@keyframes p-r1 {
  0%,
  0% {
    opacity: 0;
  }
  1%,
  32% {
    opacity: 1;
  }
  33%,
  100% {
    opacity: 0;
  }
}
@keyframes p-r2 {
  0%,
  33% {
    opacity: 0;
  }
  34%,
  65% {
    opacity: 1;
  }
  66%,
  100% {
    opacity: 0;
  }
}
@keyframes p-r3 {
  0%,
  66% {
    opacity: 0;
  }
  67%,
  98% {
    opacity: 1;
  }
  99%,
  100% {
    opacity: 0;
  }
}