/* TRIPLES V6: combined directory, motion and independent background layers */
.site-public .directory-view{isolation:isolate}
#custom-background{position:fixed;inset:0;pointer-events:none;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity .6s ease}
#custom-background.has-custom-background{opacity:1}
/* With a custom background, retain panels' translucent glass instead of the built-in lineup photo. */
.site-public:has(#custom-background.has-custom-background) .lineup-panel{background:rgba(8,8,12,.59)!important;backdrop-filter:blur(7px)}
.site-public:has(#custom-background.has-custom-background) .lineup-panel::before,.site-public:has(#custom-background.has-custom-background) .lineup-panel::after{display:none!important}
.lineup-panel.all-combined{padding:34px 27px 44px;background:linear-gradient(145deg,rgba(18,19,24,.64),rgba(5,5,9,.77))!important;min-height:0}
.lineup-panel.all-combined .role-group+.role-group{margin-top:43px}
.lineup-panel.all-combined .role-group .group-head{margin-bottom:24px}
.lineups-switch{animation:chromatic-reveal .55s cubic-bezier(.19,1,.22,1) both}
.lineups-switch .lineup-panel{animation:panel-materialize .6s cubic-bezier(.2,.85,.24,1) both}
.lineups-switch .leader-card,.lineups-switch .member-card{animation:member-materialize .52s cubic-bezier(.2,.8,.25,1) both}
.lineups-switch .leader-card:nth-child(2n),.lineups-switch .member-card:nth-child(2n){animation-delay:.05s}
.lineups-switch .leader-card:nth-child(3n),.lineups-switch .member-card:nth-child(3n){animation-delay:.1s}
@keyframes chromatic-reveal{from{filter:blur(7px) brightness(1.7);opacity:.35;transform:translateY(10px)}to{filter:blur(0) brightness(1);opacity:1;transform:translateY(0)}}
@keyframes panel-materialize{from{border-color:rgba(240,240,255,.55)}to{border-color:rgba(225,225,235,.1)}}
@keyframes member-materialize{from{opacity:.2;transform:translateY(13px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
/* The Youtube player stays visibly embedded, but is part of the page flow and never covers names. */
.site-public .directory-view #music-dock{position:relative;right:auto;bottom:auto;z-index:3;margin:22px max(22px,calc((100vw - 1490px)/2 + 30px)) 0 auto;width:224px;max-width:calc(100% - 30px);padding:8px;border-radius:15px;box-shadow:0 10px 35px rgba(0,0,0,.65)}
.site-public .directory-view #music-dock .youtube-container{min-height:200px}
.site-public .directory-view #music-dock .youtube-container iframe{height:200px!important;width:100%!important}
.site-public .directory-view #music-dock .volume-row{padding-top:7px}
.site-public .directory-view #music-dock .music-top{letter-spacing:.3px}
.background-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.background-setting{background:rgba(255,255,255,.025);border:1px solid rgba(210,210,230,.15);padding:16px;border-radius:13px;min-width:0}
.background-setting h3{margin:0 0 13px;font-size:13px;font-weight:800}
.background-setting input[type=file]{width:100%;min-width:0}
@media(max-width:820px){.background-settings-grid{grid-template-columns:1fr}.lineup-panel.all-combined{padding:21px 14px 32px}}
@media(max-width:560px){.site-public .directory-view #music-dock{margin:18px auto;width:220px;max-width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){.lineups-switch,.lineups-switch .lineup-panel,.lineups-switch .leader-card,.lineups-switch .member-card{animation-duration:.01ms}}