/* Instrument fan (gear presentation instrument-shelf, gear-fan.js): photo cards on a dark studio floor, turned
   about 30° and overlapping like fan blades, a brushed aluminium name plate under each, and the card's window. */
.gear-fan{
  --fw:clamp(200px,24vw,300px);
  --pad:clamp(1.75rem,4vw,3rem);
  --floor:calc(var(--pad) + var(--fw) * 1.25);
  position:relative;margin:1.5rem 0 2rem;padding:var(--pad) 0 1.25rem;border-radius:24px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(42% 46% at 50% 18%,rgba(255,236,210,.17),transparent 72%),
    radial-gradient(38% 9% at 50% var(--floor),rgba(0,0,0,.65),transparent 75%),
    radial-gradient(55% 22% at 50% calc(var(--floor) + 3rem),rgba(255,240,220,.06),transparent 70%),
    linear-gradient(180deg,#1c1a1f 0,#141317 calc(var(--floor) - 1px),#2a282d var(--floor),#09080a calc(var(--floor) + 2px),#0d0c0f 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05);
  color:#f2eee8;
}
.gear-fan::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}
@media (max-width:640px){.gear-fan{--fw:clamp(170px,54vw,280px)}}
.gear-fan__stage{
  position:relative;height:calc(var(--fw) * 1.25 + 4.25rem + var(--fw) * .32);
  perspective:1500px;perspective-origin:50% calc(var(--fw) * 1.25);transform-style:preserve-3d;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none;
}
.gear-fan__stage.is-dragging{cursor:grabbing}
.gear-fan__stage:focus-visible .gear-fan__card[aria-selected=true] .gear-fan__face{outline:2px solid #fbf7ef;outline-offset:4px}
.gear-fan__card{
  position:absolute;left:50%;top:0;width:var(--fw);margin-left:calc(var(--fw) / -2);
  transform-style:preserve-3d;will-change:transform;backface-visibility:hidden;transition:opacity .3s ease;
}
.gear-fan:not(.is-ready) .gear-fan__card{transition:none}
.gear-fan__face{
  position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;
  background:#111;color:#f2eee8;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 34px 44px -18px rgba(0,0,0,.85),0 8px 16px rgba(0,0,0,.5);
  -webkit-box-reflect:below 3px linear-gradient(transparent 72%,rgba(255,255,255,.16));
}
.gear-fan__face img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.gear-fan__card[aria-selected=true] .gear-fan__face:hover img{transform:scale(1.04)}
.gear-fan__face::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(6,5,8,var(--shade,0))}
.gear-fan__gloss{
  position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(118deg,rgba(255,255,255,calc(.24 * var(--glint,0))) 0%,rgba(255,255,255,calc(.06 * var(--glint,0))) 30%,transparent 42%),
    linear-gradient(0deg,rgba(0,0,0,.32),transparent 28%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.25);
}
.gear-fan__face:focus-visible{outline:2px solid #fbf7ef;outline-offset:4px}
.gear-fan__plate{
  position:relative;display:grid;place-items:center;width:86%;min-height:3.1rem;margin:1rem auto 0;padding:.45rem .75rem;border-radius:5px;
  text-align:center;font:650 .8rem/1.25 var(--as-font-ui,system-ui,sans-serif);letter-spacing:.02em;color:#1d2024;text-shadow:0 1px 0 rgba(255,255,255,.65);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,rgba(0,0,0,.035) 1px 3px),
    linear-gradient(180deg,#f2f3f5,#c9cdd2 52%,#adb3b9);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.25),0 8px 16px rgba(0,0,0,.55);
  filter:brightness(calc(1 - var(--shade,0) * .75));
}
.gear-fan__plate::before,.gear-fan__plate::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#8a9097 70%);box-shadow:0 1px 1px rgba(0,0,0,.4)}
.gear-fan__plate::before{left:6px}
.gear-fan__plate::after{right:6px}
.gear-fan__plate span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gear-fan__card .vis-badge{position:absolute;top:.5rem;left:.5rem;z-index:2}
.gear-fan__card--add .gear-fan__face{
  display:grid;place-content:center;justify-items:center;gap:.4rem;font:600 .9rem/1.2 system-ui,sans-serif;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px),#18171b;border:2px dashed rgba(255,255,255,.28);
}
.gear-fan__card--add .gear-fan__face span{font-size:2.6rem;font-weight:300;line-height:1}
.gear-fan__controls{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:1rem;padding:0 1rem}
.gear-fan__btn{width:2.9rem;height:2.9rem;padding:0;justify-content:center;border-radius:50%;font-size:1.5rem;line-height:1}
.gear-fan__count{margin:0;min-width:10rem;max-width:min(26rem,60vw);text-align:center;font:600 .85rem/1.3 var(--as-font-ui,system-ui,sans-serif);color:rgba(242,238,232,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gear-fan__admin{margin-top:.5rem}

.gear-fan-modal{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:clamp(.6rem,3vw,2.5rem);
  background:rgba(6,5,8,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .28s ease;
}
.gear-fan-modal[hidden]{display:none}
.gear-fan-modal.is-open{opacity:1}
.gear-fan-modal__panel{
  --as-text:#f2eee8;
  position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(16rem,1fr);width:min(1120px,100%);max-height:calc(100dvh - 2rem);
  border-radius:18px;overflow:hidden;color:#f2eee8;
  background:linear-gradient(180deg,#1d1b20,#121114);
  box-shadow:0 40px 100px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08);
  transform:translateY(16px) scale(.97);transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.gear-fan-modal.is-open .gear-fan-modal__panel{transform:none}
.gear-fan-modal__photo{margin:0;min-height:0;display:grid;place-items:center;background:radial-gradient(80% 80% at 50% 40%,#1a191c,#070608)}
.gear-fan-modal__photo img{display:block;width:100%;height:100%;max-height:calc(100dvh - 2rem);object-fit:contain}
.gear-fan-modal__text{display:flex;flex-direction:column;gap:1rem;min-height:0;padding:2.25rem 1.5rem 1.5rem;overflow:auto}
.gear-fan-modal__title{margin:0;padding-right:2.75rem;font:700 clamp(1.2rem,2.4vw,1.7rem)/1.2 var(--as-font-display,Syne,system-ui,sans-serif);color:#fff}
.gear-fan-modal__body{color:rgba(242,238,232,.86)}
.gear-fan-modal__body[hidden]{display:none}
.gear-fan-modal__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:auto}
.gear-fan-modal__close{position:absolute;top:.75rem;right:.75rem;z-index:2;width:2.6rem;height:2.6rem;padding:0;justify-content:center;border-radius:50%;font-size:1.5rem;line-height:1}
@media (max-width:760px){
  .gear-fan-modal__panel{grid-template-columns:1fr;grid-template-rows:auto auto;overflow:auto}
  .gear-fan-modal__photo img{max-height:58dvh}
  .gear-fan-modal__text{overflow:visible}
}
html.has-fan-modal{overflow:hidden}
@media (prefers-reduced-motion:reduce){.gear-fan-modal,.gear-fan-modal__panel,.gear-fan__card,.gear-fan__face img{transition:none}}