/* Client quote bands: full-bleed section breaks between page sections, on any page that loads this file
   and js/quotes.js (see the css and js lists passed to Main::head in the root <slug>.php files). Place a band outside the page's .container
   wrappers, between two sections. Nothing here is scoped to one page. One family, three compositions:
   qb--start (mark hangs left of the text), qb--end (text set in the right two thirds, the mark leads
   a hairline), qb--center (the mark sits on a full-width rule).
   Static and fully visible by default. js/quotes.js adds .qb-js when motion is allowed and .qb-in when
   the band is in view; every hidden start state below needs both .qb-js and no-preference motion. */
.qb {
  --qb-pad: 88px;
  --qb-mark: 52px;
  --qb-fs: clamp(1.375rem, 1.06rem + 1.3vw, 2.125rem);
  --qb-measure: 31ch;
  --qb-ghost: 300px;
  --qb-lead: 250ms;
  --qb-step: 22ms;
  --qb-end: 1.5s;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--qb-pad);
  background: var(--bg);
  color: var(--ink);
  view-timeline: --qb block;
}
@media (min-width: 768px) {
  .qb { --qb-pad: 120px; --qb-mark: 64px; --qb-ghost: 460px; }
}
@media (min-width: 1100px) {
  .qb { --qb-pad: 144px; --qb-mark: 80px; --qb-ghost: 600px; }
}
.qb--center { --qb-fs: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); --qb-measure: 32ch; }
.qb--center .qb-text p { text-wrap: balance; }

.qb-fig { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
.qb-head { display: flex; align-items: center; gap: var(--s-4); }
.qb-head::before,
.qb-head::after { content: ""; flex: 1 1 0; height: 1px; background: var(--hairline); }
.qb-head::before { display: none; }
.qb-mark { flex: none; width: var(--qb-mark); height: auto; overflow: visible; fill: var(--teal); }
.qb-mark path { stroke: var(--teal); stroke-width: 0.8; stroke-linejoin: round; }
.qb-text p {
  max-width: var(--qb-measure);
  font-size: var(--qb-fs);
  line-height: 1.3;
  font-weight: 450;
  letter-spacing: -0.016em;
  color: var(--ink);
  text-wrap: pretty;
}
.qb-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  overflow-x: clip;
}
.qb-who::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--teal); }
.qb-name { font-weight: 600; color: var(--ink); }
/* The dot before the company sits in the gap, so a company that wraps to its own line loses it to the clip. */
.qb-co { position: relative; color: var(--ink-2); }
.qb-co::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--s-5) / -2 - 2px);
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 1px;
  background: var(--teal);
}

/* The oversized outline mark behind each band; it drifts with the scroll where the browser supports it. */
.qb-ghost {
  position: absolute;
  z-index: -1;
  top: 50%;
  width: var(--qb-ghost);
  height: auto;
  translate: 0 -50%;
  fill: color-mix(in srgb, var(--teal) 3%, transparent);
  stroke: color-mix(in srgb, var(--teal) 24%, transparent);
  pointer-events: none;
}
.qb-ghost path { stroke-width: 1; vector-effect: non-scaling-stroke; }
.qb--start .qb-ghost { right: max(-18vw, calc(50% - 780px)); }
.qb--end .qb-ghost { left: max(-18vw, calc(50% - 820px)); width: calc(var(--qb-ghost) * 0.8); }
.qb--center .qb-ghost { left: 50%; width: calc(var(--qb-ghost) * 1.25); translate: -50% -50%; fill: color-mix(in srgb, var(--teal) 4%, transparent); stroke: none; }

/* Center: the mark sits on a rule that spans the container; text and attribution are centred. */
.qb--center .qb-fig { justify-items: center; text-align: center; }
.qb--center .qb-head { justify-self: stretch; }
.qb--center .qb-head::before { display: block; }
.qb--center .qb-who { justify-content: center; }
.qb--center .qb-who::after { content: ""; flex: none; width: 32px; height: 1px; background: var(--teal); }

/* qb--rule-after: close the band with a hairline across the container, for a spot where the next section
   sits on the same ground as the band and draws no top rule of its own (company, before "Our own operation"). */
.qb--rule-after::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  height: 1px;
  background: var(--hairline);
}

