/* Interactive CSS-3D card (js/preview3d.js) — shared by the editor preview
   and the public card viewer. Keep free of editor-only selectors. */

/* interactive 3D card */
.card3d-stage {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 26px 10px; touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: pointer; outline: none;
}
.card3d-stage:focus-visible .card3d-scene { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 4px; }
.card3d-scene { perspective: 1700px; }
.card3d {
  position: relative; transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(.32, .9, .3, 1);
  will-change: transform;
}
.c3leaf {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(.32, .9, .3, 1);
}
.c3leaf.cover { transform-origin: left center; transform: rotateY(0deg) translateZ(0.8px); }
.card3d.open .c3leaf.cover { transform: rotateY(-178deg) translateZ(0.8px); }
.c3face {
  position: absolute; inset: 0; overflow: hidden; background: #fff; border-radius: 2px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(30, 22, 10, .05);
}
.c3face.back { transform: rotateY(180deg); }
.c3face svg { display: block; }
.card3d-shadow {
  height: 20px; width: 200px; margin-top: 14px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 14, 5, .34), transparent 68%);
  filter: blur(5px);
  transition: width 720ms cubic-bezier(.32, .9, .3, 1);
}
.c3hint { color: var(--text-faint); font-size: 12.5px; margin-top: 6px; }