/* TRIPLES V7 — right-side music, floating chrome emblem, seamless LEADER cards */
/* Two-column page layout ensures the music is next to the roster, never overlaying any names. */
.site-public .directory-layout{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 238px;
  align-items:start;gap:17px;max-width:1710px;margin:0 auto;padding:0 24px;
}
.site-public .directory-layout>.directory-main{
  max-width:none;width:100%;min-width:0;margin:0;padding:22px 0 60px;
}
.site-public .directory-layout>#music-dock{
  position:sticky;top:84px;right:auto;bottom:auto;margin:365px 0 0;width:100%;
  min-width:0;max-width:none;box-sizing:border-box;padding:8px;border-radius:16px;
  z-index:10;align-self:start;overflow:hidden;
  border:1px solid rgba(206,207,223,.38);
  background:linear-gradient(145deg,rgba(27,27,34,.96),rgba(7,7,12,.97));
  box-shadow:0 14px 36px #0009,0 0 14px #ffffff0d;
}
.site-public .directory-layout>#music-dock[hidden]{display:none!important}
.site-public .directory-layout>#music-dock .youtube-container{min-height:200px}
.site-public .directory-layout>#music-dock .youtube-container iframe{width:100%!important;height:200px!important}
.site-public .directory-layout>#music-dock .music-top{font-size:9px;letter-spacing:.25px}
.site-public .directory-layout>#music-dock .volume-row{gap:6px}
.site-public .directory-layout>#music-dock .music-top a{font-size:9px}
/* The chrome wordmark breathes subtly, with a separate diffuse halo rather than blur on the letters. */
.directory-intro{position:relative;isolation:isolate}
.directory-intro::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  width:min(560px,75vw);height:180px;left:50%;top:48%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(223,227,243,.17) 0%,rgba(160,168,192,.065) 45%,transparent 74%);
  filter:blur(24px);transform:translate(-50%,-50%);
  animation:triple-halo 5.6s ease-in-out infinite alternate;
}
.directory-intro .main-wordmark{will-change:transform;animation:triple-float 5s ease-in-out infinite;
  filter:drop-shadow(0 9px 16px #000) drop-shadow(0 0 14px #ffffff35);
}
@keyframes triple-float{0%,100%{transform:translate3d(0,4px,0)}50%{transform:translate3d(0,-6px,0)}}
@keyframes triple-halo{from{opacity:.4;transform:translate(-50%,-50%) scale(.85)}to{opacity:1;transform:translate(-50%,-50%) scale(1.13)}}
/* Switch animations: opacity + smooth upward lift staggered per profile. */
.lineups-switch{animation:none!important}
.lineups-switch .lineup-panel{animation:triple-panel-reveal .48s ease-out both!important}
.lineups-switch .leader-card,.lineups-switch .member-card{
  animation:triple-card-rise .67s cubic-bezier(.18,.78,.21,1) both!important;
  animation-delay:calc(65ms + var(--card-index,0)*42ms)!important;
}
@keyframes triple-panel-reveal{from{opacity:.45;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes triple-card-rise{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
/* LEADER — single seamless chrome shell with photo dissolving into the info section. */
.site-public .leader-card{
  border:1px solid rgba(195,196,206,.57);
  background:linear-gradient(128deg,#18181d 0%,#08080c 75%,#16161c 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 12px 25px #0008;
}
.site-public .leader-card::before{background:linear-gradient(135deg,rgba(255,255,255,.27) 0,rgba(255,255,255,.05) 9%,transparent 23% 87%,rgba(238,240,250,.3) 97%,transparent 100%)}
.site-public .leader-photo{
  flex:0 0 54%;overflow:hidden;background:transparent;border:0;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 51%,rgba(0,0,0,.94) 65%,rgba(0,0,0,.52) 82%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 51%,rgba(0,0,0,.94) 65%,rgba(0,0,0,.52) 82%,transparent 100%);
}
.site-public .leader-photo::after{display:none!important}
.site-public .leader-photo img{filter:grayscale(1) brightness(.76);width:100%;height:100%;object-fit:cover}
.site-public .leader-content{margin-left:-8%;padding-left:3px;z-index:3;max-width:50%;}
.site-public .leader-card:hover{box-shadow:0 0 17px rgba(236,238,248,.22),0 12px 28px #000b;border-color:#dedfe5}
/* The flex item stays clear of the page's floating particles and background. */
.site-public .directory-layout>.directory-main{z-index:2;position:relative}
@media(max-width:1160px){
 .site-public .directory-layout{grid-template-columns:minmax(0,1fr) 218px;gap:12px;padding:0 14px}
 .site-public .directory-layout>#music-dock{margin-top:320px}
}
@media(max-width:920px){
 .site-public .directory-layout{display:flex;flex-direction:column;gap:0;padding:0 12px}
 .site-public .directory-layout>.directory-main{padding:16px 0 24px}
 .site-public .directory-layout>#music-dock{position:relative;top:auto;margin:8px auto 20px;width:226px;max-width:100%;align-self:center}
}
@media(prefers-reduced-motion:reduce){
 .directory-intro .main-wordmark,.directory-intro::before,.lineups-switch .lineup-panel,
 .lineups-switch .leader-card,.lineups-switch .member-card{animation:none!important}
}