/* ============================================================================
   rigadigdig.com — marketing site
   Brand tokens are lifted verbatim from the app's theme.css
   (src/renderer/src/assets/theme.css) so the site matches the product exactly.
   This is a standalone static page, not the app: it does not consume the
   Tailwind/shadcn theme, it mirrors its values here.
   ============================================================================ */

:root {
  /* Surfaces */
  --canvas: #010102;
  --surface-0: #0a0a0b;
  --surface-1: #0f1011;
  --surface-2: #141516;
  --surface-3: #18191a;
  --hairline: #23252a;
  --hairline-strong: #34343a;

  /* Ink ramp */
  --ink: #f7f8f8;
  --ink-muted: #d0d6e0;
  --ink-subtle: #8a8f98;
  --ink-tertiary: #62666d;

  /* Accent + bands */
  --accent: #2fb8a6;
  --accent-hover: #5cd6c5;
  --accent-on: #07211e;
  --band-needs: #ffb224;
  --band-done: #2fb8a6;
  --band-working: #2fb8a6;
  --recording: #ff453a;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Geometry */
  --radius: 4px;
  --radius-lg: 10px;
  --maxw: 1080px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* The app's one structural shadow: the session surface (pane + selected tab)
     lifted above the sidebar. Lifted verbatim from theme.css --shadow-elevated. */
  --shadow-elevated: 0 0 5px rgb(0 0 0 / 0.55), 0 0 19px 3px rgb(0 0 0 / 0.5);
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--canvas);
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* Soft teal glow behind the top of the page */
.page-glow {
  position: absolute;
  top: -380px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 760px;
  background: radial-gradient(closest-side, rgba(47, 184, 166, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

a { color: inherit; text-decoration: none; }

code { font-family: var(--font-mono); }

.section-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 18px;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease),
    color 140ms var(--ease), transform 140ms var(--ease), box-shadow 200ms var(--ease);
  white-space: nowrap;
}
/* lift on hover, press down on click */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 70ms; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-primary {
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 7px 22px -8px color-mix(in oklab, var(--accent) 75%, transparent);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--hairline-tertiary); }

/* the download arrow nudges down, the GitHub mark gives a small pop */
.btn-arrow { font-weight: 700; transition: transform 200ms var(--ease); }
.btn:hover .btn-arrow { transform: translateY(2px); }
.btn .gh-icon { transition: transform 140ms var(--ease); }
.btn:hover .gh-icon { transform: scale(1.12); }

/* ── Layout sections ──────────────────────────────────────────── */
main { position: relative; z-index: 1; }
.hero, .capabilities, .install {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* ── 01 · Hero ────────────────────────────────────────────────── */
.hero {
  padding-top: 64px;
  padding-bottom: 96px;
}
.hero-copy { margin-bottom: 60px; text-align: center; }
.hero-logo {
  margin-bottom: 22px;
  line-height: 1;
}
.hero-logo img {
  height: 93px;
  width: auto;
  max-width: 100%;
  display: inline-block;
}
.hero-lede {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 22em;
  margin: 0 auto 14px;
}
.hero-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-subtle);
  max-width: 38em;
  margin: 0 auto 32px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.hero-req {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-tertiary);
}

