Flip Card

<!-- Flip Card — 3D flip to reveal back -->
<div class="nuda-flip3d" tabindex="0" role="button" aria-label="Flip card">
  <div class="nuda-flip3d__inner">
    <div class="nuda-flip3d__face nuda-flip3d__front">
      <h3>Flip Card</h3>
      <p>Hover or focus to flip</p>
    </div>
    <div class="nuda-flip3d__face nuda-flip3d__back">
      <h3>Back Side</h3>
      <p>Hidden content here</p>
    </div>
  </div>
</div>

/* ── Flip Card ───────────────────────────────────────────────
   3D Y-axis flip on hover/focus.
   Customize:
     --nuda-f3-w / --nuda-f3-h : card size
     --nuda-f3-speed           : flip duration
   ──────────────────────────────────────────────────────────── */
.nuda-flip3d {
  --nuda-f3-w: 280px;
  --nuda-f3-h: 190px;
  --nuda-f3-speed: 0.6s;

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

.nuda-flip3d:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
  border-radius: 16px;
}

.nuda-flip3d__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform var(--nuda-f3-speed) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.nuda-flip3d:hover .nuda-flip3d__inner,
.nuda-flip3d:focus-visible .nuda-flip3d__inner {
  transform: rotateY(180deg);
}

.nuda-flip3d__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 18px;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.nuda-flip3d__front {
  background: linear-gradient(135deg, #18181b, #09090b);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fafafa;
}

.nuda-flip3d__back {
  background: linear-gradient(135deg, #e4ff54, #a3b800);
  color: #09090b;
  transform: rotateY(180deg);
}

.nuda-flip3d__face h3 { margin: 0 0 4px; font-size: 1.05rem; }
.nuda-flip3d__face p  { margin: 0; font-size: 0.82rem; opacity: 0.8; }

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-flip3d__inner { transition: none; }
  .nuda-flip3d__back { transform: none; display: none; }
  .nuda-flip3d:hover .nuda-flip3d__front,
  .nuda-flip3d:focus-visible .nuda-flip3d__front { display: none; }
  .nuda-flip3d:hover .nuda-flip3d__back,
  .nuda-flip3d:focus-visible .nuda-flip3d__back { display: flex; }
}