/* motion.css — the states motion.js moves between (2026-10-05).
 *
 * Every rule here is scoped under html.cbm, the class motion.js sets only when
 * it runs and the visitor has not asked for reduced motion. Without it (no
 * script, a crawler, reduced motion) none of this applies and the page is the
 * plain static page.
 */

/* 1. Reveal */
html.cbm .cbm-pre { opacity:0; transform:translateY(18px); }
html.cbm .cbm-pre.cbm-in {
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--cbm-d,0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--cbm-d,0ms);
}

/* 2. Titles, word by word: from blurred and low to sharp and in place */
html.cbm .cbm-words .cbm-w { display:inline-block; opacity:0; filter:blur(8px); transform:translateY(.35em); }
html.cbm .cbm-words.cbm-words-in .cbm-w {
  opacity:1; filter:none; transform:none;
  transition:opacity .5s ease var(--cbm-w,0ms), filter .6s ease var(--cbm-w,0ms), transform .6s cubic-bezier(.2,.7,.2,1) var(--cbm-w,0ms);
}

/* 3. The hero arrives on the first paint, by CSS alone: nothing waits for a
   script, so nothing can be shown and then hidden. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cbm-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
  #top .lp-hero-title, #top .lp-hero-sub, #top .ag-cta-row, #top .ag-split { animation:cbm-up .7s cubic-bezier(.2,.7,.2,1) both; }
  #top .lp-hero-sub { animation-delay:.08s; }
  #top .ag-cta-row { animation-delay:.16s; }
  #top .ag-split { animation-delay:.24s; }
}

/* ── The home demo (index.html, #cbm-demo) ─────────────────────────────────
   Static first: without motion.js this is a finished, readable panel. */
