:root {
  --dvd-base-width: 350px; 
  --dvd-width: var(--dvd-base-width);
  --dvd-height: calc(var(--dvd-base-width) * 1.41);
  --dvd-depth: calc(var(--dvd-base-width) * 0.08);
  --spin-speed: 12s;
}

.interactive-wrapper {
  width: var(--dvd-width);
  height: var(--dvd-height);
  margin: 3rem auto;
  perspective: 2000px;
}

/* Apply reflection ONLY when the wrapper is spinning */
/* .interactive-wrapper.is-spinning {
-webkit-box-reflect: below 0 linear-gradient(transparent, transparent 80%, rgba(255, 255, 255, 0.1));
} */

.dvd-case {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--dvd-depth) / -2));

}

.interactive-wrapper.is-spinning .dvd-case {
  animation: spin var(--spin-speed) infinite linear;
}

.interactive-wrapper.is-interactive .dvd-case {
  cursor: grab;
  transition: transform 0.1s ease-out;
}
.interactive-wrapper.is-interactive .dvd-case.dragging {
  cursor: grabbing;
  transition: none;
}

@keyframes spin {
  /* We add translateZ here to ensure the rotation is centered */
  from {
    transform: translateZ(calc(var(--dvd-depth) / -2)) rotateY(0deg);
  }
  to {
    /* We use a negative rotation to make the reflection appear to spin in the same direction */
    transform: translateZ(calc(var(--dvd-depth) / -2)) rotateY(-360deg);
  }
}

/* --- Structural Face Styles --- */
.dvd-case .face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #111;
  background-size: cover;
  backface-visibility: hidden;
}

/* --- Texture Mapping for each face --- */
.dvd-case .front {
  width: var(--dvd-width);
  height: var(--dvd-height);
  transform: rotateY(0deg) translateZ(calc(var(--dvd-depth) / 2));
  background-size: 208% 100%; 
  background-position: 100% 0;
}

.dvd-case .back {
  width: var(--dvd-width);
  height: var(--dvd-height);
  transform: rotateY(180deg) translateZ(calc(var(--dvd-depth) / 2));
  background-size: 208% 100%;
  background-position: 0 0;
}

.dvd-case .spine {
  width: var(--dvd-depth);
  height: var(--dvd-height);
  left: calc(50% - (var(--dvd-depth) / 2));
  transform: rotateY(-90deg) translateZ(calc(var(--dvd-width) / 2));
  background-size: calc(var(--dvd-width) * 2.08) var(--dvd-height);
  background-position: 50% 0;
}
/* ... other faces ... */
.dvd-case .right {
  width: var(--dvd-depth);
  height: var(--dvd-height);
  left: calc(50% - (var(--dvd-depth) / 2));
  transform: rotateY(90deg) translateZ(calc(var(--dvd-width) / 2));
}

/* 5. The Top Side */
.dvd-case .top {
  width: var(--dvd-width);
  height: var(--dvd-depth);
  top: calc(50% - (var(--dvd-depth) / 2));
  transform: rotateX(90deg) translateZ(calc(var(--dvd-height) / 2));
}

/* 6. The Bottom Side */
.dvd-case .bottom {
  width: var(--dvd-width);
  height: var(--dvd-depth);
  top: calc(50% - (var(--dvd-depth) / 2));
  transform: rotateX(-90deg) translateZ(calc(var(--dvd-height) / 2));
}