/* OE – MCP Workflow Animation
 *
 * Base styles describe the FINAL state (all steps done, board pack showing).
 * The 20s loop is only applied under prefers-reduced-motion: no-preference,
 * so reduced motion simply shows the final state with no movement.
 */

.oe-block-mcp-workflow-animation {
  --oe-mcp-workflow-animation-accent: var(--oe-color-sky-blue);
  --oe-mcp-workflow-animation-duration: 20s;
  --oe-mcp-workflow-animation-border: var(--oe-color-secondary-muted);
  --oe-mcp-workflow-animation-line: color-mix(in srgb, var(--oe-color-cool-grey) 20%, var(--oe-color-primary-4));
  --oe-mcp-workflow-animation-shadow: 0 var(--oe-spacing-5xsmall) var(--oe-spacing-3xsmall) color-mix(in srgb, var(--oe-color-heritage-blue) 6%, transparent);
  --oe-mcp-workflow-animation-royal: var(--oe-color-secondary-8);
  --oe-mcp-workflow-animation-gold: var(--oe-color-secondary-6);

  container: oe-mcp-workflow-animation / inline-size;
  position: relative;
  box-sizing: border-box;
  max-width: var(--oe-width-fixed-100);
  color: var(--oe-color-cool-grey);
}

.oe-block-mcp-workflow-animation *,
.oe-block-mcp-workflow-animation *::before,
.oe-block-mcp-workflow-animation *::after {
  box-sizing: border-box;
}

/* Accent options */
.oe-block-mcp-workflow-animation--accent-sky {
  --oe-mcp-workflow-animation-accent: var(--oe-color-sky-blue);
}

.oe-block-mcp-workflow-animation--accent-navy {
  --oe-mcp-workflow-animation-accent: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation--accent-gold {
  --oe-mcp-workflow-animation-accent: var(--oe-color-secondary-6);
}

/* Resets: two classes deep so theme and editor element styles don't win */
.oe-block-mcp-workflow-animation p,
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__quote,
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__steps,
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__checklist,
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__rows {
  margin: 0;
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__steps,
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__checklist,
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__rows {
  padding: 0;
  list-style: none;
}

/* ---------- Layout ---------- */

.oe-block-mcp-workflow-animation__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--oe-spacing-large);
}

/* Tablet and mobile (or a narrow column): stack the workflow above the monitor */
@container oe-mcp-workflow-animation (max-width: 60rem) {
  .oe-block-mcp-workflow-animation__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Icons ---------- */

.oe-block-mcp-workflow-animation__icon {
  display: block;
  flex-shrink: 0;
  width: var(--oe-spacing-base);
  height: var(--oe-spacing-base);
}

.oe-block-mcp-workflow-animation__icon--tile {
  width: var(--oe-sizing-medium);
  height: var(--oe-sizing-medium);
}

.oe-block-mcp-workflow-animation__icon--accent {
  color: var(--oe-color-sky-blue);
}

.oe-block-mcp-workflow-animation__icon--royal {
  color: var(--oe-mcp-workflow-animation-royal);
}

.oe-block-mcp-workflow-animation__icon--toast {
  color: var(--oe-color-primary);
}

/* ---------- Left: workflow panel ---------- */

.oe-block-mcp-workflow-animation__workflow {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
  border-radius: var(--oe-border-radius-large);
  background-color: var(--oe-color-muted);
  background-image: radial-gradient(color-mix(in srgb, var(--oe-color-cool-grey) 15%, transparent) var(--oe-spacing-5xsmall), transparent var(--oe-spacing-5xsmall));
  background-size: var(--oe-spacing-base) var(--oe-spacing-base);
}

.oe-block-mcp-workflow-animation__workflow-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oe-spacing-xsmall) var(--oe-spacing-small);
  min-height: var(--oe-sizing-xlarge);
  padding: var(--oe-spacing-xsmall) var(--oe-spacing-base);
  border-bottom: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
  background: var(--oe-color-primary-4);
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__workflow-name {
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-heritage-blue);
  overflow-wrap: anywhere;
}

.oe-block-mcp-workflow-animation__workflow-role {
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-neutral);
}

.oe-block-mcp-workflow-animation__running {
  display: flex;
  align-items: center;
  gap: var(--oe-spacing-2xsmall);
  margin-left: auto;
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-cool-grey);
}

.oe-block-mcp-workflow-animation__live {
  display: block;
  width: var(--oe-spacing-xsmall);
  height: var(--oe-spacing-xsmall);
  border-radius: var(--oe-border-radius-badge);
  background: var(--oe-color-sky-blue);
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__steps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  padding: var(--oe-spacing-medium);
}

.oe-block-mcp-workflow-animation__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

/* Per-step colours: icon tile and highlight glow */
.oe-block-mcp-workflow-animation__step--1 {
  --oe-mcp-workflow-animation-tile: var(--oe-color-heritage-blue);
  --oe-mcp-workflow-animation-glow: var(--oe-color-sky-blue);
}

