/* The favicon mascot and its little sister (see mascot.js). Load after sidebar.css. */

/* photo: tilts a little on hover while a 👋 bubble pops up beside it */
.pwrap{position:relative;width:fit-content}
.photo{width:fit-content;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.photo .portrait{transition:box-shadow .35s}
.pwrap:hover .photo{transform:rotate(-2.5deg)}
.pwrap:hover .portrait{box-shadow:0 10px 22px rgba(28,26,23,.16)}
.hello{position:absolute;top:14px;right:-54px;display:grid;place-items:center;width:42px;height:42px;font-size:21px;background:var(--paper);border:1px solid var(--rule);border-radius:50% 50% 50% 6px;box-shadow:0 4px 12px rgba(28,26,23,.1);opacity:0;transform:scale(.5) translateY(8px);transform-origin:left bottom;transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.pwrap:hover .hello{opacity:1;transform:none}
.hello span{display:block;transform-origin:70% 80%}
.pwrap:hover .hello span{animation:wave 1s .15s ease-in-out}
@keyframes wave{20%{transform:rotate(16deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(14deg)}80%{transform:rotate(-4deg)}}

/* the mascot: the favicon face with googly eyes */
.face{--s:40px;display:flex;align-items:center;justify-content:center;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .27);background:#d9925f;padding-top:calc(var(--s) * .04)}
.face .eye{position:relative;display:block;width:calc(var(--s) * .37);height:calc(var(--s) * .37);border-radius:50%;background:#faf8f3;transition:transform .09s ease-in}
.face .eye b{position:absolute;left:24%;top:24%;width:52%;height:52%;border-radius:50%;background:#1c1a17;transition:transform .12s ease-out}
.face .eye b::after{content:"";position:absolute;left:52%;top:14%;width:32%;height:32%;border-radius:50%;background:#fff}
.face.blink .eye{transform:scaleY(.12)}

/* footer: it hides under the rule, peeks over when the footer comes into view, and says hi on hover.
   Easter eggs (mascot.js): a tap calls up its sister; three quick taps make it duck out of sight. */
main footer{position:relative}
.peek{position:absolute;right:10px;bottom:100%;width:48px;height:38px}
.peek .hole{position:absolute;top:0;right:0;bottom:0;left:-50px;overflow:hidden;pointer-events:none}
.peek .face{--s:44px;position:absolute;right:2px;top:0;pointer-events:auto;cursor:pointer;touch-action:manipulation;transform:translateY(40px);transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.peek.up .face{transform:translateY(12px)}
/* once tapped it stays up, whether or not the pointer is still there, until the egg plays out */
.peek.pin .face{transform:translateY(1px)}
.peek:not(.shy):not(.sneak):hover .face{transform:translateY(1px)}
.peek.shy .face{transform:translateY(42px);transition:transform .18s ease-in;pointer-events:none}
.peek.sneak .face{transform:translateY(17px);transition:transform 1s cubic-bezier(.3,1,.5,1)}
.peek .sis{position:absolute;left:6px;bottom:0;width:34px;height:34px;margin:0;transform:translateY(40px);transition:transform .55s cubic-bezier(.3,1.5,.5,1)}
.peek.duo .sis{transform:translateY(5px)}
.peek .say{position:absolute;right:100%;top:-2px;margin-right:4px;font:500 12px/1 var(--sans);color:var(--dim);background:var(--paper);border:1px solid var(--rule);border-radius:10px 10px 2px 10px;padding:6px 9px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .25s;pointer-events:none}
.peek:not(.pin):not(.shy):not(.sneak):hover .say,.peek.gasp .say{opacity:1;transform:none}

/* the sister: stands in for the 🙂 in running text, sized to match a system emoji */
.sis{display:inline-block;width:.92em;height:.92em;vertical-align:-.12em;margin-left:.04em;overflow:visible}
.sis-face,.sis-wink,.sis-shut,.sis-mouth{transform-box:fill-box;transform-origin:center}
.sis-face{transform-origin:50% 80%}
.sis-wink{transform-origin:50% 40%}
.sis-shut{opacity:0}
.sis .pupil{transition:transform .12s ease-out}

@media(prefers-reduced-motion:reduce){.hello span{animation:none!important}}
@media print{.peek,.hello{display:none}}