/* motion.css — additions of 14.10.2026 on top of light.css (which stays untouched).
   Only tokens and patterns from light.css; every movement has a reduced-motion path. */

/* "In 60 seconds" walkthrough video. Reveal: the frame opens from a slightly
   inset clip to full size (clip-path, no layout change), once, on entry. */
.how-video {
  margin-top: 2.6rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--card);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  clip-path: inset(6% 6% 6% 6% round var(--r-lg));
  transition: clip-path 1.1s var(--ease-out);
}
.how-video.in { clip-path: inset(0 0 0 0 round var(--r-lg)); }
.how-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--paper-2); }
.how-video-cap {
  display: block; margin-top: .9rem;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .08em;
  color: var(--ink-3); text-transform: uppercase;
}

/* Cards that link out (open source section): the whole card is the link. */
.three a.card { display: block; color: inherit; text-decoration: none; }
.three a.card .go { display: inline-block; margin-top: 1rem; color: var(--green-ink); font-weight: 600; font-size: .92rem; }
.three a.card .go svg { width: 14px; height: 14px; vertical-align: -2px; transition: transform .35s var(--ease-out); }
.three a.card:hover .go svg { transform: translateX(3px); }

/* The plan: the three stages appear one after another (staggered --d),
   the current stage is marked like the comparison table's own column. */
.plan .card.now { border-color: var(--green); box-shadow: var(--shadow); }
.plan .card .when {
  display: inline-block; margin-bottom: .9rem; padding: .25rem .6rem; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .1em;
  background: var(--paper-2); color: var(--ink-2);
}
.plan .card.now .when { background: var(--green-soft); color: var(--green-ink); }

/* Chat-control band: the logo watermark (.band-inner::after in light.css) is
   positioned, the text column was not, so the logo painted over the heading.
   Lift the text column above it, like .band-side already is. */
.band-inner > div:first-child { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .how-video, .how-video.in { clip-path: none; transition: none; }
  .three a.card .go svg { transition: none; }
}