.oe-block-mcp-workflow-animation__step--2 {
  --oe-mcp-workflow-animation-tile: var(--oe-mcp-workflow-animation-royal);
  --oe-mcp-workflow-animation-glow: var(--oe-mcp-workflow-animation-royal);
}

.oe-block-mcp-workflow-animation__step--3 {
  --oe-mcp-workflow-animation-tile: var(--oe-color-sky-blue);
  --oe-mcp-workflow-animation-glow: var(--oe-color-sky-blue);
}

.oe-block-mcp-workflow-animation__step--4 {
  --oe-mcp-workflow-animation-tile: var(--oe-color-cool-grey);
  --oe-mcp-workflow-animation-glow: var(--oe-color-cool-grey);
}

.oe-block-mcp-workflow-animation__step--5 {
  --oe-mcp-workflow-animation-tile: var(--oe-mcp-workflow-animation-gold);
  --oe-mcp-workflow-animation-glow: var(--oe-mcp-workflow-animation-gold);
}

.oe-block-mcp-workflow-animation__card {
  --oe-mcp-workflow-animation-done: color-mix(in srgb, var(--oe-mcp-workflow-animation-glow) 30%, var(--oe-color-secondary-muted));
  --oe-mcp-workflow-animation-active: 0 0 0 var(--oe-spacing-3xsmall) color-mix(in srgb, var(--oe-mcp-workflow-animation-glow) 16%, transparent), 0 var(--oe-spacing-2xsmall) var(--oe-spacing-small) color-mix(in srgb, var(--oe-mcp-workflow-animation-glow) 14%, transparent);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oe-spacing-small);
  width: var(--oe-width-fixed-100);
  padding: var(--oe-spacing-small) var(--oe-spacing-base);
  border: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-done);
  border-radius: var(--oe-border-radius-base);
  background: var(--oe-color-primary-4);
  box-shadow: var(--oe-mcp-workflow-animation-shadow);
}

.oe-block-mcp-workflow-animation__tile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--oe-sizing-xlarge);
  height: var(--oe-sizing-xlarge);
  border-radius: var(--oe-border-radius-base);
  background: var(--oe-mcp-workflow-animation-tile);
  color: var(--oe-color-primary-4);
}

.oe-block-mcp-workflow-animation__step-text {
  display: flex;
  flex: 1 1 var(--oe-width-fixed-2xsmall);
  flex-direction: column;
  gap: var(--oe-spacing-3xsmall);
  min-width: 0;
  overflow-wrap: anywhere;
}

.oe-block-mcp-workflow-animation__step-title {
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__step-subtitle {
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-cool-grey);
}

.oe-block-mcp-workflow-animation__status {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--oe-spacing-2xsmall);
  margin-left: auto;
  padding: var(--oe-spacing-2xsmall) var(--oe-spacing-xsmall);
  border-radius: var(--oe-border-radius-badge);
  background: var(--oe-color-primary-5);
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-medium);
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__status-dot {
  display: block;
  width: var(--oe-spacing-xsmall);
  height: var(--oe-spacing-xsmall);
  border-radius: var(--oe-border-radius-badge);
  background: var(--oe-color-sky-blue);
}

/* Connectors between cards, with the travelling dot */
.oe-block-mcp-workflow-animation__connector {
  position: relative;
  display: block;
  width: var(--oe-spacing-3xsmall);
  height: var(--oe-spacing-large);
  background: var(--oe-mcp-workflow-animation-line);
}

.oe-block-mcp-workflow-animation__pulse {
  position: absolute;
  top: calc(100% - var(--oe-spacing-xsmall) / 2);
  left: 50%;
  width: var(--oe-spacing-xsmall);
  height: var(--oe-spacing-xsmall);
  margin-left: calc(var(--oe-spacing-xsmall) / -2);
  border-radius: var(--oe-border-radius-badge);
  background: var(--oe-mcp-workflow-animation-accent);
  opacity: 0;
}

.oe-block-mcp-workflow-animation__connector--2 .oe-block-mcp-workflow-animation__pulse {
  background: var(--oe-mcp-workflow-animation-royal);
}

.oe-block-mcp-workflow-animation__connector--4 .oe-block-mcp-workflow-animation__pulse {
  background: var(--oe-mcp-workflow-animation-gold);
}

/* ---------- Right: monitor ---------- */

/* All views share one grid cell, so the monitor is as tall as the tallest view */
.oe-block-mcp-workflow-animation__monitor {
  container: oe-mcp-workflow-animation-monitor / inline-size;
  display: grid;
  min-width: 0;
}

.oe-block-mcp-workflow-animation__view {
  position: relative;
  isolation: isolate;
  display: flex;
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
}

.oe-block-mcp-workflow-animation__view--5 {
  opacity: 1;
}

.oe-block-mcp-workflow-animation__screen {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
  border-radius: var(--oe-border-radius-large);
  background: var(--oe-color-primary-4);
  box-shadow: 0 var(--oe-spacing-small) var(--oe-spacing-large) color-mix(in srgb, var(--oe-color-heritage-blue) 9%, transparent);
}