/* ── Hero shot: the app-window mock ───────────────────────────── */
.hero-shot { width: 100%; }
.appwin {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  z-index: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 40px 80px -30px rgba(0, 0, 0, 0.85),
    0 12px 30px -12px rgba(0, 0, 0, 0.7);
}
.light { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.light-close { background: #ff5f57; }
.light-min { background: #febc2e; }
.light-max { background: #28c840; }
/* the shared stacking context for the lifted-surface ladder (app: sidebar
   chrome → pane z-0 → spine z-10 → selected tab z-20) */
.appwin-body { display: flex; height: 640px; position: relative; z-index: 0; }

/* the spine sits ABOVE the pane's shadow (z-10), so the shadow can't dim it */
.mock-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 250px;
  width: 1px;
  background: var(--hairline);
  z-index: 10;
}

/* sidebar */
.mock-sidebar {
  width: 250px;
  flex: none;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
}
.mock-sidebar-header {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}
.mock-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 10px 8px;
}
.srow {
  position: relative;
  display: flex;
  background: var(--surface-1);
  border-radius: var(--radius) 0 0 var(--radius);
  padding: 9px 11px 9px 13px;
  overflow: hidden;
}
.srow .accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
}
.srow-needs .accent { background: var(--band-needs); }
.srow-done .accent { background: var(--band-done); }
.srow-working .accent { background: var(--band-working); }
.accent-selected { background: var(--ink) !important; }
.srow-selected {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-right: none;
  /* top of the ladder: above the spine (z-10) so it breaks the line, and above
     the pane's shadow so the merge stays crisp. Carries the same elevation
     shadow as the pane, clipped on the right so it stops at the open edge
     (the app's clip-shadow-open-right) instead of bleeding into the session. */
  position: relative;
  z-index: 20;
  box-shadow: var(--shadow-elevated);
  clip-path: inset(-30px 0 -30px -30px);
  /* extend 1px over the spine so the tab's canvas fill breaks it at the merge */
  margin-right: -1px;
}
.srow-idle { opacity: 0.55; }
.srow-main { min-width: 0; flex: 1; }
.srow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.srow-name { color: var(--ink); font-size: 12.5px; font-weight: 700; }
.srow-time { color: var(--ink-tertiary); font-size: 10.5px; flex: none; }
.srow-summary {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 500;
  margin-top: 2px;
  overflow: hidden;
}
.srow-summary-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.srow-path {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glyph { flex: none; }
.glyph-needs { color: var(--band-needs); }
.glyph-done { color: var(--band-done); }
.spinner {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.4px solid color-mix(in oklab, var(--band-working) 35%, transparent);
  border-top-color: var(--band-working);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* main pane */
.mock-pane {
  flex: 1;
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  z-index: 0;
  box-shadow: var(--shadow-elevated);
}
.mock-toolbar {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}
.mock-toolbar-name { color: var(--ink); font-size: 12.5px; font-weight: 500; }
.mock-toolbar-path { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
.mock-toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.mock-toolbar-actions svg { color: var(--ink-subtle); display: block; }
.mock-term {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  padding: 10px 16px 16px;
  color: var(--ink-muted);
  overflow: hidden;
  transition: opacity 150ms var(--ease);
}

/* Claude Code transcript blocks (invented content) */
.tx { margin: 0 0 9px; }
.tx-enter { animation: tx-in 220ms cubic-bezier(0, 0, 0, 1) both; }
@keyframes tx-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.tx-user {
  color: var(--ink);
  background: var(--surface-1);
  border-left: 2px solid var(--hairline-strong);
  padding: 4px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 12px;
}
.tx-think { color: var(--ink-tertiary); font-style: italic; }
.tx-text { color: var(--ink-muted); }
.tx-text .b, .tx-text b { color: var(--ink); font-weight: 600; }
.tx-body { display: inline; }
.tx-bullet { color: var(--ink-subtle); padding-left: 16px; }
.tx-dot { margin-right: 2px; }
.dot-ok { color: #3ecf8e; }
.dot-run { color: var(--accent); }
.dot-msg { color: var(--ink-subtle); }
.tx-tool b { color: var(--ink); font-weight: 600; }
.tx-arg { color: var(--ink-subtle); }
.tx-sub { color: var(--ink-tertiary); padding-left: 14px; }
.tx-hint { color: var(--ink-tertiary); opacity: 0.7; }
.tx-ok { color: #3ecf8e; }

.tx-approve { margin: 4px 0 9px; }
.approve-q { color: var(--ink); margin-bottom: 4px; }
.approve-opt {
  color: var(--ink-subtle);
  padding: 2px 8px;
  border-radius: var(--radius);
}
.approve-opt.sel {
  color: var(--ink);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}
.approve-opt.pressed {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: none;
}
.tx-caretline { margin: 0; }

.t-prompt { color: var(--accent); }
.t-dim { color: var(--ink-subtle); }
.t-ok { color: #3ecf8e; }
.t-run { color: var(--ink-muted); }
.caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--ink);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* row meta + recording dot */
.srow-meta { display: flex; align-items: center; gap: 5px; flex: none; }
.srow-rec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--recording);
  animation: rec-pulse 1.6s ease-in-out infinite;
}
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* toolbar record icon turns red while recording */
.tb-rec.recording { color: var(--recording); animation: rec-pulse 1.6s ease-in-out infinite; }
.tb-rec.recording circle { fill: var(--recording); }

/* demo pointer */
.demo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.5));
  transition: transform 520ms cubic-bezier(0.3, 0.1, 0.1, 1);
  will-change: transform;
}
.demo-cursor svg { display: block; transition: transform 90ms var(--ease); }
.demo-cursor.down svg { transform: scale(0.82); transform-origin: 5px 2px; }

/* click ripple — positioned via left/top so the cursor's own transform stays free */
.click-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  z-index: 59;
  pointer-events: none;
}
.click-ring.go { animation: ring 460ms cubic-bezier(0, 0, 0, 1); }
@keyframes ring {
  0% { opacity: 0.7; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* keyboard-shortcut hint */
.key-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(6px);
  z-index: 60;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--surface-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  padding: 5px 11px;
  opacity: 0;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.key-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 02 · Capabilities ────────────────────────────────────────── */
.capabilities { padding-top: 40px; padding-bottom: 40px; }
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card {
  background: var(--surface-1);
  padding: 30px 30px 34px;
}
.card-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 14px;
}
.card-title {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.card-body { color: var(--ink-subtle); font-size: 14.5px; line-height: 1.6; }

/* ── 03 · Install ─────────────────────────────────────────────── */
.install { padding-top: 64px; padding-bottom: 80px; }
.install-block {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.install-col { display: flex; flex-direction: column; }
.install-text {
  flex: 1;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 34px;
}
.install-title { color: var(--ink); font-size: 22px; font-weight: 600; margin-bottom: 12px; }
.install-body { color: var(--ink-subtle); font-size: 15px; max-width: 38em; margin-bottom: 18px; }
.install-req {
  font-size: 13px;
  color: var(--ink-tertiary);
  margin-bottom: 24px;
}
.install-req code { color: var(--ink-muted); }
.install-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 11px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 34px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.install-card:hover { border-color: var(--hairline-strong); background: var(--surface-2); }
.install-card-version { font-size: 22px; font-weight: 600; color: var(--ink); }
.install-card-version:empty { display: none; }
.install-card-version .rel-date { font-size: 15px; font-weight: 400; color: var(--ink-tertiary); }
.install-card-notes {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-subtle);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.install-card-notes:empty { display: none; }
.install-card-link { font-family: var(--font-mono); font-size: 14px; color: var(--accent); margin-top: auto; }

/* ── Footer ───────────────────────────────────────────────────── */
.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.footer-row {
  border-top: 1px solid var(--hairline);
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-tertiary);
}
.footnav { display: flex; gap: 20px; }
.footnav a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-subtle); transition: color 140ms var(--ease); }
.footnav a:hover { color: var(--ink); }

/* GitHub mark — inherits the button/link text color via currentColor */
.gh-icon { width: 1.15em; height: 1.15em; flex: none; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 880px) {
  .hero {
    padding-top: 40px;
    padding-bottom: 64px;
  }
  .hero-logo img { height: 70px; }
  .cards { grid-template-columns: 1fr; }
  .install-block { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hero-logo img { height: 45px; }
  .hero-lede { font-size: 19px; }
  .hero-sub { font-size: 15px; }
  /* the mock keeps its desktop proportions and is scaled down as a whole by
     fitMock() in demo.js, so the pane never gets squished on one axis */
  .footer-row { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spinner, .caret { animation: none; }
  .btn:hover, .btn:active,
  .btn:hover .btn-arrow, .btn:hover .gh-icon { transform: none; }
}