/* Gemeinsame Animation aller vier Bücher; nur die Seitenmotive unterscheiden sich. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .book-grid .book { transition: transform .45s ease, filter .45s ease; }
  .book-grid .book:hover {
    transform: translateY(-8px) scale(1.035);
    filter: drop-shadow(0 12px 10px #46311f30) drop-shadow(0 0 14px #efc77660);
    animation: book-hover 3s ease-in-out infinite;
  }
}
@keyframes book-hover { 50% { transform: translateY(-13px) scale(1.035); } }
.book-magic {
  position: fixed; inset: 0; z-index: 10000; pointer-events: auto;
  isolation: isolate; overflow: hidden;
  /* Stärke und Ausdehnung des finalen Lichtübergangs. */
  --final-light-opacity: 1;
  --final-light-scale: 18;
}
.book-magic-stage {
  position: absolute; left: var(--book-x); top: var(--book-y);
  width: var(--book-size); height: var(--book-size);
  perspective: 1100px; perspective-origin: 42% 42%;
  animation: book-forward var(--arrival-duration) cubic-bezier(.42,0,.58,1) both,
    book-center-open var(--open-duration) var(--open-delay) ease-in-out forwards;
}
/* Konturmaske nur für die animierte Kopie: kein rechteckiger Bildhintergrund. */
.book-magic-cover-front {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  clip-path: polygon(10% 5%,80% 5%,80% 3%,93% 3%,93% 92%,27% 92%,27% 98%,20% 95%,16% 98%,16% 92%,7% 91%,7% 9%);
  backface-visibility: hidden;
}
.book-magic-cover-repair {
  position:absolute; inset:39% 7% 44% 80%; overflow:hidden;
  backface-visibility:hidden;
}
.book-magic-cover-texture {
  position:absolute; max-width:none; width:769.231%; height:588.235%;
  left:-615.385%; top:-129.412%; object-fit:fill;
}
.book-magic-cover {
  position: absolute; inset: 0; transform-origin: 11% 50%;
  transform-style: preserve-3d; animation: book-open var(--open-duration) var(--open-delay) ease-in-out both;
  z-index: 8;
}
.book-magic-cover-back {
  position: absolute; inset: 5% 7% 8% 11%;
  border-radius: 3%; background: #fff;
  transform: rotateY(180deg); backface-visibility: hidden;
}
.book-magic-lock {
  position: absolute; inset: 0 auto 0 -5.5%; width: 100%; height: 100%; object-fit: contain;
  clip-path: polygon(84% 39%,93% 39%,95.5% 40.5%,95.5% 52.5%,94% 54.5%,91.5% 54.5%,91.5% 52.5%,84% 52.5%,81.5% 51%,80.5% 48%,81% 43%,82% 40.5%);
  /* Rechte Schlosskante (95,5 %) liegt durch den festen Versatz exakt
     auf der unbewegten Seitenkante (90 %). Keine Translation im Schwenk. */
  transform-origin: 95.5% 47%; z-index: 10;
  backface-visibility: visible;
  animation: book-unlock var(--unlock-duration) var(--unlock-delay) ease-in-out both;
  filter: drop-shadow(0 2px 3px #3f271860);
}
.book-magic-pages, .book-magic-leaf {
  position: absolute; inset: 7% 10% 10% 12%; border-radius: 2% 5% 5% 2%;
  background: #fff;
}
.book-magic-pages { box-shadow: 3px 4px 0 #ddd,5px 6px 0 #fafafa; opacity:0; animation: book-pages var(--open-duration) var(--open-delay) both; }
.book-magic-leaf {
  z-index: var(--leaf-order); transform-origin: 0 50%;
  opacity:0; animation: book-leaf var(--leaf-flight) var(--leaf-delay) cubic-bezier(.4,0,.3,1) both;
  box-shadow: 2px 2px 5px #785b3830;
}
.book-magic-glow {
  position: absolute; inset: 0; z-index:12; border-radius:50%;
  background: radial-gradient(ellipse,#fffdf1 0%,#ffe5a6b0 35%,#f6c46a00 70%);
  opacity:0; animation:book-glow var(--glow-duration) var(--glow-delay) ease-in both; pointer-events:none;
}
.book-magic-stream {
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
}
.book-magic-white {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 48%, #fffefb 0%, #fffdf6 60%, #fffdf9 100%);
  opacity:0; pointer-events:none; animation:book-white var(--flash-duration) var(--flash-delay) ease-in both;
}
@keyframes book-forward {
  from {transform:translate(0,0) scale(1)}
  to {transform:translate(var(--move-x),var(--move-y)) scale(var(--book-scale))}
}
@keyframes book-center-open {
  from {transform:translate(var(--move-x),var(--move-y)) scale(var(--book-scale))}
  to {transform:translate(calc(var(--move-x) + var(--open-offset)),var(--move-y)) scale(var(--book-scale))}
}
/* Fester rechter Scharnierpunkt: nur schwenken, niemals ablösen oder ausblenden. */
@keyframes book-unlock {
  from { transform: rotateY(0deg); opacity: 1; }
  to { transform: rotateY(-145deg); opacity: 1; }
}
@keyframes book-open {
  from {transform:rotateY(0)}
  to {transform:rotateY(-150deg)}
}
@keyframes book-pages { 0% {opacity:0} 10%,100% {opacity:1} }
@keyframes book-leaf {
  0% {opacity:1;transform:rotateY(0)}
  75% {opacity:1}
  100% {opacity:1;transform:rotateY(-157deg)}
}
@keyframes book-glow {
  0% {opacity:0;transform:scale(.3)}
  45% {opacity:.06;transform:scale(1.2)}
  75% {opacity:.22;transform:scale(3)}
  93% {opacity:.6;transform:scale(7)}
  100% {opacity:var(--final-light-opacity);transform:scale(var(--final-light-scale))}
}
@keyframes book-white { 0% {opacity:0} 35% {opacity:.85} 100% {opacity:var(--final-light-opacity)} }
.book-magic--simple .book-magic-cover { animation-name:book-open-simple; }
.book-magic--simple .book-magic-leaf { animation-name:book-leaf-simple; }
@keyframes book-open-simple { 0% {transform:none} 100% {transform:translateX(-65%) rotate(-12deg);opacity:.6} }
@keyframes book-leaf-simple { 0% {opacity:1;transform:none} 100% {opacity:.7;transform:translateX(-75%) rotate(-8deg)} }
@media (prefers-reduced-motion: reduce) {
  .book-grid .book { animation:none; transition:none; }
  .book-grid .book:hover { transform:none; }
}

/* Nur dekorative Druckspuren auf den animierten Buchseiten.
   Keine echten Texte; per SHOW_STORY_PAGE_DETAILS in JavaScript abschaltbar. */
.book-magic-page-details {
  position:absolute; inset:12% 14%; display:grid;
  grid-template-rows: 30% 16% 30% 16%; gap:2.5%;
  overflow:hidden; pointer-events:none; opacity:.38;
  filter:blur(1.2px);
}
.book-magic-page-illustration {
  display:block; width:100%; height:100%; min-height:0;
  object-fit:cover; object-position:50% 55%; border-radius:5%;
  filter:blur(1.8px) saturate(.55); opacity:.8;
}
.book-magic-page-details--watermark {
  inset:8% 10%; grid-template-rows:1fr; gap:0;
  opacity:.25; filter:blur(1.8px);
}
.book-magic-page-details--watermark .book-magic-page-illustration {
  object-fit:contain; object-position:center; border-radius:10%;
  filter:blur(1.6px) saturate(.55); opacity:.85;
  -webkit-mask-image:radial-gradient(ellipse 78% 74% at 50% 50%,#000 48%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 74% at 50% 50%,#000 48%,transparent 100%);
}
.book-magic-page-text {
  display:flex; flex-direction:column; justify-content:space-evenly;
  align-items:flex-start;
}
.book-magic-page-mark {
  height:12%; width:94%; background:#88827a; opacity:.26;
  border-radius:2px;
}
.book-magic-page-mark:nth-child(2) { width:83%; }
.book-magic-page-mark:nth-child(3) { width:61%; }

.book-magic-page-symbol {
  display:flex; align-items:center; justify-content:center;
  color:#b28c80; font-family:Georgia, serif; font-size:clamp(10px, 2vw, 22px);
  font-style:italic; opacity:.55; filter:blur(2px);
}

/* Während des Fluges nur die Kopie zeigen, ohne das Buchraster zu verändern. */
.book-grid .book.book-flight-original {
  visibility: hidden;
}