/* Second sheet peeking out behind the board pack. The pack is inset by the
   same amount, so the sheet's outer edges line up with the other views and
   with the workflow panel. */
.oe-block-mcp-workflow-animation__view--5 .oe-block-mcp-workflow-animation__screen {
  margin: 0 var(--oe-spacing-xsmall) var(--oe-spacing-xsmall) 0;
}

.oe-block-mcp-workflow-animation__sheet {
  position: absolute;
  inset: var(--oe-spacing-xsmall) 0 0 var(--oe-spacing-xsmall);
  z-index: -1;
  border: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
  border-radius: var(--oe-border-radius-large);
  background: var(--oe-color-primary-4);
}

.oe-block-mcp-workflow-animation__screen-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oe-spacing-xsmall) var(--oe-spacing-small);
  min-height: var(--oe-sizing-xlarge);
  padding: var(--oe-spacing-xsmall) var(--oe-spacing-base);
  border-bottom: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
  background: var(--oe-color-muted);
}

.oe-block-mcp-workflow-animation__screen-dot {
  display: block;
  flex-shrink: 0;
  width: var(--oe-spacing-xsmall);
  height: var(--oe-spacing-xsmall);
  border-radius: var(--oe-border-radius-badge);
}

.oe-block-mcp-workflow-animation__screen-dot--navy {
  background: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__screen-dot--royal {
  background: var(--oe-mcp-workflow-animation-royal);
}

.oe-block-mcp-workflow-animation__screen-dot--sky {
  background: var(--oe-color-sky-blue);
}

.oe-block-mcp-workflow-animation__screen-dot--grey {
  background: var(--oe-color-cool-grey);
}

.oe-block-mcp-workflow-animation__screen-title {
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oe-spacing-2xsmall);
  margin-left: auto;
}

.oe-block-mcp-workflow-animation__badge {
  padding: var(--oe-spacing-2xsmall) var(--oe-spacing-xsmall);
  border: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
  border-radius: var(--oe-border-radius-badge);
  background: var(--oe-color-primary-4);
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-medium);
  color: var(--oe-color-cool-grey);
  white-space: nowrap;
}

.oe-block-mcp-workflow-animation__badge--region {
  border-color: var(--oe-color-secondary-9-200, var(--oe-color-secondary-muted));
  background: var(--oe-color-primary-5);
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__badge--outline {
  border-color: var(--oe-mcp-workflow-animation-line);
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__screen-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--oe-spacing-small);
  padding: var(--oe-spacing-base);
}

.oe-block-mcp-workflow-animation__label {
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-neutral);
}

.oe-block-mcp-workflow-animation__label--rule {
  display: flex;
  align-items: center;
  gap: var(--oe-spacing-small);
}

.oe-block-mcp-workflow-animation__label--rule::after {
  content: "";
  flex: 1 1 auto;
  height: var(--oe-spacing-5xsmall);
  background: var(--oe-mcp-workflow-animation-border);
}

.oe-block-mcp-workflow-animation__label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oe-spacing-small);
}

.oe-block-mcp-workflow-animation__http {
  padding: var(--oe-spacing-3xsmall) var(--oe-spacing-xsmall);
  border-radius: var(--oe-border-radius-badge);
  background: var(--oe-color-primary-5);
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-medium);
  color: var(--oe-color-heritage-blue);
}

/* View 1 */
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__quote {
  padding: var(--oe-spacing-base) var(--oe-spacing-medium);
  border: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
  border-left: var(--oe-border-width-medium) solid var(--oe-color-sky-blue);
  border-radius: var(--oe-border-radius-base);
  background: var(--oe-color-muted);
  font-size: var(--oe-font-size-small);
  font-style: normal;
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__note {
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-cool-grey);
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__checklist {
  display: flex;
  flex-direction: column;
  gap: var(--oe-spacing-xsmall);
}

.oe-block-mcp-workflow-animation__checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--oe-spacing-xsmall);
  margin: 0;
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-cool-grey);
  overflow-wrap: anywhere;
}

.oe-block-mcp-workflow-animation__callout {
  display: flex;
  align-items: center;
  gap: var(--oe-spacing-xsmall);
  padding: var(--oe-spacing-small) var(--oe-spacing-base);
  border: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
  border-radius: var(--oe-border-radius-base);
  background: var(--oe-color-muted);
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-cool-grey);
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__callout {
  margin-top: auto;
}

/* Code panels: Poppins, wrapping inside the panel */
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__code {
  display: block;
  margin: 0;
  padding: var(--oe-spacing-small) var(--oe-spacing-base);
  border-radius: var(--oe-border-radius-base);
  background: var(--oe-color-secondary);
  font-family: inherit;
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-secondary-muted);
  white-space: normal;
  overflow-wrap: anywhere;
}

.oe-block-mcp-workflow-animation__code-line {
  display: block;
}

.oe-block-mcp-workflow-animation__code-line--gap {
  margin-top: var(--oe-spacing-small);
}

.oe-block-mcp-workflow-animation__code-line--indent-1 {
  padding-left: var(--oe-spacing-base);
}

