/* Page B (web/site-b.html, spec 006): what it needs beyond app.css and
   site.css, whose tokens, top bar, vibe form and the app's chat and page
   pieces it uses as they are. Three moves in one column with page A's
   gutters: the claim (the demo beside it from 1000px, under it below),
   the struck list, the close. No hairline sections: size and space part
   them. The giant type is sized by its column (container units), so a
   line never runs out of it, and the headline also by the screen's
   height, so the form stays on a short first screen. Motion is armed only
   with .js on <html> (set in the head, taken back if site-b.js never runs)
   and without reduced motion; otherwise every part shows finished. The
   rules are "The website's page B" in constitution.md. */
.site-b { --gutter: max(16px, calc((100% - 1080px) / 2)); }
.site-b main { display: block; overflow-x: clip; }
.b-sec { margin-inline: var(--gutter); }
.b-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b-lead { margin: 0; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.4; color: var(--muted); text-wrap: balance; }

/* the claim: on a phone close under the top bar, the demo straight after
   the form, so the chat is playing on the first screen */
.b-hero { display: grid; gap: 0 56px; padding-block-end: 56px; }
.b-claim { container-type: inline-size; display: flex; flex-direction: column; padding-block: 28px 32px; }
.site-b .b-hero h1 { margin: 0 0 16px; font-size: clamp(40px, min(15cqi, 13svh), 124px); line-height: .96; letter-spacing: -0.045em; font-weight: 500; text-wrap: balance; }
.b-claim .vibe { margin-block-start: 24px; }
@media (min-width: 1000px) {
  .b-hero { grid-template-columns: minmax(0, 1fr) 420px; align-items: center; min-height: min(calc(100svh - 60px - var(--sat)), 760px); padding-block: 8px 48px; }
  .b-claim { padding-block: 24px; }
}

/* the demo: a group's chat in the app's pieces, in a frame bordered like
   an input; the page it asked for rises from the frame's foot and the
   thread makes room for it above */
.site-b .b-demo { position: relative; justify-self: center; width: 100%; max-width: 420px; height: 572px; margin: 0; pointer-events: none; }
.b-group { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.b-group.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.b-group .demo-top { border-block-end: 1px solid var(--line); }
.b-group .tb-head { display: flex; flex-direction: column; min-width: 0; }
.b-group .tb-head .sub { color: var(--muted); font-size: 13px; }
.b-thread { --page-h: 268px; padding-block-end: calc(var(--page-h) + 10px); transition: padding-block-end .7s cubic-bezier(.2, .7, .2, 1); }
.b-thread .msg { line-height: 1.4; }
.b-page { position: absolute; inset-inline: 0; inset-block-end: 0; height: 268px; padding: 12px 14px 4px; overflow: hidden; background: var(--bg); border-block-start: 1px solid var(--line); border-start-start-radius: 18px; border-start-end-radius: 18px; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.b-page .fp-head { font-size: 15px; padding-block-end: 2px; }
.b-page .fp-head .grow { flex: 1; }
.b-page .pg-row { min-height: 46px; padding-block: 5px; gap: 10px; }
.b-page .pg-row:last-child { border-block-end: 0; }
.b-page .avatar { width: 28px; height: 28px; font-size: 12px; }
.b-page .pg-bar { flex-basis: 96px; }

/* the struck list: each app struck through by a line in ink, the app
   stepping back to muted; then "One chat." */
.b-apps { container-type: inline-size; padding-block: 8px 72px; }
.b-list { margin: 0; padding: 0; list-style: none; }
.b-list li, .b-one { font-size: clamp(34px, 11cqi, 104px); line-height: 1.06; letter-spacing: -0.04em; font-weight: 500; }
.b-list s { position: relative; display: inline-block; text-decoration: none; color: var(--muted); }
.b-list s::after { content: ''; position: absolute; inset-inline: -0.04em; inset-block-start: 50%; height: max(3px, .06em); border-radius: 1em; background: var(--text); }
.b-one { margin: .3em 0 0; color: var(--text); }

/* the close */
.b-close { container-type: inline-size; padding-block: 0 80px; }
.site-b .b-close h2 { max-width: 9.5em; margin: 0 0 20px; font-size: clamp(40px, 12cqi, 112px); line-height: .98; letter-spacing: -0.045em; font-weight: 500; text-wrap: balance; }
.b-close .vibe { margin-block-start: 30px; }

.b-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 24px calc(24px + var(--sab)); border-block-start: 1px solid var(--line); }
.b-foot .wordmark { height: 22px; }

/* motion, only when site-b.js runs and motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .js .b-hero h1 .w { display: inline-block; animation: b-word .8s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 70ms + 80ms) both; }

  .js .b-demo .msg.b-step:not(.in), .js .b-demo .msg-row.b-step:not(.in) { display: none; }
  .js .b-demo .b-step.in:not(.b-page) { animation: b-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
  /* a chat starts at the top and fills down; once it outgrows the frame it
     scrolls to its newest, faded at the top only then */
  .js .b-demo .b-thread { justify-content: flex-start; transition: none; }
  .js .b-demo .b-thread:not(.scrolled) { -webkit-mask-image: none; mask-image: none; }
  .js .b-demo .b-group:not(.paged) .b-thread { padding-block-end: 10px; }
  .js .b-demo .b-page:not(.in) { transform: translateY(102%); }

  .js .b-list s { color: var(--text); transition: color .4s ease calc(var(--i) * .32s + .3s); }
  .js .b-list s::after { transform: scaleX(0); transform-origin: left center; transition: transform .42s cubic-bezier(.6, 0, .2, 1) calc(var(--i) * .32s); }
  .js .b-apps.go s { color: var(--muted); }
  .js .b-apps.go s::after { transform: none; }
  .js .b-one { opacity: 0; transform: translateY(.25em); transition: opacity .6s ease 1.9s, transform .8s cubic-bezier(.2, .7, .2, 1) 1.9s; }
  .js .b-apps.go .b-one { opacity: 1; transform: none; }
}
@keyframes b-word { from { opacity: 0; transform: translateY(.3em); } }
@keyframes b-rise { from { opacity: 0; transform: translateY(12px); } }