/* One idea becomes a real site. A single scene, three calm chapters. */
.process-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  margin-top: clamp(56px, 6vw, 88px);
}
.process-scene {
  position: relative;
  aspect-ratio: 1.18;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  background: #eff1f8;
  container-type: inline-size;
}
.story-art { position: absolute; inset: 0; }
.story-conversation { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--blue, #233ad3); overflow: visible; opacity: 1; transform: none; transition: opacity 350ms ease, transform 700ms cubic-bezier(.22,1,.36,1); }
.story-ground { fill: #dfe4f2; opacity: .6; }
.story-person { transform-box: fill-box; transform-origin: 50% 94%; }
.story-person-head { fill: currentColor; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.story-person-shoulders { fill: #cbd4ff; }
.story-person-ear { stroke: #8fa4ff; stroke-width: 2.5; stroke-linecap: round; }
.story-person-eye { fill: #fff; transform-box: fill-box; transform-origin: center; }
.story-person-mouth { stroke: #fff; stroke-width: 3.5; stroke-linecap: round; transform-box: fill-box; transform-origin: 100% 50%; }
.story-person--right .story-person-head { fill: #fff; }
.story-person--right .story-person-shoulders { fill: #dce2f3; }
.story-person--right .story-person-ear { stroke: #acb8e6; }
.story-person--right .story-person-eye { fill: currentColor; }
.story-person--right .story-person-mouth { stroke: currentColor; }
.story-thought { transform-box: fill-box; transform-origin: center; }
.story-thought-bubble { fill: #fff; stroke: #c4cdef; stroke-width: 2; stroke-linejoin: round; }
.story-thought-symbol { fill: currentColor; }
.story-thought--page .story-thought-bubble { fill: currentColor; stroke: currentColor; }
.story-thought-window { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.story-window {
  position: absolute;
  top: 24%;
  left: 10%;
  width: 80%;
  aspect-ratio: 600 / 360;
  border: 5px solid #fff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 36px -20px #24345d38;
  opacity: 0;
  transform: translateY(7%) rotate(-3deg) scale(.92);
  overflow: hidden;
  transition: opacity 450ms ease, transform 800ms cubic-bezier(.22,1,.36,1), box-shadow 800ms ease;
}
.story-blueprint, .story-result { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-blueprint {
  opacity: 0;
  stroke: #6676c9;
  stroke-width: 1.5;
  transform: translateY(8%);
  transition: opacity 500ms ease, transform 800ms cubic-bezier(.22,1,.36,1);
}
.story-blueprint rect { fill: #f4f5fc; }
.story-blueprint rect:first-child { fill: #fff; }
.story-result {
  display: block;
  object-fit: cover;
  opacity: 0;
  clip-path: circle(0% at 72% 50%);
  transition: clip-path 950ms cubic-bezier(.22,1,.36,1), opacity 420ms ease;
}
.story-phone {
  position: absolute;
  z-index: 3;
  width: 22%;
  aspect-ratio: 390 / 844;
  right: 5%;
  bottom: 12%;
  border: clamp(3px, .8cqw, 5px) solid #fff;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 32px -18px #13213c70;
  overflow: hidden;
  opacity: 0;
  transform: translate(22%, 35%) rotate(12deg);
  transition: opacity 500ms ease, transform 950ms cubic-bezier(.2,1.12,.35,1);
}
.story-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.process-scene:is([data-phase="design"], [data-phase="live"]) .story-window { opacity: 1; transform: rotate(0) scale(1); }
.process-scene:is([data-phase="design"], [data-phase="live"]) .story-conversation { opacity: 0; transform: translateY(3%) scale(.96); }
.process-scene[data-phase="design"] .story-blueprint { opacity: 1; transform: none; }
.process-scene[data-phase="live"] .story-result { opacity: 1; clip-path: circle(150% at 72% 50%); }
.process-scene[data-phase="live"] .story-phone { opacity: 1; transform: rotate(4deg); transition-delay: 100ms; }
.process-section--story .process-steps { grid-template-columns: 1fr; gap: 38px; }
.process-section--story .process-step { display: block; }
.process-section--story .process-step::after { display: none; }
.process-section--story .process-step h3 { margin: 0 0 8px; font-size: clamp(23px, 2.15vw, 30px); }
.process-section--story .process-play {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: none;
  min-height: 48px;
  border-radius: 8px;
  font: inherit;
  line-height: 1.2;
  letter-spacing: inherit;
  text-align: left;
  color: inherit;
  transition: color 250ms ease, transform 250ms ease;
}
.process-section--story .process-illustration { flex: 0 0 60px; width: 60px; height: auto; margin: 0; opacity: .65; transition: opacity 300ms ease; }
.process-section--story .process-step[data-story-active="true"] .process-play { color: var(--blue, #233ad3); }
.process-section--story .process-step[data-story-active="true"] .process-illustration { opacity: 1; }
.process-section--story .process-step p { max-width: 30ch; margin-left: 78px; font-size: 15px; line-height: 1.65; }
@media (hover: hover) {
  .process-section--story .process-play:hover { color: var(--blue, #233ad3); }
  .process-section--story .process-play:hover .process-illustration { opacity: 1; }
}
@media (max-width: 900px) {
  .process-workbench { gap: 36px; grid-template-columns: minmax(0, 1.1fr) minmax(250px, 1fr); }
  .process-section--story .process-step p { margin-left: 66px; font-size: 14px; }
  .process-section--story .process-illustration { flex-basis: 50px; width: 50px; }
  .process-section--story .process-play { gap: 16px; }
  .process-section--story .process-steps { gap: 30px; }
}
@media (max-width: 700px) {
  .process-workbench { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .process-scene { aspect-ratio: 1.12; border-radius: 20px; }
  .process-section--story .process-steps { gap: 40px; }
  .process-section--story .process-step h3 { font-size: 25px; margin-bottom: 6px; }
  .process-section--story .process-step p { max-width: 33ch; font-size: 15px; }
  .story-window { border-width: 3px; border-radius: 10px; }
  .story-phone { border-radius: 11px; }
  /* Keep the scene and its controls together on a phone. Without JS, every
     explanation keeps its ordinary readable place in the page. */
  .process-workbench:has([data-process-story-ready]) .process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
  .process-workbench:has([data-process-story-ready]) .process-step { display: contents; }
  .process-workbench:has([data-process-story-ready]) .process-step h3 { grid-row: 1; font-size: 19px; margin: 0; }
  .process-workbench:has([data-process-story-ready]) .process-play { flex-direction: column; gap: 9px; padding: 8px 0; text-align: center; }
  .process-workbench:has([data-process-story-ready]) .process-illustration { flex-basis: auto; width: 48px; }
  .process-workbench:has([data-process-story-ready]) .process-step p { grid-column: 1 / -1; grid-row: 2; min-height: 5em; max-width: 33ch; margin: 0 auto; text-align: center; }
  .process-workbench:has([data-process-story-ready]) .process-step[data-story-active="false"] p { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .process-section--story *, .process-section--story *::before, .process-section--story *::after { transition: none !important; animation: none !important; }
}