/* Proof section (spec 2026-10-18): chat testimonials, trimmed logo strip, See our work pop-out.
   .proof itself (band, grid texture) stays in styles.css. Tokens from styles.css :root. */

/* ---------- avatars ---------- */
:is(.proof, .pf-review, .pf-review-dialog) .av {
  position: relative; flex: 0 0 auto; width: var(--av, 2.75rem); height: var(--av, 2.75rem); border-radius: 50%;
  background: var(--white); border: 1px solid rgba(55,189,242,.35); box-shadow: var(--side-glow);
  display: grid; place-items: center; overflow: hidden;
}
:is(.proof, .pf-review, .pf-review-dialog) .av img.logo { width: 88%; height: 88%; object-fit: contain; filter: grayscale(1) contrast(1.2); opacity: .75; transition: filter var(--t-3) var(--e-out), opacity var(--t-3) var(--e-out); }
:is(.proof, .pf-review, .pf-review-dialog) .av:hover img.logo { filter: none; opacity: 1; }
:is(.proof, .pf-review, .pf-review-dialog) .av svg { width: 46%; height: 46%; color: var(--cyan-text); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.proof, .pf-review, .pf-review-dialog) .av.staff { border-color: var(--cyan); background: var(--soft-2); }
:is(.proof, .pf-review, .pf-review-dialog) .av.staff img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- chat ---------- */
.chat { max-width: 42rem; margin-inline: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--soft); position: relative; z-index: 1; }
.chat-faces { display: flex; }
.chat-faces .av { --av: 1.9rem; box-shadow: none; border: 2px solid var(--white); }
.chat-faces .av + .av { margin-left: -.6rem; }
.chat-title { font: 700 .95rem/1.2 var(--head); color: var(--ink); }
.chat-sub { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.chat-sub::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.chat-log { list-style: none; margin: 0; padding: 1.75rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .8rem; }
/* scripted: a fixed window, older messages dissolve under the header */
.chat.is-live .chat-log {
  height: 16.5rem; overflow: hidden; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3.25rem); mask-image: linear-gradient(180deg, transparent 0, #000 3.25rem);
}
.chat.is-live .chat-log.is-fading { opacity: 0; transition: opacity var(--t-4) var(--e-out); }
.chat.is-live .chat-msg[hidden] { display: none; }
.chat-msg { display: flex; align-items: flex-end; gap: .625rem; max-width: 88%; }
.chat.is-live .chat-msg { animation: msg-in var(--t-4) var(--e-soft) both; }
.chat-msg[data-side="staff"] { align-self: flex-end; flex-direction: row-reverse; }
@keyframes msg-in { from { opacity: 0; transform: translateY(14px); } }
.msg-who { font: 700 .72rem/1.2 var(--head); color: var(--muted); margin: 0 0 .3rem .25rem; }
.msg-who b { color: var(--cyan-text); }
.chat-msg[data-side="staff"] .msg-who { text-align: right; margin: 0 .25rem .3rem 0; }
.bubble {
  margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 1.125rem 1.125rem 1.125rem .3rem;
  padding: .65rem .95rem; color: var(--text); line-height: 1.5; font-size: .92rem; box-shadow: var(--shadow-sm);
}
.chat-msg[data-side="staff"] .bubble { background: var(--cyan); border-color: var(--cyan); color: var(--ink); border-radius: 1.125rem 1.125rem .3rem 1.125rem; font-weight: 600; }
.bubble .stars { display: block; color: var(--cyan); letter-spacing: 2px; font-size: .75rem; margin-bottom: .2rem; }
.bubble.is-in { animation: words-in var(--t-3) var(--e-out) both; }
@keyframes words-in { from { opacity: 0; } }
.typing { display: inline-flex; gap: .3rem; padding: .9rem 1rem; }
.typing i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--cyan); opacity: .35; animation: chat-dot 1s infinite; }
.chat.is-slow .typing i { animation-duration: 2.5s; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.chat-msg[data-side="staff"] .typing i { background: var(--ink); }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
/* navy window (P17): header one shade lighter, white client bubbles and cyan staff bubbles pop */
.chat { background: var(--navy); border-color: var(--navy); }
.chat-head { background: color-mix(in srgb, var(--navy) 80%, var(--blue)); border-bottom-color: rgba(255,255,255,.08); }
.chat-title { color: var(--white); }
.chat-sub { color: rgba(255,255,255,.72); }
.chat .msg-who { color: rgba(255,255,255,.72); }
.chat .msg-who b { color: var(--cyan-light); }
.chat .av { border-color: rgba(55,189,242,.55); }
.chat .typing i { background: var(--cyan-light); }
.chat .chat-msg[data-side="staff"] .typing i { background: var(--ink); }
@media (max-width: 760px) { .chat.is-live .chat-log { height: 21rem; } }
/* Still mode (proof.js, only when .chat has data-chat-still): a whole pair at a time, plain fade between pairs.
   Not tied to prefers-reduced-motion any more: the chat types under that setting too (owner's decision 2026-10-19). */
.chat[data-chat-still].is-live .chat-msg, .chat[data-chat-still] .bubble.is-in { animation: none; }
.chat[data-chat-still].is-live .chat-log { transition: opacity var(--t-3) ease; -webkit-mask-image: none; mask-image: none; padding-top: 1.1rem; }

/* ---------- logo strip ---------- */
.strip { margin-block: 2rem 1.75rem; }
.strip-label { display: flex; align-items: center; justify-content: center; gap: .625rem; margin: 0 0 .875rem; font: 700 .75rem/1.2 var(--head); text-transform: uppercase; letter-spacing: .16em; color: var(--cyan-text); }
.strip-label::before { content: ""; width: 2.125rem; height: 3px; border-radius: 3px; background: var(--cyan); }
.strip-bar { overflow: hidden; padding-block: .5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* The track only scrolls while the strip is near the screen (proof.js adds .is-live). Left running
   from page load, this very wide animated layer held up the first paint of the whole page in
   browsers without a graphics card, PageSpeed's test browser included. */
.strip-track { display: flex; align-items: center; width: max-content; }
.strip.is-live .strip-track { animation: strip-scroll var(--dur, 60s) linear infinite; }
.strip-bar:hover .strip-track { animation-play-state: paused; }
@keyframes strip-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.strip-logo { flex: 0 0 auto; position: relative; padding-inline: 1.75rem; cursor: default; }
.strip-logo::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 999px; background: var(--cyan); opacity: .6; }
.strip-logo img {
  display: block; height: 2.25rem; width: auto; max-width: 9.5rem; object-fit: contain; border-radius: calc(var(--radius) / 2);
  filter: grayscale(1) contrast(1.2); opacity: .65; transition: filter var(--t-2) var(--e-out), opacity var(--t-2) var(--e-out), transform var(--t-2) var(--e-out);
  user-select: none; -webkit-user-drag: none;
}
.strip-logo:hover img { filter: none; opacity: 1; transform: translateY(var(--lift)); }
@media (max-width: 600px) { .strip-logo { padding-inline: 1.25rem; } .strip-logo img { height: 1.75rem; max-width: 7rem; } }
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }

