<div class="sc-root">
  <div class="sc-stack-wrap">
    <div class="sc-stack" id="sc-stack"></div>
    <div class="sc-done" id="sc-done" hidden>
      <div class="sc-done-emoji">🎉</div>
      <p class="sc-done-title">All done!</p>
      <p class="sc-done-sub">You've seen everyone.</p>
      <button class="sc-restart-btn" id="sc-restart">Restart</button>
    </div>
  </div>
  <div class="sc-actions">
    <button class="sc-action-btn sc-nope" id="sc-nope-btn" aria-label="Reject">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
    <button class="sc-action-btn sc-like" id="sc-like-btn" aria-label="Accept">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
    </button>
  </div>
  <p class="sc-hint">Drag · Arrow keys · Buttons</p>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #f1f5f9;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* ── Root layout ── */
.sc-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
}

/* ── Stack wrapper ── */
.sc-stack-wrap {
  position: relative;
  width: 300px;
  height: 400px;
}

.sc-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Individual card ── */
.sc-card {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sc-card.is-dragging {
  cursor: grabbing;
  transition: none;
}
.sc-card.is-flying {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}

/* Card gradient background */
.sc-card-bg {
  position: absolute;
  inset: 0;
}

/* Card content */
.sc-card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 22px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
}

.sc-card-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.sc-card-role {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  margin-top: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.sc-card-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  margin-top: 6px;
}
.sc-card-location svg {
  flex-shrink: 0;
}

/* ── Stamps ── */
.sc-stamp {
  position: absolute;
  top: 28px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 8px;
  border-width: 3px;
  border-style: solid;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-12deg);
  transition: opacity 0.06s linear;
}
.sc-stamp-like {
  right: 18px;
  color: #22c55e;
  border-color: #22c55e;
  transform: rotate(12deg);
}
.sc-stamp-nope {
  left: 18px;
  color: #ef4444;
  border-color: #ef4444;
  transform: rotate(-12deg);
}

