/* ============================================================
   MIX DECK — карточки в виде колоды
   Клик — раскрытие. Фейковые карточки разлетаются за края.
   ============================================================ */

.mix-deck {
  position: relative;
  display: block;                /* перебиваем grid-cards */
  width: 100%;
  min-height: 260px;
  transition: min-height 0.7s cubic-bezier(.2, .9, .3, 1.05);
  perspective: 1400px;
}

/* ── Карточка ── */
.mix-deck .mix-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 260px;
  margin: 0;
  display: flex;
  flex-direction: column;

  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, 0deg));
  transform-origin: 50% 50%;
  transition:
    transform 0.85s cubic-bezier(.2, .9, .3, 1.05),
    opacity   0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.3s;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.mix-deck .mix-card .mix-card-media {
  aspect-ratio: unset;           /* жёсткая высота в flex */
  flex: 1;
  min-height: 0;
}

.mix-deck .mix-card .mix-card-info {
  flex-shrink: 0;
}

/* В стопке — курсор-указатель и никакого «улетающего» ховера */
.mix-deck:not(.open) .mix-card {
  cursor: pointer;
}
.mix-deck:not(.open) .mix-card:hover {
  /* фиксируем позицию, только слегка подсвечиваем */
  transform: translate(var(--x), var(--y)) rotate(var(--rot));
  border-color: rgba(52, 211, 153, 0.55);
}

/* Play-кнопку в стопке не показываем */
.mix-deck:not(.open) .mix-card-play { display: none; }

/* ── Ховер в раскрытом режиме ── */
.mix-deck.open .mix-card:not(.fake):hover {
  transform: translate(var(--x), var(--y)) translateY(-8px) scale(1.04);
  border-color: rgba(52, 211, 153, 0.7);
  box-shadow:
    0 24px 60px -20px rgba(34, 197, 94, 0.6),
    0 0 0 1px rgba(52, 211, 153, 0.4);
  z-index: 20;
}

/* ── Z-index в стопке: верхняя карточка сверху ── */
.mix-deck:not(.open) .mix-card:nth-child(1)  { z-index: 30; }
.mix-deck:not(.open) .mix-card:nth-child(2)  { z-index: 29; }
.mix-deck:not(.open) .mix-card:nth-child(3)  { z-index: 28; }
.mix-deck:not(.open) .mix-card:nth-child(4)  { z-index: 27; }
.mix-deck:not(.open) .mix-card:nth-child(5)  { z-index: 26; }
.mix-deck:not(.open) .mix-card:nth-child(6)  { z-index: 25; }
.mix-deck:not(.open) .mix-card:nth-child(7)  { z-index: 24; }
.mix-deck:not(.open) .mix-card:nth-child(8)  { z-index: 23; }
.mix-deck:not(.open) .mix-card:nth-child(9)  { z-index: 22; }
.mix-deck:not(.open) .mix-card:nth-child(10) { z-index: 21; }

/* ── Подсказка-тень под стопкой ── */
.mix-deck:not(.open)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 240px;
  transform: translateX(-50%);
  width: 180px;
  height: 24px;
  background: radial-gradient(ellipse at center,
    rgba(52, 211, 153, 0.3) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s;
}
.mix-deck.open::after { opacity: 0; }

/* ── Fake-карточки ── */
.mix-deck .mix-card.fake {
  pointer-events: none;
  z-index: 5;
  transition:
    transform 1.15s cubic-bezier(.3, .05, .6, 1),
    opacity   0.5s ease;
}

/* Тёмная «рубашка» */
.mix-deck .mix-card.fake .mix-card-media {
  background:
    radial-gradient(120% 140% at 30% 20%, rgba(34, 197, 94, 0.10), transparent 55%),
    linear-gradient(135deg, #0d120d 0%, #0a0f0a 100%);
}

/* ── Мобилка ── */
@media (max-width: 768px) {
  .mix-deck { min-height: 220px; }
  .mix-deck .mix-card {
    width: 160px;
    height: 220px;
  }
  .mix-deck:not(.open)::after { top: 200px; width: 140px; }
}