/* Instruments list page styles */
.instruments-list { display:flex; flex-direction:column; }
.instrument-row { border-top:1px solid var(--primary); }
.instrument-link { display:flex; gap:20px; align-items:flex-start; width:100%; text-decoration:none; color:inherit; }
.instrument-tile { width:130px; height:130px; flex:0 0 130px; border-radius:var(--border-radius); overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--dark); transition: background 0.25s ease; }
.instrument-tile img { width:100%; height:100%; object-fit:contain; display:block; }
.instrument-link:hover .instrument-tile,
.instrument-link:focus-within .instrument-tile,
.instrument-row:hover .instrument-tile {
  background: var(--primary);
}
.instrument-content { display:flex; flex:1 1 auto; gap:20px; align-items:flex-start; min-width:0; }
.instrument-main { flex:1 1 auto; min-width:0; }
.instrument-title { margin:0 0 8px 0; font-size:1.4rem; }
.instrument-desc {
  max-height: 4.5rem;
  overflow: hidden;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-word;
}

@media (max-width: 640px) {
  .instrument-link { gap:12px; align-items:flex-start; }
  .instrument-tile { width:80px; height:80px; flex:0 0 80px; }
  .instrument-content { flex-direction:column; gap:4px; }
}

.instruments-page > h1 + .instruments-list { margin-top: 2rem; }

/* Slide-up animation (no bounce/overshoot) */
@keyframes slideUpFadeIn {
  0%   { opacity: 0; transform: translateY(36px); }
  100% { opacity: 1; transform: translateY(0); }
}

.instruments-list > .instrument-row,
.instruments-list > li {
  opacity: 0;
  transform: translateY(36px);
  will-change: transform, opacity;
}

.instruments-list > .instrument-row.in-view,
.instruments-list > li.in-view {
  animation-name: slideUpFadeIn;
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
}

.instruments-list > .instrument-row.in-view:nth-child(1),
.instruments-list > li.in-view:nth-child(1) { animation-delay: 0ms; }
.instruments-list > .instrument-row.in-view:nth-child(2),
.instruments-list > li.in-view:nth-child(2) { animation-delay: 80ms; }
.instruments-list > .instrument-row.in-view:nth-child(3),
.instruments-list > li.in-view:nth-child(3) { animation-delay: 160ms; }
.instruments-list > .instrument-row.in-view:nth-child(4),
.instruments-list > li.in-view:nth-child(4) { animation-delay: 240ms; }
.instruments-list > .instrument-row.in-view:nth-child(5),
.instruments-list > li.in-view:nth-child(5) { animation-delay: 320ms; }
.instruments-list > .instrument-row.in-view:nth-child(6),
.instruments-list > li.in-view:nth-child(6) { animation-delay: 400ms; }
.instruments-list > .instrument-row.in-view:nth-child(7),
.instruments-list > li.in-view:nth-child(7) { animation-delay: 480ms; }
.instruments-list > .instrument-row.in-view:nth-child(8),
.instruments-list > li.in-view:nth-child(8) { animation-delay: 560ms; }
.instruments-list > .instrument-row.in-view:nth-child(9),
.instruments-list > li.in-view:nth-child(9) { animation-delay: 640ms; }
.instruments-list > .instrument-row.in-view:nth-child(10),
.instruments-list > li.in-view:nth-child(10) { animation-delay: 720ms; }
.instruments-list > .instrument-row.in-view:nth-child(11),
.instruments-list > li.in-view:nth-child(11) { animation-delay: 800ms; }
.instruments-list > .instrument-row.in-view:nth-child(12),
.instruments-list > li.in-view:nth-child(12) { animation-delay: 880ms; }

@media (prefers-reduced-motion: reduce) {
  .instruments-list > .instrument-row,
  .instruments-list > li { animation: none; transform: none; opacity: 1; }
}