/*
 * bookshelf.css — Bücherregal nach „library.mov“ (Foliom). Modell 3 (09.09.2026, aus Frames f_001/d_017/d_032 vermessen):
 *  - Jedes Buch ist ein PARALLELOGRAMM: senkrechte Kanten, Ober- und Unterkante fallen um --skew (29°) nach rechts ab,
 *    keine Verjüngung (Video: oranges Buch oben 28°, unten 28°, Höhe links = rechts). Das entspricht einer Kamera weit
 *    oben links (schiefe Projektion) → CSS skewY, kein rotateY. Alle Bücher gleich hoch (Video 155–157 px bei 710 px).
 *  - Cover 2:3 (14,7 × 22 u) + Seitenblock 1,3 u rechts (dunkles Khaki, helles Oberlicht, dunkle Deckelkante).
 *  - Abstand --pitch 6,6 u (Video 46–48 px), Reihe steigt um data-tilt (7°) nach rechts (Video ≈ 6 px je Buch),
 *    linkes Buch liegt vorn (z-index), wirft 8 px Schatten auf das rechte Nachbarcover.
 *  - Hover (Video d_017 → d_032): Buch rückt 11 u nach RECHTS (kommt unter dem linken Nachbarn hervor), 1,4 u nach oben,
 *    wird 5 % größer (Ecke unten links fest), liegt ganz vorn; Nachbarn bleiben stehen (die zwei rechten verschwinden dahinter).
 *  - Maße relativ zur Bühnenbreite: --u = 1 % der Bühnenbreite.
 */
.shelf {
  --u: calc(var(--stage-w, 100vw) / 100);
  --card-h: calc(var(--u) * 22);        /* Buchhöhe (Video 155–157 px / 710) */
  --strip-w: calc(var(--u) * 1.3);      /* Seitenblock (Video 8–9 px) */
  --cover-w: calc(var(--card-h) * 2 / 3);
  --card-w: calc(var(--cover-w) + var(--strip-w));
  --pitch: calc(var(--u) * 6.6);        /* Abstand entlang der Reihe */
  --skew: 29deg;                        /* Schräge der waagerechten Kanten */
  --shelf-y: calc(var(--u) * 47);       /* Ecke unten links des Covers in Reihenmitte (Streifen-Unterkante dort ≈ 56 u) */
  --pull-x: calc(var(--u) * 11);        /* Auszug nach rechts … */
  --pull-y: calc(var(--u) * -1.4);      /* … und nach oben … */
  --pull-scale: 1.05;                   /* … etwas größer */
  --pull-dur: 500ms;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.shelf__row { position: absolute; left: 50%; top: var(--shelf-y); }
.shelf__probe { position: absolute; left: -9999px; top: 0; width: var(--pitch); height: var(--card-w); visibility: hidden; pointer-events: none; }
.book {
  position: absolute; left: 0; top: 0;
  width: var(--card-w); height: var(--card-h);
  margin-left: calc(var(--card-w) / -2);
  margin-top: calc(var(--card-h) * -1);
  transform: translate(var(--x, 0px), var(--y, 0px));
  cursor: pointer; outline: none;
}
.book[hidden] { display: none; }
.book__body {
  position: absolute; inset: 0;
  transform-origin: 0 100%;               /* Ecke unten links bleibt beim Scheren und Vergrößern fest */
  transform: skewY(var(--skew));
  transition: transform var(--pull-dur) cubic-bezier(.2, .8, .2, 1);
  box-shadow: 6px 0 9px rgba(0,0,0,.55); /* Schatten auf das rechte (hintere) Nachbarbuch, Video ≈ 8 px */
}
.book.is-open .book__body,
.book:focus-visible .book__body { transform: translate(var(--pull-x), var(--pull-y)) skewY(var(--skew)) scale(var(--pull-scale)); }
.book:focus-visible .book__cover { outline: 3px solid #f4efe6; outline-offset: -3px; }
.book__cover {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--cover-w);
  background: #222 center/cover no-repeat;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.22), inset 1px 0 0 rgba(0,0,0,.4);   /* Kante zum Deckel und Oberkante hell, links dunkel */
}
.book__cover img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
/* Seitenblock (Vorderschnitt): dunkle Deckelkante, dunkles Khaki mit feinen Seitenlinien, Oberlicht oben (Video: 2 px hell) */
.book__pages {
  position: absolute; top: 0; bottom: 0; right: 0; width: var(--strip-w);
  background:
    linear-gradient(180deg, rgba(0,0,0,.5) 0, rgba(0,0,0,.5) .6%, #9b9680 .6%, #9b9680 2%, rgba(0,0,0,0) 4%),
    linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 76%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(90deg, #5c5031 0 1px, #4e4429 1px 2px);   /* Video: rgb(88,77,48) */
}
/* Kompatibilität: alte 3D-Flächen ohne Funktion */
.book__back, .book__spine, .book__top { display: none; }
@media (prefers-reduced-motion: reduce) { .book__body { transition-duration: 120ms; } }