/**
 * style.css — MidiVault supplemental styles
 * ------------------------------------------------------------------
 * Tailwind (via CDN) handles almost everything. This file only covers
 * what utility classes can't express cleanly: the animated
 * piano-roll hero backdrop (the site's one signature visual), custom
 * scrollbar theming, selection/focus colors, and reduced-motion
 * handling. Kept intentionally small.
 * ------------------------------------------------------------------
 */

::selection {
  background: #F2A93B;
  color: #14120F;
}

:focus-visible {
  outline: 2px solid #F2A93B;
  outline-offset: 2px;
}

/* Slim themed scrollbars for the artist list / search dropdown */
*::-webkit-scrollbar {
  width: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: #33302A;
  border-radius: 3px;
}

/**
 * Piano-roll hero backdrop.
 * A grid of thin vertical lines (the piano-roll's beat divisions)
 * plus faint horizontal amber bands (the "notes"), drifting slowly
 * upward — evoking a MIDI sequencer's piano-roll view. Pure CSS,
 * no JS, no images.
 */
.piano-roll-bg {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(51, 48, 42, 0.5) 38px 40px),
    repeating-linear-gradient(0deg, transparent 0 78px, rgba(242, 169, 59, 0.06) 78px 80px);
  background-size: 40px 100%, 100% 80px;
  animation: roll-drift 14s linear infinite;
}

@keyframes roll-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 -80px; }
}

@media (prefers-reduced-motion: reduce) {
  .piano-roll-bg {
    animation: none;
  }
}

/* Prevent the hidden player bar from intercepting clicks beneath it */
#player-bar.translate-y-full {
  pointer-events: none;
}