.movements-container { padding: 16px; display: flex; flex-direction: column; gap: 4px; } .movements-empty { padding: 48px; text-align: center; color: rgba(201, 169, 110, 0.6); font-family: 'Georgia', serif; } .movement-row { display: flex; align-items: stretch; min-height: 90px; } .movement-label { width: 160px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; padding-right: 12px; text-align: right; } .movement-name { font-family: 'Georgia', serif; font-size: 13px; font-weight: 600; color: #e8d5b5; } .movement-era { font-size: 10px; color: rgba(201, 169, 110, 0.5); margin-top: 2px; } .movement-band-track { flex: 1; position: relative; min-height: 80px; background: rgba(0, 0, 0, 0.2); border-radius: 4px; border: 1px solid rgba(201, 169, 110, 0.1); } .movement-band { position: absolute; top: 4px; bottom: 4px; border-radius: 3px; min-width: 40px; } .artist-portrait { position: absolute; top: 50%; transform: translate(-50%, -50%); background: none; border: 2px solid rgba(201, 169, 110, 0.6); border-radius: 50%; width: 56px; height: 56px; padding: 0; cursor: pointer; overflow: visible; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; z-index: 2; } .artist-portrait:hover { transform: translate(-50%, -50%) scale(1.15); border-color: #c9a96e; box-shadow: 0 4px 16px rgba(201, 169, 110, 0.4); z-index: 10; } .artist-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .artist-portrait .artist-name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; color: #e8d5b5; margin-top: 4px; opacity: 0; transition: opacity 0.2s; pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); } .artist-portrait:hover .artist-name { opacity: 1; } @media (max-width: 768px) { .movement-label { width: 100px; } .artist-portrait { width: 44px; height: 44px; } }