/* Soft-felt page curl — motion layer for the story book draft.
   The material helper links this from index.html AFTER book.css.
   book.js drives the turn with requestAnimationFrame: the sheet is ~20
   narrow .curl-strip slices whose translate3d/rotateY is set inline each
   frame, so this file declares structure and lift-reactive shading only —
   no keyframes. The resting-page look (.skin wool, stitched keyline,
   spine valley, .page-grid cards) is reused from book.css at full size on
   .curl-content inside every slice. */

/* Root overlay: one half of the book, rooted at the spine (the centre).
   It carries no transform of its own — the bend lives in the strips —
   and keeps the parent's 3D context so slices sort by depth. */
.book-page .curl-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 5;
  transform-style: preserve-3d;
  pointer-events: none;
  --curl-lift: 0; /* 0 flat, ~1 mid-turn; written by book.js each frame */
}
.book-page .curl-leaf--forward { left: 50%; }
.book-page .curl-leaf--reverse { left: 0; }

/* One broad, diffuse cast shadow for the whole sheet, deepening with lift.
   It lives on the leaf (not on each face — twenty repeated shadows would
   read as venetian blinds) and sits just behind the bending strips. The
   continuous surface shading through every crop comes from the full-page
   .skin spine gradient in book.css. */
.book-page .curl-leaf::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 26px;
  pointer-events: none;
  transform: translateZ(-2px);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.35);
  opacity: calc(var(--curl-lift, 0) * 0.9);
}

/* One narrow slice of the sheet. Width and per-frame transform are set
   inline by book.js; forward strips grow from the spine edge (left),
   reverse strips from the spine edge (right). */
.book-page .curl-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.book-page .curl-leaf--forward .curl-strip { left: 0; transform-origin: left center; }
.book-page .curl-leaf--reverse .curl-strip { right: 0; transform-origin: right center; }

/* Double face per strip: the front shows the outgoing page slice, the
   back (pre-flipped) the destination slice; backface hiding leaves
   exactly one visible. Faces clip their content to the slice. */
.book-page .curl-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.book-page .curl-face--back { transform: rotateY(180deg); }

/* A full-size page inside each slice, offset by book.js to show its own
   crop. Flexed like .page so the reused .page-grid stretches identically.
   The copy carries the resting page's outer corner radius (side-aware via
   the spine class: spine-left is a right page, spine-right a left page);
   the per-strip clip above stays a plain rectangle. */
.book-page .curl-content {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}
.book-page .curl-content.skin--spine-left { border-radius: 8px 24px 26px 10px; }
.book-page .curl-content.skin--spine-right { border-radius: 26px 8px 10px 24px; }

/* A very faint uniform tint while the sheet is lifted — deliberately not a
   directional gradient, which would repeat once per strip. */
.book-page .curl-face::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.06);
  opacity: calc(var(--curl-lift, 0) * 0.7);
}