/* Homepage-only: hero layout + sequential swarm thread */

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  padding: 72px 0 40px;
}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 0 24px;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
}

.home-caption { font-size: 12px; }
.home-lede-sm { font-size: 18px; }
.live-pill {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--signet);
  border: 1px solid var(--signet);
  border-radius: 9999px;
  padding: 2px 9px;
  display: inline-block;
  margin-bottom: 12px;
}
.foot-name { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.foot-meta { font-size: 12px; opacity: .72; line-height: 1.5; }

.window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 10%, transparent);
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--sand);
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.window-title {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.stage { padding: 22px 22px 24px; }

.swarm {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  margin: 6px 0 18px;
  position: relative;
  container-type: inline-size;
}
.swarm-nodes {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 2;
}
.thread-rail,
.thread-draw {
  position: absolute;
  top: 18px;
  left: 10%;
  right: 10%;
  height: 2px;
  z-index: 1;
  pointer-events: none;
}
.thread-rail { background: var(--border); }
.thread-draw {
  background: var(--signet);
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 8px color-mix(in srgb, var(--signet) 32%, transparent);
}
.thread-head {
  position: absolute;
  top: 19px;
  left: 10%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signet);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--signet) 22%, transparent);
}
.agent {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 2;
}
.agent .node {
  width: 38px;
  height: 38px;
  margin: 0 auto 8px;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.agent .node span {
  position: relative;
  z-index: 2;
  background: var(--surface);
  padding: 0 .35em;
  line-height: 1;
}
.agent .lbl {
  font-size: 12px;
  color: var(--ink-body);
  letter-spacing: .02em;
  line-height: 1.25;
}

.report {
  border-top: 1px dashed var(--border);
  padding-top: 16px;
}
.rrow {
  height: 9px;
  border-radius: 0.375rem;
  background: var(--sand);
  margin: 9px 0;
  opacity: 1;
}
.rrow.v {
  height: 11px;
  position: relative;
  overflow: hidden;
  background: var(--sand);
}
.rrow.v::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signet);
  transform: scaleX(.28);
  transform-origin: left center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid var(--verified);
  color: var(--verified);
  background: color-mix(in srgb, var(--verified) 8%, transparent);
  font-size: 12px;
  font-weight: 500;
  opacity: 1;
}
.chip svg {
  width: 13px;
  height: 13px;
}

/* One 10s loop: a single thread draws through D, then R, then M, then A, then V. */
@keyframes thread-draw {
  0%, 6% { transform: scaleX(0); opacity: 1; }
  68% { transform: scaleX(1); opacity: 1; }
  88% { transform: scaleX(1); opacity: 1; }
  94% { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}
@keyframes thread-head {
  0%, 6% { transform: translate3d(-50%, -50%, 0); opacity: 0; }
  8% { transform: translate3d(-50%, -50%, 0); opacity: 1; }
  68% { transform: translate3d(calc(-50% + 80cqi), -50%, 0); opacity: 1; }
  72%, 100% { transform: translate3d(calc(-50% + 80cqi), -50%, 0); opacity: 0; }
}
.anim .thread-draw { animation: thread-draw 10s linear infinite; }
.anim .thread-head { animation: thread-head 10s linear infinite; }

@keyframes station-d {
  0%, 7% { border-color: var(--border); color: var(--muted); box-shadow: none; }
  11%, 86% { border-color: var(--signet); color: var(--signet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signet) 14%, transparent); }
  100% { border-color: var(--border); color: var(--muted); box-shadow: none; }
}
@keyframes station-r {
  0%, 19% { border-color: var(--border); color: var(--muted); box-shadow: none; }
  23%, 86% { border-color: var(--signet); color: var(--signet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signet) 14%, transparent); }
  100% { border-color: var(--border); color: var(--muted); box-shadow: none; }
}
@keyframes station-m {
  0%, 31% { border-color: var(--border); color: var(--muted); box-shadow: none; }
  35%, 86% { border-color: var(--signet); color: var(--signet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signet) 14%, transparent); }
  100% { border-color: var(--border); color: var(--muted); box-shadow: none; }
}
@keyframes station-a {
  0%, 43% { border-color: var(--border); color: var(--muted); box-shadow: none; }
  47%, 86% { border-color: var(--signet); color: var(--signet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signet) 14%, transparent); }
  100% { border-color: var(--border); color: var(--muted); box-shadow: none; }
}
@keyframes station-v {
  0%, 55% { border-color: var(--border); color: var(--muted); box-shadow: none; }
  59%, 86% { border-color: var(--signet); color: var(--signet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signet) 14%, transparent); }
  100% { border-color: var(--border); color: var(--muted); box-shadow: none; }
}
.anim .swarm-nodes .agent:nth-child(1) .node { animation: station-d 10s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.anim .swarm-nodes .agent:nth-child(2) .node { animation: station-r 10s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.anim .swarm-nodes .agent:nth-child(3) .node { animation: station-m 10s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.anim .swarm-nodes .agent:nth-child(4) .node { animation: station-a 10s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.anim .swarm-nodes .agent:nth-child(5) .node { animation: station-v 10s cubic-bezier(0.22, 1, 0.36, 1) infinite; }

@keyframes barfill {
  0%, 6% { transform: scaleX(.08); }
  68% { transform: scaleX(1); }
  88% { transform: scaleX(1); }
  100% { transform: scaleX(.08); }
}
.anim .rrow.v::after { animation: barfill 10s linear infinite; }

@keyframes rowin {
  0%, 66% { opacity: .35; transform: translateX(-6px); }
  78%, 90% { opacity: 1; transform: translateX(0); }
  100% { opacity: .35; transform: translateX(0); }
}
.anim .report .rrow:not(.v) { animation: rowin 10s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.anim .report .rrow:nth-child(2) { animation-delay: .12s; }
.anim .report .rrow:nth-child(3) { animation-delay: .24s; }
.anim .report .rrow:nth-child(4) { animation-delay: .36s; }

@keyframes chipin {
  0%, 76% { opacity: 0; transform: translateY(6px); }
  86%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
.anim .chip { animation: chipin 10s cubic-bezier(0.22, 1, 0.36, 1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .anim .thread-draw,
  .anim .thread-head,
  .anim .agent .node,
  .anim .rrow.v::after,
  .anim .report .rrow,
  .anim .chip { animation: none !important; }
  .thread-draw,
  .anim .thread-draw { transform: scaleX(1); opacity: 1; }
  .anim .thread-head { opacity: 0; }
  .agent .node { border-color: var(--signet); color: var(--signet); }
  .rrow.v::after { transform: scaleX(1); }
  .report .rrow { opacity: 1; transform: none; }
  .chip { opacity: 1; transform: none; }
}