/**
 * landing.css — hero choreography, How-It-Works rail, testimonials, landing Q&A.
 */

/* ==================== Hero (§1.2) ==================== */
.hero {
  position: relative;
  min-height: min(92vh, 56rem);
  display: grid;
  align-items: center;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; background: var(--bg-surface); }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__dim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg-primary) 62%, transparent);
}
.hero__content {
  position: relative;
  text-align: center;
  padding-block: var(--space-12);
}
.hero__sub {
  color: var(--text-secondary);
  font-size: 1.1875rem;
  margin-top: var(--space-5);
}
.hero__actions { margin-top: var(--space-8); } /* comfortable ~26px+ gap, no reserved void */
.hero__cta-row {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: center;
}
.hero__trust { margin-top: var(--space-6); }

/* Choreography: stages hidden pre-paint ONLY when html.choreo (set by the
   inline head script: first session visit + motion OK + data OK). Hidden via
   opacity only — content stays in the DOM for SEO/screen readers (§1.1). */
.choreo .hero-stage {
  opacity: 0;
  transform: translateY(12px);
}
.choreo .hero-stage.is-shown {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-hero) var(--ease-out),
    transform var(--dur-hero) var(--ease-out);
}
/* Failsafe / skip: everything appears instantly */
.choreo.choreo-skip .hero-stage { opacity: 1; transform: none; transition: none; }

/* Scroll cue (§1.2): gentle 6px float, removed on first scroll */
.hero__cue {
  position: absolute;
  left: 50%; bottom: calc(-1 * var(--space-10));
  translate: -50% 0;
  color: var(--text-tertiary);
  transition: opacity var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__cue { animation: cue-float 2s var(--ease-in-out) infinite; }
}
@keyframes cue-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ==================== Logo line (§1.3) ==================== */
.logos { padding-block: var(--space-8) 0; }
.logos__intro {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

/* ==================== How It Works (§1.4) ==================== */
.hiw__grid {
  display: grid;
  grid-template-columns: minmax(18rem, 2fr) 3fr;
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  align-items: center;
}
.hiw__rail { display: grid; gap: var(--space-4); }

.hiw-step {
  display: flex; gap: var(--space-4);
  text-align: left;
  padding: var(--space-4);
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.hiw-step__num { color: var(--primary-dark); font-weight: 600; padding-top: 2px; }
.hiw-step__body { display: grid; gap: var(--space-1); }
.hiw-step__title {
  font-weight: 600; font-size: 1.125rem;
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.hiw-step__desc { color: var(--text-secondary); font-size: 0.9375rem; }

/* Active step: coral left border + title scale 1.15; others dim to 65% */
.hiw__rail.has-active .hiw-step { opacity: 0.65; }
.hiw__rail.has-active .hiw-step.is-active { opacity: 1; border-left-color: var(--primary); }
@media (prefers-reduced-motion: no-preference) {
  .hiw-step.is-active .hiw-step__title { transform: scale(1.15); }
}

.hiw__panel { display: grid; gap: var(--space-3); }
.hiw__frames {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.hiw-frame {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 200ms var(--ease-in-out); /* 200ms crossfade per §1.4 */
}
.hiw-frame.is-active { opacity: 1; }
.hiw-frame__label { color: var(--text-tertiary); font-size: 0.8125rem; }
.hiw-frame .placeholder-label { inset: auto var(--space-3) var(--space-3) auto; }

/* Idle affordance: panel dimmed 10% + "hover a step" hint until first play */
.hiw__frames { transition: opacity var(--dur-base); }
.hiw__panel.is-idle .hiw__frames { opacity: 0.9; }
.hiw__hint {
  position: absolute;
  inset: var(--space-3) auto auto var(--space-3);
  color: var(--text-tertiary);
  font-size: 0.75rem;
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  opacity: 0;
  transition: opacity var(--dur-base);
}
.hiw__panel.is-idle .hiw__hint { opacity: 1; }

/* Step 02: faint GitHub-PR-diff-shaped background graphic (§1.4) */
.hiw-frame__diff {
  position: absolute; inset: 12%;
  opacity: 0.4;
  background:
    linear-gradient(color-mix(in srgb, var(--danger) 14%, transparent), color-mix(in srgb, var(--danger) 14%, transparent)) 0 34% / 82% 9% no-repeat,
    linear-gradient(color-mix(in srgb, var(--success) 16%, transparent), color-mix(in srgb, var(--success) 16%, transparent)) 0 50% / 88% 9% no-repeat,
    linear-gradient(color-mix(in srgb, var(--success) 16%, transparent), color-mix(in srgb, var(--success) 16%, transparent)) 0 66% / 70% 9% no-repeat,
    linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) 0 0 / 55% 9% no-repeat,
    linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) 0 17% / 92% 9% no-repeat,
    linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) 0 83% / 60% 9% no-repeat,
    linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) 0 100% / 78% 9% no-repeat;
  border-radius: var(--radius-md);
}

