/* Guarco Radio · logo animado
   Se mueve mientras cualquier reproductor de la página está sonando
   (la clase "guarco-sonando" la pone guarco-logo-animado.js en <html>). */

.gl-logo {
  position: relative;
  width: min(100%, 15rem);
  aspect-ratio: 689 / 580;
  margin: 0 auto 12px;
}
.gl-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.gl-mic     { transform-origin: 51.8% 99%; }
.gl-ondaL,
.gl-ondaR   { transform-origin: 51.8% 45%; }
.gl-chispa1 { transform-origin: 86.3% 19.5%; }
.gl-chispa2 { transform-origin: 95.5% 36.7%; }

/* Anillos de señal detrás del logo */
.gl-anillos {
  position: absolute;
  left: 51.8%; top: 38%;
  width: 0; height: 0;
  pointer-events: none;
}
.gl-anillos span {
  position: absolute;
  left: 50%; top: 50%;
  width: 12rem; height: 12rem;
  margin: -6rem 0 0 -6rem;
  border-radius: 50%;
  border: 1.5px solid rgba(130,220,255,.35);
  opacity: 0;
  transform: scale(.6);
}

.guarco-sonando .gl-anillos span { animation: gl-expandir 3.6s cubic-bezier(.2,.6,.3,1) infinite; }
.guarco-sonando .gl-anillos span:nth-child(2) { animation-delay: 1.2s; }
.guarco-sonando .gl-anillos span:nth-child(3) { animation-delay: 2.4s; }
.guarco-sonando .gl-mic     { animation: gl-respirar 1.15s ease-in-out infinite alternate; }
.guarco-sonando .gl-ondaL   { animation: gl-ondaIzq .58s ease-in-out infinite alternate; }
.guarco-sonando .gl-ondaR   { animation: gl-ondaDer .58s ease-in-out infinite alternate; animation-delay: .29s; }
.guarco-sonando .gl-chispa1 { animation: gl-brillo 1.9s ease-in-out infinite; }
.guarco-sonando .gl-chispa2 { animation: gl-brillo 1.9s ease-in-out infinite; animation-delay: .95s; }

@keyframes gl-expandir {
  0%   { opacity: .9; transform: scale(.6); }
  100% { opacity: 0;  transform: scale(1.7); }
}
@keyframes gl-respirar { to { transform: scale(1.035); } }
@keyframes gl-ondaIzq {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to   { transform: translateX(-4%) scale(1.04); opacity: .6; }
}
@keyframes gl-ondaDer {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to   { transform: translateX(4%) scale(1.04); opacity: .6; }
}
@keyframes gl-brillo {
  0%, 100% { transform: scale(.55) rotate(0deg); opacity: .45; }
  50%      { transform: scale(1.2) rotate(25deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .guarco-sonando .gl-anillos span,
  .guarco-sonando .gl-logo img { animation: none; }
}