/*
 * audio.css
 * ---------
 * Petit bouton carré en haut à gauche pour activer/couper
 * la musique de fond (apparaît après la fenêtre d'accueil).
 */

.aud {
  position: fixed;
  top: 1.8rem;
  left: 1.5rem;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  border: 4px solid #fff;
  border-radius: 8px;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--shop-red) 0 10px,
      var(--shop-red-dark) 10px 20px
    );
  box-shadow:
    0 0 0 4px var(--shop-gold),
    6px 7px 0 var(--shop-green-dark);
  cursor: pointer;
  transition: all .4s;
}

.aud.vis {
  display: flex;
}

.aud:hover {
  transform: scale(1.1);
}

.aud.on {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--shop-green) 0 10px,
      var(--shop-green-dark) 10px 20px
    );
  animation: audioPulse 2s ease-in-out infinite;
}

@keyframes audioPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 4px var(--shop-gold),
      6px 7px 0 var(--shop-green-dark);
  }

  50% {
    box-shadow:
      0 0 20px 5px rgba(255, 59, 59, .35),
      0 0 0 4px var(--shop-gold),
      6px 7px 0 var(--shop-green-dark);
  }
}

.br {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}

.br span {
  display: block;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
}

.aud.on .br span {
  animation: audioBar .8s ease-in-out infinite;
}

.aud.on .br span:nth-child(2) {
  animation-delay: .15s;
}

.aud.on .br span:nth-child(3) {
  animation-delay: .3s;
}

.aud.on .br span:nth-child(4) {
  animation-delay: .1s;
}

@keyframes audioBar {
  0%,
  100% {
    height: 4px;
  }

  50% {
    height: 16px;
  }
}