.cbm-demo { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:20px; align-items:stretch; }
.cbm-win { display:flex; flex-direction:column; background:#111418; color:#E8EAED; border-radius:16px; padding:0 0 22px; box-shadow:0 30px 70px -32px rgba(17,20,24,.6); overflow:hidden; }
.cbm-verdict { margin:auto 22px 0; padding-top:22px; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:#FF7372; }
.cbm-verdict .cbm-x { flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; background:rgba(243,55,54,.2); }
.cbm-bar { display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.cbm-dots { display:inline-flex; gap:6px; }
.cbm-dots i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.cbm-eng { font-family:var(--font-mono); font-size:11.5px; color:rgba(255,255,255,.55); letter-spacing:.02em; }
.cbm-q { position:relative; margin:22px 22px 0; padding:14px 16px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.04); font-size:15px; line-height:1.55; color:#fff; }
.cbm-status { display:none; margin:18px 22px 0; font-size:13px; color:rgba(255,255,255,.6); align-items:center; gap:9px; }
.cbm-spin { width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,.22); border-top-color:#F33736; animation:cbm-spin .8s linear infinite; }
@keyframes cbm-spin { to { transform:rotate(360deg); } }
.cbm-ans { margin:18px 22px 0; font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.86); }
.cbm-ans p { margin:0; }
.cbm-ans ul { margin:10px 0 0; padding-left:18px; display:grid; gap:8px; }
.cbm-ans mark { background:rgba(243,55,54,.2); color:#FF7372; border-radius:5px; padding:1px 6px; font-weight:600; }
.cbm-side { display:grid; gap:20px; align-content:start; }
.cbm-card { background:var(--paper2); border:1px solid var(--line); border-radius:14px; padding:20px 20px 18px; }
.cbm-h { font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:12px; }
.cbm-named ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cbm-named li { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14.5px; padding:9px 12px; border-radius:9px; background:var(--bg); color:var(--ink); }
.cbm-named li b { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.cbm-named .cbm-miss { background:transparent; border:1.5px dashed var(--accent); font-weight:600; }
.cbm-big { font-size:56px; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--ink); }
.cbm-big small { font-size:24px; color:var(--mut); margin-left:2px; }
.cbm-ci { position:relative; height:10px; border-radius:99px; background:#E8E8E8; margin:18px 0 8px; }
.cbm-ci .band { position:absolute; left:30%; width:45%; top:0; bottom:0; border-radius:99px; background:rgba(243,55,54,.28); }
.cbm-ci .tick { position:absolute; left:55%; top:-4px; width:3px; height:18px; margin-left:-1.5px; border-radius:2px; background:var(--accent); }
.cbm-ci-l { font-size:13px; color:var(--deep); line-height:1.5; }
.cbm-gaps { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); font-size:13.5px; line-height:1.55; color:var(--ink); }
.cbm-foot { margin:22px 0 0; font-size:14.5px; line-height:1.65; color:var(--deep); max-width:760px; }
.cbm-foot a { color:var(--ink); font-weight:600; }
@media (max-width:900px) { .cbm-demo { grid-template-columns:1fr; } }
@media (max-width:640px) {
  .cbm-q, .cbm-ans, .cbm-status, .cbm-verdict { margin-left:16px; margin-right:16px; }
  .cbm-q { font-size:14.5px; } .cbm-ans { font-size:14px; }
}

/* Its moving states. The question is typed over an invisible copy of itself,
   so the panel never changes height while it plays. */
html.cbm .cbm-live .cbm-q-ghost { visibility:hidden; }
html.cbm .cbm-live .cbm-q-txt { position:absolute; left:16px; right:16px; top:14px; }
html.cbm .cbm-live.cbm-typing:not(.cbm-thinking):not(.cbm-answering) .cbm-q-txt::after { content:""; display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-2px; background:#F33736; animation:cbm-caret .8s steps(1) infinite; }
@keyframes cbm-caret { 50% { opacity:0; } }
html.cbm .cbm-live.cbm-thinking .cbm-status { display:flex; }
html.cbm .cbm-live .cbm-tok { opacity:0; transition:opacity .28s ease; }
html.cbm .cbm-live .cbm-tok.on { opacity:1; }
html.cbm .cbm-live mark.cbm-tok { display:inline-block; transform:scale(.85); transition:opacity .3s ease, transform .35s cubic-bezier(.3,1.6,.5,1); }
html.cbm .cbm-live mark.cbm-tok.on { transform:none; }
html.cbm .cbm-live .cbm-ans li:not(:has(.on)) { list-style:none; }
html.cbm .cbm-live .cbm-named li { opacity:.25; transform:translateX(8px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
html.cbm .cbm-live .cbm-named li.on { opacity:1; transform:none; }
html.cbm .cbm-live .cbm-rate { transition:opacity .4s ease; }
html.cbm .cbm-live:not(.cbm-rated) .cbm-rate { opacity:.3; }
html.cbm .cbm-live .cbm-ci .band { transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.7,.2,1) .2s; }
html.cbm .cbm-live.cbm-rated .cbm-ci .band { transform:none; }
html.cbm .cbm-live .cbm-ci .tick, html.cbm .cbm-live .cbm-gaps { opacity:0; transition:opacity .4s ease .9s; }
html.cbm .cbm-live .cbm-verdict { opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease; }
html.cbm .cbm-live.cbm-rated .cbm-verdict { opacity:1; transform:none; }
html.cbm .cbm-live.cbm-rated .cbm-ci .tick, html.cbm .cbm-live.cbm-rated .cbm-gaps { opacity:1; }

/* ── The Sprint's timeline (index.html, above the four steps) ─────────────── */
.ag-tl { display:flex; align-items:center; gap:14px; margin:0 0 22px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); }
.ag-tl-bar { flex:1; height:3px; border-radius:3px; background:var(--line); position:relative; overflow:hidden; }
.ag-tl-bar i { position:absolute; inset:0; background:var(--accent); transform-origin:left center; }
html.cbm .ag-tl.cbm-pre .ag-tl-bar i { transform:scaleX(0); }
html.cbm .ag-tl.cbm-pre.cbm-in .ag-tl-bar i { transform:none; transition:transform 1.8s cubic-bezier(.45,.05,.25,1) .25s; }
@keyframes cbm-pop { 0% { transform:scale(.6); } 60% { transform:scale(1.15); } 100% { transform:none; } }
html.cbm .ag-steps > li.cbm-pre.cbm-in .ag-step-n { animation:cbm-pop .55s cubic-bezier(.3,1.4,.5,1) calc(var(--cbm-d,0ms) + .2s) both; }