/* Library friends (assets/js/friends-art.js): character animation hooks shared by
   the reading room (library-room.php) and the edge peekers + wandering cat
   (includes/library-friends.php + assets/js/friends.js). Only the peeking girls
   take clicks (a click sends them away); everything else ignores the pointer. */

/* ---------- Shared character parts ---------- */
.lf-eyes { transform-box: fill-box; transform-origin: center; animation: lf-blink 5.2s infinite; }
.lf-eyes-closed { display: none; }
.lf-asleep .lf-eyes { display: none; }
.lf-asleep .lf-eyes-closed { display: inline; }
@keyframes lf-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }

.lf-head { transform-box: fill-box; transform-origin: 50% 92%; }
.lf-arm,
.lf-leg,
.lf-shin,
.lf-page,
.lf-cat-tail,
.lf-sit-tail,
.lf-cat-bodyg { transform-box: view-box; }

.lf-waving .lf-arm { animation: lf-wave .42s ease-in-out infinite alternate; }
@keyframes lf-wave { from { transform: rotate(-18deg); } to { transform: rotate(14deg); } }

/* Seated readers */
.lf-reader .lf-head { animation: lf-nod 7s ease-in-out infinite; }
@keyframes lf-nod { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 62% { transform: rotate(2.5deg) translateY(1px); } }
.lf-torso { transform-box: fill-box; transform-origin: 50% 100%; animation: lf-breathe 4.2s ease-in-out infinite; }
@keyframes lf-breathe { 50% { transform: scale(1.012, 1.02); } }
.lf-book { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .5s ease; }
.lf-page { opacity: 0; }
.lf-turn .lf-book { animation: lf-bookturn 1s ease-in-out; }
.lf-turn .lf-page { animation: lf-pageflip 1s ease-in-out; }
@keyframes lf-bookturn { 40% { transform: rotate(-4deg) translateY(-2px); } }
@keyframes lf-pageflip { 0% { opacity: 1; transform: scaleX(1); } 90% { opacity: 1; transform: scaleX(-1); } 100% { opacity: 0; transform: scaleX(-1); } }
.lf-lookup .lf-head { animation: none; transform: rotate(-5deg) translateY(-3px); transition: transform .4s ease; }
.lf-lookup .lf-book { transform: translateY(5px) rotate(4deg); }
.lf-swing .lf-shin-l { animation: lf-swing 1.5s ease-in-out infinite alternate; }
.lf-swing .lf-shin-r { animation: lf-swing 1.5s ease-in-out -.75s infinite alternate; }
@keyframes lf-swing { from { transform: rotate(-12deg); } to { transform: rotate(16deg); } }

