/* ─────────────────────────────────────────────────────────────────────
 *  Chika landing — design tokens shared with the Vue frontend.
 *  Tokens + typography mirror the canonical theme used by the CLI,
 *  frontend, and extension (see chika/_cli/renderer.py::Theme).
 *
 *  Design rules:
 *    - dark only (no light-mode toggle)
 *    - single accent (#6c63ff) used sparingly: primary CTA, key tools
 *      glyph in the terminal mock, focus ring
 *    - 240ms spring easing for every transition
 *    - tap targets ≥ 44px on touch devices (Apple HIG)
 *    - no horizontal overflow at any viewport from 320px → 2560px
 * ─────────────────────────────────────────────────────────────────── */

:root {
  --bg: #0b0c10;
  --surface: #14161c;
  --surface-2: #1a1d25;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.10);
  --text: #ededf2;
  --text-muted: #a8a8b8;
  --text-dim: #6b6b85;
  --accent: #6c63ff;
  --accent-light: #7c70ff;
  --success: #3dd68c;
  --warn: #e0b35c;
  --error: #e05c5c;
  --font-sans: -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", Menlo, Monaco, "Courier New", monospace;
  --container: 1200px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 240ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  /* Belt-and-braces with body's overflow-x:hidden — html itself must
     also clamp to viewport so document.documentElement.scrollWidth
     matches clientWidth (the no-horizontal-scroll Playwright assertion
     measures html, not body). Without this, a single oversized child
     pushes html.scrollWidth past clientWidth even when body clips. */
  overflow-x: clip;
}
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
code, pre { font-family: var(--font-mono); }
img, svg { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
}

/* ── Hero glow background ───────────────────────────────────────── */

.hero-glow {
  position: fixed;
  top: -400px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 800px;
  background: radial-gradient(ellipse at center, rgba(108, 99, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Header / nav ───────────────────────────────────────────────── */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(11, 12, 16, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  transition: opacity var(--duration) var(--ease);
}
.brand:hover { opacity: 0.8; }

.brand-mark {
  width: 28px;
  height: 28px;
  color: var(--accent);
  /* The thinking animation rotates each leaf in 3D — without
     `overflow: visible` the rotateY can clip mid-flip. */
  overflow: visible;
}

/*
 * Brand-mark "thinking" animation — ported from mark-mock.html.
 *
 * Each leaf does a periodic unfurl gesture: rotateY 180° → 0° (it
 * flips into place edge-on), then HOLDS settled, then folds back out
 * (rotateY 0° → -180°). The full cycle is mostly STILL — only ~30%
 * of each leaf's cycle is in motion. Cascaded delays + prime-ratio
 * durations (4.3s / 5.1s / 6.7s) mean the three gestures ripple
 * around the bloom and never resync, so the mark looks alive but
 * never frantic. No continuous spin.
 *
 * The animation targets the inner `<path class="leaf">` rather than
 * the outer `<g class="leaf-wrap">` so the position rotation
 * (transform="rotate(120)" on the wrapper) is preserved while the
 * leaf flips around its own fill-box centre.
 */
.brand-mark .leaf {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  vector-effect: non-scaling-stroke;
  animation-name: leaf-think-pulse;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.16, 1.0, 0.3, 1);
}
.brand-mark .leaf-1 { animation-duration: 4.3s; animation-delay:  0.00s; }
.brand-mark .leaf-2 { animation-duration: 5.1s; animation-delay: -1.70s; }
.brand-mark .leaf-3 { animation-duration: 6.7s; animation-delay: -3.35s; }

@keyframes leaf-think-pulse {
  /*  0–18% : unfurl from edge-on into place
      18–82%: HOLD settled (most of the cycle)
      82–100%: fold back out the other side */
    0%  { transform: rotateY(180deg)  scale(0); opacity: 0; }
   18%  { transform: rotateY(0deg)    scale(1); opacity: 1; }
   82%  { transform: rotateY(0deg)    scale(1); opacity: 1; }
  100%  { transform: rotateY(-180deg) scale(0); opacity: 0; }
}

.brand-text { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color var(--duration) var(--ease);
}
.nav-links a:hover { color: var(--text); }

.nav-github { display: flex; align-items: center; }
.nav-github svg { width: 20px; height: 20px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin: -8px;
  /* Lift the toggle above any sibling that might intercept hit-tests
     (the `.nav-links` mobile overlay sits at top:64px below the
     header but still shares a stacking context with the toggle). */
  position: relative;
  z-index: 2;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: all var(--duration) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    flex-direction: column;
    justify-content: flex-start;
    padding: 32px 24px;
    gap: 24px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    opacity: 0;
    visibility: hidden;
    /* pointer-events:none ensures the invisible overlay never
       intercepts clicks meant for the toggle / hero CTAs underneath
       it. visibility:hidden alone is not always enough across
       Chromium versions when transitions are mid-frame. */
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--duration) var(--ease),
                visibility var(--duration) var(--ease),
                transform var(--duration) var(--ease);
  }
  .nav-links.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-links a { font-size: 18px; }
  .nav-toggle { display: flex; }
}

/* ── Hero ───────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 160px 0 100px;
  text-align: center;
}

.hero-title {
  font-size: clamp(36px, 8vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 24px;
  text-wrap: balance;
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(16px, 2.5vw, 20px);
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 40px;
  line-height: 1.6;
  text-wrap: balance;
}

.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  transition: all var(--duration) var(--ease);
  min-height: 52px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: white;
  box-shadow: 0 4px 24px rgba(108, 99, 255, 0.25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(108, 99, 255, 0.35);
}
.btn-primary:active { transform: translateY(0); }

.btn-text { line-height: 1.2; }
.btn-sub { font-size: 12px; opacity: 0.8; margin-top: 2px; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-hover);
  color: var(--text-muted);
}
.btn-ghost:hover {
  background: var(--surface);
  border-color: var(--border-hover);
  color: var(--text);
}

.hero-reassurance {
  font-size: 13px;
  color: var(--text-dim);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}
.hero-reassurance code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: 12px;
}

/* ── Section primitives ─────────────────────────────────────────── */

