/* Fast sequential entrance, with the existing page cross-fade preserved. */
@keyframes site-entrance{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.topbar{animation:site-entrance .3s ease-out both}
#homeView>.hero{animation:site-entrance .4s ease-out 60ms both}
#beats>.section-heading{animation:site-entrance .32s ease-out 110ms both}
/* Keep dropdowns above the playlist even while the entrance animation creates a stacking context. */
#filters{position:relative;z-index:20;overflow:visible;flex-wrap:wrap;animation:site-entrance .32s ease-out 150ms both}
#filters .multi-filter.open{z-index:1}
.beat-row-enter{transition:opacity .28s ease var(--row-delay,0ms),transform .28s cubic-bezier(.22,1,.36,1) var(--row-delay,0ms)}
.beat-row-enter.is-visible{opacity:1;transform:none}
/* Update 45: actual text widths decide whether the third genre is shown. */
.beat-row .beat-genres{overflow:hidden;white-space:nowrap}
.beat-row .beat-genres>span{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.beat-row .beat-genres>span[hidden]{display:none!important}
.beat-row .beat-genres.genres-measuring>span{flex:0 0 auto;overflow:visible}
#contactInfo .contact-intro,#contactInfo .contact-form>.contact-identity,#contactInfo .contact-topics,#contactInfo .contact-form>.contact-field,#contactInfo .contact-preference,#contactInfo .contact-form-actions{animation:site-entrance .35s ease-out both}
#contactInfo .contact-form>.contact-identity{animation-delay:45ms}
#contactInfo .contact-topics{animation-delay:85ms}
#contactInfo .contact-form>.contact-field{animation-delay:125ms}
#contactInfo .contact-preference{animation-delay:160ms}
#contactInfo .contact-form-actions{animation-delay:200ms}
/* History uses the empty middle of each row for the real audio waveform. */
.history-list{border-radius:6px}
.history-row{grid-template-columns:28px 48px 34px minmax(90px,140px) minmax(0,1fr) 84px 88px!important;gap:15px;min-height:84px}
.history-copy{min-width:0}.history-copy a{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px}
.history-row .history-waveform{display:block!important;width:100%;height:48px;min-width:0;cursor:pointer;opacity:.85}
.history-row .history-waveform:focus-visible{outline:1px solid #ddd;outline-offset:5px}
.history-row.is-current{background:#ffffff06}.history-row.is-current .history-waveform{opacity:1}
.history-row>img{filter:grayscale(1)}.history-row.is-current>img{filter:none}
.history-row .wave-pending{opacity:.25}
@media(max-width:1100px){.history-row{grid-template-columns:24px 44px 32px minmax(85px,115px) minmax(0,1fr) 70px 78px!important;gap:10px}.history-row>b{display:none}}
@media(max-width:760px){.history-row{grid-template-columns:22px 44px 32px minmax(0,1fr) 78px!important;gap:9px;padding:13px 10px}.history-row .history-waveform{grid-column:2/-1;grid-row:2;height:42px}.history-row .history-price{grid-column:5;grid-row:1}.history-row>.history-date{display:block!important;grid-column:2/-1;grid-row:3;text-align:left;font-size:9px}.history-row>.history-number{grid-row:1}.history-row .history-copy{grid-row:1;grid-column:4}.history-row>img{grid-row:1}.history-row>.history-play{grid-row:1}}
@media(prefers-reduced-motion:reduce){.topbar,#homeView>.hero,#beats>.section-heading,#filters,#contactInfo *{animation:none!important}.beat-row-enter{opacity:1;transform:none;transition:none!important}}