.card-scene {
  perspective: 1200px;
  perspective-origin: 50% 50%;
  padding: 40px;
}

.card-3d {
  position: relative;
  width: 400px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
}

.card-3d.position-front {
  transform: rotateY(-15deg) rotateX(0deg) translateX(-100px);
}

.card-3d.position-open {
  transform: rotateY(0deg) rotateX(10deg) translateX(0);
}

.card-3d.position-back {
  transform: rotateY(180deg) rotateX(5deg) translateX(-100px);
}

/* Back panel - stationary right side (shows inside-back when open, rear when flipped) */
.card-back-panel {
  position: absolute;
  width: 200px;
  height: 200px;
  right: 0;
  transform-style: preserve-3d;
  transform: translateZ(-1px);
}

.card-back-panel .panel-front,
.card-back-panel .panel-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-back-panel .panel-front img,
.card-back-panel .panel-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-back-panel .panel-back {
  transform: rotateY(180deg);
}

/* Front panel - swings open to the left (shows front cover, then inside-front when open) */
.card-front-panel {
  position: absolute;
  width: 200px;
  height: 200px;
  right: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
  transform: translateZ(1px);
}

.card-front-panel .panel-front,
.card-front-panel .panel-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-front-panel .panel-front img,
.card-front-panel .panel-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-front-panel .panel-back {
  transform: rotateY(180deg);
}

/* Slightly ajar in front view */
.card-3d.position-front .card-front-panel {
  transform: translateZ(1px) rotateY(-25deg);
}

/* Slightly ajar in back view (same as front, just viewed from behind) */
.card-3d.position-back .card-front-panel {
  transform: translateZ(1px) rotateY(-25deg);
}

.card-front-panel.is-open {
  transform: translateZ(1px) rotateY(-180deg);
}

/* View buttons */
.card-view-btn {
  transition: all 0.2s ease;
}

.card-view-btn.active {
  background-color: #4f46e5;
  border-color: #4f46e5;
  color: white;
}