/* =========================================================
   Responsive Slide Whistle Stylesheet
   ========================================================= */

:root {
  --whistle-stroke: #1c1917;
  --whistle-brass: #ca8a04;
}

/* Sound Waves pulsing animation */
@keyframes wavePulse {
  0% {
    transform: scale(0.92) translateX(0);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.06) translateX(-4px);
    opacity: 0.95;
  }
  100% {
    transform: scale(0.92) translateX(0);
    opacity: 0.2;
  }
}

.sound-waves.is-playing {
  opacity: 1;
}

.sound-waves.is-playing .wave-1 {
  animation: wavePulse 0.3s ease-in-out infinite alternate;
}

.sound-waves.is-playing .wave-2 {
  animation: wavePulse 0.35s ease-in-out infinite alternate 0.08s;
}

.sound-waves.is-playing .wave-3 {
  animation: wavePulse 0.4s ease-in-out infinite alternate 0.16s;
}

/* Piston assembly smooth translation */
#piston-assembly {
  transition: transform 0.06s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

/* Accessibility Focus States */
button:focus-visible,
input:focus-visible {
  outline: 2px solid #d97706;
  outline-offset: 3px;
}

/* Modal entry animation */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-in {
  animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Status indicator pulse when audio active */
.audio-active-pulse {
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}