/* ==========================================================
   NEW/30 AUTHENTICATED MEMBER MUSIC
   CENTERED FAN CAROUSEL
   ========================================================== */

.member-main-music,
.member-main-connect {
  overflow: hidden;
}


/* ----------------------------------------------------------
   FAN STAGE
   No native horizontal scrolling.
   Every card is positioned around one true center point.
   ---------------------------------------------------------- */

.member-fan-music {
  position: relative;

  width: 100%;

  height:
    clamp(
      340px,
      36vw,
      460px
    );

  margin:
    20px auto
    10px;

  overflow: hidden;

  isolation: isolate;

  touch-action: pan-y;

  overscroll-behavior-x:
    contain;

  user-select: none;

  cursor: ew-resize;

  outline: none;
}


/* ----------------------------------------------------------
   FAN CARDS
   Absolute positioning removes negative-margin drift and
   eliminates the browser scrollbar entirely.
   ---------------------------------------------------------- */

.member-fan-card {
  position: absolute;

  left: 50%;
  top: 50%;

  width:
    clamp(
      118px,
      14vw,
      190px
    );

  padding: 0;

  border:
    1px solid
    rgba(255, 142, 170, .14);

  border-radius: 20px;

  overflow: hidden;

  appearance: none;

  color: #fff;

  background:
    #13090e;

  box-shadow:
    0 20px 44px
    rgba(0, 0, 0, .42);

  cursor: pointer;

  opacity:
    var(
      --fan-opacity,
      1
    );

  transform:
    translate(
      -50%,
      -50%
    )
    translateX(
      var(
        --fan-x,
        0px
      )
    )
    translateY(
      var(
        --fan-y,
        0px
      )
    )
    rotate(
      var(
        --fan-rotate,
        0deg
      )
    )
    scale(
      var(
        --fan-scale,
        1
      )
    );

  transform-origin:
    center bottom;

  transition:
    transform
      .28s
      cubic-bezier(
        .22,
        .85,
        .32,
        1
      ),
    opacity
      .22s ease,
    filter
      .22s ease,
    box-shadow
      .22s ease,
    border-color
      .22s ease;

  will-change:
    transform,
    opacity;
}


/* No hover repositioning.
   Hover must never fight the carousel engine. */

.member-fan-card:hover {
  filter:
    brightness(1.04);
}


/* The selected release always owns the center and Z plane. */

.member-fan-card.is-active {
  border-color:
    rgba(
      255,
      66,
      109,
      .68
    );

  filter:
    brightness(1.08);

  box-shadow:
    0 28px 70px
    rgba(0, 0, 0, .62),
    0 0 0 1px
    rgba(
      255,
      66,
      109,
      .18
    );
}


.member-fan-card:focus-visible {
  outline:
    2px solid
    #ff426d;

  outline-offset:
    5px;
}


.member-fan-card img {
  width: 100%;

  aspect-ratio:
    3 / 4;

  display: block;

  object-fit: cover;
}


.member-fan-card-copy {
  position: absolute;

  inset:
    auto 0 0;

  padding:
    52px
    12px
    13px;

  text-align: left;

  pointer-events: none;

  background:
    linear-gradient(
      transparent,
      rgba(
        0,
        0,
        0,
        .96
      )
    );
}


.member-fan-card-copy strong {
  display: block;

  overflow: hidden;

  color: #fff;

  font-size:
    clamp(
      .72rem,
      1vw,
      1rem
    );

  line-height: 1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  text-shadow:
    0 2px 8px
    rgba(
      0,
      0,
      0,
      .8
    );
}


.member-fan-card-copy small {
  display: block;

  margin-top: 5px;

  color: #ffb5c6;

  font-size:
    clamp(
      .6rem,
      .8vw,
      .76rem
    );
}


/* ----------------------------------------------------------
   MEMBER PLAYER
   ---------------------------------------------------------- */

.member-main-player-shell {
  max-width: 850px;

  margin:
    4px auto
    10px;

  padding:
    14px 18px;

  border:
    1px solid
    rgba(
      255,
      142,
      170,
      .16
    );

  border-radius:
    18px;

  background:
    rgba(
      8,
      4,
      7,
      .78
    );
}


.member-main-player-shell strong {
  display: block;

  margin-bottom:
    9px;
}


.member-main-player-shell audio {
  width: 100%;
}


/* ----------------------------------------------------------
   CONNECTIONS
   ---------------------------------------------------------- */

.member-main-connected-links {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top:
    25px;
}


.member-main-connected-links a {
  padding:
    11px
    16px;

  border:
    1px solid
    rgba(
      255,
      142,
      170,
      .24
    );

  border-radius:
    999px;

  color:
    #ffd7e0;

  text-decoration:
    none;

  background:
    rgba(
      255,
      255,
      255,
      .035
    );
}


.member-main-empty {
  position: absolute;

  left: 50%;
  top: 50%;

  width:
    min(
      820px,
      calc(
        100% - 30px
      )
    );

  padding:
    28px;

  border:
    1px solid
    rgba(
      255,
      142,
      170,
      .12
    );

  border-radius:
    18px;

  color:
    rgba(
      255,
      247,
      249,
      .67
    );

  text-align:
    center;

  background:
    rgba(
      255,
      255,
      255,
      .025
    );

  transform:
    translate(
      -50%,
      -50%
    );
}


/* ----------------------------------------------------------
   TABLET / MOBILE
   All 12 tracks remain mathematically inside the stage.
   Swipe horizontally to rotate through them.
   ---------------------------------------------------------- */

@media (
  max-width: 700px
) {

  .member-fan-music {
    height:
      330px;

    margin-top:
      10px;
  }


  .member-fan-card {
    width:
      clamp(
        104px,
        30vw,
        135px
      );

    border-radius:
      16px;
  }


  .member-fan-card-copy {
    padding:
      40px
      9px
      10px;
  }

}


/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

@media (
  prefers-reduced-motion:
  reduce
) {

  .member-fan-card {
    transition:
      none;
  }

}



/* ==========================================================
   PHASE 16O-P2 | FAN PLAYER INTERACTION
   ========================================================== */

.member-fan-card.is-active {
  border-color: rgba(255, 66, 109, .86);
  box-shadow:
    0 34px 82px rgba(0, 0, 0, .68),
    0 0 0 1px rgba(255, 66, 109, .24),
    0 0 34px rgba(255, 66, 109, .10);
}

.member-fan-card.is-playing {
  border-color: rgba(255, 82, 124, .98);
  filter: brightness(1.10) saturate(1.05);
}

.member-fan-card.is-paused {
  border-color: rgba(255, 181, 198, .70);
  filter: brightness(1.04);
}

.member-fan-card::after {
  content: attr(data-play-feedback);
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 14px;
  color: rgba(255, 255, 255, .96);
  font-size: clamp(.68rem, 1.05vw, .92rem);
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .84);
  background: rgba(9, 4, 8, .36);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.member-fan-card.show-play-feedback::after {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .member-fan-card::after {
    transition: none;
  }
}