/* The peeking little monster (B2, owner-approved 9 Oct 2026) on the home page book cards.
   Copied from peek-b2.html: the head sits behind the card, the hands in front, and on hover the eye
   swipes right, waits, swipes left, waits, shoots up, waits, drops slowly and stays; the head leans the other way. */
/* ---- the peek: a layer behind the card + a hands layer in front, both moving exactly like the card ---- */
.bcard__in{position:relative;z-index:1}
.peek-layer,.hands-layer{position:absolute;inset:0;pointer-events:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.peek-layer{z-index:0}
.hands-layer{z-index:2}
.bcard:hover .peek-layer,.bcard:hover .hands-layer{transform:translateY(-.6em) rotate(var(--hr,-1.5deg))}
.peek{position:absolute;left:var(--px,58%);top:0;width:9.5em;margin-left:-4.75em;transform:translateY(55%);
  transition:transform .55s cubic-bezier(.34,1.7,.64,1) .05s}
.bcard:hover .peek{transform:translateY(-82%)}
.hands{position:absolute;left:var(--px,58%);top:0;width:9.5em;margin-left:-4.75em;transform:translateY(-38%) scale(.2);opacity:0;
  transition:transform .35s cubic-bezier(.34,1.7,.64,1),opacity .15s}
.bcard:hover .hands{transform:translateY(-38%) scale(1);opacity:1;transition-delay:.22s}
.peek svg,.hands svg{display:block;width:100%;height:auto;overflow:visible}
  /* B2 (plays once per hover): very fast flat swipe right, wait .7s, very fast flat swipe left, wait .7s (smear,
   speed lines, head leans the other way and wobbles), shoot to the top, wait .6s, slow drop to the bottom, stays */
.look2{transform-box:fill-box;transform-origin:center}
.head2{transform-origin:50% 100%}
.zoomL,.zoomR{opacity:0}
.bcard:hover .look2{animation:look2 4.16s .7s linear both}
.bcard:hover .head2{animation:head2 4.16s .7s linear both}
.bcard:hover .zoomL{animation:zoomL 4.16s .7s linear both}
.bcard:hover .zoomR{animation:zoomR 4.16s .7s linear both}
@keyframes look2{0%{transform:translate(0px,0px)}1.44%{transform:translate(-10px,0px)}18.27%{transform:translate(-10px,0px)}18.99%{transform:translate(0px,0px) scale(2,0.65)}19.71%{transform:translate(10px,0px)}36.54%{transform:translate(10px,0px)}37.26%{transform:translate(0px,0px) scale(2,0.65)}37.98%{transform:translate(-10px,0px)}54.81%{transform:translate(-10px,0px)}55.77%{transform:translate(-5px,-7px) scale(1.2,1.3)}56.73%{transform:translate(0px,-14px)}71.15%{transform:translate(0px,-14px);animation-timing-function:ease-in-out}100%{transform:translate(0px,7px)}}
@keyframes head2{0%{transform:translateX(0px) rotate(0deg)}1.44%{transform:translateX(22px) rotate(14deg)}3.85%{transform:translateX(15px) rotate(9deg)}6.25%{transform:translateX(18px) rotate(12deg)}18.27%{transform:translateX(18px) rotate(12deg)}19.71%{transform:translateX(-22px) rotate(-14deg)}22.12%{transform:translateX(-15px) rotate(-9deg)}24.52%{transform:translateX(-18px) rotate(-12deg)}36.54%{transform:translateX(-18px) rotate(-12deg)}37.98%{transform:translateX(22px) rotate(14deg)}40.38%{transform:translateX(15px) rotate(9deg)}42.79%{transform:translateX(18px) rotate(12deg)}54.81%{transform:translateX(18px) rotate(12deg)}57.69%{transform:translateX(-4px) rotate(-3deg)}60.58%{transform:translateX(2px) rotate(1deg)}62.98%{transform:translateX(0px) rotate(0deg)}100%{transform:translateX(0px) rotate(0deg)}}
@keyframes zoomL{0%{opacity:0}18.27%{opacity:0}18.75%{opacity:1}21.15%{opacity:1}23.56%{opacity:0}100%{opacity:0}}
@keyframes zoomR{0%{opacity:0}36.54%{opacity:0}37.02%{opacity:1}39.42%{opacity:1}41.83%{opacity:0}100%{opacity:0}}
/* a little blink after it arrives */
.bcard:hover .lids{animation:blink 3.2s .9s infinite}
.lids{transform-origin:center;transform:scaleY(0)}
@keyframes blink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.peek,.hands,.peek-layer,.hands-layer{transition:none}.bcard:hover .lids,.bcard:hover .look,.bcard:hover .look2,.bcard:hover .head2,.bcard:hover .zoomL,.bcard:hover .zoomR{animation:none}}
/* room above the cards for the head to pop up */
.slider:has([data-home-track]){padding-top:8em}

/* Where the monster pops out changes from book to book (owner, 9 Oct 2026):
   top-left, top-right, top-middle, or sideways out of the left or right edge. */
.pk-tl{--px:26%}.pk-tr{--px:74%}.pk-tm{--px:50%}
/* sideways: the head is turned and slides out of the card's side instead of its top */
.pk-sl .peek,.pk-sr .peek{top:38%;margin-top:-3.56em}
.pk-sl .peek{left:0;transform:translateX(4em) rotate(-90deg)}
.pk-sr .peek{left:100%;transform:translateX(-4em) rotate(90deg)}
.bcard.pk-sl:hover .peek{transform:translateX(-3.4em) rotate(-90deg)}
.bcard.pk-sr:hover .peek{transform:translateX(3.4em) rotate(90deg)}
.pk-sl .hands,.pk-sr .hands{top:38%;margin-top:-.95em}
.pk-sl .hands{left:0;transform:rotate(-90deg) translateY(-38%) scale(.2)}
.pk-sr .hands{left:100%;transform:rotate(90deg) translateY(-38%) scale(.2)}
.bcard.pk-sl:hover .hands{transform:rotate(-90deg) translateY(-38%) scale(1)}
.bcard.pk-sr:hover .hands{transform:rotate(90deg) translateY(-38%) scale(1)}
/* the hovered card sits above its neighbours, so a sideways head isn't hidden behind the next book */
.bcard:hover{z-index:5}
.pk-swap .peek,.pk-swap .hands{transition:none!important}
/* the slider items are tilted (each its own stacking layer), so lift the whole item of the hovered book */
.slider__item:has(.bcard:hover){position:relative;z-index:5}