.portal--radio {
  cursor: pointer;
  overflow: visible;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.32) 2px 4px),
    radial-gradient(ellipse at 50% 46%, rgba(159, 73, 184, 0.24), transparent 66%),
    #05070b;
}

.radio-app {
  position: absolute;
  isolation: isolate;
  inset: 0;
  overflow: hidden;
  color: #f4e8c7;
  text-decoration: none;
  pointer-events: none;
}

.ui-active .radio-app,
.ui-active .radio-info {
  pointer-events: auto;
}

.radio-visual {
  position: absolute;
  z-index: 1;
  inset: 8% 6% 9% 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  opacity: 0.78;
  filter: drop-shadow(0 0 0.35rem rgba(175, 91, 220, 0.58));
}

.radio-visual::before,
.radio-visual::after {
  position: absolute;
  border: 1px solid rgba(97, 218, 255, 0.46);
  border-radius: 50%;
  content: "";
}

.radio-visual::before {
  inset: 11% 8%;
}

.radio-visual::after {
  inset: 23% 20%;
  border-color: rgba(255, 181, 64, 0.42);
}

.radio-visual span {
  z-index: 1;
  width: 7%;
  min-width: 2px;
  height: 18%;
  background: #70d8ee;
  box-shadow: 0 0 0.28rem rgba(93, 218, 246, 0.72);
  animation: radio-meter 1.15s steps(5, end) infinite alternate;
}

.radio-visual span:nth-child(2),
.radio-visual span:nth-child(8) { height: 38%; animation-delay: -0.42s; }
.radio-visual span:nth-child(3),
.radio-visual span:nth-child(7) { height: 62%; animation-delay: -0.76s; }
.radio-visual span:nth-child(4),
.radio-visual span:nth-child(6) { height: 84%; animation-delay: -0.2s; }
.radio-visual span:nth-child(5) { height: 52%; animation-delay: -0.58s; background: #ffb540; }

.radio-signal {
  position: absolute;
  z-index: 4;
  right: 6%;
  bottom: 10%;
  width: clamp(4px, 0.48vw, 8px);
  aspect-ratio: 1;
  background: #d95bff;
  box-shadow:
    0 0 0 2px rgba(7, 3, 10, 0.88),
    0 0 0.7rem #d95bff;
  animation: radio-signal 2.2s steps(2, end) infinite;
}

.portal--radio .portal__copy {
  position: absolute;
  z-index: 3;
  inset: 0 44% 0 0;
  padding: clamp(0.22rem, 0.58vw, 0.62rem);
  align-content: center;
  background: linear-gradient(90deg, rgba(4, 3, 8, 0.94), rgba(4, 3, 8, 0.72) 76%, transparent);
}

.portal--radio .portal__copy small {
  color: #70d8ee;
  font-size: clamp(0.28rem, 0.44vw, 0.5rem);
}

.portal--radio .portal__copy strong {
  color: #fff1ce;
  font-size: clamp(0.58rem, 1.15vw, 1.15rem);
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.portal--radio .portal__copy em {
  margin-top: 0.13rem;
  color: rgba(217, 201, 167, 0.78);
  font-size: clamp(0.27rem, 0.46vw, 0.52rem);
  white-space: nowrap;
}

.radio-info {
  z-index: 10;
  top: clamp(3px, 0.35vw, 6px);
  right: clamp(3px, 0.35vw, 6px);
  width: clamp(24px, 2vw, 34px);
  border-color: rgba(217, 91, 255, 0.76);
  box-shadow:
    2px 2px 0 rgba(3, 2, 4, 0.88),
    inset 0 0 8px rgba(217, 91, 255, 0.24);
  font-size: clamp(0.7rem, 1.15vw, 1.05rem);
  pointer-events: none;
}

.radio-app:hover,
.radio-app:focus-visible {
  outline: 2px solid #d95bff;
  outline-offset: -4px;
  filter: brightness(1.24);
}

.radio-app:hover .radio-visual,
.radio-app:focus-visible .radio-visual {
  opacity: 1;
  filter: drop-shadow(0 0 0.55rem rgba(217, 91, 255, 0.72));
}

.radio-info:hover,
.radio-info:focus-visible {
  border-color: #70d8ee;
  color: #70d8ee;
}

@keyframes radio-meter {
  from { transform: scaleY(0.48); }
  to { transform: scaleY(1.08); }
}

@keyframes radio-signal {
  0%, 68%, 100% { opacity: 0.96; }
  72%, 86% { opacity: 0.26; }
}

@media (prefers-reduced-motion: reduce) {
  .radio-visual span,
  .radio-signal {
    animation: none;
  }
}