/* ============================================================
   THE WALK - sonido.css
   Botón de sonido universal
   ============================================================ */


/* ---------- BOTÓN PRINCIPAL (AMB ALTA PRIORITAT) ---------- */
button#sonido,
button.sonido-btn {
  position: fixed !important;
  top: 75% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 9999 !important; /* Assegura que quedi per sobre de canvas o capes */
  
  width: 120px !important;
  height: 120px !important;
  
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  
  /* Forçar el color del text (◯ / ◉) */
  color: #111111 !important; 
  font-size: 48px !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  line-height: 1 !important;
  
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  
  cursor: pointer !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------- ESTAT ACTIU (SÓ REPRODUINT-SE) ---------- */
button#sonido.active,
button.sonido-btn.active {
  color: #0d3810 !important;
  border-color: rgba(105, 170, 93, 0.9) !important;
  background: rgba(210, 245, 205, 0.95) !important;
  box-shadow: 0 0 35px rgba(105, 170, 93, 0.6) !important;
}


/* ---------- HOVER ---------- */
#sonido:hover,
.sonido-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.699);
  transform: translate(-50%, -50%) scale(1.06);
}

/* ---------- ACTIVO ---------- */
#sonido.active,
.sonido-btn.active {
  color: #0d3810;
  border-color: rgba(105, 170, 93, 0.8);
  background: rgba(210, 245, 205, 0.95);
  box-shadow: 0 0 35px rgba(105, 170, 93, 0.5);
}


/* ---------- SILENCIO ---------- */
#sonido.silence,
.sonido-btn.silence {
  color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.01);
}

/* ---------- RESPIRACIÓN ---------- */
/* ---------- RESPIRACIÓN ---------- */
#sonido.breath,
.sonido-btn.breath {
  animation: sonidoBreathe 8s ease-in-out infinite;
}

@keyframes sonidoBreathe {
  0% { 
    opacity: 0.8; 
    transform: translate(-50%, -50%) scale(1); 
  }
  25% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1.05); 
  }
  50% { 
    opacity: 0.8; 
    transform: translate(-50%, -50%) scale(1); 
  }
  75% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1.05); 
  }
  100% { 
    opacity: 0.8; 
    transform: translate(-50%, -50%) scale(1); 
  }
}

/* ---------- TAMAÑOS ---------- */
#sonido.large,
.sonido-btn.large {
  width: 140px;
  height: 140px;
  font-size: 56px;
}

#sonido.small,
.sonido-btn.small {
  width: 80px;
  height: 80px;
  font-size: 32px;
}

#sonido.xsmall,
.sonido-btn.xsmall {
  width: 60px;
  height: 60px;
  font-size: 24px;
}

/* ---------- DESPLAZAMIENTO ---------- */
.sonido-offset-y-10  { transform: translate(-50%, calc(-50% + 10px)); }
.sonido-offset-y-20  { transform: translate(-50%, calc(-50% + 20px)); }
.sonido-offset-y-30  { transform: translate(-50%, calc(-50% + 30px)); }
.sonido-offset-y--10 { transform: translate(-50%, calc(-50% - 10px)); }
.sonido-offset-y--20 { transform: translate(-50%, calc(-50% - 20px)); }
.sonido-offset-y--30 { transform: translate(-50%, calc(-50% - 30px)); }

.sonido-offset-x-10  { transform: translate(calc(-50% + 10px), -50%); }
.sonido-offset-x-20  { transform: translate(calc(-50% + 20px), -50%); }
.sonido-offset-x--10 { transform: translate(calc(-50% - 10px), -50%); }
.sonido-offset-x--20 { transform: translate(calc(-50% - 20px), -50%); }

.sonido-offset-xy-10-20 { transform: translate(calc(-50% + 10px), calc(-50% + 20px)); }
.sonido-offset-xy--10-20 { transform: translate(calc(-50% - 10px), calc(-50% + 20px)); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  #sonido,
  .sonido-btn {
    width: 80px;
    height: 80px;
    font-size: 32px;
  }
  
  #sonido.large,
  .sonido-btn.large {
    width: 100px;
    height: 100px;
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  #sonido,
  .sonido-btn {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
  
  #sonido.large,
  .sonido-btn.large {
    width: 80px;
    height: 80px;
    font-size: 32px;
  }
  
  #sonido.small,
  .sonido-btn.small {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sonido.breath,
  .sonido-btn.breath {
    animation: none;
  }
  
  #sonido:hover,
  .sonido-btn:hover {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* TEMPORAL - SOLO PARA VERIFICACIÓN*/
#volver, .volver-btn,
#reset-btn, .reset-btn,
#sound-mode, .mode-btn,
.nav-dot,
.zona-card,
.zona-btn {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    pointer-events: auto !important;
    transition: none !important;
} 

/* Mantener el botón de sonido igual (no se toca) */
#sonido {
    opacity: 1 !important;
    /* ya es visible por defecto */
}