/* =========================================================================
   CO-BUILDER DEMO (home hero) — styles for CoBuilderDemo.astro.
   Timeline: public/js/cobuilder-demo.js sets data-view / data-chat /
   data-cam plus `is-*` step classes on #coBuilderDemo; everything below
   just reacts to those. Storyboard: header comment in CoBuilderDemo.astro.

   Every value here is lifted from the "Clive Product UI Frames" storyboard
   (section 8), which mirrors the PRODUCT, not this site — so like
   hero-demo.css it uses literal product colours rather than :root tokens.
   The stage is a fixed 700 × 525 frame scaled to fit by the JS (--cb-k).
   ========================================================================= */

.cb { background: #F6F6F7; }

.cb__viewport {
  position: relative; width: 100%; aspect-ratio: 700 / 525; overflow: hidden;
}
.cb__stage {
  position: absolute; left: 0; top: 0; width: 700px; height: 525px;
  transform: scale(var(--cb-k, .877)); transform-origin: 0 0;
  transition: opacity .5s ease;
}
.cb.is-out .cb__stage { opacity: 0; }

/* The frames were drawn without the site's global border-box reset. */
.cb__stage, .cb__stage * { box-sizing: content-box; }

/* Reset pass at the loop seam: snap every transition. */
.cb.is-reset .cb__stage * { transition: none !important; animation: none !important; }

/* ---------- camera ----------
   Written as translate + scale from a 0 0 origin so moves between the two
   storyboard origins (374,426 for the composer; 270,150 for the thread)
   interpolate in a straight line. */
.cb__cam {
  width: 700px; height: 525px; display: flex; overflow: hidden;
  background: #F6F6F7; color: #2B2B2B;
  font-family: var(--font-plex), 'IBM Plex Sans', sans-serif;
  transform-origin: 0 0; transform: translate(0, 0) scale(1);
  transition: transform var(--motion-camera) var(--ease-camera);
}

.cb svg { display: block; flex: none; }

/* ---------- rail ---------- */
.cb-rail {
  width: 48px; height: 100%; flex: none; background: #040E0D;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; box-sizing: border-box; gap: 8px;
}
.cb-rail__mark, .cb-rail__icon {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.cb-rail__mark { margin-bottom: 8px; }
.cb-rail__icon svg { fill: #B3B3B3; }
.cb-rail__fill { flex: 1; }
.cb-rail__icon--me { margin-top: 4px; }
.cb-rail__avatar {
  width: 24px; height: 24px; border-radius: 50%; background: #2C8E45; color: #FFFFFF;
  font-size: 12px; line-height: 1; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- views ---------- */
.cb-main { flex: 1; min-width: 0; position: relative; }
.cb-view {
  position: absolute; inset: 0; padding: 6px; display: flex; gap: 6px; min-width: 0;
  opacity: 0; pointer-events: none;
}
.cb[data-view="chat"] .cb-view--chat,
.cb[data-view="table"] .cb-view--table,
.cb[data-view="widgets"] .cb-view--widgets { opacity: 1; }
/* 8l2 → 8m: the chat eases out as the table settles in. 8o → 8p crossfades. */
.cb[data-view="table"] .cb-view--chat { transition: opacity .5s ease; }
/* 8m and 8p reveals: the page's breadcrumbs build first (motion kit
   .mo-crumbs), then its content follows from --motion-after-crumbs. */
.cb[data-view="table"] .cb-view--table { transition: opacity .25s ease .1s; }
.cb[data-view="widgets"] .cb-view--table,
.cb[data-view="widgets"] .cb-view--widgets { transition: opacity .25s ease; }
.cb-view--table .cb-table { opacity: 0; transform: translateY(6px); }
.cb[data-view="table"] .cb-view--table .cb-table,
.cb[data-view="widgets"] .cb-view--table .cb-table {
  opacity: 1; transform: none;
  transition: opacity .4s ease var(--motion-after-crumbs), transform .5s var(--ease-enter) var(--motion-after-crumbs);
}

/* ---------- shared card + title bar ---------- */
.cb-card {
  flex: 1; min-width: 0; background: #FFFFFF; border: 1px solid #DBDBDE; border-radius: 6px;
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.cb-card--cream { background: #FAF9F5; }

.cb-bar {
  height: 40px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-bottom: 1px solid #DBDBDE; font-size: 14px; line-height: 20px;
  box-sizing: border-box; white-space: nowrap;
}
.cb-bar--white { background: #FFFFFF; }
.cb-bar__ws { font-weight: 500; }
.cb-bar__model { color: #787878; }
.cb-bar__slash { color: #B5B5BA; }
.cb-bar__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.cb-bar__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.cb-bar__end--tight { gap: 10px; }
.cb-person {
  width: 24px; height: 24px; border-radius: 50%; background: #D9D9D9; color: #787878;
  font-weight: 600; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex: none;
}

/* ---------- cursor + caret (motion kit: .mo-cursor / .mo-caret) ---------- */
.cb-cursor { position: absolute; }
.cb .mo-caret { display: none; }

/* =========================================================================
   CHAT — home (8a–8f)
   ========================================================================= */
.cb-home {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center;
  padding: 0 48px 28px; transition: opacity .35s ease;
}
.cb-home__greet { margin-top: 136px; font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.2px; }
.cb-home__spacer { flex: 1; }
/* 8e: with the chips in, the greeting centres in the space that's left */
.cb.is-dropped .cb-home__greet { margin-top: 0; flex: 1; display: flex; align-items: center; justify-content: center; }
.cb.is-dropped .cb-home__spacer { display: none; }

.cb-composer {
  width: 100%; max-width: 520px; background: #FFFFFF; border: 1px solid #DBDBDE; border-radius: 10px;
  box-sizing: border-box; display: flex; flex-direction: column;
}

/* min-height holds one line, so an empty field (no placeholder) is the same height */
.cb-composer__field { min-height: 22px; padding: 14px 16px 18px; font-size: 16px; line-height: 22px; color: #2B2B2B; text-wrap: pretty; }
.cb.is-dropped .cb-home .cb-composer__field { padding: 10px 16px 14px; }
.cb-composer__ph { color: #787878; }
.cb-composer.is-focused .cb-composer__ph,
.cb.is-typing1 .cb-home .cb-composer__ph { display: none; }
.cb.is-typing1 .cb-home .mo-caret { display: inline-block; }

.cb-composer__rule { height: 1px; background: #EFEFF1; }
.cb-composer__bar { height: 48px; padding: 0 10px 0 12px; display: flex; align-items: center; justify-content: space-between; }
.cb-composer__right { display: flex; align-items: center; gap: 8px; }
.cb-clip { fill: #787878; transform: rotate(90deg) scaleX(-1); }

.cb-mode {
  height: 28px; padding: 0 10px 0 12px; display: flex; align-items: center; gap: 6px;
  background: #F6F6F7; border: 1px solid #DBDBDE; border-radius: 14px; box-sizing: border-box;
  font-size: 13px; line-height: 16px; font-weight: 500; color: #2B2B2B;
}

.cb-send {
  width: 30px; height: 30px; background: #E6E6E9; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}
.cb-send > svg:first-child { fill: #2B2B2B; transition: fill .15s ease; }
.cb-cursor--send { left: 16px; top: 16px; }

/* 8f: the clicked send button is the motion kit's .mo-press */

/* 8e: the 21 file chips */
.cb-chips { display: none; padding: 10px 10px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.cb.is-dropped .cb-chips { display: grid; }
.cb-chip {
  height: 20px; display: flex; align-items: center; gap: 5px; padding: 0 6px 0 3px;
  background: #F6F6F7; border: 1px solid #DBDBDE; border-radius: 4px; min-width: 0;
}
.cb.is-dropped .cb-chip { animation: cbPop .3s var(--ease-pop) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes cbPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.cb-tag {
  flex: none; height: 13px; padding: 0 3px; box-sizing: border-box; border-radius: 3px; color: #2B2B2B;
  font-family: var(--font-plex-mono), 'IBM Plex Mono', monospace;
  font-size: 8.5px; line-height: 13px; font-weight: 500; letter-spacing: .02em;
}
.cb-tag--xls { background: rgba(44, 142, 69, .2); box-shadow: inset 0 0 0 1px #2C8E45; }
.cb-tag--csv { background: rgba(74, 144, 217, .2); box-shadow: inset 0 0 0 1px #4A90D9; }
.cb-tag--png { background: rgba(142, 68, 173, .2); box-shadow: inset 0 0 0 1px #8E44AD; }
.cb-chip__name { font-size: 11px; line-height: 14px; color: #55555A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 8d: drop box + dragged stack (positioned on the chat card) */
.cb-drop {
  position: absolute; top: 246px; left: 50%; transform: translateX(-50%);
  background: #FFFFFF; border: 1px solid #DBDBDE; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .10);
  padding: 9px 16px; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
  opacity: 0; transition: opacity .25s ease;
}
.cb-stack {
  position: absolute; left: 236px; top: 300px; width: 60px; height: 64px;
  opacity: 0; transform: translate(170px, -120px) rotate(8deg);
  transition: opacity .25s ease, transform .25s ease;
}
.cb.is-drag .cb-drop { opacity: 1; }
.cb.is-drag .cb-stack {
  opacity: 1; transform: none;
  transition: opacity .3s ease, transform .9s var(--ease-enter);
}
/* on drop the stack sinks into the composer */
.cb.is-dropped .cb-stack { opacity: 0; transform: translateY(40px) scale(.7); }
.cb-stack__back, .cb-stack__front {
  position: absolute; width: 36px; height: 44px; background: #FFFFFF; border: 1px solid #DBDBDE; border-radius: 4px;
}
.cb-stack__back { left: 0; top: 4px; transform: rotate(-8deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .08); }
.cb-stack__front { left: 6px; top: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.cb-stack__badge {
  position: absolute; left: 30px; top: -9px; height: 20px; min-width: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: 10px; background: #6A5BC6; color: #FFFFFF; font-size: 12px; line-height: 20px; font-weight: 600; text-align: center;
}
.cb-stack__cursor { position: absolute; left: 36px; top: 36px; }

/* =========================================================================
   CHAT — thread (8g–8h4)
   ========================================================================= */
.cb-thread {
  position: absolute; left: 0; right: 0; top: 40px; bottom: 0;
  display: flex; flex-direction: column; opacity: 0; transition: opacity .35s ease;
}
.cb[data-chat="thread"] .cb-home { opacity: 0; transition-duration: .35s; }
.cb[data-chat="thread"] .cb-thread { opacity: 1; transition: opacity .5s ease .25s; }
.cb[data-chat="thread"] .cb-drop,
.cb[data-chat="thread"] .cb-stack { display: none; }

.cb-thread__body { flex: 1; min-height: 0; overflow: hidden; padding: 16px 48px 12px; }
/* the messages; when the strategy doc lands the JS sets --cb-thread-shift so
   the thread scrolls up to make room, like a real chat */
.cb-thread__scroll {
  display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 23px;
  transform: translateY(var(--cb-thread-shift, 0px)); transition: transform .7s var(--ease-move);
}
.cb-bubble {
  background: #FFFFFF; border: 1px solid #DBDBDE; border-radius: 10px; padding: 12px 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.cb-bubble__text { font-size: 16px; line-height: 22px; text-wrap: pretty; }
.cb-attached {
  align-self: flex-start; display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px;
  box-sizing: border-box; border-radius: 4px; background: rgba(106, 91, 198, .2); border: 1px solid #6A5BC6;
  font-size: 13px; line-height: 16px; font-weight: 500;
}
.cb-attached svg { fill: #2B2B2B; transform: rotate(90deg) scaleX(-1); }

@keyframes cbFade { from { opacity: 0; } to { opacity: 1; } }

/* 8h: Clive's progress lines — the checklist style from the "Ship with
   AI speed" demo (ai-speed-demo.css .asdStep): a bold green ✓ glyph, grey
   label, each line lifting in as it lands. */
/* given room above so they sit nearer the middle of the chat, in ink, since
   they're the whole of Clive's visible reply */
.cb-steps { display: flex; flex-direction: column; gap: 8px; padding-left: 2px; margin-top: 44px; }
.cb-step { font-size: 14px; line-height: 20px; color: #2B2B2B; }


/* The thread composer is the opening composer, pinned at the same size and
   place: 520px wide, centred, 28px off the bottom (the opening one
   gets that from .cb-home's padding). Stage is a fixed 700px, so px is exact. */
.cb-composer--foot { flex: none; width: 520px; margin: 0 auto 28px; }

/* =========================================================================
   STRATEGY DOC — the build strategy as a document right in the chat (8i–8l2)
   ========================================================================= */
.cb-docmsg {
  display: none; flex: none; height: 236px; flex-direction: column;
  background: #FFFFFF; border: 1px solid #DBDBDE; border-radius: 10px; overflow: hidden;
  transition: opacity .5s ease;
}
/* fill backwards only, so the entrance doesn't pin opacity and the spotlight can dim it */
.cb.is-doc .cb-docmsg { display: flex; animation: cbRise .45s var(--ease-enter) backwards; }
/* clip the body's top padding too, so nothing above the doc shows once
   the thread has scrolled */
.cb.is-doc .cb-thread__body { clip-path: inset(16px 0 0 0); }
/* 8l: "Ready to build?" with 👍 / 👎, just under the doc (its room is
   reserved when the doc lands). As it appears the doc dims, so the question
   is where the eye goes. */
.cb-ask { display: none; flex: none; align-items: center; gap: 8px; height: 32px; padding-left: 2px; opacity: 0; transform: translateY(var(--motion-rise)); transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease-enter); }
.cb.is-doc .cb-ask { display: flex; }
.cb.is-ask .cb-ask { opacity: 1; transform: none; }
.cb-ask__q { margin-right: 4px; }
.cb-ask__btn {
  width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; border: 1px solid #DBDBDE;
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative;
  transition: background-color .15s ease, border-color .15s ease;
}
.cb-ask__btn svg:first-child { fill: #2B2B2B; transition: fill .15s ease; }
.cb-ask__btn--down svg:first-child { transform: rotate(180deg); }
.cb-cursor--thumb { left: 18px; top: 18px; }
/* 8l2: Sam's 👍 */
/* a clicked 👍 is the motion kit's .mo-press */
/* the composer switches to Build mode once there's a strategy to build */
.cb-mode__build { display: none; }
.cb.is-doc .cb-mode__plan { display: none; }
.cb.is-doc .cb-mode__build { display: inline; }

.cb-plan__viewport {
  flex: 1; min-height: 0; overflow: hidden;
  /* soften the cut where the doc scrolls off the foot of the sheet */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.cb-doc { width: 384px; margin: 0 auto; padding: 22px 24px 20px; transform: translateY(0); }
/* 8j short nudge, then 8k whoosh to the end (offset measured by the JS) —
   a glance at how much is there, not something to read */
.cb.is-skim1 .cb-doc { transform: translateY(-104px); transition: transform .5s var(--ease-move); }
.cb.is-skim2 .cb-doc { transform: translateY(var(--cb-doc-end, -1109px)); transition: transform .8s var(--ease-move); }

.cb-doc__title { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.4px; color: #040E0D; }
.cb-doc__meta { font-size: 13px; line-height: 18px; color: #787878; margin-top: 6px; }
.cb-doc__h {
  font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.2px; color: #040E0D;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid #EFEFF1;
}
.cb-doc__p { font-size: 14px; line-height: 22px; margin-top: 8px; text-wrap: pretty; }
.cb-doc__list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.cb-doc__li { display: flex; gap: 10px; font-size: 14px; line-height: 22px; }
.cb-doc__dot { color: #787878; }
.cb-code {
  font-family: var(--font-plex-mono), 'IBM Plex Mono', monospace; font-size: 12.5px;
  background: #EEEFE9; color: #3D4436; border-radius: 4px; padding: 1px 5px;
}

/* =========================================================================
   TABLE — Revenue build-up (8m–8o)
   ========================================================================= */
/* Modeling screens: the white panel on top, the collapsed chat beneath it
   on the background layer — a chat icon and an up caret, right-aligned. */
.cb-view--table, .cb-view--widgets { flex-direction: column; }
.cb-chatbar {
  flex: none; height: 24px; display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; padding: 0 12px; color: #787878;
}
/* The table runs edge to edge inside the white page card, directly under
   the title bar. */
.cb-table { font-family: var(--font-inter), Inter, var(--font-plex), sans-serif; }
.cb-tr {
  display: grid; grid-template-columns: 200px repeat(6, minmax(0, 1fr)); height: 44px;
  border-bottom: 1px solid #DBDBDE; box-sizing: border-box; background: #FFFFFF; font-size: 14px; line-height: 20px;
}
.cb-tr--head { height: 56px; background: #F6F6F7; }
.cb-tr--l2 { background: #F6F6F7; }
.cb-th__label { display: flex; align-items: flex-end; padding: 0 12px 9px; font-size: 12px; line-height: 16px; color: #787878; }
.cb-th { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 0 10px; }
.cb-th__period { font-size: 14px; line-height: 20px; font-weight: 500; }
.cb-th__scn { font-size: 12px; line-height: 16px; color: #787878; }
.cb-td__label { display: flex; align-items: center; gap: 4px; padding-left: 12px; font-weight: 500; white-space: nowrap; }
.cb-tr--l2 .cb-td__label { padding-left: 28px; font-weight: 400; }
.cb-fold { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.cb-td { display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; font-weight: 300; font-variant-numeric: tabular-nums; }
.cb-td span { opacity: 0; }
/* 8n / 8o: columns fill one month at a time */
.cb.is-c1 .cb-td[data-col="1"] span,
.cb.is-c2 .cb-td[data-col="2"] span,
.cb.is-c3 .cb-td[data-col="3"] span,
.cb.is-c4 .cb-td[data-col="4"] span,
.cb.is-c5 .cb-td[data-col="5"] span,
.cb.is-c6 .cb-td[data-col="6"] span { opacity: 1; animation: cbCell .35s ease both; }
@keyframes cbCell { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cb-newrow {
  height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 14px;
  font-family: var(--font-plex), 'IBM Plex Sans', sans-serif; font-size: 14px; color: #787878;
}

/* =========================================================================
   WIDGETS — Board View page (8p–8q): a cream page inside the white card,
   two stat tiles over two 320px cards
   ========================================================================= */
.cb-page { flex: 1; min-height: 0; padding: 16px; background: #FAF9F5; display: flex; flex-direction: column; }
.cb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cb-w { background: #FFFFFF; border: 1px solid #DBDBDE; border-radius: 6px; box-sizing: border-box; }
.cb-stat { height: 76px; padding: 11px 16px; display: flex; flex-direction: column; justify-content: center; }
.cb-stat__v { font-size: 26px; line-height: 32px; font-weight: 600; color: #2B2B2B; font-variant-numeric: tabular-nums; }
.cb-stat__l { font-size: 13px; line-height: 18px; font-weight: 500; color: #787878; }
.cb-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cb-donut, .cb-wf { height: 320px; position: relative; }
.cb-w__title { position: absolute; top: 13px; left: 15px; font-size: 14px; line-height: 20px; font-weight: 600; color: #2B2B2B; }

/* Opex donut — centre 150px from the card top; key from 264px */
.cb-donut__ring { position: absolute; top: 55px; left: 50%; width: 188px; height: 188px; margin-left: -94px; }
.cb-donut__ring svg { display: block; }
.cb-donut__hole { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cb-donut__v { font-size: 24px; line-height: 28px; font-weight: 600; color: #2B2B2B; font-variant-numeric: tabular-nums; }
.cb-donut__l { font-size: 12px; line-height: 16px; color: #787878; }
.cb-donut__key { position: absolute; top: 263px; left: 15px; right: 15px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.cb-donut__k { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: #2B2B2B; }
.cb-donut__k span { width: 8px; height: 8px; border-radius: 2px; }
.cb-donut__kv { font-size: 13px; line-height: 18px; color: #2B2B2B; font-variant-numeric: tabular-nums; }

/* Net new revenue waterfall — 40px bars centred in four columns across the
   card's 16px-padded width (positions are from the card's top-left inside the border) */
.cb-wf { --wf-col: calc((100% - 30px) / 4); }
.cb-wf__base { position: absolute; left: 11px; right: 11px; height: 1px; background: #DBDBDE; }
.cb-wf__bar {
  position: absolute; width: 40px; left: calc(15px + var(--wf-col) * (var(--c) + .5) - 20px);
  background: #DACCFF; border-radius: 3px; box-sizing: border-box; transform-origin: 50% 100%;
}
.cb-wf__bar--down { background: rgba(218, 204, 255, .35); border: 1px solid #6A5BC6; transform-origin: 50% 0; }
.cb-wf__bar--total { background: #9B9B90; }
.cb-wf__v, .cb-wf__l {
  position: absolute; width: var(--wf-col); left: calc(15px + var(--wf-col) * var(--c)); text-align: center; white-space: nowrap;
}
.cb-wf__v { font-size: 12px; line-height: 16px; font-weight: 500; color: #2B2B2B; font-variant-numeric: tabular-nums; }
.cb-wf__l { font-size: 11px; line-height: 15px; color: #787878; }
.cb-wf__link {
  position: absolute; height: 0; border-top: 1px dashed #9B9B90;
  left: calc(15px + var(--wf-col) * (var(--c) + .5) + 20px); width: calc(var(--wf-col) - 40px);
}

/* 8p: the page assembles — tiles and cards rise in, the donut sweeps round
   clockwise, then the waterfall builds bar by bar */
.cb[data-view="widgets"] .cb-w { animation: cbRise .45s var(--ease-enter) both; animation-delay: calc(var(--motion-after-crumbs) + var(--d) * .1s); }
.cb-donut__sweep { stroke-dasharray: 1; }
.cb[data-view="widgets"] .cb-donut__sweep { animation: cbDraw .9s var(--ease-move) calc(var(--motion-after-crumbs) + .5s) both; }
.cb[data-view="widgets"] .cb-donut__hole,
.cb[data-view="widgets"] .cb-donut__key { animation: cbFade .4s ease calc(var(--motion-after-crumbs) + 1.1s) both; }
.cb[data-view="widgets"] .cb-wf__bar { animation: cbGrow .4s var(--ease-enter) both; animation-delay: calc(var(--motion-after-crumbs) + .6s + var(--c) * .25s); }
.cb[data-view="widgets"] .cb-wf__v,
.cb[data-view="widgets"] .cb-wf__link { animation: cbFade .3s ease both; animation-delay: calc(var(--motion-after-crumbs) + .9s + var(--c) * .25s); }
.cb[data-view="widgets"] .cb-wf__l { animation: cbFade .3s ease calc(var(--motion-after-crumbs) + .6s) both; }
@keyframes cbRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cbGrow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes cbDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }