/* ==========================================================================
   Lucid Page Media – 3D-Buch-Komponente
   Übernommen aus der erprobten Orbita-Technik (inkl. Safari/iOS-Fixes),
   farblich an die Lucid-Marke angepasst. Cover behält echte Proportion,
   Buchrücken + Seitenkante entstehen im 3D-Raum aus Pseudo-Elementen.
   ========================================================================== */

.book3d {
  position: relative;
  aspect-ratio: 2 / 3;
  -webkit-perspective: 1100px;
  perspective: 1100px;
  width: 100%;
}

.book3d-vol {
  position: absolute;
  inset: 0;
  margin-inline: auto;
  width: fit-content;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(-18deg);
  transform: rotateY(-18deg);
  -webkit-transition: -webkit-transform 0.6s var(--ease-out);
  transition: transform 0.6s var(--ease-out);
  --thick: 26px;
}
@media (hover: hover) and (pointer: fine) {
  .book3d:hover .book3d-vol { -webkit-transform: rotateY(-8deg); transform: rotateY(-8deg); }
}

.book3d-vol img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: unset;
  position: relative;
  z-index: 1;
  border-radius: 2px 5px 5px 2px;
  box-shadow: 11px 16px 30px -12px rgba(4, 17, 15, 0.5);
  -webkit-transform: translateZ(1px);
  transform: translateZ(1px);
  background: #efe7d8; /* beiger Platzhalter bis Cover lädt */
}

/* Falz-Licht entlang des Buchrückens auf dem Cover */
.book3d-vol::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.16) 0%, rgba(255,255,255,0.13) 1.6%,
    rgba(0,0,0,0.09) 3.6%, rgba(0,0,0,0) 7%);
  pointer-events: none;
}

/* Buchblock: Papier-Seitenkante rechts, klappt im Raum nach hinten */
.book3d-pages {
  position: absolute;
  top: 1.2%;
  bottom: 1.2%;
  right: 0;
  width: var(--thick);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  background: linear-gradient(90deg,
    #e9e1d1 0%, #fdfaf2 9%, #f0e9da 17%, #fcf8f0 26%, #efe7d8 34%,
    #fcf8f0 43%, #eee6d7 51%, #fdfaf2 60%, #f0e9da 68%, #fcf8f0 77%,
    #eee6d7 85%, #fbf7ef 93%, #e6ddcc 100%);
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

/* Rückdeckel gibt dem Block Tiefe (Lucid-dunkel statt Orbita-braun) */
.book3d-vol::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-transform: translateZ(calc(var(--thick) * -1));
  transform: translateZ(calc(var(--thick) * -1));
  background: var(--teal-950, #082d29);
  border-radius: 2px 5px 5px 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Schlanke Variante für Galerie-Raster */
.book3d--slim .book3d-vol { --thick: 18px; -webkit-transform: rotateY(-15deg); transform: rotateY(-15deg); }

/* ---------- Cover-Fächer (5 Bücher, draggable, JS-rotiert) ------------- */
.cover-fan {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.cover-fan:active { cursor: grabbing; }
.cover-fan .fan-item {
  position: absolute;
  width: clamp(140px, 15vw, 200px);
  aspect-ratio: 2 / 3;
  -webkit-perspective: 950px;
  perspective: 950px;
  -webkit-transform: rotate(var(--r)) translate(var(--tx), var(--ty));
  transform: rotate(var(--r)) translate(var(--tx), var(--ty));
  transition: transform 0.85s var(--ease-out), opacity 0.55s ease;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cover-fan.is-dragging .fan-item {
  transform: rotate(calc(var(--r) * 1.45)) translate(calc(var(--tx) * 1.35), calc(var(--ty) * 1.1));
}
@media (hover: hover) and (pointer: fine) {
  .cover-fan:hover .fan-item {
    transform: rotate(calc(var(--r) * 1.45)) translate(calc(var(--tx) * 1.35), calc(var(--ty) * 1.1));
  }
  .cover-fan:hover .fan-item .book3d-vol { -webkit-transform: rotateY(-9deg); transform: rotateY(-9deg); }
}
.cover-fan .fan-item .book3d { position: absolute; inset: 0; }
.cover-fan .fan-item .book3d-vol { --thick: 22px; }
.cover-fan .fan-item img, .cover-fan .fan-item .book3d-pages { pointer-events: none; }
.cover-fan img { -webkit-user-drag: none; user-select: none; }

.fan-item.pos-0 { --r: -14deg; --tx: -118%; --ty: 6%;  z-index: 1; }
.fan-item.pos-1 { --r: -7deg;  --tx: -58%;  --ty: -2%; z-index: 2; }
.fan-item.pos-2 { --r: 0deg;   --tx: 0%;    --ty: -6%; z-index: 3; }
.fan-item.pos-3 { --r: 7deg;   --tx: 58%;   --ty: -2%; z-index: 2; }
.fan-item.pos-4 { --r: 14deg;  --tx: 118%;  --ty: 6%;  z-index: 1; }
.cover-fan .fan-item.is-enter-right { opacity: 0; transform: rotate(22deg) translate(175%, 14%); }
.cover-fan .fan-item.is-enter-left  { opacity: 0; transform: rotate(-22deg) translate(-175%, 14%); }
.cover-fan .fan-item.is-out-left    { opacity: 0; transform: rotate(-24deg) translate(-185%, 16%); z-index: 0; }
.cover-fan .fan-item.is-out-right   { opacity: 0; transform: rotate(24deg) translate(185%, 16%); z-index: 0; }