/*
 * Curated Reher acquisition timeline.
 *
 * The responsive connector geometry follows the Timeline 03 source. Runtime
 * interpolation is isolated to compositor-friendly transforms.
 */

[data-acquisition-steps-root] [data-acquisition-steps-fill] {
  transform: scaleX(var(--acquisition-steps-progress, 1));
}

[data-acquisition-steps-root] [data-acquisition-steps-connector-fill] {
  transform: scaleY(var(--acquisition-steps-connector-progress, 1));
}

[data-acquisition-steps-root] [data-acquisition-steps-icon-play] {
  display: none;
}

[data-acquisition-steps-root]
  [data-acquisition-steps-action="toggle"][aria-pressed="true"]
  [data-acquisition-steps-icon-pause] {
  display: none;
}

[data-acquisition-steps-root]
  [data-acquisition-steps-action="toggle"][aria-pressed="true"]
  [data-acquisition-steps-icon-play] {
  display: block;
}

[data-acquisition-steps-root]
  [data-acquisition-steps-item][data-acquisition-steps-active="false"]
  [data-acquisition-steps-number] {
  border-color: var(--color-reher-border);
  background-color: var(--color-reher-surface);
  color: var(--color-reher-muted);
}

[data-acquisition-steps-root][data-acquisition-steps-state="static"]
  [data-acquisition-steps-controls] {
  display: none;
}

@media (min-width: 1280px) {
  [data-acquisition-steps-root] [data-acquisition-steps-list] {
    column-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(
      var(--acquisition-steps-column-count),
      minmax(0, 1fr)
    );
    row-gap: 1.25rem;
  }

  [data-acquisition-steps-root] [data-acquisition-steps-item] {
    align-items: stretch;
    align-self: stretch;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    justify-self: center;
  }

  [data-acquisition-steps-root] [data-acquisition-steps-content] {
    display: contents;
  }

  [data-acquisition-steps-root] [data-acquisition-steps-copy],
  [data-acquisition-steps-root] [data-acquisition-steps-meter] {
    width: 100%;
  }

  [data-acquisition-steps-root] [data-acquisition-steps-connector-fill] {
    transform: scaleX(var(--acquisition-steps-connector-progress, 1));
  }
}

@media (max-width: 1279px) {
  [data-acquisition-steps-root] [data-acquisition-steps-item],
  [data-acquisition-steps-root] [data-acquisition-steps-marker-rail] {
    align-self: stretch;
  }

  [data-acquisition-steps-root] [data-acquisition-steps-connector] {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-acquisition-steps-root] [data-acquisition-steps-number],
  [data-acquisition-steps-root] button {
    transition: none !important;
  }
}