section { position: relative; padding: 100px 0; }

.section-title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: clamp(15px, 2vw, 17px);
  color: var(--text-muted);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 48px;
  line-height: 1.6;
}

/* ── Showcase: terminal mock ────────────────────────────────────── */

.showcase { padding-bottom: 60px; }

.terminal {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.terminal-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.terminal-dots { display: flex; gap: 8px; }
.terminal-dots span {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-dim);
  opacity: 0.3;
}
.terminal-dots span:nth-child(1) { background: #ff5f56; opacity: 0.8; }
.terminal-dots span:nth-child(2) { background: #ffbd2e; opacity: 0.8; }
.terminal-dots span:nth-child(3) { background: #27ca40; opacity: 0.8; }

.terminal-title {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.terminal-content {
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  /* Long monospace command strings (git log args, curl URLs etc.)
     would otherwise overflow on narrow viewports. Allow horizontal
     scroll within the terminal mock instead of pushing the whole
     page wider than the viewport. */
  overflow-x: auto;
  min-width: 0;
}

.term-line {
  margin-bottom: 8px;
  /* Break long single-token strings (URLs, monospace command
     args without natural break points) so iphone-se doesn't get
     a 910px scrollWidth on a 321px viewport. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.term-dim { color: var(--text-dim); }

.term-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.term-triangles { display: flex; gap: 4px; }
.tri {
  color: var(--text-dim);
  font-size: 10px;
  transition: color var(--duration) var(--ease);
}
.tri.active { color: var(--accent); }

.term-status {
  color: var(--text-muted);
  min-width: 140px;
}

.term-timer {
  color: var(--text-dim);
  margin-left: auto;
}

.term-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.term-tool-icon { color: var(--accent); }
.term-tool-name { color: var(--accent); font-weight: 500; }

.term-result { padding-left: 20px; }
.term-result-icon { color: var(--text-dim); margin-right: 8px; }

.term-answer {
  color: var(--text);
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.term-answer code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--accent);
}

/* ── Features ───────────────────────────────────────────────────── */

.features {
  background: linear-gradient(180deg, transparent, var(--surface) 50%, transparent);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: all var(--duration) var(--ease);
}
.feature-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.feature-icon {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.feature-icon svg { width: 22px; height: 22px; color: var(--accent); }

.feature-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.feature-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── Install ────────────────────────────────────────────────────── */

.install-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.install-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: all var(--duration) var(--ease);
}

.install-card-clickable { display: block; cursor: pointer; }
.install-card-clickable:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.install-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.install-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.install-info h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.install-meta {
  font-size: 13px;
  color: var(--text-dim);
}

.install-file {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  background: var(--bg);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  word-break: break-all;
}

.install-hint {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.install-hint code {
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}

.install-card-soon { opacity: 0.6; }
.install-card-soon .install-meta { color: var(--warn); }

/* ── Code blocks + copy button ──────────────────────────────────── */

.code-block {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px 48px 14px 16px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.code-block code {
  font-size: 13px;
  color: var(--text);
  white-space: pre;
}
.code-block pre { margin: 0; }
.code-block-disabled { opacity: 0.5; }

.copy-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border-radius: var(--radius-xs);
  color: var(--text-dim);
  transition: all var(--duration) var(--ease);
}
.copy-btn:hover { background: var(--surface-2); color: var(--text); }
.copy-btn.copied { color: var(--success); }
.copy-btn svg { width: 16px; height: 16px; }

/* ── Update ─────────────────────────────────────────────────────── */

.update-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.update-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.update-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-muted);
}

.update-reassurance,
.uninstall-reassurance {
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.uninstall-reassurance code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: 13px;
}

/* ── Uninstall ──────────────────────────────────────────────────── */

.uninstall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.uninstall-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.uninstall-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-muted);
}

.uninstall-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.uninstall-list li {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

.uninstall-list strong {
  color: var(--text);
  font-weight: 500;
}

.uninstall-list code {
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

/* ── Footer ─────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-mark {
  width: 24px; height: 24px;
  color: var(--text-dim);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  color: var(--text-dim);
}

.footer-links a {
  color: var(--text-muted);
  transition: color var(--duration) var(--ease);
}
.footer-links a:hover { color: var(--text); }

.footer-sep { color: var(--text-dim); opacity: 0.5; }

/* ── Focus ring ─────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .hero { padding: 120px 0 60px; }
  section { padding: 60px 0; }
  .section-subtitle { margin-bottom: 32px; }
  .features-grid, .install-grid, .update-grid, .uninstall-grid {
    grid-template-columns: 1fr;
  }
  .terminal-content { padding: 16px; font-size: 12px; }
  .term-state { flex-wrap: wrap; }
  .term-timer { width: 100%; margin-left: 0; margin-top: 4px; }
  .btn { width: 100%; max-width: 300px; }
  .hero-ctas { flex-direction: column; }
  .footer-content { flex-direction: column; gap: 16px; }
  .footer-links { text-align: center; }
}

@media (pointer: coarse) {
  .btn, .install-card-clickable, .copy-btn, .nav-links a, .nav-toggle {
    min-height: 44px;
    min-width: 44px;
  }
  .nav-links a { padding: 10px 0; }
}

@media (min-width: 1600px) {
  :root { --container: 1400px; }
}

:target { scroll-margin-top: 80px; }