/* ==========================================================
   PAGE TURN — the flipping leaf, its shading and 3D transforms
   Driven by js/page-turn.js. Timing comes from --turn-ms in tokens.css.
   ========================================================== */

/* ============ PAGE TURN ============ */
.leaf{
  position:absolute;
  /* match the visible page area exactly (book has 14px padding), NOT the
     full book height. A leaf sized to the whole book overhangs the page
     block by 14px top and bottom; since the leaf is preserve-3d, the
     book's overflow:hidden can't clip it while it rotates, so that overhang
     renders above/below the book — the "page pops up then settles" bug.
     Sized to the page area, a rotateY only ever foreshortens (shrinks) it,
     so it can never exceed the page bounds. */
  top:14px; bottom:14px;
  left:50%;
  width:var(--page-w);
  transform-style:preserve-3d;
  transform-origin:left center;
  pointer-events:none;
  z-index:5;
  display:none;
}
.leaf.turning{ display:block; animation:turnFwd var(--turn-ms) cubic-bezier(.45,.05,.3,1) forwards; }
.leaf.turning.back{ animation:turnBack var(--turn-ms) cubic-bezier(.45,.05,.3,1) forwards; }
@keyframes turnFwd{ from{transform:rotateY(0)} to{transform:rotateY(-180deg)} }
@keyframes turnBack{ from{transform:rotateY(-180deg)} to{transform:rotateY(0)} }

/* flutter: a cascade of leaves in flight at once, used for long jumps.
   Perspective lives HERE (on the flits container, direct parent of the
   leaves) so only the flutter renders in true 3D. */
.flits{
  position:absolute; inset:0;
  z-index:5; pointer-events:none;
  perspective:max(1400px, calc(var(--page-w) * 1.75));
  perspective-origin:50% 42%;
}
.flit{
  position:absolute; top:0; bottom:0; left:50%;
  width:var(--page-w);
  transform-style:preserve-3d;
  transform-origin:left center;
  animation-name:flitFwd;
  animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.42,.05,.3,.98);
}
.flit.rev{ animation-name:flitBack; }
/* a copy of the gutter shadow INSIDE the flutter's own 3D context,
   held nearer the viewer than any leaf's apex (58px), so the valley
   stays painted over the flying pages regardless of how the browser
   sorts 3D layers against outside elements. Counter-scaled so the
   perspective doesn't enlarge it. */
.flit-spine{
  z-index:8;
  transform:translateX(-50%) translateZ(90px) scale(.936);
}
/* flutter leaves arc up toward the viewer at the apex */
@keyframes flitFwd{
  0%{ transform:rotateY(0) }
  50%{ transform:rotateY(-88deg) translateZ(58px) }
  100%{ transform:rotateY(-180deg) }
}
@keyframes flitBack{
  0%{ transform:rotateY(-180deg) }
  50%{ transform:rotateY(-92deg) translateZ(58px) }
  100%{ transform:rotateY(0) }
}
/* fluttering sheets get crisp outlines, flight shadows, and lit paper edges */
.flit .leaf-face.front{
  box-shadow:
    inset 18px 0 28px -18px rgba(60,40,10,.55),
    inset 0 0 0 1px rgba(115,86,40,.3),
    0 14px 30px rgba(12,6,1,.5);
}
.flit .leaf-face.back{
  box-shadow:
    inset -18px 0 28px -18px rgba(60,40,10,.55),
    inset 0 0 0 1px rgba(115,86,40,.3),
    0 14px 30px rgba(12,6,1,.5);
}
.flit .leaf-face::after{
  content:""; position:absolute; top:0; bottom:0; width:5px; z-index:2;
}
.flit .leaf-face.front::after{ right:0;
  background:linear-gradient(270deg, #a98e55, #e6d6a8 45%, rgba(255,248,222,0)); }
.flit .leaf-face.back::after{ left:0;
  background:linear-gradient(90deg, #a98e55, #e6d6a8 45%, rgba(255,248,222,0)); }

.leaf-face{
  position:absolute; inset:0;
  background:var(--paper);
  backface-visibility:hidden;
  overflow:hidden;
}
.leaf-face.front{ border-radius:0 4px 4px 0;
  box-shadow:inset 18px 0 28px -18px rgba(60,40,10,.55);}
.leaf-face.back{ transform:rotateY(180deg); border-radius:4px 0 0 4px;
  box-shadow:inset -18px 0 28px -18px rgba(60,40,10,.55);}
/* moving shadow cast on the book while the leaf turns */
.turn-shade{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  opacity:0; background:linear-gradient(90deg, transparent 45%, rgba(0,0,0,.28) 50%, transparent 60%);
}
.turn-shade.on{ animation:shade var(--turn-ms) ease-in-out forwards; }
@keyframes shade{ 0%{opacity:0} 35%{opacity:1} 100%{opacity:0} }

/* click zones */
.zone{
  position:absolute; top:0; bottom:0; width:18%;
  cursor:pointer; z-index:6; background:none; border:none;
}
.zone:focus-visible{ outline:2px solid var(--brass); outline-offset:-4px; }
.zone.prev{ left:0; } .zone.next{ right:0; }