/* Architecture hero: signal paths, boundary activation and restrained depth. */
.architecture-hero-visual .zf-arch-flow {
  opacity: 0;
  pointer-events: none;
}
.architecture-hero.zf-arch-playing .zf-arch-flow { opacity: 1; }
.architecture-hero-visual .zf-arch-dot--blue {
  fill: #8edbff;
  filter: drop-shadow(0 0 3px rgba(42, 172, 255, .95));
}
.architecture-hero-visual .zf-arch-dot--gold {
  fill: #ffe2a0;
  filter: drop-shadow(0 0 3.5px rgba(241, 180, 72, .95));
}
.architecture-hero-visual .zf-arch-tail--blue { fill: #7aceff; }
.architecture-hero-visual .zf-arch-tail--gold { fill: #f4c16c; }

@media (prefers-reduced-motion: no-preference) {
  .architecture-hero.zf-arch-playing .architecture-plane {
    animation: zf-arch-plane-awake 850ms ease-out both;
  }
  .architecture-hero.zf-arch-playing .architecture-plane--blue-a { animation-delay: 0ms; }
  .architecture-hero.zf-arch-playing .architecture-plane--gold { animation-delay: 360ms; }
  .architecture-hero.zf-arch-playing .architecture-plane--blue-b { animation-delay: 720ms; }

  .architecture-hero-visual .architecture-plane,
  .architecture-hero-visual .architecture-hero-edges > path,
  .architecture-hero-visual .architecture-hero-nodes > circle {
    transition: filter 230ms ease-out, stroke-opacity 230ms ease-out;
  }
  .architecture-hero-visual .architecture-plane.zf-arch-reacting {
    filter: drop-shadow(0 0 7px rgba(97, 185, 244, .42));
  }
  .architecture-hero-visual .architecture-plane--gold.zf-arch-reacting {
    filter: drop-shadow(0 0 9px rgba(235, 176, 74, .45));
  }
  .architecture-hero-visual .architecture-hero-edges > path.zf-arch-reacting {
    stroke-opacity: 1;
    filter: drop-shadow(0 0 5px rgba(105, 204, 255, .82));
  }
  .architecture-hero-visual .architecture-hero-edges > path:nth-child(2).zf-arch-reacting {
    filter: drop-shadow(0 0 6px rgba(245, 196, 97, .8));
  }
  .architecture-hero-visual .architecture-hero-nodes > circle.zf-arch-reacting {
    filter: drop-shadow(0 0 9px rgba(132, 206, 255, .7));
  }
  .architecture-hero-visual .architecture-hero-nodes > circle:first-child.zf-arch-reacting,
  .architecture-hero-visual .architecture-hero-nodes > circle:nth-child(4).zf-arch-reacting {
    filter: drop-shadow(0 0 11px rgba(251, 198, 98, .8));
  }
  @keyframes zf-arch-plane-awake {
    from { opacity: .72; }
    to { opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .architecture-hero .zf-arch-flow { display: none !important; }
  .architecture-hero-visual .architecture-plane,
  .architecture-hero-visual .architecture-hero-edges > path,
  .architecture-hero-visual .architecture-hero-nodes > circle {
    animation: none !important;
    transition: none !important;
  }
}