/* ─── Album Rack ──────────────────────────────────────────────────────────────
   The featured cover sits front-center with a vinyl-edge sliver. Behind it, a
   fan of skewed covers recedes to the right like records in a store bin.
   Tap/click any behind-cover promotes it. Featured cover → /playlist/{slug}.
   Two variables control the whole aesthetic:
     --rack-tilt: skew angle for behind-covers (10-12deg is the sweet spot)
     --rack-edge: width of the vinyl edge on the featured cover (8-14px)
──────────────────────────────────────────────────────────────────────────── */
.rc-rack{
    --rack-tilt: 11deg;
    --rack-edge: 12px;
    --rack-w: 320px;
    --rack-h: 320px;
    --rack-gap: 46px;      /* horizontal offset between behind-covers */
    --rack-scale: .92;     /* each behind-cover shrinks by this factor */
    --rack-fade: .78;      /* each behind-cover fades by this factor */

    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
}
.rc-rack--compact{ --rack-w: 240px; --rack-h: 240px; --rack-gap: 34px; padding: 1rem 0; }

.rc-rack-stage{
    position: relative;
    height: calc(var(--rack-h) + 60px);   /* room for the label under the cover */
    perspective: 1400px;
    transform-style: preserve-3d;
}

.rc-rack-item{
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--rack-w);
    height: var(--rack-h);
    margin-left: calc(var(--rack-w) / -2);
    text-decoration: none;
    color: inherit;
    transition: transform .55s cubic-bezier(.2,.7,.2,1),
                opacity   .55s ease,
                filter    .55s ease;
    cursor: pointer;
    will-change: transform, opacity;
}
.rc-rack-item:focus-visible{ outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 3px; }

.rc-rack-cover{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    overflow: hidden;
    background: #0e0e14;
    box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
}
.rc-rack-cover img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    /* Cover images pop; behind-covers dim via parent filter */
}
.rc-rack-fallback{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; text-align: center;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    letter-spacing: .08em;
    color: rgba(255,255,255,.85);
    font-size: 1.4rem;
    line-height: 1.15;
}
.rc-rack--compact .rc-rack-fallback{ font-size: 1.1rem; }

/* Vinyl edge — a dark sliver on the LEFT of the featured cover, suggesting
   the record's actual edge peeking out from a sleeve. Only visible on featured. */
