.about-network-scene {
  position: relative;
  width: 100%;
  min-height: 280px;
}

.about-network-scene__svg {
  display: block;
  width: 100%;
  height: auto;
}

.about-intro-frame--network {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(260px, 32vw, 360px);
  padding: 1rem;
  background: linear-gradient(155deg, #fff 0%, #f4f7fb 55%, #eef2f7 100%);
  animation: none;
}

.about-intro-frame--network::after {
  display: none;
}

.about-intro-frame--network .about-network-scene {
  min-height: 0;
}

.about-network-scene__orbit {
  transform-origin: 240px 180px;
  animation: about-net-orbit-spin 48s linear infinite;
}

.about-network-scene__orbit--inner {
  animation: about-net-orbit-spin 32s linear infinite reverse;
}

@keyframes about-net-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

.about-network-scene__glow {
  animation: about-net-glow 5s ease-in-out infinite;
}

@keyframes about-net-glow {
  0%,
  100% {
    opacity: 0.65;
  }

  50% {
    opacity: 1;
  }
}

.about-network-scene__link {
  animation: about-net-link-flow 2.8s linear infinite;
  animation-delay: var(--link-delay, 0s);
}

@keyframes about-net-link-flow {
  to {
    stroke-dashoffset: -24;
  }
}

.about-network-scene__core-pulse {
  fill: rgba(255, 209, 0, 0.25);
  transform-origin: 240px 180px;
  animation: about-net-core-pulse 2.6s ease-out infinite;
}

@keyframes about-net-core-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.85;
  }

  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

.about-network-scene__node-pulse {
  fill: rgba(255, 209, 0, 0.3);
  transform-origin: center;
  animation: about-net-node-pulse 2.4s ease-out infinite;
}

.about-network-scene__node--1 .about-network-scene__node-pulse {
  animation-delay: 0.2s;
}

.about-network-scene__node--2 .about-network-scene__node-pulse {
  animation-delay: 0.7s;
}

.about-network-scene__node--3 .about-network-scene__node-pulse {
  animation-delay: 1.1s;
}

.about-network-scene__node--4 .about-network-scene__node-pulse {
  animation-delay: 1.5s;
}

.about-network-scene__node--5 .about-network-scene__node-pulse {
  animation-delay: 1.9s;
}

@keyframes about-net-node-pulse {
  0% {
    transform: scale(0.4);
    opacity: 0.9;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

.about-network-scene__parcel--1 {
  transform-box: fill-box;
  offset-path: path("M240 180 L382 118");
  offset-rotate: auto;
  animation: about-net-parcel-a 5s ease-in-out infinite;
}

.about-network-scene__parcel--2 {
  transform-box: fill-box;
  offset-path: path("M98 242 L240 180 L382 242");
  offset-rotate: auto;
  animation: about-net-parcel-b 7s ease-in-out infinite;
}

@keyframes about-net-parcel-a {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes about-net-parcel-b {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

.about-network-scene__badge {
  animation: about-net-badge-float 4s ease-in-out infinite;
}

@keyframes about-net-badge-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-network-scene__orbit,
  .about-network-scene__orbit--inner,
  .about-network-scene__glow,
  .about-network-scene__link,
  .about-network-scene__core-pulse,
  .about-network-scene__node-pulse,
  .about-network-scene__parcel--1,
  .about-network-scene__parcel--2,
  .about-network-scene__badge {
    animation: none;
  }
}