/* =========================================================
   Tridentu shared hero network background
   Use on hero sections with class: tridentu-network-hero
   ========================================================= */

.tridentu-network-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      880px 580px at 50% 52%,
      rgba(0, 191, 255, 0.18) 0%,
      rgba(0, 191, 255, 0.09) 34%,
      rgba(0, 191, 255, 0) 72%
    ),
    radial-gradient(
      640px 430px at 17% 24%,
      rgba(0, 191, 255, 0.08) 0%,
      rgba(0, 191, 255, 0) 72%
    ),
    radial-gradient(
      640px 430px at 84% 28%,
      rgba(0, 191, 255, 0.08) 0%,
      rgba(0, 191, 255, 0) 72%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfeff 44%,
      #f7fcff 74%,
      #ffffff 100%
    );
}

.tridentu-network-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.12) 45%,
      rgba(255, 255, 255, 0.76) 100%
    );
}

.tridentu-network-hero > *:not(.tridentu-hero-network) {
  position: relative;
  z-index: 3;
}

.tridentu-hero-network {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.96;
}

.tridentu-hero-network svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.tridentu-hero-network .network-lines line {
  stroke: rgba(0, 191, 255, 0.22);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.tridentu-hero-network .network-nodes circle {
  fill: rgba(0, 191, 255, 0.72);
  filter: drop-shadow(0 0 9px rgba(0, 191, 255, 0.16));
  transform-box: fill-box;
  transform-origin: center;
  animation: tridentuNodePulse 7.5s ease-in-out infinite;
}

.tridentu-hero-network .network-nodes circle:nth-child(2n) {
  animation-delay: -1.6s;
}

.tridentu-hero-network .network-nodes circle:nth-child(3n) {
  animation-delay: -3.2s;
}

.tridentu-hero-network .network-nodes circle:nth-child(4n) {
  animation-delay: -4.8s;
}

.tridentu-hero-network .network-cluster {
  transform-origin: center;
  transform-box: fill-box;
}

.tridentu-hero-network .cluster-a {
  animation: tridentuDriftClusterA 34s ease-in-out infinite alternate;
}

.tridentu-hero-network .cluster-b {
  animation: tridentuDriftClusterB 40s ease-in-out infinite alternate;
}

.tridentu-hero-network .cluster-c {
  animation: tridentuDriftClusterC 46s ease-in-out infinite alternate;
}

.tridentu-hero-network .cluster-d {
  animation: tridentuDriftClusterD 38s ease-in-out infinite alternate;
}

.tridentu-hero-network .cluster-e {
  animation: tridentuDriftClusterE 42s ease-in-out infinite alternate;
}

@keyframes tridentuDriftClusterA {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(18px, -14px, 0) scale(1.015); }
}

@keyframes tridentuDriftClusterB {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-16px, 15px, 0) scale(1.014); }
}

@keyframes tridentuDriftClusterC {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(14px, 18px, 0) scale(1.012); }
}

@keyframes tridentuDriftClusterD {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(12px, -12px, 0) scale(1.012); }
}

@keyframes tridentuDriftClusterE {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-14px, -12px, 0) scale(1.013); }
}

@keyframes tridentuNodePulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (max-width: 768px) {
  .tridentu-hero-network {
    opacity: 0.84;
  }

  .tridentu-hero-network .network-lines line {
    stroke-width: 1.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tridentu-hero-network .cluster-a,
  .tridentu-hero-network .cluster-b,
  .tridentu-hero-network .cluster-c,
  .tridentu-hero-network .cluster-d,
  .tridentu-hero-network .cluster-e,
  .tridentu-hero-network .network-nodes circle {
    animation: none;
  }
}