/* Cat */
.lf-cat-tail { animation: lf-tail 2.4s ease-in-out infinite alternate; }
@keyframes lf-tail { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.lf-sit-tail { animation: lf-swish 3s ease-in-out infinite alternate; }
@keyframes lf-swish { from { transform: rotate(-6deg); } to { transform: rotate(12deg); } }
.lf-asleep .lf-sit-tail { animation-duration: 7s; }
.lf-cat-head { transform-box: fill-box; transform-origin: 50% 85%; transition: transform .35s ease; }
.lf-asleep .lf-cat-head { transform: rotate(9deg) translateY(3px); }
.lf-curious .lf-cat-head { transform: rotate(-12deg); }
.lf-lookup-cat .lf-cat-head { transform: rotate(-16deg) translateY(-2px); }

.lf-walk .lf-leg-a { animation: lf-step .5s ease-in-out infinite alternate; }
.lf-walk .lf-leg-b { animation: lf-step .5s ease-in-out infinite alternate-reverse; }
.lf-run .lf-leg { animation-duration: .24s; }
@keyframes lf-step { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
.lf-cat-bodyg { transform-origin: 30px 76px; transition: transform .25s ease; }
.lf-crouch .lf-cat-bodyg { transform: translateY(7px) rotate(-3deg); }
.lf-crouch.lf-wiggle .lf-cat-bodyg { animation: lf-wiggle .16s ease-in-out infinite alternate; }
@keyframes lf-wiggle {
    from { transform: translateY(7px) rotate(-4deg) translateX(-1px); }
    to { transform: translateY(7px) rotate(-1deg) translateX(1.5px); }
}
.lf-jump .lf-leg-front { transform: rotate(-55deg); }
.lf-jump .lf-leg-back { transform: rotate(48deg); }
.lf-jump .lf-cat-bodyg { transform: rotate(-12deg); }

/* Side / sitting cat swap */
.lf-cat-sit { display: none; }
.lf-sitting .lf-cat-side { display: none; }
.lf-sitting .lf-cat-sit { display: block; }

/* Butterfly */
.lf-wing { transform-box: fill-box; animation: lf-flap .17s ease-in-out infinite alternate; }
.lf-wing-l { transform-origin: 100% 40%; }
.lf-wing-r { transform-origin: 0 40%; }
@keyframes lf-flap { from { transform: scaleX(1); } to { transform: scaleX(.22); } }

/* ---------- v1 poses (assets/js/friends-art-v1.js) ---------- */
/* Cat licking a raised paw / eating from a bowl */
.lf-lick-paw, .lf-tongue { display: none; }
.lf-lick-paw { transform-box: view-box; }
.lf-licking .lf-lick-paw { display: inline; animation: lf-lickpaw .45s ease-in-out infinite alternate; }
.lf-licking .lf-tongue { display: inline; }
.lf-licking .lf-paw-r { display: none; }
.lf-licking .lf-eyes { display: none; }
.lf-licking .lf-eyes-closed { display: inline; }
.lf-licking .lf-cat-head { animation: lf-lickhead .45s ease-in-out infinite alternate; }
@keyframes lf-lickpaw { from { transform: rotate(0); } to { transform: rotate(-9deg) translateY(-2px); } }
@keyframes lf-lickhead { from { transform: rotate(6deg) translateY(2px); } to { transform: rotate(10deg) translateY(4px); } }
.lf-eating .lf-cat-head { transform: rotate(30deg) translateY(9px); animation: lf-nibble .3s ease-in-out infinite alternate; }
@keyframes lf-nibble { from { transform: rotate(28deg) translateY(8px); } to { transform: rotate(33deg) translateY(10px); } }
.lf-mouse-tail { transform-box: view-box; animation: lf-tail 1.2s ease-in-out infinite alternate; }

/* Standing girl: walking, reaching up to a shelf, carrying a book */
.lf-sbody { transform-box: view-box; transform-origin: 0 0; }
.lf-sarm { transform-box: view-box; transition: transform .45s ease; }
.lf-carry { display: none; }
.lf-carrying .lf-carry { display: inline; }
.lf-reaching .lf-sarm { transform: rotate(-158deg); }
.lf-walk .lf-sleg-l { animation: lf-sstep .46s ease-in-out infinite alternate; }
.lf-walk .lf-sleg-r { animation: lf-sstep .46s ease-in-out infinite alternate-reverse; }
.lf-walk .lf-sbody { animation: lf-sbob .23s ease-in-out infinite alternate; }
@keyframes lf-sstep { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes lf-sbob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.lf-wand-tip { transform-box: fill-box; transform-origin: center; animation: lf-tipglow 1.4s ease-in-out infinite; }
@keyframes lf-tipglow { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---------- v2 jointed arms (assets/js/friends-art-v2.js) ----------
   .lf-j-sh > .lf-j-el > .lf-j-wr pivot at shoulder / elbow / wrist. */
.lf-j-sh, .lf-j-el, .lf-j-wr { transform-box: view-box; transition: transform .45s ease; }
/* Wave: forearm swings at the elbow, the hand flicks a beat behind at the wrist */
.lf-waving .lf-j-el { animation: lf-wave-el .42s ease-in-out infinite alternate; }
.lf-waving .lf-j-wr { animation: lf-wave-wr .42s ease-in-out -.12s infinite alternate; }
@keyframes lf-wave-el { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
@keyframes lf-wave-wr { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
/* Reach up to a shelf: whole arm up, elbow and wrist slightly bent */
.lf-reaching .lf-j-r { transform: rotate(-160deg); }
.lf-reaching .lf-j-r .lf-j-el { transform: rotate(-16deg); }
.lf-reaching .lf-j-r .lf-j-wr { transform: rotate(-12deg); }
/* Carry a book: both elbows bend so the forearms hug it to the chest */
.lf-carrying .lf-j-r { transform: rotate(10deg); }
.lf-carrying .lf-j-r .lf-j-el { transform: rotate(116deg); }
.lf-carrying .lf-j-l { transform: rotate(-10deg); }
.lf-carrying .lf-j-l .lf-j-el { transform: rotate(-116deg); }
/* Arms swing while walking (unless busy carrying or reaching) */
.lf-walk:not(.lf-carrying):not(.lf-reaching) .lf-j-l { animation: lf-armswing .46s ease-in-out infinite alternate; }
.lf-walk:not(.lf-carrying):not(.lf-reaching) .lf-j-r { animation: lf-armswing .46s ease-in-out infinite alternate-reverse; }
.lf-walk:not(.lf-carrying):not(.lf-reaching) .lf-j-el { transform: rotate(0); }
@keyframes lf-armswing { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

/* Cat curled up asleep (v2): swaps in for the side / sitting drawings */
.lf-cat-curl { display: none; }
.lf-curled .lf-cat-side, .lf-curled .lf-cat-sit { display: none; }
.lf-curled .lf-cat-curl { display: block; }
.lf-curl-body { transform-box: view-box; animation: lf-catbreathe 3.4s ease-in-out infinite; }
@keyframes lf-catbreathe { 50% { transform: scale(1.015, 1.05); } }
.lf-curl-tail { transform-box: view-box; animation: lf-tail 6s ease-in-out infinite alternate; }

/* ---------- Edge widget ---------- */
.lf-root {
    --lf-w: 92px;        /* peeker width */
    --lf-cat-w: 76px;    /* cat width */
    position: fixed;
    inset: 0;
    z-index: 1040;       /* below festive artwork (1050), the suggest-book tab (1100), modals and toasts */
    pointer-events: none;
    overflow: hidden;
}
.lf-root.lf-in-admin { left: var(--sidebar-width, 260px); }
@media (max-width: 575.98px) { .lf-root { --lf-w: 66px; --lf-cat-w: 58px; } }
@media (max-width: 991.98px) { .lf-root.lf-in-admin { left: 0; } }

.lf-peek { position: absolute; width: 0; height: 0; }
.lf-peek-left { left: 0; }
.lf-peek-right { right: 0; }
.lf-peek-bottom { bottom: 0; }
.lf-peek-inner {
    position: absolute;
    left: calc(var(--lf-w) / -2);
    bottom: 0;
    width: var(--lf-w);
    transform-origin: 50% 100%;
    transform: rotate(var(--lf-rot, 0deg)) translateY(var(--lf-hide, 105%));
    transition: transform .9s cubic-bezier(.3, .85, .35, 1);
}
.lf-peek.lf-in .lf-peek-inner { transform: rotate(var(--lf-rot, 0deg)) translateY(var(--lf-show, 38%)); }
.lf-peek.lf-out .lf-peek-inner { transition-duration: .6s; transition-timing-function: ease-in; }
.lf-peek svg {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .28));
}
.lf-peek.lf-in .lf-head { animation: lf-tilt 2.6s ease-in-out infinite alternate; }
@keyframes lf-tilt { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }

.lf-cat,
.lf-fly { position: absolute; left: 0; bottom: 0; will-change: transform; }
.lf-cat { width: var(--lf-cat-w); height: calc(var(--lf-cat-w) * .72); }
.lf-cat-flip { position: absolute; inset: 0; }
.lf-cat-flip svg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}
.lf-cat-flip .lf-cat-side { width: 100%; }
.lf-cat .lf-cat-flip svg { pointer-events: auto; cursor: pointer; }   /* tap the cat and it skitters away */
.lf-cat-flip .lf-cat-sit { width: 66%; }
.lf-fly { width: 24px; }
.lf-fly svg { display: block; width: 100%; height: auto; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
    .lf-root { display: none; }
}