/* ---------- See our work + pop-out chips ---------- */
.work-pop { display: flex; justify-content: center; align-items: center; gap: .5rem; position: relative; margin-top: .5rem; }
/* One pill and chip language: the See our work pop-out and the portfolio filter share these rules. */
.pill-work, .btn-work { display: inline-block; font: 700 .9rem/1 var(--head); color: var(--ink); text-decoration: none; padding: .9rem 1.4rem; border-radius: 999px; border: 2px solid var(--ink); position: relative; z-index: 2; background: var(--soft); cursor: pointer; white-space: nowrap; transition: background var(--t-1) var(--e-out), color var(--t-1) var(--e-out); }
.work-pop:hover .btn-work, .work-pop.is-open .btn-work, .btn-work:focus-visible, .pill-work:hover, .pill-work:focus-visible, .pill-work[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.work-side { display: flex; gap: .5rem; }
.chip-work, .work-chip {
  font: 700 .78rem/1 var(--head); color: var(--cyan-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  padding: .7rem 1rem; border-radius: 999px; background: var(--white); border: 1px solid rgba(55,189,242,.35); box-shadow: var(--side-glow);
  transition: background var(--t-2) var(--e-out), color var(--t-2) var(--e-out), border-color var(--t-2) var(--e-out), transform var(--t-2) var(--e-out), box-shadow var(--t-2) var(--e-out);
}
.chip-work:hover, .chip-work:focus-visible, .work-chip:hover, .work-chip:focus-visible, .chip-work[aria-pressed="true"] { background: var(--blue); color: var(--white); border-color: var(--blue); }
/* small controls lift the small tier (styles.css --lift-sm); the pop-out chips keep their own slide-in transform */
.chip-work:hover, .chip-work:focus-visible { transform: translateY(var(--lift-sm)); box-shadow: var(--shadow-sm); }
.work-side .work-chip {
  opacity: 0; pointer-events: none; transform: translateX(var(--from)) scale(.6);
  transition: opacity var(--t-2) var(--e-out), transform var(--t-3) var(--e-spring), background var(--t-2) var(--e-out), color var(--t-2) var(--e-out);
  transition-delay: calc(var(--n) * 40ms);
}
.work-side.left .work-chip { --from: 3rem; }
.work-side.right .work-chip { --from: -3rem; }
.work-pop.is-open .work-chip, .work-pop:hover .work-chip, .work-pop:focus-within .work-chip { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 720px) {
  .work-pop { flex-wrap: wrap; row-gap: 0; }
  .work-pop .btn-work { order: -1; }
  .work-pop::after { content: ""; flex-basis: 100%; order: -1; }
  .work-side { display: contents; }
  .work-side .work-chip { --from: 0 !important; transform: translateY(-.75rem) scale(.8); }
  /* shut, the chip row takes no space (it used to leave a blank band under the button); open, it drops in below with its gap */
  .work-side .work-chip { height: 0; padding-block: 0; border-block-width: 0; margin-top: 0; overflow: hidden; }
  .work-pop.is-open .work-chip, .work-pop:hover .work-chip, .work-pop:focus-within .work-chip { height: auto; padding-block: .7rem; border-block-width: 1px; margin-top: .5rem; }
}
/* ---------- icon sprite (chat-icons.njk) ---------- */
.chat-icons { position: absolute; width: 0; height: 0; }