/* Below the 12-column layout the ghost loses its outline, so no line crosses the text. */
@media (max-width: 1099px) {
  .qb-ghost { fill: color-mix(in srgb, var(--teal) 4%, transparent); stroke: none; }
}
@media (max-width: 767px) {
  .qb-ghost { top: calc(var(--qb-pad) * 0.55); translate: 0 0; }
  .qb--center .qb-ghost { translate: -50% 0; }
  .qb-who { display: grid; gap: 2px; justify-items: start; }
  .qb-who::before { margin-bottom: var(--s-3); }
  .qb-co::before { display: none; }
  .qb--center .qb-who { justify-items: center; }
  .qb--center .qb-who::after { display: none; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .qb--start .qb-fig { grid-template-columns: var(--qb-mark) minmax(0, 1fr); column-gap: var(--s-6); }
  .qb--start .qb-head { grid-row: 1 / span 2; align-self: start; }
  .qb--end .qb-fig { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .qb--end .qb-fig > * { grid-column: 2; }
}
@media (min-width: 1100px) {
  .qb--start .qb-fig,
  .qb--end .qb-fig { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); }
  .qb--start .qb-head { grid-column: 1 / span 2; grid-row: 1 / span 2; align-self: start; justify-self: end; }
  .qb--start .qb-text { grid-column: 3 / span 8; }
  .qb--start .qb-who { grid-column: 3 / -1; }
  .qb--end .qb-fig > * { grid-column: 5 / -1; }
  /* Keep the outlined ghost to the right of the text column (which ends near 50% + 270px) and let it bleed off the edge. */
  .qb--start .qb-ghost { right: auto; left: calc(50% + 330px); }
}
@media (min-width: 768px) {
  .qb--start .qb-head { margin-top: calc(var(--qb-fs) * 0.3); }
  .qb--start .qb-head::after { display: none; }
}

@keyframes qb-drift {
  from { transform: translateY(14%) rotate(-4deg); }
  to { transform: translateY(-14%) rotate(3deg); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .qb-ghost { animation: qb-drift linear both; animation-timeline: --qb; }
  }
}

/* Entrance, only once js/quotes.js has armed the band: the mark draws, the rules run out from it,
   the words rise in reading order, then the attribution follows. Screen only, so print shows the quote. */
@media screen and (prefers-reduced-motion: no-preference) {
  .qb-js .qb-mark {
    scale: 0.72;
    rotate: -6deg;
    transform-origin: 30% 70%;
    transition: scale 1.1s cubic-bezier(0.16, 1, 0.3, 1), rotate 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .qb-js .qb-mark path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.65, 0, 0.35, 1), fill-opacity 0.6s ease-out 0.8s;
  }
  .qb-js .qb-head::before,
  .qb-js .qb-head::after { scale: 0 1; transition: scale 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
  .qb-js .qb-head::before { transform-origin: 100% 50%; }
  .qb-js .qb-head::after { transform-origin: 0 50%; }
  .qb-js .qb-w {
    position: relative;
    top: 0.5em;
    opacity: 0;
    transition: opacity 0.7s ease-out, top 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--qb-lead) + var(--i, 0) * var(--qb-step));
  }
  .qb-js .qb-who {
    opacity: 0;
    translate: 0 10px;
    transition: opacity 0.7s ease-out var(--qb-end), translate 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--qb-end);
  }
  .qb-js .qb-who::before,
  .qb-js .qb-who::after { scale: 0 1; transition: scale 0.9s cubic-bezier(0.65, 0, 0.35, 1) var(--qb-end); }
  .qb-js .qb-who::before { transform-origin: 100% 50%; }
  .qb-js .qb-who::after { transform-origin: 0 50%; }
  .qb-js.qb-in .qb-mark { scale: 1; rotate: 0deg; }
  .qb-js.qb-in .qb-mark path { stroke-dashoffset: 0; fill-opacity: 1; }
  .qb-js.qb-in .qb-head::before,
  .qb-js.qb-in .qb-head::after,
  .qb-js.qb-in .qb-who::before,
  .qb-js.qb-in .qb-who::after { scale: 1 1; }
  .qb-js.qb-in .qb-w { top: 0; opacity: 1; }
  .qb-js.qb-in .qb-who { opacity: 1; translate: 0 0; }
}