/* Scroll-guided enhancement for the CSI measurement architecture. */
.measurement-architecture.is-enhanced .architecture-stage {
  opacity: .58;
  transform: translateY(10px) scale(.992);
  filter: saturate(.78);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease, box-shadow .55s ease;
}

.measurement-architecture.is-enhanced .architecture-stage.is-complete,
.measurement-architecture.is-enhanced .architecture-stage.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: saturate(1);
}

.measurement-architecture.is-enhanced .architecture-stage.is-active {
  box-shadow: 0 14px 38px color-mix(in srgb, var(--stage-border, #60a5fa) 22%, transparent);
}

.measurement-architecture.is-enhanced .architecture-stage:not(:last-child)::after {
  transform-origin: top;
  transform: scaleY(0);
  opacity: .35;
  transition: transform .48s ease, opacity .48s ease;
}

.measurement-architecture.is-enhanced .architecture-stage.is-complete:not(:last-child)::after,
.measurement-architecture.is-enhanced .architecture-stage.is-active:not(:last-child)::after {
  transform: scaleY(1);
  opacity: 1;
}

.measurement-architecture.is-enhanced .architecture-stage:not(:last-child)::before {
  opacity: .3;
  transition: opacity .35s ease, transform .35s ease;
}

.measurement-architecture.is-enhanced .architecture-stage.is-complete:not(:last-child)::before,
.measurement-architecture.is-enhanced .architecture-stage.is-active:not(:last-child)::before {
  opacity: 1;
  transform: translateY(.08rem) rotate(45deg) scale(1.08);
}

.architecture-feedback.is-engaged {
  border-style: solid;
  box-shadow: 0 16px 45px rgba(59,130,246,.12);
  transition: border-color .5s ease, box-shadow .5s ease;
}

.architecture-feedback.is-engaged::before {
  animation: csi-feedback-pulse 7s ease-in-out infinite;
}

@keyframes csi-feedback-pulse {
  0%, 72%, 100% { transform: rotate(0deg); box-shadow: 0 0 0 0 rgba(96,165,250,0); }
  82% { transform: rotate(-22deg); box-shadow: 0 0 0 .45rem rgba(96,165,250,.08); }
  92% { transform: rotate(360deg); box-shadow: 0 0 0 0 rgba(96,165,250,0); }
}

@media (hover: hover) and (pointer: fine) {
  .measurement-architecture.is-enhanced .architecture-stage:hover,
  .measurement-architecture.is-enhanced .architecture-stage:focus-within {
    opacity: 1;
    transform: translateY(-3px) scale(1.006);
    filter: saturate(1.08);
    box-shadow: 0 18px 46px color-mix(in srgb, var(--stage-border, #60a5fa) 25%, transparent);
  }

  .architecture-stage:hover .architecture-detail,
  .architecture-stage:focus-within .architecture-detail {
    transform: translateY(0);
  }
}

/* Mobile keeps the guided emphasis without moving cards or connectors. */
@media (max-width: 820px), (hover: none), (pointer: coarse) {
  .measurement-architecture.is-enhanced .architecture-stage,
  .measurement-architecture.is-enhanced .architecture-stage.is-complete,
  .measurement-architecture.is-enhanced .architecture-stage.is-active {
    transform: none;
    transition: opacity .32s ease, filter .32s ease, box-shadow .32s ease;
  }

  .measurement-architecture.is-enhanced .architecture-stage:not(:last-child)::after,
  .measurement-architecture.is-enhanced .architecture-stage.is-complete:not(:last-child)::after,
  .measurement-architecture.is-enhanced .architecture-stage.is-active:not(:last-child)::after {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .measurement-architecture.is-enhanced .architecture-stage:not(:last-child)::before,
  .measurement-architecture.is-enhanced .architecture-stage.is-complete:not(:last-child)::before,
  .measurement-architecture.is-enhanced .architecture-stage.is-active:not(:last-child)::before {
    transform: translateY(.08rem) rotate(45deg);
    opacity: 1;
    transition: none;
  }

  .architecture-feedback.is-engaged::before {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .measurement-architecture.is-enhanced .architecture-stage,
  .measurement-architecture.is-enhanced .architecture-stage::before,
  .measurement-architecture.is-enhanced .architecture-stage::after,
  .architecture-feedback.is-engaged::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .measurement-architecture.is-enhanced .architecture-stage {
    opacity: 1;
    filter: none;
  }
}