.oe-block-mcp-workflow-animation__code-line--indent-2 {
  padding-left: var(--oe-spacing-large);
}

.oe-block-mcp-workflow-animation__code-line--indent-3 {
  padding-left: var(--oe-spacing-xlarge);
}

.oe-block-mcp-workflow-animation__tok--kw {
  color: var(--oe-color-secondary-6);
}

.oe-block-mcp-workflow-animation__tok--str {
  color: var(--oe-color-primary-5);
}

.oe-block-mcp-workflow-animation__tok--key {
  color: var(--oe-color-primary);
}

.oe-block-mcp-workflow-animation__tok--punc {
  color: var(--oe-color-secondary-7);
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__inline-code {
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--oe-color-heritage-blue);
  overflow-wrap: anywhere;
}

/* View 2: report rows */
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__rows {
  overflow: hidden;
  border: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
  border-radius: var(--oe-border-radius-base);
}

.oe-block-mcp-workflow-animation__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oe-spacing-2xsmall) var(--oe-spacing-small);
  margin: 0;
  padding: var(--oe-spacing-xsmall) var(--oe-spacing-small);
  border-bottom: var(--oe-spacing-5xsmall) solid var(--oe-color-muted);
}

.oe-block-mcp-workflow-animation__row:last-child {
  border-bottom: 0;
}

.oe-block-mcp-workflow-animation__row-title {
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__tag {
  padding: var(--oe-spacing-3xsmall) var(--oe-spacing-xsmall);
  border-radius: var(--oe-border-radius-badge);
  background: color-mix(in srgb, var(--oe-mcp-workflow-animation-royal) 12%, var(--oe-color-primary-4));
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-medium);
  color: var(--oe-mcp-workflow-animation-royal);
}

.oe-block-mcp-workflow-animation__row-date {
  margin-left: auto;
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-medium);
  color: var(--oe-color-neutral);
  white-space: nowrap;
}

/* Tables (view 3 and board pack): scroll inside the panel, never the page */
.oe-block-mcp-workflow-animation__table-wrap {
  max-width: var(--oe-width-fixed-100);
  overflow-x: auto;
  border: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
  border-radius: var(--oe-border-radius-base);
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__table {
  width: var(--oe-width-fixed-100);
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: var(--oe-font-size-xsmall);
  font-variant-numeric: tabular-nums;
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__th,
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__td {
  padding: var(--oe-spacing-2xsmall) var(--oe-spacing-small);
  border: 0;
  border-bottom: var(--oe-spacing-5xsmall) solid var(--oe-color-muted);
  background: transparent;
  line-height: var(--oe-line-height-medium-large);
  text-align: left;
  vertical-align: middle;
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__th {
  border-bottom-color: var(--oe-mcp-workflow-animation-border);
  background: var(--oe-color-muted);
  font-size: var(--oe-font-size-2xsmall);
  color: var(--oe-color-neutral);
  white-space: nowrap;
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__td {
  color: var(--oe-color-cool-grey);
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__td--key {
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__th--num,
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__td--num {
  text-align: right;
}

.oe-block-mcp-workflow-animation tbody tr:last-child .oe-block-mcp-workflow-animation__td {
  border-bottom: 0;
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__tr--highlight .oe-block-mcp-workflow-animation__td {
  background: var(--oe-color-primary-5);
}

/* View 4 */
.oe-block-mcp-workflow-animation__feeds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oe-spacing-xsmall);
  margin-top: auto;
}

/* ---------- View 5: board pack ---------- */

.oe-block-mcp-workflow-animation__pack-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oe-spacing-2xsmall) var(--oe-spacing-base);
  min-height: var(--oe-sizing-xlarge);
  padding: var(--oe-spacing-small) var(--oe-spacing-medium);
  background: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__pack-title {
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-primary-4);
}

.oe-block-mcp-workflow-animation__pack-meta {
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-secondary-9-200, var(--oe-color-secondary-muted));
}

.oe-block-mcp-workflow-animation__pack-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--oe-spacing-base);
  padding: var(--oe-spacing-base) var(--oe-spacing-medium);
}

.oe-block-mcp-workflow-animation__pack-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--oe-spacing-xsmall) var(--oe-spacing-base);
}

.oe-block-mcp-workflow-animation__pack-intro-text {
  display: flex;
  flex: 1 1 var(--oe-width-fixed-small);
  flex-direction: column;
  gap: var(--oe-spacing-2xsmall);
  min-width: 0;
}

.oe-block-mcp-workflow-animation__pack-heading {
  font-size: var(--oe-font-size-medium);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__pack-sub {
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-neutral);
}

.oe-block-mcp-workflow-animation__pack-version {
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-neutral);
  white-space: nowrap;
}

/* The table takes the width it needs; the chart takes the rest */
.oe-block-mcp-workflow-animation__pack-grid {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: start;
  gap: var(--oe-spacing-medium);
}

