Flip Card

<!-- Flip Card — card that flips to show back content -->
<div class="nuda-flip-card" tabindex="0" role="button" aria-label="Flip card">
  <div class="nuda-flip-card__inner">
    <div class="nuda-flip-card__front">
      <h3>Front Side</h3>
      <p>Hover or focus to flip</p>
    </div>
    <div class="nuda-flip-card__back">
      <h3>Back Side</h3>
      <p>Here is the hidden content</p>
    </div>
  </div>
</div>

/* ── Flip Card ───────────────────────────────────────────────
   Customize:
     --nuda-fc-w         : card width
     --nuda-fc-h         : card height
     --nuda-fc-radius    : corner radius
     --nuda-fc-front-bg  : front face background
     --nuda-fc-back-bg   : back face background
     --nuda-fc-speed     : flip duration
   ──────────────────────────────────────────────────────────── */
.nuda-flip-card {
  --nuda-fc-w: 280px;
  --nuda-fc-h: 200px;
  --nuda-fc-radius: 16px;
  --nuda-fc-front-bg: linear-gradient(135deg, #312e81, #1e1b4b);
  --nuda-fc-back-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
  --nuda-fc-speed: 0.6s;

  width: var(--nuda-fc-w);
  height: var(--nuda-fc-h);
  perspective: 800px;
  cursor: pointer;
}

.nuda-flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--nuda-fc-speed) cubic-bezier(0.22, 1, 0.36, 1);
}

/* Flip on hover and focus */
.nuda-flip-card:hover .nuda-flip-card__inner,
.nuda-flip-card:focus .nuda-flip-card__inner {
  transform: rotateY(180deg);
}

/* Shared face styles */
.nuda-flip-card__front,
.nuda-flip-card__back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--nuda-fc-radius);
  padding: 20px;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.nuda-flip-card__front {
  background: var(--nuda-fc-front-bg);
  color: #e0e7ff;
}

.nuda-flip-card__back {
  background: var(--nuda-fc-back-bg);
  color: #fff;
  transform: rotateY(180deg);
}

.nuda-flip-card__front h3,
.nuda-flip-card__back h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.nuda-flip-card__front p,
.nuda-flip-card__back p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-flip-card__inner {
    transition: none;
  }
  /* Show both sides stacked instead of flipping */
  .nuda-flip-card__back {
    transform: none;
    position: relative;
    display: none;
  }
  .nuda-flip-card:hover .nuda-flip-card__front,
  .nuda-flip-card:focus .nuda-flip-card__front {
    display: none;
  }
  .nuda-flip-card:hover .nuda-flip-card__back,
  .nuda-flip-card:focus .nuda-flip-card__back {
    display: flex;
  }
}