/**
 * 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); }