/* WFP 3D Book 1.0 */
.wfp-book{
  --w:300px; --r:1.5; --dr:.19; --angle:-30deg; --glow:#B4D8F9; --delay:0s;
  --ry:var(--angle); --rx:0deg;
  --h:calc(var(--w) * var(--r)); --d:calc(var(--w) * var(--dr));
  --board:max(2px, calc(var(--w) * .008)); /* cover board thickness */
  --over:max(3px, calc(var(--w) * .014));  /* how far the covers extend past the pages */
  position:relative; isolation:isolate; box-sizing:content-box;
  width:var(--w); height:var(--h);
  margin:calc(var(--w) * .1) auto calc(var(--w) * .18);
}
.wfp-book--align-left{margin-left:0}
.wfp-book--align-right{margin-right:0}

.wfp-book__hit{position:absolute; inset:0; z-index:1; display:block; color:inherit; text-decoration:none; perspective:calc(var(--w) * 6); outline:none}
.wfp-book__hit:focus-visible{outline:1px solid #B4D8F9; outline-offset:6px}
.wfp-book__float,.wfp-book__body{position:absolute; inset:0; display:block; transform-style:preserve-3d; pointer-events:none}
.wfp-book__body{
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform 1.6s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
/* Hover or keyboard focus: turn completely flat and lift slightly */
.wfp-book__hit:hover .wfp-book__body,
.wfp-book__hit:focus-visible .wfp-book__body{transform:rotateX(0deg) rotateY(0deg) translateY(calc(var(--w) * -.02))}

.wfp-book__face{position:absolute; top:0; left:0; display:block; box-sizing:border-box; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.wfp-book__img{display:block; width:100%; height:100%; max-width:none; margin:0; object-fit:cover}

.wfp-book__front{width:var(--w); height:var(--h); background:#152738; transform:translateZ(calc(var(--d) / 2))}
.wfp-book__front::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.4) 0, rgba(255,255,255,.07) 1.4%, rgba(0,0,0,.14) 3%, rgba(0,0,0,0) 7%)}

.wfp-book__back{width:var(--w); height:var(--h); background:#101318; transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.wfp-book__back .wfp-book__img{transform:scaleX(-1); filter:brightness(.72) saturate(.85)}

.wfp-book__spine{
  width:var(--d); height:var(--h); left:calc((var(--w) - var(--d)) / 2);
  transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background:#101318 left center / auto 100% no-repeat;
  display:flex; align-items:center; justify-content:center;
}
.wfp-book__spine::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.3) 50%, rgba(0,0,0,.6))}
.wfp-book__spine span{position:relative; writing-mode:vertical-rl; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-height:86%;
  font-size:clamp(8px, calc(var(--d) * .42), calc(var(--w) * .065)); letter-spacing:.08em; line-height:1; color:#fff}

/* Page block: recessed between the two boards, inset from the top, bottom, and fore-edge */
.wfp-book__pages{
  width:calc(var(--d) - var(--board) * 2); height:calc(var(--h) - var(--over) * 2); top:var(--over);
  left:calc((var(--w) - var(--d)) / 2 + var(--board));
  transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - var(--over)));
  background:
    linear-gradient(90deg, #0C0E11 0, #0C0E11 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) calc(100% - 3px), #0C0E11 calc(100% - 1px)),
    repeating-linear-gradient(90deg, #EDEAE3 0 1px, #D9D5CC 1px 2px);
  box-shadow:inset 0 0 calc(var(--w) * .02) rgba(0,0,0,.35);
}
/* Fore-edge of each cover board (centered, then shifted along the depth axis so it pivots on the book's center) */
.wfp-book__edge{
  --bw:calc(var(--board) + 1.5px); /* slightly oversized so it overlaps the cover and no seam shows */
  width:var(--bw); height:var(--h); left:calc((var(--w) - var(--bw)) / 2);
  background:#0C0E11 right center / auto 100% no-repeat;
}
.wfp-book__edge::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.45)}
.wfp-book__edge--front{transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - .75px)) translateX(calc(var(--bw) / 2 - var(--d) / 2 - .75px))}
.wfp-book__edge--back{transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - .75px)) translateX(calc(var(--d) / 2 - var(--bw) / 2 + .75px)); background-position:left center}
/* Inside of the back board, visible where it extends past the pages. Mirrored like the back cover. */
.wfp-book__back-inner{
  width:var(--w); height:var(--h);
  transform:translateZ(calc(var(--d) / -2 + var(--board)));
  background:#0C0E11 center / cover no-repeat;
}
.wfp-book__back-inner::after{content:""; position:absolute; inset:0; background:inherit; transform:scaleX(-1)}
.wfp-book__back-inner::before{content:""; position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.35)}

.wfp-book__placeholder{position:absolute; inset:7%; display:flex; align-items:center; justify-content:center; padding:10%; text-align:center;
  border:1px solid var(--glow); color:#fff; font-size:calc(var(--w) * .12); line-height:1.05}

/* edges="false": no board edges; the page block fills the full depth. The back cover stays. */
.wfp-book--no-edges{--board:0px}
.wfp-book--no-edges .wfp-book__edge{display:none}
.wfp-book--no-edges .wfp-book__back-inner{transform:translateZ(calc(var(--d) / -2 + .5px))}

/* Shadow and glow (box-shadow based, so it never causes horizontal scrolling) */
.wfp-book__shadow,.wfp-book__glow{position:absolute; display:none; pointer-events:none}
.wfp-book--shadow .wfp-book__shadow{display:block; z-index:0; left:4%; right:-6%; bottom:calc(var(--w) * -.1); height:calc(var(--w) * .14);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 70%); filter:blur(4px)}
.wfp-book--glow .wfp-book__glow{display:block; z-index:-1; left:15%; right:15%; top:20%; bottom:20%; border-radius:50%;
  background:color-mix(in srgb, var(--glow) 22%, transparent);
  box-shadow:0 0 calc(var(--w) * .9) calc(var(--w) * .45) color-mix(in srgb, var(--glow) 20%, transparent)}

/* Intro: fade in and rise up when scrolled into view (the script adds .is-in) */
.wfp-book--intro{opacity:0; transform:translateY(32px); transition:opacity 1.4s cubic-bezier(.2,.7,.2,1) var(--intro-delay, 0s), transform 1.4s cubic-bezier(.2,.7,.2,1) var(--intro-delay, 0s)}
.wfp-book--intro.is-in{opacity:1; transform:none}

/* Float mode */
@keyframes wfp-book-float{from{transform:translateY(0)}to{transform:translateY(calc(var(--w) * -.045))}}
@keyframes wfp-book-shadow{from{transform:scale(1); opacity:1}to{transform:scale(.86); opacity:.55}}
.wfp-book--float .wfp-book__float{animation:wfp-book-float 4.2s ease-in-out var(--delay) infinite alternate}
.wfp-book--float .wfp-book__shadow{animation:wfp-book-shadow 4.2s ease-in-out var(--delay) infinite alternate}

@media (prefers-reduced-motion: reduce){
  .wfp-book__float,.wfp-book__shadow{animation:none !important}
  .wfp-book__body{transition-duration:.3s}
  .wfp-book--intro{opacity:1; transform:none; transition:none}
}