/* Each doorway opens into an instrument-sized demonstration of that stage. */
.process-story {
  --story-wine: #800020;
  --story-teal: #347a80;
  width: min(920px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  margin: auto;
  border: 1px solid #d7c7b4;
  border-radius: 5px;
  background: #fcfaf7;
  color: #342821;
  box-shadow: 0 30px 100px #241a2040;
  overflow: auto;
  overscroll-behavior: contain;
}
.process-story::backdrop { background: #251b2580; backdrop-filter: blur(7px); }
.process-story[open] { animation: story-entrance .45s ease both; }
.story-layout { display: grid; grid-template-columns: .95fr 1.15fr; min-height: 540px; }
.story-close {
  position: absolute; z-index: 2; right: 12px; top: 12px;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid #cdbcaa; border-radius: 50%; background: #fcfaf7e8;
  color: #800020; font: 300 30px/1 system-ui, sans-serif; cursor: pointer;
}
.story-theatre {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 0 38px; background: linear-gradient(135deg, #f4ede2, #eee6da 65%, #e4d9c8);
  border-right: 1px solid #e0d5c6; overflow: hidden;
}
#story-illustration svg { display: block; width: 100%; height: auto; overflow: visible; }
.story-scene-caption { padding: 0 20px; text-align: center; font: 400 10px/1.5 var(--mono, monospace); letter-spacing: .03em; color: #736558; }
.story-content { padding: 56px 38px 30px; }
.story-eyebrow { margin: 0 0 20px; font: 500 11px/1.4 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--story-wine); }
.process-story h2 { font: 500 clamp(1.9rem, 3vw, 2.5rem)/1.12 "Source Serif 4", Georgia, serif; letter-spacing: -.045em; margin: 0 0 18px; color: #342821; }
.story-intro { font: 400 14px/1.75 var(--sans, sans-serif); margin: 0 0 26px; color: #706158; }
.story-beats { display: flex; flex-direction: column; border-top: 1px solid #dfd4c9; }
.story-beats button {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  border: 0; border-bottom: 1px solid #dfd4c9; background: transparent;
  padding: 10px 4px; text-align: left; font: 500 13px/1.5 var(--sans, sans-serif);
  color: #79685b; cursor: pointer; transition: color .3s, background .3s;
}
.story-beats button::before { content: ''; flex: 0 0 6px; height: 6px; border: 1px solid #b79c71; transform: rotate(45deg); }
.story-beats button[aria-pressed="true"] { color: var(--story-wine); background: #80002005; }
.story-beats button[aria-pressed="true"]::before { background: var(--story-wine); border-color: var(--story-wine); }
.story-beat-copy { min-height: 5.1em; margin: 14px 0 16px; font: 400 13px/1.7 var(--sans, sans-serif); color: #706158; }
.story-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.story-actions button { min-height: 44px; border: 0; padding: 10px 0; cursor: pointer; font: 600 12px/1.5 var(--sans, sans-serif); background: transparent; }
.story-replay { color: #736558; }
.story-next { color: var(--story-wine); }
.story-actions button:hover, .story-beats button:hover { color: var(--story-teal); }

/* A finite sequence runs once. Each step can also be selected directly. */
.scene-object { transform-box: view-box; transform-origin: 205px 300px; transition: transform 1.3s cubic-bezier(.2,.7,.2,1), opacity .9s ease; }
.build-workflows path:last-child { fill: none; }
.magnifier { animation: lens-emerge 1.6s cubic-bezier(.2,.7,.2,1) backwards; }
[data-stage="discover"][data-beat="1"] .magnifier { transform: translate(-44px, 39px) scale(1.12); }
[data-stage="discover"][data-beat="2"] .magnifier { transform: translate(12px, 0) scale(1.16); }
.discovery-marks { opacity: 0; }
[data-beat="2"] .discovery-marks { opacity: 1; }
.build-base { animation: foundation-rise 1.2s ease both; }
.build-context, .build-workflows { opacity: 0; transform: translateY(-48px); }
[data-beat="1"] .build-context, [data-beat="2"] .build-context,
[data-beat="2"] .build-workflows { opacity: 1; transform: translateY(0); }
.rocket { transform-origin: 205px 230px; }
.rocket-flame, .launch-smoke, .launch-result { opacity: 0; transition: opacity .7s; }
[data-beat="1"] .rocket-flame, [data-beat="1"] .launch-smoke { opacity: 1; }
[data-beat="1"] .rocket { transform: translateY(-35px); }
[data-beat="2"] .rocket { transform: translateY(-280px) scale(.6); opacity: 0; }
[data-beat="2"] .launch-smoke { opacity: .45; transform: scale(1.3); }
[data-beat="2"] .launch-result { opacity: 1; transition-delay: .5s; }
.connection-two, .connection-three { stroke: #b79a64; stroke-dasharray: 180; stroke-dashoffset: 180; transition: stroke-dashoffset 1.2s ease; }
.node-two, .node-three { opacity: .12; transform: translateY(12px); }
[data-beat="1"] .connection-two, [data-beat="2"] .connection-two,
[data-beat="2"] .connection-three { stroke-dashoffset: 0; }
[data-beat="1"] .node-two, [data-beat="2"] .node-two,
[data-beat="2"] .node-three { opacity: 1; transform: translateY(0); }
.machine-dial { transform-origin: 196px 290px; transform: rotate(-50deg); }
[data-beat="1"] .machine-dial { transform: rotate(0deg); }
[data-beat="2"] .machine-dial { transform: rotate(50deg); }
.machine-upgrade { opacity: 0; transform: translateY(-34px); }
[data-beat="2"] .machine-upgrade { opacity: 1; transform: translateY(0); }
.machine-polish { transition: opacity .8s, transform 1.5s; }
[data-beat="1"] .machine-polish { opacity: .38; transform: translateX(20px); }
.machine-status { transition: fill .8s; }
[data-beat="1"] .machine-status, [data-beat="2"] .machine-status { fill: #76b9b2; }
@keyframes lens-emerge { from { opacity: 0; transform: translateY(30px) scale(.6); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes foundation-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes story-entrance { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .process-story { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .story-layout { grid-template-columns: 1fr; }
  .story-theatre { padding: 4px 0 12px; border-right: 0; border-bottom: 1px solid #e0d5c6; }
  #story-illustration { width: min(100%, 240px); margin-inline: auto; }
  .story-scene-caption { font-size: 9px; }
  .story-content { padding: 24px; }
  .story-eyebrow { margin-bottom: 12px; }
  .process-story h2 { font-size: 1.9rem; }
  .story-intro { margin-bottom: 18px; }
  .story-beat-copy { min-height: 5.1em; }
  .story-close { position: sticky; float: right; margin: 10px 10px -54px auto; top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-story[open], .process-story * { animation: none !important; transition: none !important; }
}