/* ZeroField Systems Hero: page-local configuration flow (V1). */
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-topology {
  opacity: .79;
  transition: opacity 420ms ease-out;
}
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-topology.zf-sys-active {
  opacity: 1;
}
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-node,
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-gate {
  transition: filter 220ms ease-out, stroke-width 220ms ease-out;
}
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-node.zf-sys-lit {
  filter: drop-shadow(0 0 5px rgba(116, 207, 255, .95));
  stroke-width: 2.6;
}
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-node--human.zf-sys-lit,
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-gate.zf-sys-lit {
  filter: drop-shadow(0 0 7px rgba(245, 194, 92, .92));
}
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-signal-layer {
  pointer-events: none;
  opacity: 0;
}
.systems-hero-field.zf-sys-playing svg[data-systems-scene="config-flow"] .zf-sys-signal-layer {
  opacity: 1;
}
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-particle {
  fill: #a9e5ff;
  filter: drop-shadow(0 0 3px rgba(45, 166, 250, .75));
}
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-particle--gold {
  fill: #ffe4a0;
  filter: drop-shadow(0 0 3px rgba(232, 179, 80, .8));
}
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-signal-tail {
  fill: #7bd2ff;
  opacity: .4;
}
.systems-hero-field svg[data-systems-scene="config-flow"] .zf-sys-signal-tail--gold {
  fill: #e7b95d;
}
@media (prefers-reduced-motion: no-preference) {
  .systems-hero-field.zf-sys-playing .zf-sys-base-fill {
    animation: zf-sys-foundation-breathe 8s ease-in-out infinite alternate;
  }
  @keyframes zf-sys-foundation-breathe {
    from { opacity: .86; }
    to { opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .systems-hero-field .zf-sys-topology,
  .systems-hero-field .zf-sys-node,
  .systems-hero-field .zf-sys-gate,
  .systems-hero-field .zf-sys-base-fill {
    animation: none !important;
    transition: none !important;
  }
  .systems-hero-field .zf-sys-signal-layer { display: none !important; }
}

/* S30 scoped QA correction: align each label under its actual SVG topology.
   Rendering preserves the 650:360 scene ratio; the row width follows the
   painted SVG width, not the potentially much wider <svg> viewport. */
.systems-hero-field {
  --zf-sys-paint-width: min(100%, 514.6px);
}
.systems-hero-field-labels {
  width: var(--zf-sys-paint-width);
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.systems-hero-field-labels > span:first-child {
  transform: translateX(18.31%);
}
.systems-hero-field-labels > span:last-child {
  transform: translateX(-13.69%);
}

@media (min-width: 940px) and (max-width: 1199px) {
  .systems-hero-field { --zf-sys-paint-width: min(100%, 397.23px); }
}
@media (min-width: 680px) and (max-width: 939px) {
  .systems-hero-field { --zf-sys-paint-width: min(100%, 415.28px); }
}
@media (max-width: 679px) {
  .systems-hero-field { --zf-sys-paint-width: min(100%, 343.06px); }
  /* Mobile copy height is content-dependent: prevent legacy absolute
     positioning from colliding with the diagram on 320-390px widths. */
  .systems-hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 150px;
    padding-bottom: 60px;
  }
  .systems-hero-copy {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    flex: 0 0 auto;
  }
  .systems-hero-field {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    flex: 0 0 auto;
    margin-top: 36px;
  }
}

/* At 320-359px, preserve a readable gap between adjacent captions while
   keeping each caption centered under its corresponding SVG configuration. */
@media (max-width: 359px) {
  .systems-hero-field-labels { font-size: 9px; }
  .systems-hero-field-labels > span { white-space: nowrap; }
}

@media (max-width: 359px) {
  .systems-hero-field-labels > span { letter-spacing: -0.55px; }
}

/* S34: Keep the Systems section index in place, but close the oversized
   empty lane before the hero copy in the three stacked layouts.
   Shift the copy and drawing together, preserving their existing gap,
   and shorten only the corresponding unused hero height. */
@media (max-width: 679px) {
  .systems-hero { padding-top: 72px; }
}
@media (min-width: 680px) and (max-width: 939px) {
  .systems-hero { height: 745px; min-height: 745px; }
  .systems-hero-copy { top: 75px; }
  .systems-hero-field { top: 325px; }
}
@media (min-width: 940px) and (max-width: 1199px) {
  .systems-hero { height: 730px; min-height: 730px; }
  .systems-hero-copy { top: 85px; }
  .systems-hero-field { top: 325px; }
}