/* Two distinct moments of the workflow, floating over the photographic backdrop. */
.workflow-chapter .chapter-visual {
  height: auto;
  min-height: 480px;
  overflow: visible;
  isolation: isolate;
}

.workflow-chapter .chapter-image > img {
  transform: scale(1.03);
  filter: saturate(.85) brightness(.9);
}

.workflow-chapter .chapter-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgb(var(--ink-rgb) / .14), transparent 50%, rgb(var(--ink-rgb) / .16));
  pointer-events: none;
}

.workflow-chapter .workflow-dialogue {
  --overlay-padding: 28px;
  --card-overhang: 26px;
  position: relative;
  z-index: 2;
  display: grid;
  gap: 36px;
  padding: var(--overlay-padding);
}

.workflow-request {
  position: relative;
  left: calc(-1 * (var(--overlay-padding) + var(--card-overhang)));
  justify-self: start;
  width: min(78%, 350px);
  padding: 18px 20px 16px;
  border: 0;
  border-radius: 22px 22px 22px 7px;
  background: rgb(var(--blue-rgb) / .6);
  color: var(--on-dark);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 18px 38px -20px rgb(var(--ink-rgb) / .36);
}

.workflow-request > p {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.request-context {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--on-dark-muted);
  font-size: 10px;
  line-height: 1.4;
}

.request-context svg { width: 13px; height: 13px; flex: none; }

.workflow-result {
  position: relative;
  right: calc(-1 * (var(--overlay-padding) + var(--card-overhang)));
  justify-self: end;
  width: min(100%, 350px);
  padding: 22px 24px 18px;
  border: 0;
  border-radius: 25px 25px 7px 25px;
  background: rgb(var(--surface-rgb) / .93);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  color: var(--ink);
  box-shadow: 0 22px 42px -22px rgb(var(--ink-rgb) / .3);
}

.result-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.result-complete {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: none;
  border-radius: 50%;
  color: var(--status-success);
  background: var(--status-success-soft);
}

.result-complete svg { display: block; width: 17px; height: 17px; }

.workflow-result .result-title {
  margin: 9px 0 19px;
  font-family: Manrope, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.035em;
}

.result-deliverables {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-deliverables li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 9px;
  min-height: 36px;
  padding: 7px 0;
  border-top: 1px solid rgb(var(--ink-rgb) / .1);
}

.result-row-icon { display: flex; color: var(--muted); }
.result-row-icon svg { display: block; width: 18px; height: 18px; }
.result-row-name { font-size: 12px; line-height: 1.3; letter-spacing: -.01em; }
.result-row-status { font-size: 10px; line-height: 1.3; white-space: nowrap; }
.status-done { color: var(--status-success); }
.status-routed { color: var(--brand-blue); }
.status-attention { color: var(--status-attention); }

.result-impact {
  margin: 13px 0 0;
  padding-top: 12px;
  padding-left: 20px;
  border-top: 1px solid rgb(var(--ink-rgb) / .16);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
}

.workflow-mascot {
  position: absolute;
  left: -38px;
  bottom: -18px;
  width: 76px;
  height: 76px;
  pointer-events: none;
  transform: rotate(-8deg);
  transform-origin: 70% 85%;
  filter: drop-shadow(0 9px 8px rgb(var(--ink-rgb) / .18));
}

.workflow-mascot svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Reveal each bubble when it reaches the viewport, then settle its contents. */
.motion-enabled .workflow-request,
.motion-enabled .workflow-result {
  opacity: 0;
  transition: opacity .75s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}

.motion-enabled .workflow-request {
  transform: translate3d(-16px, 22px, 0) rotate(-2deg) scale(.97);
  transition-delay: 80ms;
}

.motion-enabled .workflow-result {
  transform: translate3d(16px, 30px, 0) rotate(2deg) scale(.96);
  transition-delay: 160ms;
}

.motion-enabled .workflow-request.visible,
.motion-enabled .workflow-result.visible { opacity: 1; transform: none; }

.motion-enabled .workflow-result .result-deliverables li {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(260ms + var(--result-row, 0) * 80ms);
}

.result-deliverables li:nth-child(2) { --result-row: 1; }
.result-deliverables li:nth-child(3) { --result-row: 2; }
.motion-enabled .workflow-result.visible .result-deliverables li { opacity: 1; transform: none; }

.motion-enabled .workflow-mascot {
  opacity: 0;
  transform: translate3d(5px, 16px, 0) rotate(-20deg) scale(.65);
  transition: opacity .45s ease, transform .85s cubic-bezier(.2, 1.3, .35, 1);
  transition-delay: 420ms;
}

.motion-enabled .workflow-result.visible .workflow-mascot { opacity: 1; transform: rotate(-8deg); }

.workflow-chapter .chapter-copy { padding-top: 38px; }

@media (min-width: 1101px) {
  .workflow-chapter .workflow-dialogue { --overlay-padding: 30px; --card-overhang: 30px; gap: 42px; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .workflow-chapter .workflow-dialogue { --overlay-padding: 22px; --card-overhang: 18px; gap: 30px; }
  .workflow-request { width: 91%; }
  .workflow-result { padding: 20px 21px 18px; }
  .workflow-result .result-title { font-size: 26px; }
}

@media (max-width: 760px) {
  .workflow-chapter .workflow-dialogue { --overlay-padding: 20px; --card-overhang: 10px; gap: 42px; }
  .workflow-request { width: 91%; padding: 16px 18px 14px; }
  .workflow-request > p { font-size: 13px; }
  .workflow-result { width: min(95%, 350px); padding: 20px 20px 17px; }
  .workflow-result .result-title { font-size: 26px; }
  .result-deliverables li { column-gap: 6px; grid-template-columns: 20px minmax(0, 1fr) auto; }
  .result-row-name { font-size: 11px; }
  .result-row-status { font-size: 9px; }
  .result-impact { font-size: 10px; }
  .workflow-mascot { width: 64px; height: 64px; left: -30px; bottom: -14px; }
  .motion-enabled .workflow-request { transform: translate3d(0, 18px, 0) scale(.97); }
  .motion-enabled .workflow-result { transform: translate3d(0, 24px, 0) scale(.96); }
  .workflow-chapter .chapter-copy { padding-top: 30px; }
}

@media (max-width: 380px) {
  .workflow-chapter .workflow-dialogue { --overlay-padding: 16px; --card-overhang: 8px; gap: 34px; }
  .workflow-request { width: 94%; padding: 15px 16px 13px; }
  .workflow-result { width: 98%; padding: 19px 17px 16px; }
  .workflow-result .result-title { font-size: 24px; }
}

.motion-paused .workflow-request,
.motion-paused .workflow-result,
.motion-paused .workflow-result .result-deliverables li,
.motion-paused .workflow-mascot { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .workflow-request,
  .motion-enabled .workflow-result,
  .motion-enabled .workflow-result .result-deliverables li,
  .motion-enabled .workflow-mascot { opacity: 1; transform: none; transition: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .workflow-request { background: var(--brand-blue); }
  .workflow-result { background: rgb(var(--surface-rgb) / .98); }
}

/* The supplied crop determines the composition, without an additional zoom. */
#flow-launch .chapter-image > img { transform: none; object-position: 50% 50%; }