/* Стопка карточек со свайпом (Meowdes Refs: swipe-card-stack). Скрипт ведёт верхнюю карточку переменными:
   --x / --y смещение, --tilt наклон, --p (0…1) близость к порогу, data-dir="left|right" действие.
   Доработка под портфолио: влево это отказ (крестик), вправо одобрение (галочка). */
.swipe-card-stack {
  --swipe-card-stack-bg: #141414;
  --swipe-card-stack-left: #1433FF;
  --swipe-card-stack-right: #FF1447;
  --swipe-card-stack-width: 300px;
  --swipe-card-stack-ratio: 3 / 4;
  --swipe-card-stack-radius: 22px;
  --swipe-card-stack-card-bg: #fff;
  --swipe-card-stack-card-text: #000;
  --swipe-card-stack-peek: 14px;
  --swipe-card-stack-back: 0.3s;
  --swipe-card-stack-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  position: relative;
  display: grid;
  place-items: center;
  padding: 72px 56px 56px;
  border-radius: calc(var(--swipe-card-stack-radius) + 12px);
  background: var(--swipe-card-stack-bg);
  transition: background-color 0.45s ease;
  outline: none;
  touch-action: pan-y;
}
.swipe-card-stack:focus-visible { outline: 2px solid var(--swipe-card-stack-left); outline-offset: 4px; }
.swipe-card-stack[data-flood="left"] { background: var(--swipe-card-stack-left); transition-duration: 0.15s; }
.swipe-card-stack[data-flood="right"] { background: var(--swipe-card-stack-right); transition-duration: 0.15s; }

.swipe-card-stack__deck {
  display: grid;
  width: var(--swipe-card-stack-width);
  max-width: 100%;
  aspect-ratio: var(--swipe-card-stack-ratio);
}
.swipe-card-stack__card {
  --x: 0px;
  --y: 0px;
  --tilt: 0deg;
  --p: 0;
  --depth: 0;
  position: relative;
  z-index: calc(20 - var(--depth));
  grid-area: 1 / 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 20px;
  border-radius: var(--swipe-card-stack-radius);
  background: var(--swipe-card-stack-card-bg);
  color: var(--swipe-card-stack-card-text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: 50% calc(110% * (1 - min(var(--depth), 1)));
  transform:
    translate(var(--x), calc(var(--y) - var(--depth) * var(--swipe-card-stack-peek)))
    rotate(var(--tilt))
    scale(calc(1 - var(--depth) * 0.05));
  opacity: calc(1 - max(var(--depth) - 2, 0));
  transition: transform 0.5s var(--swipe-card-stack-spring), opacity 0.3s ease;
}
.swipe-card-stack__card.is-dragging { cursor: grabbing; transition: none; }
.swipe-card-stack__card.is-flying {
  z-index: 30;
  transition: transform var(--swipe-card-stack-back) cubic-bezier(0.3, 0.5, 0.5, 1), opacity var(--swipe-card-stack-back) ease-in;
  opacity: 0;
  pointer-events: none;
}
.swipe-card-stack__card.is-reset { transition: none; }
.swipe-card-stack__card > * { margin: 0; }

.swipe-card-stack__card::before,
.swipe-card-stack__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  opacity: var(--p);
  pointer-events: none;
}
.swipe-card-stack__card::before { background: var(--swipe-card-stack-tint, transparent); opacity: calc(var(--p) * 0.92); }
.swipe-card-stack__card::after {
  z-index: 2;
  background: #fff;
  -webkit-mask: var(--swipe-card-stack-icon, none) center / 30% no-repeat;
  mask: var(--swipe-card-stack-icon, none) center / 30% no-repeat;
  transform: scale(calc(0.6 + var(--p) * 0.4));
}
/* Вправо галочка (одобрить), влево крестик (отказ) */
.swipe-card-stack__card[data-dir="right"] {
  --swipe-card-stack-tint: var(--swipe-card-stack-right);
  --swipe-card-stack-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.swipe-card-stack__card[data-dir="left"] {
  --swipe-card-stack-tint: var(--swipe-card-stack-left);
  --swipe-card-stack-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}

.swipe-card-stack__media {
  position: relative;
  flex: 1;
  border-radius: calc(var(--swipe-card-stack-radius) - 8px);
  pointer-events: none;
}
.swipe-card-stack__card img { width: 100%; flex: 1; min-height: 0; object-fit: cover; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .swipe-card-stack__card { --tilt: 0deg !important; transition-duration: 0.01s; }
  .swipe-card-stack__card.is-flying { transition-duration: 0.15s; }
}