Swipe Card

<div class="nuda-swipecard">
  <div class="nuda-swipecard__stack">
    <div class="nuda-swipecard__bg"></div>
    <div class="nuda-swipecard__bg nuda-swipecard__bg--2"></div>
    <div class="nuda-swipecard__card">
      <div class="nuda-swipecard__photo"></div>
      <div class="nuda-swipecard__meta">
        <strong>Lucia, 27</strong>
        <span>2 km away</span>
      </div>
      <div class="nuda-swipecard__tag nuda-swipecard__tag--like">LIKE</div>
      <div class="nuda-swipecard__tag nuda-swipecard__tag--nope">NOPE</div>
    </div>
  </div>
</div>

/* Swipe Card
   Tinder-style card with like/nope direction hints.
   Customize: --swc-like, --swc-nope */

.nuda-swipecard {
  --swc-like: #10b981;
  --swc-nope: #ef4444;
  width: 240px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
}

.nuda-swipecard__stack {
  position: relative;
  width: 200px;
  height: 260px;
}

.nuda-swipecard__bg,
.nuda-swipecard__card {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.nuda-swipecard__bg { transform: translateY(8px) scale(0.95); opacity: 0.4; }
.nuda-swipecard__bg--2 { transform: translateY(4px) scale(0.97); opacity: 0.7; }

.nuda-swipecard__card {
  animation: nuda-swc-sway 3.6s ease-in-out infinite;
  transform-origin: bottom center;
  will-change: transform;
}

.nuda-swipecard__photo {
  width: 100%;
  height: 62%;
  background: linear-gradient(135deg, #e4ff54 0%, #10b981 55%, #3b82f6 100%);
}

.nuda-swipecard__meta {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 600 12px/1 system-ui;
}

.nuda-swipecard__meta strong { color: #fafafa; }
.nuda-swipecard__meta span { color: #63636e; font-weight: 500; }

.nuda-swipecard__tag {
  position: absolute;
  top: 18px;
  padding: 5px 10px;
  border: 2px solid currentColor;
  border-radius: 6px;
  font: 800 11px/1 system-ui;
  letter-spacing: 1px;
  opacity: 0;
  transform: rotate(-12deg);
}

.nuda-swipecard__tag--like {
  right: 14px;
  color: var(--swc-like);
  animation: nuda-swc-like 3.6s ease-in-out infinite;
}

.nuda-swipecard__tag--nope {
  left: 14px;
  color: var(--swc-nope);
  transform: rotate(12deg);
  animation: nuda-swc-nope 3.6s ease-in-out infinite;
}

@keyframes nuda-swc-sway {
  0%, 30% { transform: translateX(0) rotate(0); }
  40%, 55% { transform: translateX(40px) rotate(8deg); }
  65%, 80% { transform: translateX(-40px) rotate(-8deg); }
  90%, 100% { transform: translateX(0) rotate(0); }
}

@keyframes nuda-swc-like {
  0%, 35% { opacity: 0; }
  45%, 55% { opacity: 1; }
  65%, 100% { opacity: 0; }
}

@keyframes nuda-swc-nope {
  0%, 60% { opacity: 0; }
  70%, 80% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-swipecard__card,
  .nuda-swipecard__tag { animation: none; }
}