/* Band logo reel in the home hero. Logos: tools/build_band_reel.py, motion: band-reel.js. */
.band-reel{--reel-h:clamp(92px,15svh,156px);--reel-mark:calc(var(--reel-h)*.72);--reel-gap:clamp(40px,4.4vw,88px);--reel-fade:clamp(28px,9vw,180px);--reel-perf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6' preserveAspectRatio='none'%3E%3Crect x='7' width='10' height='6' rx='1.5' fill='%23f4f0e6' fill-opacity='.1'/%3E%3C/svg%3E");position:relative;height:var(--reel-h);min-width:0;user-select:none;-webkit-user-select:none}
/* Without JS the reel is a plain scrollable row. */
.reel-viewport{height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;outline:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--reel-fade),#000 calc(100% - var(--reel-fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--reel-fade),#000 calc(100% - var(--reel-fade)),transparent)}
.reel-viewport::-webkit-scrollbar{display:none}
.reel-track{display:flex;align-items:center;gap:var(--reel-gap);width:max-content;height:100%;margin:0;padding:0 var(--reel-fade);list-style:none;background:var(--reel-perf) 0 calc(100% - 8px)/var(--reel-perf-step,24px) 6px repeat-x}
.band-reel.is-live .reel-viewport{overflow:hidden;touch-action:pan-y;cursor:grab}
.band-reel.is-live .reel-track{padding:0;will-change:transform}
.band-reel.is-dragging .reel-viewport{cursor:grabbing}
/* The viewport mask would cut its own outline. */
.band-reel:has(.reel-viewport:focus-visible)::after{content:'';position:absolute;inset:4px max(16px,calc((100% - 1320px)/2));border:1px solid var(--accent-on-dark);pointer-events:none}

.reel-item{position:relative;flex:none;height:calc(var(--reel-mark)*var(--s,1))}
.reel-item img{width:auto;height:100%;max-width:none;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none;filter:drop-shadow(0 1px 0 #000000b0) drop-shadow(0 5px 7px #0000008c) drop-shadow(0 14px 22px #00000066)}
.reel-grime{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#120e0c0d 0%,#120e0c5c 60%,#0b0807a8 100%),url(images/stage-grime.webp) var(--grime-x,0) var(--grime-y,0)/192px 192px;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity .5s}
.reel-item:before{content:'';position:absolute;inset:-40% -22%;background:radial-gradient(closest-side,#d8798030,#d8798010 55%,transparent);opacity:0;transition:opacity .5s;pointer-events:none}
@media(hover:hover) and (pointer:fine){
 .reel-item{transition:transform .6s cubic-bezier(.2,.75,.25,1)}
 .band-reel:not(.is-dragging) .reel-item:hover{transform:translateY(-4px) scale(1.06)}
 .band-reel:not(.is-dragging) .reel-item:hover .reel-grime{opacity:.25}
 .band-reel:not(.is-dragging) .reel-item:hover:before{opacity:1}
}

/* Light sweep */
.band-reel:before{content:'';position:absolute;z-index:1;top:-35%;bottom:-10%;left:0;width:clamp(220px,28vw,560px);background:radial-gradient(50% 50% at 50% 58%,#ffe8d070,#ffe8d024 45%,transparent 72%);mix-blend-mode:soft-light;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
 .band-reel.is-live .reel-viewport{animation:reel-flicker 1.5s .25s both}
 .band-reel.is-live:before{opacity:1;transform:translateX(-100%);animation:reel-sweep 17s 2.5s cubic-bezier(.45,0,.55,1) infinite}
 .band-reel.is-asleep:before{animation-play-state:paused}
 @keyframes reel-flicker{0%{opacity:0}10%{opacity:.55}14%{opacity:.08}26%{opacity:.8}31%{opacity:.3}46%{opacity:.95}52%{opacity:.7}100%{opacity:1}}
 @keyframes reel-sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100vw)}}
}
@media(max-width:1200px){.band-reel:has(.reel-viewport:focus-visible)::after{inset-inline:35px}}
@media(max-width:700px){
 .band-reel{--reel-h:clamp(80px,12.5svh,108px);--reel-mark:calc(var(--reel-h)*.7);--reel-gap:clamp(30px,8vw,46px);--reel-fade:clamp(20px,7vw,48px)}
 .band-reel:has(.reel-viewport:focus-visible)::after{inset-inline:20px}
}
@media(min-width:701px) and (max-height:650px){.band-reel{--reel-h:clamp(84px,14svh,104px)}}
@media(prefers-reduced-motion:reduce){.reel-item,.reel-grime,.reel-item:before{transition:none}}
@media(forced-colors:active){.reel-grime,.reel-item:before,.band-reel:before{display:none}}
@media print{.band-reel{display:none}}