/* Each turning sheet contains both faces so its content follows the hinge. */
.book-tool.book-tool .book-tool__turn-sheet--forward > .book-tool__paper--text,
.book-tool.book-tool .book-tool__turn-sheet--backward > .book-tool__paper--picture {
  display: none;
}

@container (max-width: 600px) {
  .book-tool.book-tool .book-tool__spread {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    border-radius: 16px;
  }
  .book-tool.book-tool .book-tool__spread > .book-tool__paper--picture {
    grid-column: 1;
    grid-row: 1;
  }
  .book-tool.book-tool .book-tool__spread > .book-tool__paper--text {
    grid-column: 1;
    grid-row: 2;
  }
  .book-tool.book-tool .book-tool__paper--picture {
    border-radius: 16px 16px 0 0;
    background: linear-gradient(0deg, #dfd4c4, #fffdf7 7%, #fffdf7);
    padding: 10px 12px 16px;
  }
  .book-tool.book-tool .book-tool__paper--text:not(.book-tool__paper--writing) {
    border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, #dfd4c4, #fffdf7 7%, #fffdf7);
    padding: 20px 16px 24px;
  }
  .book-tool.book-tool .book-tool__spread::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: calc(50% - 9px);
    left: 12px;
    right: 12px;
    height: 18px;
    background: radial-gradient(ellipse 4px 9px at 20px 50%, #e4dfe7 35%, #827587 50%, transparent 68%) 0 0 / 40px 100% repeat-x;
    pointer-events: none;
  }
  .book-tool.book-tool .book-tool__turn-sheet {
    left: 0;
    right: 0;
    width: 100%;
    height: 50%;
  }
  .book-tool.book-tool .book-tool__turn-sheet--forward {
    top: 50%;
    bottom: 0;
    transform-origin: center top;
    animation-name: book-notebook-page-up;
  }
  .book-tool.book-tool .book-tool__turn-sheet--backward {
    top: 0;
    bottom: 50%;
    transform-origin: center bottom;
    animation-name: book-notebook-page-down;
  }
  .book-tool.book-tool .book-tool__turn-sheet--forward > .book-tool__paper--picture,
  .book-tool.book-tool .book-tool__turn-sheet--backward > .book-tool__paper--text {
    display: none;
  }
  .book-tool.book-tool .book-tool__turn-sheet--forward > .book-tool__paper--text,
  .book-tool.book-tool .book-tool__turn-sheet--backward > .book-tool__paper--picture {
    display: flex;
  }
  .book-tool.book-tool .book-tool__closed {
    inset: 0;
    border-radius: 16px;
    transform-origin: center top;
    animation-name: book-notebook-cover-close;
  }
  .book-tool.book-tool.book-tool--open .book-tool__closed {
    animation-name: book-notebook-cover-open;
  }
  .book-tool.book-tool .book-tool__nav-button .q-icon {
    transform: rotate(-90deg);
  }
}

@keyframes book-notebook-page-up {
  from { transform: rotateX(0); }
  to { transform: rotateX(165deg); }
}
@keyframes book-notebook-page-down {
  from { transform: rotateX(0); }
  to { transform: rotateX(-165deg); }
}
@keyframes book-notebook-cover-open {
  from { transform: rotateX(0); opacity: 1; }
  to { transform: rotateX(165deg); opacity: 0; }
}
@keyframes book-notebook-cover-close {
  from { transform: rotateX(165deg); opacity: 0; }
  to { transform: rotateX(0); opacity: 1; }
}