.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__table-wrap--heat .oe-block-mcp-workflow-animation__th,
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__table-wrap--heat .oe-block-mcp-workflow-animation__td {
  padding-inline: var(--oe-spacing-xsmall);
}

@container oe-mcp-workflow-animation-monitor (max-width: 40rem) {
  .oe-block-mcp-workflow-animation__pack-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Gap bars */
.oe-block-mcp-workflow-animation__bar {
  display: block;
  width: var(--oe-width-fixed-5xsmall);
  height: var(--oe-spacing-xsmall);
  margin-left: auto;
  overflow: hidden;
  border-radius: var(--oe-border-radius-small);
  background: var(--oe-color-secondary-muted);
}

.oe-block-mcp-workflow-animation__bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--oe-border-radius-small);
  transform-origin: left center;
}

/* Demo data: bar lengths from the design */
.oe-block-mcp-workflow-animation__bar-fill--94 { width: 94%; }
.oe-block-mcp-workflow-animation__bar-fill--66 { width: 66%; }
.oe-block-mcp-workflow-animation__bar-fill--58 { width: 58%; }
.oe-block-mcp-workflow-animation__bar-fill--42 { width: 42%; }
.oe-block-mcp-workflow-animation__bar-fill--34 { width: 34%; }
.oe-block-mcp-workflow-animation__bar-fill--24 { width: 24%; }

.oe-block-mcp-workflow-animation__bar-fill--strong {
  background: var(--oe-mcp-workflow-animation-gold);
}

.oe-block-mcp-workflow-animation__bar-fill--mid {
  background: color-mix(in srgb, var(--oe-mcp-workflow-animation-gold) 60%, var(--oe-color-primary-4));
}

.oe-block-mcp-workflow-animation__bar-fill--light {
  background: color-mix(in srgb, var(--oe-mcp-workflow-animation-gold) 35%, var(--oe-color-primary-4));
}

/* Chart */
.oe-block-mcp-workflow-animation__chart {
  display: flex;
  flex-direction: column;
  gap: var(--oe-spacing-xsmall);
  min-width: 0;
}

.oe-block-mcp-workflow-animation__chart-svg {
  display: block;
  width: var(--oe-width-fixed-100);
  height: auto;
}

.oe-block-mcp-workflow-animation__chart-grid {
  stroke: var(--oe-color-secondary-muted);
}

.oe-block-mcp-workflow-animation__chart-axis {
  stroke: var(--oe-mcp-workflow-animation-line);
}

.oe-block-mcp-workflow-animation__chart-gap {
  fill: color-mix(in srgb, var(--oe-mcp-workflow-animation-gold) 13%, transparent);
}

.oe-block-mcp-workflow-animation__chart-line {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.oe-block-mcp-workflow-animation__chart-line--oe {
  stroke: var(--oe-color-sky-blue);
}

.oe-block-mcp-workflow-animation__chart-line--case {
  stroke: var(--oe-mcp-workflow-animation-gold);
}

.oe-block-mcp-workflow-animation__chart-key--oe {
  fill: var(--oe-color-sky-blue);
}

.oe-block-mcp-workflow-animation__chart-key--case {
  fill: var(--oe-mcp-workflow-animation-gold);
}

.oe-block-mcp-workflow-animation__chart-text {
  fill: var(--oe-color-neutral);
  font-family: inherit;
  font-size: var(--oe-font-size-2xsmall);
}

.oe-block-mcp-workflow-animation__chart-text--legend {
  fill: var(--oe-color-cool-grey);
}

/* Stat tiles */
.oe-block-mcp-workflow-animation__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--oe-spacing-small);
}

.oe-block-mcp-workflow-animation__stat {
  padding: var(--oe-spacing-xsmall) var(--oe-spacing-small);
  border: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
  border-left: var(--oe-border-width-medium) solid var(--oe-color-sky-blue);
  border-radius: var(--oe-border-radius-base);
  background: var(--oe-color-muted);
}

.oe-block-mcp-workflow-animation__stat--gold {
  border-left-color: var(--oe-mcp-workflow-animation-gold);
}

.oe-block-mcp-workflow-animation__stat-label {
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-neutral);
}

.oe-block-mcp-workflow-animation__stat-value {
  font-size: var(--oe-font-size-medium);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__summary {
  padding-left: var(--oe-spacing-small);
  border-left: var(--oe-border-width-medium) solid var(--oe-color-sky-blue);
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-cool-grey);
}

.oe-block-mcp-workflow-animation__summary-highlight {
  color: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__pack-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oe-spacing-2xsmall) var(--oe-spacing-base);
  margin-top: auto;
  padding-top: var(--oe-spacing-small);
  border-top: var(--oe-spacing-5xsmall) solid var(--oe-mcp-workflow-animation-border);
}

.oe-block-mcp-workflow-animation__pack-source {
  flex: 1 1 var(--oe-width-fixed-xsmall);
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-neutral);
}

.oe-block-mcp-workflow-animation__pack-page {
  font-size: var(--oe-font-size-2xsmall);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-heritage-blue);
  white-space: nowrap;
}

