:root {
  --overlay: rgba(0,0,0,.15);
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: #0056c9 url("img/bg.jpg") center bottom / cover no-repeat fixed;
  overflow-y: scroll;
}

.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  pointer-events: none;
  z-index: 0;
}

.card-stack {
  position: relative;
  width: 420px;        /* чуть больше */
  max-width: 95%;
  margin: 180px auto;
  height: 300px;       /* чуть больше */
  perspective: 1000px;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  top: 0;
  left: 0;
  border-radius: 20px;
  transition: transform 0.8s ease, z-index 0.8s ease;
  cursor: grab;
}

/* Верхняя карточка */
.card.top {
  z-index: 2;
  transform: translateY(0) scale(1);
}

/* Нижняя карточка изначально чуть ниже и меньше */
.card.bottom {
  z-index: 1;
  transform: translateY(20px) scale(0.95);
}

/* Анимация движения верхней карточки вниз */
.card.move-out {
  transform: translateY(120%) rotate(5deg) scale(0.9);
  z-index: 1;
}

/* Нижняя выезжает наверх */
.card.move-in {
  transform: translateY(0) scale(1);
  z-index: 3;
}