@keyframes pulse-ring {
  0%, 100% { opacity: .25; transform: scale(.92); }
  50% { opacity: .7; transform: scale(1.05); }
}

@keyframes data-flow {
  to { stroke-dashoffset: -24; }
}

.pulse-ring {
  animation: pulse-ring 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.data-flow {
  animation: data-flow 1.8s linear infinite;
}

.showcase-scene {
  display: none;
}

.showcase-scene.is-active {
  display: block;
  animation: scene-enter .7s ease-out;
}

@keyframes scene-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-ring,
  .data-flow,
  .showcase-scene.is-active {
    animation: none;
  }
}