/* 
 * Stile CSS per l'handpan virtuale interattivo
 * Questo file definisce l'aspetto dell'handpan e gli effetti visivi
 */

.handpan-container {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  user-select: none;
}

.handpan-image {
  width: 100%;
  height: auto;
  display: block;
}

.handpan-note-area {
  position: absolute;
  cursor: pointer;
  border-radius: 50%; /* Default: circle */
  transition: all 0.2s ease;
  z-index: 10;
}

.handpan-note-area:hover {
  transform: scale(1.05);
}

.handpan-note-area.active {
  transform: scale(0.95);
}

.handpan-note-area.dragging {
  z-index: 100;
  opacity: 0.8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  cursor: move;
}

/* Forme specifiche */
.handpan-note-area.square {
  border-radius: 10%;
}

.handpan-note-area.ellipse {
  border-radius: 50%;
  transform: scaleX(1.5);
}

.handpan-note-area.ellipse:hover {
  transform: scaleX(1.5) scale(1.05);
}

.handpan-note-label {
  position: absolute;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* Animazione per il feedback visivo quando si suona una nota */
@keyframes notePlay {
  0% {
    transform: scale(0.95);
    filter: brightness(1.5);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.handpan-note-area.playing {
  animation: notePlay 0.5s ease-out;
}

/* Animazioni specifiche per forme diverse */
.handpan-note-area.square.playing {
  animation: notePlaySquare 0.5s ease-out;
}

@keyframes notePlaySquare {
  0% {
    transform: scale(0.95);
    filter: brightness(1.5);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.handpan-note-area.ellipse.playing {
  animation: notePlayEllipse 0.5s ease-out;
}

@keyframes notePlayEllipse {
  0% {
    transform: scaleX(1.5) scale(0.95);
    filter: brightness(1.5);
  }
  100% {
    transform: scaleX(1.5) scale(1);
    filter: brightness(1);
  }
}

/* Stili per il pannello di controllo delle aree */
.handpan-controls {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.handpan-controls-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.handpan-control-group {
  margin-bottom: 15px;
}

.handpan-control-label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.handpan-control-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.handpan-color-picker {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  cursor: pointer;
}

.handpan-transparency-slider {
  width: 100%;
}

/* Stili responsive */
@media (max-width: 768px) {
  .handpan-container {
    max-width: 400px;
  }
  
  .handpan-note-label {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .handpan-container {
    max-width: 300px;
  }
  
  .handpan-note-label {
    font-size: 10px;
  }
}