/* ── Done state ── */
.sc-done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  gap: 8px;
  animation: sc-fade-in 0.4s ease;
}
.sc-done-emoji { font-size: 52px; }
.sc-done-title { font-size: 22px; font-weight: 800; color: #0f172a; }
.sc-done-sub   { font-size: 14px; color: #64748b; }
.sc-restart-btn {
  margin-top: 12px;
  padding: 10px 28px;
  background: #6366f1;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.sc-restart-btn:hover { opacity: 0.88; transform: scale(1.04); }

/* ── Action buttons ── */
.sc-actions {
  display: flex;
  gap: 28px;
}
.sc-action-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sc-action-btn:hover { transform: scale(1.12); }
.sc-action-btn:active { transform: scale(0.95); }
.sc-nope {
  background: #fff;
  color: #ef4444;
  box-shadow: 0 4px 16px rgba(239,68,68,0.22);
}
.sc-like {
  background: #fff;
  color: #22c55e;
  box-shadow: 0 4px 16px rgba(34,197,94,0.22);
}

/* ── Hint ── */
.sc-hint {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}

@keyframes sc-fade-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

const CARDS = [
  {
    name: 'Aria Chen',
    role: 'Product Designer',
    location: 'San Francisco, CA',
    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  },
  {
    name: 'Marcus Reid',
    role: 'Full-Stack Engineer',
    location: 'Austin, TX',
    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
  },
  {
    name: 'Sofia Torres',
    role: 'UX Researcher',
    location: 'New York, NY',
    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
  },
  {
    name: 'Kai Nakamura',
    role: 'iOS Developer',
    location: 'Seattle, WA',
    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
  },
  {
    name: 'Leila Osman',
    role: 'Data Scientist',
    location: 'Chicago, IL',
    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
  },
  {
    name: 'Devon Blake',
    role: 'Brand Strategist',
    location: 'Los Angeles, CA',
    gradient: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
  },
];

const THROW_THRESHOLD = 80; // px — minimum drag to trigger a swipe
const MAX_ROTATION    = 18; // degrees — cap on tilt
const VISIBLE_COUNT   = 4;  // how many stacked cards to render

const stack   = document.getElementById('sc-stack');
const doneEl  = document.getElementById('sc-done');
const nopeBtn = document.getElementById('sc-nope-btn');
const likeBtn = document.getElementById('sc-like-btn');
const restart = document.getElementById('sc-restart');

let deck    = [...CARDS]; // remaining cards (top of array = top of visual stack)
let topCard = null;       // the DOM element currently being dragged
let isDragging = false;
let startX = 0, startY = 0, currentX = 0, currentY = 0;

/* ────────────────────────────────────────────
   Build / re-render the visible card stack
   ──────────────────────────────────────────── */
function renderStack() {
  stack.innerHTML = '';
  topCard = null;

  if (deck.length === 0) {
    doneEl.hidden = false;
    return;
  }

  doneEl.hidden = true;

  // Render up to VISIBLE_COUNT cards, bottom-first so top card is last in DOM (highest z-index naturally)
  const visible = deck.slice(0, VISIBLE_COUNT);
  visible.reverse().forEach((data, revIdx) => {
    const idx = (visible.length - 1) - revIdx; // 0 = top card
    const card = createCard(data, idx, visible.length);
    stack.appendChild(card);
    if (idx === 0) topCard = card;
  });

  if (topCard) attachDragListeners(topCard);
}

/* ────────────────────────────────────────────
   Create a single card element
   ──────────────────────────────────────────── */
function createCard(data, stackIdx, totalVisible) {
  const card = document.createElement('div');
  card.className = 'sc-card';

  // Stack offset: top card is biggest / frontmost
  const scale      = 1 - stackIdx * 0.04;
  const translateY =     stackIdx * 12;
  card.style.transform = `translateY(${translateY}px) scale(${scale})`;
  card.style.zIndex    = totalVisible - stackIdx;

  // Background gradient
  const bg = document.createElement('div');
  bg.className = 'sc-card-bg';
  bg.style.background = data.gradient;

  // Stamps
  const stampLike = document.createElement('span');
  stampLike.className = 'sc-stamp sc-stamp-like';
  stampLike.textContent = 'LIKE';

  const stampNope = document.createElement('span');
  stampNope.className = 'sc-stamp sc-stamp-nope';
  stampNope.textContent = 'NOPE';

  // Content
  const content = document.createElement('div');
  content.className = 'sc-card-content';

  const name = document.createElement('div');
  name.className = 'sc-card-name';
  name.textContent = data.name;

  const role = document.createElement('div');
  role.className = 'sc-card-role';
  role.textContent = data.role;

  const loc = document.createElement('div');
  loc.className = 'sc-card-location';
  loc.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>` + data.location;

  content.append(name, role, loc);
  card.append(bg, stampLike, stampNope, content);

  return card;
}

/* ────────────────────────────────────────────
   Apply drag transform to the top card
   ──────────────────────────────────────────── */
function applyDragTransform(card, dx, dy) {
  const rotate = Math.min(Math.max(dx / 12, -MAX_ROTATION), MAX_ROTATION);
  card.style.transform = `translate(${dx}px, ${dy}px) rotate(${rotate}deg)`;

  // Stamp opacity based on horizontal drag distance
  const ratio = Math.min(Math.abs(dx) / THROW_THRESHOLD, 1);
  const stampLike = card.querySelector('.sc-stamp-like');
  const stampNope = card.querySelector('.sc-stamp-nope');
  stampLike.style.opacity = dx > 0 ? ratio : 0;
  stampNope.style.opacity = dx < 0 ? ratio : 0;
}

/* ────────────────────────────────────────────
   Fly card off-screen then remove from deck
   ──────────────────────────────────────────── */
function flyOut(card, direction) {
  const flyX = direction === 'right' ? 600 : -600;
  card.classList.add('is-flying');
  card.style.transform = `translate(${flyX}px, ${currentY * 0.5}px) rotate(${direction === 'right' ? MAX_ROTATION : -MAX_ROTATION}deg)`;
  card.style.opacity = '0';

  // Remove from deck and re-render after animation
  deck.shift();
  card.addEventListener('transitionend', () => {
    renderStack();
  }, { once: true });
}

/* ────────────────────────────────────────────
   Snap card back to stack position
   ──────────────────────────────────────────── */
function snapBack(card) {
  card.classList.remove('is-dragging');
  card.style.transform = 'translateY(0px) scale(1)';
  const stampLike = card.querySelector('.sc-stamp-like');
  const stampNope = card.querySelector('.sc-stamp-nope');
  stampLike.style.opacity = '0';
  stampNope.style.opacity = '0';
}

/* ────────────────────────────────────────────
   Drag event handlers (mouse + touch)
   ──────────────────────────────────────────── */
function getEventCoords(e) {
  if (e.touches && e.touches.length) {
    return { x: e.touches[0].clientX, y: e.touches[0].clientY };
  }
  return { x: e.clientX, y: e.clientY };
}

function onPointerDown(e) {
  if (e.button !== undefined && e.button !== 0) return; // left-click only for mouse
  isDragging = true;
  const coords = getEventCoords(e);
  startX = coords.x;
  startY = coords.y;
  currentX = 0;
  currentY = 0;
  topCard.classList.add('is-dragging');
}

function onPointerMove(e) {
  if (!isDragging || !topCard) return;
  const coords = getEventCoords(e);
  currentX = coords.x - startX;
  currentY = coords.y - startY;
  applyDragTransform(topCard, currentX, currentY);
}

function onPointerUp() {
  if (!isDragging || !topCard) return;
  isDragging = false;
  topCard.classList.remove('is-dragging');

  if (Math.abs(currentX) >= THROW_THRESHOLD) {
    flyOut(topCard, currentX > 0 ? 'right' : 'left');
  } else {
    snapBack(topCard);
  }
}

function attachDragListeners(card) {
  // Mouse
  card.addEventListener('mousedown',  onPointerDown);
  document.addEventListener('mousemove', onPointerMove);
  document.addEventListener('mouseup',   onPointerUp);
  // Touch
  card.addEventListener('touchstart', onPointerDown,  { passive: true });
  document.addEventListener('touchmove',  onPointerMove, { passive: true });
  document.addEventListener('touchend',   onPointerUp);
}

/* ────────────────────────────────────────────
   Programmatic swipe (buttons / keyboard)
   ──────────────────────────────────────────── */
function triggerSwipe(direction) {
  if (!topCard || deck.length === 0) return;

  // Show the appropriate stamp fully
  const stampLike = topCard.querySelector('.sc-stamp-like');
  const stampNope = topCard.querySelector('.sc-stamp-nope');
  if (direction === 'right') { stampLike.style.opacity = '1'; }
  else                       { stampNope.style.opacity = '1'; }

  // Brief pause so user sees the stamp, then fly out
  currentY = 0;
  setTimeout(() => flyOut(topCard, direction), 120);
}

/* ────────────────────────────────────────────
   Button listeners
   ──────────────────────────────────────────── */
nopeBtn.addEventListener('click', () => triggerSwipe('left'));
likeBtn.addEventListener('click', () => triggerSwipe('right'));

/* ────────────────────────────────────────────
   Keyboard listeners
   ──────────────────────────────────────────── */
document.addEventListener('keydown', e => {
  if (e.key === 'ArrowLeft')  triggerSwipe('left');
  if (e.key === 'ArrowRight') triggerSwipe('right');
});

/* ────────────────────────────────────────────
   Restart
   ──────────────────────────────────────────── */
restart.addEventListener('click', () => {
  deck = [...CARDS];
  renderStack();
});

/* ────────────────────────────────────────────
   Init
   ──────────────────────────────────────────── */
renderStack();