/* home.css — the brandcurl landing, a 1:1 rebuild of the Home v2 prototype.
   Its own self-contained green-black / JetBrains Mono world, scoped under
   .bc-home so it never touches the result/dashboard/docs surfaces (which keep
   tokens.css). The logo doodle keyframes live here; home.js drives them. */

/* --bc-* tokens + the header chrome live in bc-chrome.css (shared with /install). */
.bc-home {
  --bc-doodle-ink: #f2f6f3; /* the uncolored doodle letters; flips with the theme */
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bc-bg);
  color: var(--bc-ink);
  overflow-x: clip;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
.bc-home ::selection { background: var(--bc-green); color: #04180b; }
.bc-home a { color: var(--bc-green-text); text-decoration: none; }
.bc-home a:hover { color: var(--bc-ink-hi); }
.bc-home input::placeholder { color: var(--bc-faint); }
.bc-home input:focus { outline: none; }
.bc-home button { font-family: inherit; }

/* Two glows: a static green wash + a dynamic one that wears the doodle palette
   (home.js sets --bc-glow). */
.bc-glow, .bc-glow2 {
  position: absolute; top: 0; left: 0; right: 0; height: 100vh; pointer-events: none;
}
.bc-glow { background: radial-gradient(50% 42% at 50% 38%, rgba(30,215,96,0.05), transparent 70%); }
.bc-glow2 { background: var(--bc-glow, transparent); transition: background 0.5s ease; }

/* ── hero ── */
.bc-hero {
  position: relative; z-index: 2;
  min-height: calc(100svh - 78px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 24px 64px;
}
.bc-doodle-wrap { cursor: pointer; user-select: none; transition: transform 0.25s ease; }
.bc-doodle-wrap:hover { transform: scale(1.012); }
.bc-doodle {
  position: relative; margin: 0;
  font-size: clamp(62px, 10vw, 128px); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1.05; white-space: nowrap; perspective: 900px;
}
.bc-doodle .bc-word { position: relative; display: inline-block; white-space: nowrap; transform-style: preserve-3d; }
.bc-doodle .bc-ltr { display: inline-block; }

.bc-gap { height: 44px; }

.bc-cmd {
  width: min(780px, 92vw);
  border-top: 1px solid var(--bc-border-2);
  border-bottom: 1px solid var(--bc-border-2);
  background: linear-gradient(180deg, rgba(30,215,96,0.035), transparent);
  padding: 18px 6px; display: flex; align-items: center; gap: 14px;
  animation: bc-appear 0.6s 0.1s both;
}
.bc-cmd-prompt { color: var(--bc-green); font-weight: 800; font-size: clamp(18px, 2vw, 23px); }
.bc-cmd-bin { color: var(--bc-ink); font-weight: 700; font-size: clamp(18px, 2vw, 23px); letter-spacing: -0.02em; }
.bc-cmd-input {
  flex: 1; min-width: 0; background: transparent; border: none; color: var(--bc-ink);
  font-family: inherit; font-weight: 500; font-size: clamp(18px, 2vw, 23px);
  caret-color: var(--bc-green); padding: 0;
}
.bc-run {
  flex-shrink: 0; font-weight: 700; font-size: 15px; color: #04180b;
  background: var(--bc-green-hi); border: none; border-radius: 10px; padding: 12px 22px;
  white-space: nowrap; cursor: pointer; box-shadow: 0 0 26px rgba(53,228,116,0.25);
  transition: filter var(--dur-1, 0.15s) ease, transform var(--dur-1, 0.1s) ease;
}
.bc-run:hover { filter: brightness(1.08); }
.bc-run:active { transform: scale(0.96); }
.bc-run:disabled { opacity: 0.6; cursor: wait; }

.bc-sub {
  width: min(780px, 92vw); display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 13px; animation: bc-appear 0.6s 0.18s both;
}
.bc-sub-note { color: var(--bc-dim); font-size: 13px; }
.bc-surprise { font-size: 13px; color: var(--bc-dim); background: none; border: none; cursor: pointer; padding: 0; }
.bc-surprise:hover { color: var(--bc-green-text); }

/* streaming term lines — colors live here (not inline) so they theme */
.bc-term { width: min(780px, 92vw); margin-top: 16px; }
.bc-line { display: flex; gap: 11px; font-size: 14px; line-height: 2; animation: bc-line-in 0.25s both; }
.bc-line .bc-line-ico { min-width: 15px; }
.bc-t-cmd { color: var(--bc-ink); }
.bc-t-mut { color: var(--bc-mut); }
.bc-t-ok { color: #d7ffe7; }
.bc-t-warn { color: #ffe9c7; }
:root[data-theme="light"] .bc-home .bc-t-ok { color: #0d6b34; }
:root[data-theme="light"] .bc-home .bc-t-warn { color: #8a5a00; }
:root[data-theme="light"] .bc-home { --bc-doodle-ink: #0d130f; }
:root[data-theme="light"] .bc-glow { background: radial-gradient(50% 42% at 50% 38%, rgba(30, 215, 96, 0.09), transparent 70%); }

/* chips */
.bc-chips {
  width: min(780px, 92vw); display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 30px; animation: bc-appear 0.6s 0.28s both;
}
.bc-chips-label { color: var(--bc-dim); font-size: 13px; margin-right: 4px; }
.bc-chip {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bc-ink);
  background: var(--bc-surface); border: 1px solid var(--bc-border);
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
  transition: background var(--dur-1, 0.15s) ease, color var(--dur-1, 0.15s) ease;
}
.bc-chip:hover { background: var(--bc-surface-3); color: var(--bc-ink-hi); }
.bc-chip-ico, .bc-ico {
  width: 15px; height: 15px; border-radius: 3px; display: block;
  background-size: cover; background-color: var(--bc-surface-2); flex-shrink: 0;
}
.bc-addyours {
  font-size: 13px; color: var(--bc-green-text); background: none;
  border: 1px dashed rgba(30,215,96,0.45); border-radius: 8px; padding: 6px 13px;
  white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1, 0.15s) ease, color var(--dur-1, 0.15s) ease;
}
.bc-addyours:hover { background: rgba(30,215,96,0.08); color: var(--bc-green-text); }

/* forge card (fail state) — a dark pane in both themes, like every terminal
   surface; re-pin its text ladder so the light theme doesn't dim it out */
:root[data-theme="light"] .bc-forge { --bc-mut: #8b968e; --bc-dim: #55605a; }
.bc-forge {
  width: min(780px, 92vw); margin-top: 22px;
  border: 1px solid rgba(251,191,36,0.25); border-radius: 14px;
  background: rgba(17,14,9,0.92); box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  padding: 22px 24px; animation: bc-card-in 0.55s cubic-bezier(0.22,0.68,0.3,1) both;
}
.bc-forge-head { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--bc-mut); }
.bc-forge-dot { width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,0.7); }
.bc-forge-ticket { margin-left: auto; color: #d9b25e; font-size: 12.5px; }
.bc-forge-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #f2f6f3; margin-top: 16px; }
.bc-forge-reason { font-size: 13.5px; color: var(--bc-mut); margin-top: 7px; }
.bc-meter { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); margin-top: 18px; }
.bc-meter-fill { height: 8px; border-radius: 999px; background: linear-gradient(90deg,#b45309,#fbbf24); animation: bc-fill 1s cubic-bezier(0.22,0.68,0.3,1) 0.3s both; }
.bc-meter-bar { position: absolute; left: 85%; top: -4px; width: 2px; height: 16px; background: rgba(242,246,243,0.7); }
.bc-meter-lbl { position: absolute; left: 85%; top: -24px; transform: translateX(-50%); font-size: 10.5px; color: var(--bc-dim); }
.bc-forge-att { margin-top: 18px; display: flex; flex-direction: column; gap: 5px; }
.bc-forge-att-row { display: flex; gap: 12px; font-size: 12.5px; color: #6d7a72; }
.bc-forge-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12.5px; color: var(--bc-mut); }
.bc-forge-foot button { font-size: 12.5px; color: #d9b25e; background: none; border: none; cursor: pointer; padding: 0; }
.bc-forge-foot button:hover { color: #ffe9c7; }

/* scroll-to-feed hint + pressure bar */
.bc-scroll-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: none; border: none; cursor: pointer; color: var(--bc-dim); font-size: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.bc-scroll-hint:hover { color: var(--bc-green-text); }
.bc-pressure { width: 130px; height: 2px; border-radius: 999px; background: var(--bc-surface-3); overflow: hidden; display: block; }
.bc-pressure-fill { display: block; height: 2px; border-radius: 999px; background: var(--bc-green); box-shadow: 0 0 8px rgba(30,215,96,0.7); width: 0; }

/* footer */
.bc-foot {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; border-top: 1px solid var(--bc-hairline); padding: 14px 32px;
  font-size: 12px; color: var(--bc-dim); flex-wrap: wrap;
}
.bc-foot-links { display: flex; gap: 16px; }
.bc-foot-links a { color: var(--bc-dim); }
.bc-variant .dim { color: var(--bc-faint); }

/* ── the logo-doodle keyframes (ported 1:1) ── */
@keyframes bc-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes bc-drop { 0% { opacity: 0; transform: translateY(-46px); } 62% { opacity: 1; transform: translateY(7px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes bc-pop { 0% { opacity: 0; transform: scale(.25); } 68% { opacity: 1; transform: scale(1.14); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bc-wave { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes bc-unfurl { 0% { opacity: 0; transform: rotateY(89deg); } 100% { opacity: 1; transform: rotateY(0deg); } }
@keyframes bc-flick-in { 0% { opacity: 0; } 6% { opacity: 1; } 9% { opacity: .15; } 14% { opacity: 1; } 17% { opacity: .3; } 24% { opacity: 1; } 28% { opacity: .5; } 38% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bc-flick-idle { 0%,93%,96.5%,100% { opacity: 1; } 94.5% { opacity: .4; } 98% { opacity: .75; } }
@keyframes bc-glitch-a { 0% { opacity: .9; clip-path: inset(0 0 78% 0); transform: translate(-7px,-4px); } 25% { opacity: .9; clip-path: inset(58% 0 6% 0); transform: translate(6px,3px); } 50% { opacity: .9; clip-path: inset(24% 0 52% 0); transform: translate(-5px,2px); } 75% { opacity: .9; clip-path: inset(70% 0 8% 0); transform: translate(7px,-2px); } 99% { opacity: .9; clip-path: inset(40% 0 44% 0); transform: translate(-3px,1px); } 100% { opacity: 0; transform: translate(0,0); } }
@keyframes bc-glitch-b { 0% { opacity: .9; clip-path: inset(66% 0 10% 0); transform: translate(6px,3px); } 25% { opacity: .9; clip-path: inset(8% 0 74% 0); transform: translate(-6px,-2px); } 50% { opacity: .9; clip-path: inset(48% 0 30% 0); transform: translate(5px,-3px); } 75% { opacity: .9; clip-path: inset(14% 0 60% 0); transform: translate(-7px,2px); } 99% { opacity: .9; clip-path: inset(80% 0 2% 0); transform: translate(4px,1px); } 100% { opacity: 0; transform: translate(0,0); } }
@keyframes bc-slide { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
@keyframes bc-shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3px,2px); } 40% { transform: translate(3px,-2px); } 60% { transform: translate(-2px,-1px); } 80% { transform: translate(2px,1px); } }
@keyframes bc-line-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bc-card-in { 0% { opacity: 0; transform: translateY(18px) scale(.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bc-fill { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bc-home *, .bc-home *::before, .bc-home *::after { animation-duration: 0.01ms !important; }
}

/* ── the feed screen ── */
.bcf { position: relative; z-index: 2; min-height: calc(100svh - 78px); padding: 8px 5vw 80px; }
.bcf-grid { display: flex; gap: 36px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.bcf-col { flex: 0 1 640px; min-width: min(430px, 92vw); }
.bcf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bcf-title { font-size: 18px; font-weight: 800; color: var(--bc-ink); letter-spacing: -0.02em; }
.bcf .bc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bc-green); box-shadow: 0 0 12px rgba(30,215,96,0.8); }
.bcf-live { color: var(--bc-faint); font-size: 12px; }

.bcf-add {
  width: 100%; display: flex; gap: 11px; align-items: center; margin-top: 16px;
  background: var(--bc-card); border: 1px solid var(--bc-border); border-radius: 12px;
  padding: 13px 16px; cursor: text; text-align: left;
  transition: border-color 0.15s ease;
}
.bcf-add:hover { border-color: var(--bc-border-2); }
.bcf-add-txt { color: var(--bc-dim); font-size: 13.5px; }
.bcf-add-btn { margin-left: auto; color: #04180b; background: #35e474; border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 700; white-space: nowrap; }

.bcf-list { display: flex; flex-direction: column; }
.bcf-card {
  margin-top: 14px; background: var(--bc-card); border: 1px solid var(--bc-border);
  border-radius: 14px; padding: 16px 18px; transition: border-color 0.15s ease;
}
.bcf-card:hover { border-color: var(--bc-border-2); }
.bcf-row { display: flex; gap: 12px; }
.bcf-av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #04180b; }
.bcf-body { flex: 1; min-width: 0; }
.bcf-line { display: flex; align-items: center; gap: 7px; font-size: 14px; flex-wrap: wrap; }
.bcf-h { color: var(--bc-ink-hi); font-weight: 700; }
.bcf-d { color: var(--bc-ink); font-weight: 600; }
.bcf-time { margin-left: auto; color: var(--bc-faint); font-size: 12px; }
.bcf-note { color: var(--bc-mut); font-size: 13.5px; margin-top: 5px; line-height: 1.6; }
.bcf-sw { display: flex; gap: 5px; margin-top: 12px; border-radius: 10px; overflow: hidden; }
.bcf-sw-c { flex: 1; height: 54px; display: flex; align-items: flex-end; padding: 6px 9px; font-size: 10px; letter-spacing: 0.04em; }

.bcf-forge { margin-top: 12px; border: 1px solid rgba(251,191,36,0.2); border-radius: 10px; padding: 12px 14px; background: rgba(251,191,36,0.04); }
.bcf-forge-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--bc-mut); }
.bcf-forge-track { position: relative; height: 6px; border-radius: 999px; background: var(--bc-surface-3); margin-top: 8px; }
.bcf-forge-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg,#b45309,#fbbf24); }
.bcf-forge-mark { position: absolute; left: 85%; top: -3px; width: 2px; height: 12px; background: rgba(242,246,243,0.6); }

.bcf-acts { display: flex; align-items: center; gap: 24px; margin-top: 13px; }
.bcf-act { font-size: 12.5px; color: var(--bc-dim); background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap; transition: color 0.15s ease; }
.bcf-act:hover { color: var(--bc-green-text); }
.bcf-open { margin-left: auto; }

.bcf-rail-host { flex: 0 0 280px; min-width: 260px; }
.bcf-rail { display: flex; flex-direction: column; gap: 16px; }
.bcf-panel { border: 1px solid var(--bc-border); border-radius: 14px; background: var(--bc-card); padding: 16px 18px; }
.bcf-panel-h { font-size: 10.5px; letter-spacing: 0.18em; color: var(--bc-dim); }
.bcf-trend { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.bcf-trend-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--bc-ink); border-radius: 8px; padding: 7px 8px; }
.bcf-trend-row:hover { background: var(--bc-surface); color: var(--bc-ink-hi); }
.bcf-rank { color: var(--bc-faint); font-size: 11px; min-width: 14px; }
.bcf-trend-d { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcf-trend-c { color: var(--bc-dim); font-size: 11px; }
.bcf-week { font-size: 12px; color: var(--bc-mut); line-height: 2.1; }
.bcf-week .bcf-panel-h { margin-bottom: 4px; }
.bcf-watch { border: 1px dashed rgba(30,215,96,0.35); border-radius: 14px; padding: 16px 18px; font-size: 12.5px; color: var(--bc-green-text); line-height: 1.7; }

/* add-yours: the inline prompt the chip expands into (curls only on submit). */
.bc-addbar {
  width: min(780px, 92vw); margin-top: 14px;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(30,215,96,0.4); border-radius: 12px;
  background: linear-gradient(180deg, rgba(30,215,96,0.05), transparent), var(--bc-card);
  padding: 13px 16px;
  animation: bc-addbar-in 0.28s cubic-bezier(0.22,0.68,0.3,1) both;
}
.bc-addbar[hidden] { display: none; }
.bc-addbar .bc-cmd-prompt { font-size: 16px; }
.bc-addbar-bin { color: var(--bc-ink); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.bc-addbar-input {
  flex: 1; min-width: 0; background: transparent; border: none; color: var(--bc-ink);
  font-family: inherit; font-weight: 500; font-size: 16px; caret-color: var(--bc-green); padding: 0;
}
.bc-addbar-btn {
  margin-left: auto; color: #04180b; background: var(--bc-green-hi); border: none;
  border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: filter 0.15s ease;
}
.bc-addbar-btn:hover { filter: brightness(1.08); }
@keyframes bc-addbar-in { from { opacity: 0; transform: translateY(-8px) scaleY(0.85); } to { opacity: 1; transform: none; } }

/* ── mobile ── the header is the one row that can't wrap gracefully, so on
   narrow screens we drop the secondary text links (docs / api / mcp — all
   reachable from the footer) and keep the essential curl/feed toggle + sign-in.
   Everything else already wraps; here we just tighten the frame. */
@media (max-width: 620px) {
  /* header rules live in bc-chrome.css */
  .bc-hero { padding: 20px 16px 56px; }
  .bc-doodle { font-size: clamp(46px, 13vw, 88px); }
  .bc-gap { height: 30px; }
  .bc-cmd, .bc-sub, .bc-term, .bc-chips, .bc-forge, .bc-addbar { width: 100%; }
  .bc-cmd { gap: 9px; padding: 15px 4px; }
  .bc-cmd-bin { display: none; }           /* the ❯ prompt is enough; save room for the domain */
  .bc-run { padding: 11px 16px; font-size: 14px; }

  .bcf { padding: 8px 16px 72px; }
  .bcf-grid { gap: 20px; }
  .bcf-col { flex: 1 1 100%; min-width: 0; }
  .bcf-rail-host { flex: 1 1 100%; min-width: 0; }
}

.bcf-b { color: var(--bc-ink-hi); }

/* feed verbs — themed, not inline */
.bcf-v-curled { color: #7fdca4; }
.bcf-v-forged { color: #d9b25e; }
.bcf-v-pinned { color: #c084fc; }
.bcf-v-remixed { color: #67e8f9; }
:root[data-theme="light"] .bcf-v-curled { color: #0f8a41; }
:root[data-theme="light"] .bcf-v-forged { color: #8a5a00; }
:root[data-theme="light"] .bcf-v-pinned { color: #7c3aed; }
:root[data-theme="light"] .bcf-v-remixed { color: #0e7490; }