<div class="wrap">
  <div class="stack" id="stack">
    <div class="card" style="--bg: linear-gradient(140deg,#6366f1,#818cf8)">
      <h3>Mountain Trail</h3>
      <p>Colorado, USA</p>
    </div>
    <div class="card" style="--bg: linear-gradient(140deg,#06b6d4,#22d3ee)">
      <h3>Coastal Cliffs</h3>
      <p>Big Sur, USA</p>
    </div>
    <div class="card" style="--bg: linear-gradient(140deg,#f59e0b,#fbbf24)">
      <h3>Desert Dunes</h3>
      <p>Sahara, Morocco</p>
    </div>
    <div class="card" style="--bg: linear-gradient(140deg,#ec4899,#f472b6)">
      <h3>Northern Lights</h3>
      <p>Tromso, Norway</p>
    </div>
    <div class="card" style="--bg: linear-gradient(140deg,#10b981,#34d399)">
      <h3>Rainforest Canopy</h3>
      <p>Borneo, Malaysia</p>
    </div>
  </div>

  <div class="actions">
    <button class="act skip" id="skipBtn" aria-label="Skip">&times;</button>
    <button class="act like" id="likeBtn" aria-label="Like">&hearts;</button>
  </div>
  <p class="hint">Drag a card left or right, or use the buttons.</p>
</div>

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 40px 20px; }

.wrap { width: 100%; max-width: 320px; text-align: center; }

.stack { position: relative; width: 100%; height: 360px; perspective: 1200px; margin-bottom: 22px; }

.card {
  position: absolute; inset: 0; border-radius: 20px; background: var(--bg);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
  color: #fff; box-shadow: 0 20px 40px rgba(15,23,42,0.22);
  cursor: grab; user-select: none; touch-action: none;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
  transform-style: preserve-3d;
}
.card:active { cursor: grabbing; }
.card h3 { font-size: 19px; font-weight: 800; margin: 0 0 4px; }
.card p { font-size: 13px; opacity: 0.9; margin: 0; }

.card.dragging { transition: none; }
.card.fly-left  { transform: translate3d(-460px, 40px, -60px) rotateY(-35deg) rotateZ(-24deg); opacity: 0; }
.card.fly-right { transform: translate3d(460px, 40px, -60px) rotateY(35deg) rotateZ(24deg); opacity: 0; }

.actions { display: flex; justify-content: center; gap: 18px; margin-bottom: 10px; }
.act {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 22px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(15,23,42,0.15); transition: transform 0.15s;
}
.act:active { transform: scale(0.9); }
.skip { background: #fff; color: #ef4444; }
.like { background: #fff; color: #ec4899; }

.hint { font-size: 12px; color: #94a3b8; margin: 0; }

const stack = document.getElementById('stack');

function layoutStack() {
  // Stacking depth is a real 3D transform (translateZ + a slight rotateX),
  // not just a 2D scale-and-offset trick, so the deck has genuine
  // perspective falloff as it recedes.
  const cards = [...stack.querySelectorAll('.card')];
  cards.forEach((card, i) => {
    card.style.zIndex = String(cards.length - i);
    if (card.classList.contains('dragging') || card.classList.contains('fly-left') || card.classList.contains('fly-right')) return;
    const depth = i;
    card.style.transform =
      'translate3d(0, ' + (depth * 8) + 'px, ' + (depth * -30) + 'px) rotateX(' + (depth * -2) + 'deg) scale(' + (1 - depth * 0.045) + ')';
    card.style.opacity = depth > 3 ? '0' : '1';
  });
}

function bindTopCard() {
  const card = stack.querySelector('.card');
  if (!card) return;
  let startX = 0, startY = 0, dx = 0, dy = 0, dragging = false;

  function onDown(e) {
    dragging = true;
    card.classList.add('dragging');
    const p = e.touches ? e.touches[0] : e;
    startX = p.clientX; startY = p.clientY;
    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);
  }
  function onMove(e) {
    if (!dragging) return;
    const p = e.touches ? e.touches[0] : e;
    dx = p.clientX - startX; dy = p.clientY - startY;
    const rotateZ = dx * 0.06;
    const rotateY = dx * 0.05;
    card.style.transform = 'translate3d(' + dx + 'px, ' + dy + 'px, 0) rotateZ(' + rotateZ + 'deg) rotateY(' + rotateY + 'deg)';
  }
  function onUp() {
    dragging = false;
    card.classList.remove('dragging');
    window.removeEventListener('pointermove', onMove);
    window.removeEventListener('pointerup', onUp);
    if (dx > 110) { resolveSwipe(card, 'right'); }
    else if (dx < -110) { resolveSwipe(card, 'left'); }
    else { card.style.transform = ''; layoutStack(); }
    dx = 0; dy = 0;
  }

  card.addEventListener('pointerdown', onDown);
}

function resolveSwipe(card, dir) {
  card.classList.add(dir === 'left' ? 'fly-left' : 'fly-right');
  card.addEventListener('transitionend', () => {
    card.remove();
    if (stack.children.length === 0) {
      const p = document.createElement('p');
      p.className = 'hint';
      p.textContent = 'You have viewed every card.';
      stack.appendChild(p);
    }
    layoutStack();
    bindTopCard();
  }, { once: true });
}

document.getElementById('skipBtn').addEventListener('click', () => {
  const card = stack.querySelector('.card');
  if (card) resolveSwipe(card, 'left');
});
document.getElementById('likeBtn').addEventListener('click', () => {
  const card = stack.querySelector('.card');
  if (card) resolveSwipe(card, 'right');
});

layoutStack();
bindTopCard();