.rc-rack-edge{
    position: absolute;
    left: calc(var(--rack-edge) * -1);
    top: 3%; bottom: 3%;
    width: var(--rack-edge);
    background: linear-gradient(90deg, #050508 0%, #1a1a24 55%, #05050a 100%);
    border-radius: 2px 0 0 2px;
    box-shadow: inset 1px 0 0 rgba(255,255,255,.06), inset -1px 0 0 rgba(0,0,0,.6);
    opacity: 0;
    transition: opacity .5s ease;
}
.rc-rack-item[data-pos="0"] .rc-rack-edge{ opacity: 1; }

.rc-rack-label{
    position: absolute;
    top: calc(var(--rack-h) + 14px);
    left: 0; right: 0;
    text-align: center;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    letter-spacing: .08em;
    font-size: 1.3rem;
    color: var(--text, #e6e8ea);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.rc-rack--compact .rc-rack-label{ font-size: 1rem; }
.rc-rack-item[data-pos="0"] .rc-rack-label{ opacity: 1; }

/* Positioning: JS assigns data-pos where 0 = featured, -1/+1 = flanking, etc.
   Featured sits flat and centered. Behind-covers skew, scale down, and slide right. */
.rc-rack-item[data-pos="0"]{ transform: translate3d(0, 0, 0) skewY(0) scale(1); z-index: 10; }

.rc-rack-item[data-pos="1"]{
    transform: translate3d(calc(var(--rack-gap) * 1),  0, 0) skewY(calc(var(--rack-tilt) * -1)) scale(var(--rack-scale));
    opacity: var(--rack-fade); filter: brightness(.85); z-index: 9;
}
.rc-rack-item[data-pos="2"]{
    transform: translate3d(calc(var(--rack-gap) * 2),  0, 0) skewY(calc(var(--rack-tilt) * -1)) scale(calc(var(--rack-scale) * var(--rack-scale)));
    opacity: calc(var(--rack-fade) * var(--rack-fade)); filter: brightness(.7); z-index: 8;
}
.rc-rack-item[data-pos="3"]{
    transform: translate3d(calc(var(--rack-gap) * 3),  0, 0) skewY(calc(var(--rack-tilt) * -1)) scale(calc(var(--rack-scale) * var(--rack-scale) * var(--rack-scale)));
    opacity: calc(var(--rack-fade) * var(--rack-fade) * var(--rack-fade)); filter: brightness(.55); z-index: 7;
}
.rc-rack-item[data-pos="4"]{
    transform: translate3d(calc(var(--rack-gap) * 4),  0, 0) skewY(calc(var(--rack-tilt) * -1)) scale(calc(var(--rack-scale) * var(--rack-scale) * var(--rack-scale) * var(--rack-scale)));
    opacity: calc(var(--rack-fade) * var(--rack-fade) * var(--rack-fade) * var(--rack-fade)); filter: brightness(.4); z-index: 6;
}

/* Symmetric peek on the left for anything already-flipped-past */
.rc-rack-item[data-pos="-1"]{
    transform: translate3d(calc(var(--rack-gap) * -1), 0, 0) skewY(var(--rack-tilt)) scale(var(--rack-scale));
    opacity: var(--rack-fade); filter: brightness(.85); z-index: 9;
}
.rc-rack-item[data-pos="-2"]{
    transform: translate3d(calc(var(--rack-gap) * -2), 0, 0) skewY(var(--rack-tilt)) scale(calc(var(--rack-scale) * var(--rack-scale)));
    opacity: calc(var(--rack-fade) * var(--rack-fade)); filter: brightness(.7); z-index: 8;
}

/* Far offstage — hidden but still in DOM (no width shift on nav) */
.rc-rack-item[data-pos="off"]{ opacity: 0; pointer-events: none; transform: translate3d(0,0,0) scale(.5); z-index: 1; }

/* Hover lift on the flanking covers hints at interactivity */
.rc-rack-item[data-pos="1"]:hover,
.rc-rack-item[data-pos="2"]:hover,
.rc-rack-item[data-pos="-1"]:hover{
    filter: brightness(1);
    transform: translate3d(calc(var(--rack-gap) * var(--pos, 1)), -8px, 0) skewY(calc(var(--rack-tilt) * -1)) scale(var(--rack-scale));
}

/* Controls */
.rc-rack-controls{
    display: flex; align-items: center; justify-content: center;
    gap: 1.5rem; margin-top: 1.5rem;
}
.rc-rack-btn{
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: var(--text, #e6e8ea);
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 1.4rem; line-height: 1;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .1s;
    display: flex; align-items: center; justify-content: center;
}
.rc-rack-btn:hover{ border-color: var(--accent, #00c8ff); background: rgba(0,200,255,.08); }
.rc-rack-btn:active{ transform: scale(.94); }

.rc-rack-dots{
    display: flex; gap: 6px; align-items: center;
}
.rc-rack-dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.25);
    transition: background .2s, transform .2s;
    cursor: pointer;
}
.rc-rack-dot.is-active{ background: var(--accent, #00c8ff); transform: scale(1.4); }

/* Mobile: shrink featured, disable perspective (heavy on some devices) */
@media (max-width: 640px){
    .rc-rack{ --rack-w: 240px; --rack-h: 240px; --rack-gap: 32px; --rack-tilt: 9deg; }
    .rc-rack--compact{ --rack-w: 200px; --rack-h: 200px; }
    .rc-rack-stage{ perspective: none; }
    /* Farther-back covers hidden — mobile screens can't fit five layers */
    .rc-rack-item[data-pos="3"],
    .rc-rack-item[data-pos="4"],
    .rc-rack-item[data-pos="-2"]{ opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce){
    .rc-rack-item{ transition-duration: .01ms; }
}

/* ─── Grid/Rack view toggle (on /playlists) ─────────────────────────────── */
.rc-rack-toggle{ display:flex; justify-content:center; gap:.6rem; margin-bottom:2rem; }
.rc-view-btn{
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    color: var(--text, #e6e8ea);
    padding: .5rem 1.4rem;
    border-radius: 20px;
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    transition: all .2s;
}
.rc-view-btn:hover{ border-color: var(--accent, #00c8ff); color: var(--accent, #00c8ff); }
.rc-view-btn.is-active{
    background: var(--accent, #00c8ff);
    color: #000;
    border-color: var(--accent, #00c8ff);
}