/* Toast */
.oe-block-mcp-workflow-animation__toast {
  position: absolute;
  right: var(--oe-spacing-base);
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--oe-spacing-small);
  max-width: calc(100% - var(--oe-spacing-base) * 2);
  padding: var(--oe-spacing-small) var(--oe-spacing-base);
  border-radius: var(--oe-border-radius-base);
  background: var(--oe-color-heritage-blue);
}

.oe-block-mcp-workflow-animation__toast-text {
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-color-primary-4);
}

/* ======================================================================
   Animation: 20s master loop. Only when the user has not asked for
   reduced motion; otherwise the final state above is shown, still.
   ====================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .oe-block-mcp-workflow-animation__live {
    animation: oe-block-mcp-workflow-animation-live 2.4s ease-in-out infinite;
  }

  .oe-block-mcp-workflow-animation__step--1 .oe-block-mcp-workflow-animation__card { animation: oe-block-mcp-workflow-animation-card-1 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__step--2 .oe-block-mcp-workflow-animation__card { animation: oe-block-mcp-workflow-animation-card-2 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__step--3 .oe-block-mcp-workflow-animation__card { animation: oe-block-mcp-workflow-animation-card-3 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__step--4 .oe-block-mcp-workflow-animation__card { animation: oe-block-mcp-workflow-animation-card-4 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__step--5 .oe-block-mcp-workflow-animation__card { animation: oe-block-mcp-workflow-animation-card-5 var(--oe-mcp-workflow-animation-duration) linear infinite; }

  .oe-block-mcp-workflow-animation__step--1 .oe-block-mcp-workflow-animation__status { animation: oe-block-mcp-workflow-animation-status-1 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__step--2 .oe-block-mcp-workflow-animation__status { animation: oe-block-mcp-workflow-animation-status-2 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__step--3 .oe-block-mcp-workflow-animation__status { animation: oe-block-mcp-workflow-animation-status-3 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__step--4 .oe-block-mcp-workflow-animation__status { animation: oe-block-mcp-workflow-animation-status-4 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__step--5 .oe-block-mcp-workflow-animation__status { animation: oe-block-mcp-workflow-animation-status-5 var(--oe-mcp-workflow-animation-duration) linear infinite; }

  .oe-block-mcp-workflow-animation__connector--1 .oe-block-mcp-workflow-animation__pulse { animation: oe-block-mcp-workflow-animation-pulse-1 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__connector--2 .oe-block-mcp-workflow-animation__pulse { animation: oe-block-mcp-workflow-animation-pulse-2 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__connector--3 .oe-block-mcp-workflow-animation__pulse { animation: oe-block-mcp-workflow-animation-pulse-3 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__connector--4 .oe-block-mcp-workflow-animation__pulse { animation: oe-block-mcp-workflow-animation-pulse-4 var(--oe-mcp-workflow-animation-duration) linear infinite; }

  .oe-block-mcp-workflow-animation__view--1 { animation: oe-block-mcp-workflow-animation-view-1 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__view--2 { animation: oe-block-mcp-workflow-animation-view-2 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__view--3 { animation: oe-block-mcp-workflow-animation-view-3 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__view--4 { animation: oe-block-mcp-workflow-animation-view-4 var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__view--5 { animation: oe-block-mcp-workflow-animation-view-5 var(--oe-mcp-workflow-animation-duration) linear infinite; }

  /* Board pack builds up piece by piece */
  .oe-block-mcp-workflow-animation__pack-header { animation: oe-block-mcp-workflow-animation-pack-header var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__pack-intro { animation: oe-block-mcp-workflow-animation-pack-intro var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__table-wrap--heat,
  .oe-block-mcp-workflow-animation__chart-label { animation: oe-block-mcp-workflow-animation-pack-table var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__chart-figure { animation: oe-block-mcp-workflow-animation-pack-chart var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__chart-legend,
  .oe-block-mcp-workflow-animation__stats { animation: oe-block-mcp-workflow-animation-pack-stats var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__summary { animation: oe-block-mcp-workflow-animation-pack-summary var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__pack-footer { animation: oe-block-mcp-workflow-animation-pack-footer var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__toast { animation: oe-block-mcp-workflow-animation-toast var(--oe-mcp-workflow-animation-duration) linear infinite; }

  .oe-block-mcp-workflow-animation__bar-fill { animation: oe-block-mcp-workflow-animation-bar var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__chart-line--oe { animation: oe-block-mcp-workflow-animation-draw-oe var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__chart-line--case { animation: oe-block-mcp-workflow-animation-draw-case var(--oe-mcp-workflow-animation-duration) linear infinite; }
  .oe-block-mcp-workflow-animation__chart-gap { animation: oe-block-mcp-workflow-animation-gap var(--oe-mcp-workflow-animation-duration) linear infinite; }

  /* Pause the whole block (both panels together) when the toggle is on */
  .oe-block-mcp-workflow-animation:has(.oe-block-mcp-workflow-animation__pause-toggle:checked) * {
    animation-play-state: paused;
  }

  /* Mouse users: hovering anywhere over the block pauses it, leaving resumes.
     Limited to real hover devices, because touch screens keep :hover "stuck" after a tap. */
  @media (hover: hover) {
    .oe-block-mcp-workflow-animation:hover * {
      animation-play-state: paused;
    }

    .oe-block-mcp-workflow-animation:hover .oe-block-mcp-workflow-animation__state--running {
      display: none;
    }

    .oe-block-mcp-workflow-animation:hover .oe-block-mcp-workflow-animation__state--paused {
      display: inline;
    }
  }
}

/* ---------- Pause toggle ---------- */

/* Visually hidden but still focusable, so keyboard users can Tab to it and press Space */
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__pause-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--oe-spacing-5xsmall);
  height: var(--oe-spacing-5xsmall);
  margin: calc(var(--oe-spacing-5xsmall) * -1);
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
  appearance: none;
}

/* Invisible tap area over the whole block: tap to pause, tap again to resume */
.oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__pause-area {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Mouse users pause by hovering instead, so clicks pass through */
@media (hover: hover) {
  .oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__pause-area {
    pointer-events: none;
  }
}

.oe-block-mcp-workflow-animation:has(.oe-block-mcp-workflow-animation__pause-toggle:focus-visible) {
  outline: var(--oe-spacing-3xsmall) solid var(--oe-color-sky-blue);
  outline-offset: var(--oe-spacing-2xsmall);
  border-radius: var(--oe-border-radius-large);
}

/* Running / Paused status in the header */
.oe-block-mcp-workflow-animation__state--paused {
  display: none;
}

.oe-block-mcp-workflow-animation:has(.oe-block-mcp-workflow-animation__pause-toggle:checked) .oe-block-mcp-workflow-animation__state--running {
  display: none;
}

.oe-block-mcp-workflow-animation:has(.oe-block-mcp-workflow-animation__pause-toggle:checked) .oe-block-mcp-workflow-animation__state--paused {
  display: inline;
}

/* Nothing moves with reduced motion, so the toggle isn't needed */
@media (prefers-reduced-motion: reduce) {
  .oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__pause-toggle,
  .oe-block-mcp-workflow-animation .oe-block-mcp-workflow-animation__pause-area {
    display: none;
  }
}

/* ---------- Keyframes (timings from the design) ---------- */

@keyframes oe-block-mcp-workflow-animation-live {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* Step cards: idle → highlighted → done */
@keyframes oe-block-mcp-workflow-animation-card-1 {
  0%, 4% { border-color: var(--oe-mcp-workflow-animation-border); box-shadow: var(--oe-mcp-workflow-animation-shadow); }
  6%, 11% { border-color: var(--oe-mcp-workflow-animation-glow); box-shadow: var(--oe-mcp-workflow-animation-active); }
  14%, 100% { border-color: var(--oe-mcp-workflow-animation-done); box-shadow: var(--oe-mcp-workflow-animation-shadow); }
}

@keyframes oe-block-mcp-workflow-animation-card-2 {
  0%, 15% { border-color: var(--oe-mcp-workflow-animation-border); box-shadow: var(--oe-mcp-workflow-animation-shadow); }
  18%, 24% { border-color: var(--oe-mcp-workflow-animation-glow); box-shadow: var(--oe-mcp-workflow-animation-active); }
  27%, 100% { border-color: var(--oe-mcp-workflow-animation-done); box-shadow: var(--oe-mcp-workflow-animation-shadow); }
}

@keyframes oe-block-mcp-workflow-animation-card-3 {
  0%, 28% { border-color: var(--oe-mcp-workflow-animation-border); box-shadow: var(--oe-mcp-workflow-animation-shadow); }
  31%, 37% { border-color: var(--oe-mcp-workflow-animation-glow); box-shadow: var(--oe-mcp-workflow-animation-active); }
  40%, 100% { border-color: var(--oe-mcp-workflow-animation-done); box-shadow: var(--oe-mcp-workflow-animation-shadow); }
}

@keyframes oe-block-mcp-workflow-animation-card-4 {
  0%, 41% { border-color: var(--oe-mcp-workflow-animation-border); box-shadow: var(--oe-mcp-workflow-animation-shadow); }
  44%, 48% { border-color: var(--oe-mcp-workflow-animation-glow); box-shadow: var(--oe-mcp-workflow-animation-active); }
  51%, 100% { border-color: var(--oe-mcp-workflow-animation-done); box-shadow: var(--oe-mcp-workflow-animation-shadow); }
}

@keyframes oe-block-mcp-workflow-animation-card-5 {
  0%, 52% { border-color: var(--oe-mcp-workflow-animation-border); box-shadow: var(--oe-mcp-workflow-animation-shadow); }
  55%, 60% { border-color: var(--oe-mcp-workflow-animation-glow); box-shadow: var(--oe-mcp-workflow-animation-active); }
  63%, 100% { border-color: var(--oe-mcp-workflow-animation-done); box-shadow: var(--oe-mcp-workflow-animation-shadow); }
}

/* "Succeeded" pills */
@keyframes oe-block-mcp-workflow-animation-status-1 { 0%, 10% { opacity: 0; transform: scale(0.7); } 13%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oe-block-mcp-workflow-animation-status-2 { 0%, 23% { opacity: 0; transform: scale(0.7); } 26%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oe-block-mcp-workflow-animation-status-3 { 0%, 36% { opacity: 0; transform: scale(0.7); } 39%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oe-block-mcp-workflow-animation-status-4 { 0%, 47% { opacity: 0; transform: scale(0.7); } 50%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oe-block-mcp-workflow-animation-status-5 { 0%, 59% { opacity: 0; transform: scale(0.7); } 62%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Travelling dots down each connector */
@keyframes oe-block-mcp-workflow-animation-pulse-1 {
  0%, 12% { top: calc(var(--oe-spacing-xsmall) / -2); opacity: 0; }
  13%, 15.5% { opacity: 1; }
  16%, 100% { top: calc(100% - var(--oe-spacing-xsmall) / 2); opacity: 0; }
}

@keyframes oe-block-mcp-workflow-animation-pulse-2 {
  0%, 25% { top: calc(var(--oe-spacing-xsmall) / -2); opacity: 0; }
  26%, 28.5% { opacity: 1; }
  29%, 100% { top: calc(100% - var(--oe-spacing-xsmall) / 2); opacity: 0; }
}

@keyframes oe-block-mcp-workflow-animation-pulse-3 {
  0%, 38% { top: calc(var(--oe-spacing-xsmall) / -2); opacity: 0; }
  39%, 41.5% { opacity: 1; }
  42%, 100% { top: calc(100% - var(--oe-spacing-xsmall) / 2); opacity: 0; }
}

@keyframes oe-block-mcp-workflow-animation-pulse-4 {
  0%, 49% { top: calc(var(--oe-spacing-xsmall) / -2); opacity: 0; }
  50%, 52.5% { opacity: 1; }
  53%, 100% { top: calc(100% - var(--oe-spacing-xsmall) / 2); opacity: 0; }
}

/* Monitor views */
@keyframes oe-block-mcp-workflow-animation-view-1 { 0%, 2% { opacity: 0; transform: translateY(var(--oe-spacing-xsmall)); } 5%, 14% { opacity: 1; transform: none; } 17%, 100% { opacity: 0; transform: none; } }
@keyframes oe-block-mcp-workflow-animation-view-2 { 0%, 15% { opacity: 0; transform: translateY(var(--oe-spacing-xsmall)); } 18%, 27% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: none; } }
@keyframes oe-block-mcp-workflow-animation-view-3 { 0%, 28% { opacity: 0; transform: translateY(var(--oe-spacing-xsmall)); } 31%, 40% { opacity: 1; transform: none; } 43%, 100% { opacity: 0; transform: none; } }
@keyframes oe-block-mcp-workflow-animation-view-4 { 0%, 41% { opacity: 0; transform: translateY(var(--oe-spacing-xsmall)); } 44%, 51% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: none; } }
@keyframes oe-block-mcp-workflow-animation-view-5 { 0%, 52% { opacity: 0; transform: translateY(var(--oe-spacing-xsmall)); } 56%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* Board pack pieces */
@keyframes oe-block-mcp-workflow-animation-pack-header { 0%, 55% { opacity: 0; transform: translateY(var(--oe-spacing-xsmall)); } 59%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oe-block-mcp-workflow-animation-pack-intro { 0%, 59% { opacity: 0; transform: translateY(var(--oe-spacing-xsmall)); } 63%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oe-block-mcp-workflow-animation-pack-table { 0%, 62% { opacity: 0; transform: translateY(var(--oe-spacing-xsmall)); } 66%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oe-block-mcp-workflow-animation-pack-chart { 0%, 69% { opacity: 0; } 73%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes oe-block-mcp-workflow-animation-pack-stats { 0%, 77% { opacity: 0; transform: translateY(var(--oe-spacing-xsmall)); } 81%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oe-block-mcp-workflow-animation-pack-summary { 0%, 83% { opacity: 0; transform: translateY(var(--oe-spacing-xsmall)); } 87%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes oe-block-mcp-workflow-animation-pack-footer { 0%, 87% { opacity: 0; } 91%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes oe-block-mcp-workflow-animation-toast { 0%, 89% { opacity: 0; transform: translateY(var(--oe-spacing-small)); } 92%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Heat bars grow from zero */
@keyframes oe-block-mcp-workflow-animation-bar { 0%, 69% { transform: scaleX(0); } 78%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* Chart lines draw in (pathLength="1", so 1 = fully hidden) */
@keyframes oe-block-mcp-workflow-animation-draw-oe { 0%, 64% { stroke-dashoffset: 1; } 76%, 96% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes oe-block-mcp-workflow-animation-draw-case { 0%, 66% { stroke-dashoffset: 1; } 78%, 96% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes oe-block-mcp-workflow-animation-gap { 0%, 76% { opacity: 0; } 82%, 96% { opacity: 1; } 100% { opacity: 0; } }