/* assets/styles/pages/maqamat/interactive-playback-highlight.css */
/* Strong visual highlight for notes while the interactive scale is playing or a note is clicked. */

.note-btn.active ellipse {
  fill: #fff8cf !important;
  stroke: #f4d77d !important;
  stroke-width: 2.8px !important;
  filter: drop-shadow(0 0 8px rgba(255, 224, 138, 0.85)) drop-shadow(0 0 18px rgba(200, 164, 90, 0.52));
}

.note-btn.active line {
  stroke: #fff3bd !important;
  stroke-width: 2.6px !important;
  filter: drop-shadow(0 0 7px rgba(255, 224, 138, 0.62));
}

.note-btn.active path,
.note-btn.active rect {
  fill: #fff3bd !important;
  stroke: #fff3bd !important;
  filter: drop-shadow(0 0 7px rgba(255, 224, 138, 0.62));
}

.note-btn.active {
  animation: interactive-note-pulse 0.48s ease-in-out;
}

.note-key.active .note-key-face,
.note-key.active .note-key-face-colored {
  background: linear-gradient(180deg, rgba(255, 224, 138, 0.25), rgba(200, 164, 90, 0.18)) !important;
  border-color: rgba(255, 224, 138, 0.88) !important;
  color: #fff8cf !important;
  transform: translateY(-5px) scale(1.035) !important;
  box-shadow: 0 0 0 2px rgba(255, 224, 138, 0.18), 0 14px 28px rgba(200, 164, 90, 0.28), 0 0 28px rgba(255, 224, 138, 0.22) !important;
}

.note-key.active .note-key-face span {
  color: #fff8cf !important;
  text-shadow: 0 0 14px rgba(255, 224, 138, 0.58);
}

@keyframes interactive-note-pulse {
  0% { opacity: 0.75; transform: scale(0.985); }
  48% { opacity: 1; transform: scale(1.045); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .note-btn.active {
    animation: none;
  }

  .note-key.active .note-key-face,
  .note-key.active .note-key-face-colored {
    transform: translateY(-3px) !important;
  }
}