.hero-art {
  isolation: isolate;
  background: radial-gradient(circle at 50% 48%, #164b46 0, #0d302d 38%, transparent 72%);
}

.command-tower {
  position: relative;
  width: min(84%, 350px);
  aspect-ratio: 1;
}

.signal-field,
.official-tower {
  position: absolute;
  width: 100%;
  height: 100%;
}

.signal-field { overflow: visible; }
.official-tower {
  inset: 0;
  z-index: 1;
  width: 64%;
  height: 64%;
  margin: auto;
  object-fit: contain;
}

.radar-ring,
.propagation {
  fill: none;
  stroke: rgba(184, 255, 218, 0.18);
  stroke-width: 1;
}

.radar-ring-two { stroke: rgba(184, 255, 218, 0.11); }

.propagation {
  stroke: var(--mint-soft);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.propagation-one { animation: propagate-one 8s ease-out infinite; }
.propagation-two { animation: propagate-two 8s ease-out infinite; }

.travel-pulse {
  fill: var(--mint-soft);
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(54, 228, 154, 0.45));
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
  animation: travel-pulse 8s ease-in-out infinite;
}

.signal-card {
  opacity: 0;
  transform: translateY(5px) scale(0.985);
  will-change: transform, opacity;
}

.left-card { left: 0; top: 63%; animation: left-card 8s ease-out infinite; }
.right-card { right: 0; top: 16%; animation: right-card 8s ease-out infinite; }
.left-card i,
.right-card i { animation: status-dot 8s ease-in-out infinite; }
.right-card i { animation-delay: 5.1s; }

@keyframes propagate-one {
  0%, 25% { opacity: 0; transform: scale(0.62); }
  28% { opacity: 0.28; }
  40%, 100% { opacity: 0; transform: scale(1.62); }
}

@keyframes propagate-two {
  0%, 76% { opacity: 0; transform: scale(0.68); }
  79% { opacity: 0.18; }
  91%, 100% { opacity: 0; transform: scale(1.5); }
}

@keyframes left-card {
  0%, 36% { opacity: 0; transform: translateY(5px) scale(0.985); }
  44%, 88% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(4px) scale(0.985); }
}

@keyframes right-card {
  0%, 61% { opacity: 0; transform: translateY(5px) scale(0.985); }
  69%, 88% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(4px) scale(0.985); }
}

@keyframes travel-pulse {
  0%, 49% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  51% { opacity: 0.78; }
  61%, 100% { opacity: 0; transform: translate(104px, -40px) scale(1); }
}

@keyframes status-dot {
  0%, 36%, 100% { opacity: 0.42; transform: scale(0.84); }
  41%, 83% { opacity: 1; transform: scale(1); }
}

@media (max-width: 760px) {
  .command-tower { width: min(92%, 330px); }
  .radar-ring-one { opacity: 0.7; }
  .radar-ring-two { opacity: 0.35; }
  .left-card { left: 3%; top: 64%; }
  .right-card { right: 3%; top: 14%; }
}

@media (max-width: 430px) {
  .command-tower { width: 310px; }
  .signal-card { font-size: 0.71rem; padding: 0.6rem 0.72rem 0.55rem 1.72rem; }
  .signal-card i { left: 0.58rem; top: 0.83rem; }
  .left-card { left: 2%; top: 67%; }
  .right-card { right: 2%; top: 13%; }
  .radar-ring-two { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .command-tower,
  .propagation,
  .travel-pulse,
  .signal-card,
  .signal-card i { animation: none; }

  .command-tower,
  .official-tower { opacity: 1; transform: none; }
  .propagation,
  .travel-pulse { opacity: 0; }
  .signal-card { opacity: 1; transform: none; }
  .signal-card i { opacity: 1; transform: none; }
}