/* Wifi icon animation — durations come from CSS variables set on .wifi-svg-wrap */
.wifi-segment {
  opacity: 0;
  animation: wifiReveal var(--wifi-segment-duration, 2200ms) infinite
    cubic-bezier(0.22, 0.82, 0.28, 1);
}

.wifi-segment-dot {
  animation-delay: 0s;
}

.wifi-segment-1 {
  animation-delay: 0.16s;
}

.wifi-segment-2 {
  animation-delay: 0.32s;
}

.wifi-segment-3 {
  animation-delay: 0.48s;
}

.wifi-svg-wrap:hover .wifi-segment {
  animation-duration: var(--wifi-hover-duration, 1200ms);
}

@keyframes wifiReveal {
  0% {
    opacity: 0;
    transform: translateY(16px) scaleY(0.1);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
  48% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
  66% {
    opacity: 0;
    transform: translateY(-2px) scaleY(1.02);
  }
  100% {
    opacity: 0;
    transform: translateY(16px) scaleY(0.1);
  }
}