.hiw__progress {
  height: 3px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.hiw__progress-fill {
  display: block;
  height: 100%;
  background: var(--primary);
  transform-origin: left;
  transform: scaleX(0);
}

/* Touch / no-hover: rail becomes a segmented control above the panel (§1.4) */
@media (hover: none), (max-width: 48rem) {
  .hiw__grid { grid-template-columns: 1fr; }
  .hiw__rail { grid-row: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .hiw-step { flex-direction: column; gap: var(--space-1); border-left: none; border-top: 3px solid transparent; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--space-3); }
  .hiw__rail.has-active .hiw-step.is-active { border-left-color: transparent; border-top-color: var(--primary); }
  .hiw-step__desc { display: none; }
  .hiw__panel { grid-row: 2; }
  /* JS-off / static fallback keeps descriptions visible on wide screens only */
}

/* ==================== Testimonials (§1.6) ==================== */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}
.tcard {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.tcard__mark { color: var(--primary); font-size: 2.5rem; line-height: 1; font-weight: 700; }
.tcard blockquote { color: var(--text-secondary); flex: 1; }
.tcard figcaption { display: flex; align-items: center; gap: var(--space-3); font-size: 0.875rem; }
.tcard__avatar {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-hover);
}
@media (max-width: 48rem) { .testimonials__grid { grid-template-columns: 1fr; } }

/* ==================== Landing Q&A ==================== */
.qa__container { max-width: 46rem; }
.qa__more { text-align: center; margin-top: var(--space-6); color: var(--text-secondary); }

/* ==================== Feature demos (§1.5, 2026-11-01) ====================
   Small inline illustrations for the four "Core features & control" rows.
   Decorative (aria-hidden) — the row text carries the meaning. Motion is
   one-shot on reveal, gated on prefers-reduced-motion; without JS or with
   reduced motion every element simply shows its final state. */
.media-frame--demo { padding: var(--space-5); }
@media (max-width: 48rem) {
  .media-frame--demo { aspect-ratio: auto; min-height: 13rem; }
}

/* Shared: staggered step-in (delay via --d) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal .demo-step { opacity: 0; transform: translateY(6px); }
  .js .reveal.is-visible .demo-step {
    opacity: 1; transform: none;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
}

/* Shared: card status pill (labels as in the app) */
.status-pill {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem; font-weight: 600;
  line-height: 1.6;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  color: var(--bg-primary);
  background: var(--status-notyet);
  white-space: nowrap;
}
.status-pill--progress { background: var(--status-progress); }
.status-pill--test { background: var(--status-test); }
.status-pill--done { background: var(--status-done); }
.status-pill--ghost { background: transparent; color: var(--primary); border: 1px dashed var(--primary); }

/* Row 1: Kanban-style cards + tree + progress footer */
.kb {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-4);
  width: 100%; max-width: 28rem;
}
.kb__tree {
  display: grid; align-content: start; gap: 2px;
  font-size: 0.6875rem; color: var(--text-secondary);
  border-right: 1px solid var(--border-color);
  padding-right: var(--space-3);
  white-space: nowrap;
}
.kb__tree-child { padding-left: var(--space-3); color: var(--text-tertiary); }
.kb__cards { display: grid; gap: var(--space-2); min-width: 0; }
.kb-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--status-notyet);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
  min-width: 0;
}
.kb-card__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-card--progress { border-left-color: var(--status-progress); }
.kb-card--test { border-left-color: var(--status-test); }
.kb-card--done { border-left-color: var(--status-done); }
.kb__footer {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  font-size: 0.6875rem; color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-3);
}
@media (max-width: 30rem) {
  .kb { grid-template-columns: 1fr; }
  .kb__tree { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; border-right: none; border-bottom: 1px solid var(--border-color); padding: 0 0 var(--space-2); }
}

/* Row 2: Control Tower session list + status flow */
.tower {
  display: grid; gap: var(--space-2);
  width: 100%; max-width: 28rem;
}
.tower__head {
  display: flex; justify-content: space-between;
  font-size: 0.6875rem; color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}
.tower-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
}
.tower-row__who { display: grid; min-width: 0; }
.tower-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tower-row__card { font-size: 0.6875rem; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tower-row__state { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.tower-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--text-tertiary); }
.tower-dot--busy { background: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2); }
.tower-dot--wait { background: var(--danger); }
.tower-dot--done { background: var(--success); }
.tower__flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 0.75rem; color: var(--text-tertiary);
}

/* Row 3: clip chip variants (reuses .magnet / .file-chip) */
.file-chip--url { color: var(--text-primary); }
.file-chip--prompt { border-color: var(--primary); color: var(--primary); }
.magnet__label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem; color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
@media (max-width: 30rem) {
  .media-frame--demo .magnet { flex-direction: column; align-items: stretch; gap: var(--space-4); }
}

/* Row 4: Markdown → cards (Parsed as) → drag out */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--space-3);
  width: 100%;
}
.flow__md {
  display: grid; gap: 2px;
  font-size: 0.6875rem; color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  white-space: nowrap; overflow: hidden;
}
.flow__md-h { color: var(--primary); }
.flow__arrow { color: var(--text-tertiary); font-size: 1.125rem; }
.flow__cards { display: grid; gap: var(--space-2); justify-items: start; min-width: 0; }
.flow-card {
  display: block; width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 0.75rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flow-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2); }
.flow__badge {
  font-size: 0.625rem; color: var(--text-secondary);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-full);
  padding: 0 var(--space-2);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.flow__out { display: grid; gap: var(--space-2); justify-items: start; min-width: 0; }
.flow__handle {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 0.6875rem; font-weight: 600;
  color: var(--bg-primary); background: var(--primary);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
}
.flow__term { font-size: 0.75rem; padding: var(--space-3) var(--space-4); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 40rem) {
  .flow { grid-template-columns: 1fr; justify-items: stretch; }
  .flow__arrow { justify-self: center; transform: rotate(90deg); line-height: 1; }
}