/* falcon.com home page: the "Fast checks on everything" section (graphic F, "Every input,
   checked", and the small cards of other uses). Same rules as the other sheets: classes only,
   the base style is the final frame, and motion runs only when the visitor allows it. */

.checks {
  border-bottom: 1px solid var(--line);
}
.ck-split {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 960px) {
  .ck-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: start;
  }
}
.graphic-checks {
  max-width: 28rem;
}

/* Other uses: small cards, one column on phones, two from 640px. */
.ck-uses {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .ck-uses {
    grid-template-columns: 1fr 1fr;
  }
  .ck-use-wide {
    grid-column: 1 / -1;
  }
}
.ck-use {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.ck-use h3 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: 1rem;
}
.ck-use p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.ck-use .tag {
  align-self: flex-start;
  margin-top: 0.25rem;
}
.ck-ico {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  border-radius: 8px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tag-live {
  border-color: var(--fill);
  background: var(--fill);
  color: var(--on-primary);
}
.ck-rule {
  margin: 2.5rem 0 0;
  padding: 0.875rem 1.125rem;
  border-left: 3px solid var(--accent-line);
  border-radius: 0 8px 8px 0;
  background: var(--primary-container);
  color: var(--text);
  font-size: 0.9875rem;
}

/* Graphic F: pieces */
.ck-wire {
  fill: none;
  stroke: var(--warm-300);
  stroke-width: 1.5;
}
.ck-lane {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.ck-flash {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 2;
  opacity: 0;
}
.graphic .ck-num {
  fill: var(--warm-600);
  font-size: 11px;
}
.ck-strike {
  stroke: var(--red-600);
  stroke-width: 1.3;
}
.ck-arrow,
.ck-out-icon {
  fill: none;
  stroke: var(--warm-600);
  stroke-width: 1.3;
}
.ck-track {
  fill: var(--surface);
  stroke: var(--red-200);
}
.ck-bar {
  fill: var(--accent-line);
  transform-box: fill-box;
  transform-origin: left center;
}
.graphic .ck-val {
  fill: var(--warm-600);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.graphic .ck-hi {
  fill: var(--red-900);
  font-weight: 600;
}
.graphic .ck-q {
  font-size: 10.5px;
}
.ck-chip {
  fill: var(--surface);
  stroke: var(--line-strong);
}
.graphic .ck-chip-t {
  fill: var(--warm-600);
  font-size: 10.5px;
}
.ck-chip-on {
  fill: var(--fill);
}
.graphic .ck-chip-on-t {
  fill: var(--on-primary);
  font-size: 10.5px;
  font-weight: 600;
}
.ck-note {
  fill: var(--surface);
  stroke: var(--line);
}
.graphic .ck-note-h {
  fill: var(--red-900);
  font-size: 10.5px;
  font-weight: 600;
}
.ck-out {
  fill: var(--surface);
  stroke: var(--line-strong);
}
.graphic .ck-out-t {
  fill: var(--warm-600);
  font-size: 11.5px;
  font-weight: 600;
}
.graphic .ck-out-s {
  fill: var(--warm-600);
  font-size: 10px;
}
.ck-pass rect {
  fill: var(--fill);
}
.ck-block rect {
  fill: var(--red-700);
}
.graphic .ck-pass text,
.graphic .ck-block text {
  fill: var(--on-primary);
}
.graphic .g-wait .ck-wait-s {
  font-size: 10px;
  font-weight: 400;
}
.ck-dot {
  fill: var(--accent-line);
  opacity: 0;
}
.ck-d8 {
  fill: var(--red-700);
}

/* Graphic F: one 18s loop. A text comes in and is escalated to Review; a plain "ok" takes the
   fast path to Pass; a reply that promises a rate is blocked. Everything resets at the end. */
@media (prefers-reduced-motion: no-preference) {
  .ck-flash,
  .ck-dot,
  .ck-mask,
  .ck-b1,
  .ck-b2,
  .ck-tri,
  .ck-esc,
  .ck-l2,
  .ck-review,
  .ck-pass,
  .ck-block {
    animation: 18s ease-in-out infinite both;
  }
  .ck-flash {
    animation-name: ck-flash;
  }
  .ck-f-ok {
    animation-delay: 8.1s;
  }
  .ck-f-reply {
    animation-delay: 11s;
  }
  .ck-dot {
    --dx: 0px;
    --dy: 20px;
    animation-name: ck-drop;
  }
  .ck-d1 {
    --dy: 14px;
    animation-delay: 0.3s;
  }
  .ck-d2 {
    --dy: 14px;
    animation-delay: 1.8s;
  }
  .ck-d3 {
    --dy: 22px;
    animation-delay: 4.6s;
  }
  .ck-d4 {
    --dy: 18px;
    animation-delay: 6.6s;
  }
  .ck-d5 {
    --dy: 34px;
    animation-delay: 8.4s;
  }
  .ck-d6 {
    --dy: 230px;
    animation-name: ck-fall;
    animation-delay: 9.2s;
  }
  .ck-d7 {
    --dy: 8px;
    animation-delay: 11.4s;
  }
  .ck-d8 {
    --dx: 50px;
    --dy: -94px;
    animation-name: ck-leg;
    animation-delay: 13.4s;
  }
  .graphic-checks-n .ck-d8 {
    --dx: 47px;
  }
  .ck-mask {
    animation-name: ck-mask;
  }
  .ck-b1 {
    animation-name: ck-bars;
  }
  .ck-b2 {
    animation-name: ck-rbar;
  }
  .ck-tri {
    animation-name: ck-tri;
  }
  .ck-esc {
    animation-name: ck-esc;
  }
  .ck-l2 {
    animation-name: ck-l2;
  }
  .ck-review {
    animation-name: ck-review;
  }
  .ck-pass {
    animation-name: ck-pass;
  }
  .ck-block {
    animation-name: ck-block;
  }
}

@keyframes ck-flash {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  7%,
  100% {
    opacity: 0;
  }
}
@keyframes ck-drop {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  1% {
    opacity: 1;
  }
  4% {
    opacity: 1;
    transform: translate(0, var(--dy));
  }
  5%,
  100% {
    opacity: 0;
    transform: translate(0, var(--dy));
  }
}
@keyframes ck-fall {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  1% {
    opacity: 1;
  }
  8% {
    opacity: 1;
    transform: translate(0, var(--dy));
  }
  9%,
  100% {
    opacity: 0;
    transform: translate(0, var(--dy));
  }
}
@keyframes ck-leg {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  1% {
    opacity: 1;
  }
  3% {
    transform: translate(var(--dx), 0);
  }
  7% {
    opacity: 1;
    transform: translate(var(--dx), var(--dy));
  }
  8%,
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
  }
}
@keyframes ck-mask {
  0%,
  6% {
    opacity: 0;
  }
  8%,
  94% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes ck-bars {
  0%,
  13% {
    transform: scaleX(0);
  }
  21%,
  94% {
    transform: scaleX(1);
  }
  97%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes ck-tri {
  0%,
  20% {
    opacity: 0;
  }
  22%,
  94% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes ck-esc {
  0%,
  27% {
    opacity: 0;
  }
  29%,
  94% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes ck-l2 {
  0%,
  31% {
    opacity: 0;
  }
  33%,
  94% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes ck-review {
  0%,
  40% {
    opacity: 0;
  }
  42%,
  94% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes ck-pass {
  0%,
  59% {
    opacity: 0;
  }
  61%,
  94% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes ck-rbar {
  0%,
  67% {
    transform: scaleX(0);
  }
  73%,
  94% {
    transform: scaleX(1);
  }
  97%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes ck-block {
  0%,
  81% {
    opacity: 0;
  }
  83%,
  94% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}