/* Motion is explanatory: flow, state, scan and routing. Decorative animation pauses offscreen and for reduced motion. */
.hero-system { perspective: 1000px; transition: transform .4s ease; }
.hero-system.depth-left .system-flow { transform: perspective(1000px) rotateY(-2.5deg); }
.hero-system.depth-right .system-flow { transform: perspective(1000px) rotateY(2.5deg); }
.layer-1 .layer-trace i { animation-delay: -1s; }
.layer-2 .layer-trace i { animation-delay: -2s; }
.layer-3 .layer-trace i { animation-delay: -3s; }
.motion-active .layer-trace i { animation-play-state: running; }
.system-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: none;
  stroke: rgba(14, 107, 81, .42);
  stroke-width: 1.4;
  z-index: 0;
}
.system-connectors path { stroke-dasharray: 8 14; animation: connection-flow 12s linear infinite paused; }
.motion-active > .system-connectors path { animation-play-state: running; }
@keyframes connection-flow { to { stroke-dashoffset: -220; } }
.schematic-caption { color: var(--muted); font-size: .78rem; }
.schematic {
  position: relative;
  display: flex;
  align-items: center;
  gap: .38rem;
  padding: 1rem 0 1.5rem;
  overflow: hidden;
}
.schematic > span {
  flex: 1;
  padding: .62rem .35rem;
  border: 1px solid rgba(23, 50, 44, .16);
  border-radius: 12px;
  background: #f7faf5;
  color: var(--ink);
  font: .7rem ui-monospace, monospace;
  text-align: center;
}
.schematic > i { width: 16px; height: 2px; border-radius: 999px; background: var(--accent-dark); }
.schematic-signal {
  position: absolute;
  bottom: .5rem;
  left: 0;
  width: 22%;
  height: 3px;
  border-radius: 999px;
  background: var(--accent-dark);
  animation: packet 4s linear infinite paused;
}
.schematic.motion-active .schematic-signal { animation-play-state: running; }
.schematic-0 .schematic-signal { bottom: auto; top: 0; width: 100%; animation-name: scan; height: 2px; }
.schematic-2 > span { border-bottom-width: 6px; }
.schematic-2 > span:nth-of-type(2) { border-bottom-width: 13px; }
.schematic-2 > span:nth-of-type(3) { border-bottom-width: 21px; }
.schematic-5 > span:last-of-type { border-color: rgba(255, 143, 118, .55); }
.schematic-6 > span:first-child { box-shadow: 0 -4px #dce9e2, 0 -8px #b8d6ca; }
.schematic-7 .schematic-signal { background: var(--accent-warm); }
.button, .lab-cta, .language-switcher a, .nav-links a, .footer-grid a { transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.button:active { transform: translateY(0); }
.solution-module summary:hover .solution-icon { transform: translateY(-2px) rotate(-2deg); }
.solution-icon { transition: transform .2s ease; }
@keyframes packet { from { transform: translateX(-110%); } to { transform: translateX(560%); } }
@keyframes scan { from { transform: translateY(0); opacity: .3; } to { transform: translateY(70px); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .solution-module:nth-of-type(2n) { transition-delay: .08s; }
  .tool-panel.is-active-panel { animation: workspace-in .32s ease both; }
}
@keyframes workspace-in { from { opacity: .4; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
@media (max-width: 700px) {
  .hero-system.depth-left .system-flow,
  .hero-system.depth-right .system-flow { transform: none; }
  .system-connectors { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-system.depth-left .system-flow,
  .hero-system.depth-right .system-flow,
  .button:hover,
  .solution-module summary:hover .solution-icon { transform: none; }
  .layer-trace i,
  .schematic-signal { animation: none; }
  .system-connectors path { animation: none; stroke-dasharray: none; }
  .js .hero-copy.reveal { clip-path: none; }
}