/* ===== SCROLLY CONTAINER ===== */
.scrolly {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}

/* ===== STICKY FIGURE (THE MAP) ===== */
.scrolly__figure {
  position: sticky;
  top: 0;
  width: var(--scrolly-figure-w);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  transform: translate3d(0, 0, 0);
}

.landscape-map {
  width: 100%;
  height: 100%;
  max-height: 90vh;
}

.scrolly__legend {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.legend__zone {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
}

.legend__zone::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.legend__zone--build::before    { background: var(--color-zone-build); }
.legend__zone--pipeline::before { background: var(--color-zone-pipeline); }
.legend__zone--run::before      { background: var(--color-zone-run); }
.legend__zone--product::before  { background: var(--color-zone-product); }
.legend__zone--ai::before       { background: var(--color-zone-ai); }

/* ===== NARRATIVE COLUMN ===== */
.scrolly__narrative {
  width: var(--scrolly-narrative-w);
  padding: 0 var(--space-xl);
}

/* ===== INDIVIDUAL STEPS ===== */
.step {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: var(--space-2xl) 0;
  opacity: 0.15;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.step.is-active {
  opacity: 1;
}

.step__content {
  padding: var(--space-lg);
  border-left: 3px solid transparent;
  border-radius: 2px;
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.step__content p {
  max-width: 42ch;
  color: var(--color-text);
}

.step__content .step__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-md);
}

.step.is-active .step__content {
  border-left-color: var(--color-accent);
}

/* Zone-colored borders */
.step.is-active[data-zone="build"] .step__content {
  border-left-color: var(--color-zone-build);
}
.step.is-active[data-zone="pipeline"] .step__content {
  border-left-color: var(--color-zone-pipeline);
}
.step.is-active[data-zone="run"] .step__content {
  border-left-color: var(--color-zone-run);
}
.step.is-active[data-zone="product"] .step__content {
  border-left-color: var(--color-zone-product);
}
.step.is-active[data-zone="ai"] .step__content {
  border-left-color: var(--color-zone-ai);
}

/* ===== SVG MAP STATES ===== */
.landscape-map .domain-group {
  opacity: var(--map-default);
  transition: opacity var(--duration-normal) var(--ease-out),
              filter  var(--duration-normal) var(--ease-out);
}

.landscape-map.has-active-domain .domain-group {
  opacity: var(--map-dim);
  filter: saturate(0.3);
}

.landscape-map.has-active-domain .domain-group.is-active {
  opacity: var(--map-active);
  filter: saturate(1) drop-shadow(0 2px 12px rgba(96, 165, 250, 0.25));
}

/* Connection lines */
.landscape-map .connection-line {
  stroke-dasharray: 6 4;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.landscape-map .connection-line.is-visible {
  opacity: 0.6;
  animation: dash-flow 1.5s linear infinite;
}

@keyframes dash-flow {
  to { stroke-dashoffset: -20; }
}

/* ===== PROGRESS BAR ===== */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 100;
  background: transparent;
  pointer-events: none;
}

.progress-bar__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-zone-build), var(--color-zone-pipeline), var(--color-zone-run));
  transition: width 100ms linear;
}