/* Clubs ring (js/clubs-carousel.js): the biggest clubs on a 3D circle, POP RGB glitch look.
   Only transforms and opacity change while it turns; nothing animates at rest. */

.fe-clubring{position:relative;margin:0 0 2rem;padding:1.25rem 0 1rem;border-radius:1rem;overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,193,7,.16),rgba(11,11,11,0) 60%),#0b0b0b;
  border:1px solid rgba(255,193,7,.18);box-shadow:-2px 0 0 rgba(255,42,60,.35),2px 0 0 rgba(0,229,255,.35)}
.fe-clubring[hidden]{display:none}

.fe-clubring-head{text-align:center;padding:0 1rem}
.fe-clubring-title{position:relative;display:inline-block;margin:0;font-size:clamp(1.3rem,3.6vw,1.9rem);font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;color:#ffc107}
.fe-clubring-title::before,.fe-clubring-title::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.75}
.fe-clubring-title::before{color:#ff2a3c;transform:translate(-2px,0)}
.fe-clubring-title::after{color:#00e5ff;transform:translate(2px,0)}
.fe-clubring-hint{margin:.35rem 0 0;color:#9ca3af;font-size:.85rem}

.fe-clubring-stage{position:relative;height:25rem;perspective:1400px;perspective-origin:50% 40%;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;outline:none}
.fe-clubring-stage.is-dragging{cursor:grabbing}
.fe-clubring-stage:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,193,7,.6)}
.fe-clubring-track{position:absolute;left:50%;top:1.25rem;width:0;height:0;transform-style:preserve-3d}

.fe-clubcard{position:absolute;left:-6.75rem;top:0;width:13.5rem;height:21rem;display:flex;flex-direction:column;
  border-radius:.9rem;overflow:hidden;text-decoration:none;color:#f2ede3;background:#141414;
  border:1px solid rgba(255,255,255,.08);backface-visibility:hidden;will-change:transform,opacity;
  filter:brightness(calc(.45 + var(--fe-depth,1) * .55))}
.fe-clubcard:hover{color:#f2ede3}
.fe-clubcard.is-front{border-color:rgba(255,193,7,.7);filter:none;
  box-shadow:-4px 0 0 rgba(255,42,60,.85),4px 0 0 rgba(0,229,255,.85),0 24px 60px -18px rgba(0,0,0,.9)}
.fe-clubcard.is-side{cursor:pointer}

.fe-clubcard-media{position:relative;flex:1 1 auto;overflow:hidden;
  background:linear-gradient(135deg,#ff2a3c 0%,#ffc107 45%,#00e5ff 100%)}
.fe-clubcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.fe-clubcard.has-img .fe-clubcard-img{opacity:1}
.fe-clubcard.has-img .fe-clubcard-initial{display:none}
.fe-clubcard-initial{position:absolute;inset:0;display:grid;place-items:center;font-size:5rem;font-weight:900;color:#0b0b0b;
  text-shadow:-4px 0 0 rgba(255,42,60,.7),4px 0 0 rgba(0,229,255,.7)}
/* RGB split on the portraits beside the front card: the same image tinted red and cyan, shifted
   and screened over it. The front portrait stays clean and glitches briefly on hover. */
.fe-clubcard.is-side.has-img .fe-clubcard-media::before,.fe-clubcard.is-side.has-img .fe-clubcard-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.6;
  background:linear-gradient(var(--fe-tint),var(--fe-tint)),var(--fe-img) center/cover no-repeat;background-blend-mode:multiply}
.fe-clubcard.is-side.has-img .fe-clubcard-media::before{--fe-tint:#ff2a3c;transform:translateX(-5px)}
.fe-clubcard.is-side.has-img .fe-clubcard-media::after{--fe-tint:#00e5ff;transform:translateX(5px)}
.fe-clubcard.is-front:hover .fe-clubcard-img,.fe-clubcard.is-front:focus-visible .fe-clubcard-img{animation:fe-clubcard-glitch .32s steps(2,end) 1}
@keyframes fe-clubcard-glitch{
  0%{filter:drop-shadow(-6px 0 0 rgba(255,42,60,.9)) drop-shadow(6px 0 0 rgba(0,229,255,.9));clip-path:inset(0 0 55% 0);transform:translateX(-4px)}
  50%{filter:drop-shadow(5px 0 0 rgba(255,42,60,.9)) drop-shadow(-5px 0 0 rgba(0,229,255,.9));clip-path:inset(40% 0 0 0);transform:translateX(4px)}
  100%{filter:none;clip-path:inset(0);transform:none}}

.fe-clubcard-body{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .85rem .85rem;background:#0f0f0f}
.fe-clubcard-name{font-weight:800;font-size:1rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fe-clubcard-sub{color:#9ca3af;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1em}
.fe-clubcard-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem .5rem;margin-top:.45rem}
.fe-clubcard-members{font-size:.72rem;font-weight:700;color:#0b0b0b;background:#ffc107;border-radius:999px;padding:.12rem .55rem;white-space:nowrap}
.fe-clubcard-cta{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#ffc107;white-space:nowrap}
.fe-clubcard:not(.is-front) .fe-clubcard-cta{visibility:hidden}

.fe-clubring-controls{display:flex;align-items:center;justify-content:center;gap:1rem;padding:0 1rem}
.fe-clubring-live{margin:0;min-width:12rem;text-align:center;color:#d1d5db;font-size:.85rem}
.fe-clubring-btn{width:2.6rem;height:2.6rem;border-radius:50%;display:inline-grid;place-items:center;border:1px solid rgba(255,193,7,.55);
  background:#0b0b0b;color:#ffc107;font-size:1.1rem;transition:transform .18s cubic-bezier(.2,1.4,.4,1),box-shadow .18s}
.fe-clubring-btn:hover,.fe-clubring-btn:focus-visible{transform:scale(1.08);outline:none;box-shadow:-2px 0 0 #ff2a3c,2px 0 0 #00e5ff}

@media (max-width:640px){
  .fe-clubring-stage{height:21rem}
  .fe-clubcard{left:-5.5rem;width:11rem;height:17.5rem}
  .fe-clubcard-initial{font-size:4rem}
}

/* Reduced motion or visual effects off: a plain row that scrolls natively, no 3D, no glitch. */
.fe-clubring.is-flat .fe-clubring-stage{height:auto;perspective:none;cursor:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem}
.fe-clubring.is-flat .fe-clubring-track{position:static;width:auto;height:auto;display:flex;gap:1rem;transform:none}
.fe-clubring.is-flat .fe-clubcard{position:relative;left:auto;flex:0 0 auto;scroll-snap-align:center;filter:none;opacity:1}
.fe-clubring.is-flat .fe-clubcard .fe-clubcard-img{filter:none;animation:none}
.fe-clubring.is-flat .fe-clubcard-media::before,.fe-clubring.is-flat .fe-clubcard-media::after{content:none}
.fe-clubring.is-flat .fe-clubcard-cta{visibility:visible}
.fe-clubring.is-flat .fe-clubring-hint{display:none}
@media (prefers-reduced-motion:reduce){.fe-clubring-btn,.fe-clubcard-img{transition:none}}

/* ------------------------------------------------------------------ page head and artist search
   One POP entrance when the page opens, a short stagger on the search results, nothing at rest. */
.fe-clubs{max-width:58rem}
.fe-clubs-head{text-align:center}
.fe-clubs-title{position:relative;display:inline-block;margin:0 0 .25rem;font-size:clamp(2rem,6vw,3.2rem);font-weight:900;
  text-transform:uppercase;letter-spacing:.1em;color:#ffc107}
.fe-clubs-title::before,.fe-clubs-title::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.75}
.fe-clubs-title::before{color:#ff2a3c;transform:translate(-3px,0)}
.fe-clubs-title::after{color:#00e5ff;transform:translate(3px,0)}
.fe-clubs-subtitle{color:#d1d5db}

.fe-artist-search{position:relative;max-width:40rem;margin-inline:auto}
.fe-artist-search-form{position:relative;display:flex;align-items:center}
.fe-artist-search-icon{position:absolute;left:1.1rem;color:#ffc107;font-size:1.05rem;pointer-events:none}
.fe-artist-search-input{width:100%;padding:.85rem 3rem .85rem 2.9rem;border-radius:999px;border:2px solid #ffc107;background:#0b0b0b;color:#f2ede3;
  font-size:1.05rem;font-weight:600;transition:box-shadow .18s,transform .18s cubic-bezier(.2,1.4,.4,1)}
.fe-artist-search-input::placeholder{color:#8b8b8b;font-weight:500}
.fe-artist-search-input:focus{outline:none;box-shadow:-4px 0 0 #ff2a3c,4px 0 0 #00e5ff;transform:scale(1.01)}
.fe-artist-search-spinner{position:absolute;right:1.1rem;color:#ffc107}
.fe-artist-search-hint{margin:.45rem 1rem 0;color:#9ca3af;text-align:center}

.fe-artist-results:empty{display:none}
.fe-artist-results{margin-top:.75rem}
.fe-artist-results-empty{color:#d1d5db;text-align:center;padding:.5rem}
.fe-artist-list{display:flex;flex-direction:column;gap:.45rem}
.fe-artist-row{display:flex;align-items:center;gap:.8rem;padding:.55rem .7rem;border-radius:.8rem;background:#141414;border:1px solid rgba(255,255,255,.08);
  animation:fe-artist-in .38s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--fe-i,0) * 40ms);
  transition:border-color .18s,box-shadow .18s,transform .18s cubic-bezier(.2,1.4,.4,1)}
.fe-artist-row:hover,.fe-artist-row:focus-within{border-color:rgba(255,193,7,.7);box-shadow:-3px 0 0 #ff2a3c,3px 0 0 #00e5ff;transform:translateX(2px)}
.fe-artist-avatar{flex:0 0 auto;width:3rem;height:3rem;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-weight:900;font-size:1.25rem;color:#0b0b0b;
  background:linear-gradient(135deg,#ff2a3c 0%,#ffc107 45%,#00e5ff 100%)}
.fe-artist-avatar img{width:100%;height:100%;object-fit:cover}
.fe-artist-text{flex:1 1 auto;display:flex;flex-direction:column}
.fe-artist-name{font-weight:800;color:#f2ede3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fe-artist-sub{font-size:.78rem;color:#9ca3af;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fe-artist-action{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}
.fe-artist-action form{margin:0}
.fe-artist-members{font-size:.72rem;font-weight:700;color:#0b0b0b;background:#ffc107;border-radius:999px;padding:.12rem .55rem;white-space:nowrap}
@media (max-width:480px){.fe-artist-members{display:none}}

.fe-clubs-empty{text-align:center;padding:2rem 1rem;border-radius:1rem;border:1px dashed rgba(255,193,7,.4);color:#d1d5db}
.fe-clubs-fallback{display:flex;flex-direction:column;gap:.35rem;padding:1rem}
.fe-clubs-fallback a{color:#ffc107;font-weight:700}

[data-fe-pop-in]{animation:fe-pop-in .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes fe-pop-in{0%{opacity:0;transform:translateY(14px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes fe-artist-in{0%{opacity:0;transform:translateY(8px) scale(.98)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  [data-fe-pop-in],.fe-artist-row{animation:none}
  .fe-artist-row,.fe-artist-search-input{transition:none}
}
html[data-effects="off"] [data-fe-pop-in],html[data-effects="off"] .fe-artist-row{animation:none}