/* Tumpu: pictures whose characters look at the mouse / the finger.  Needs: family.js, tumpu-eyes.js, data/family.json, img/family/*, img/paper.jpg, img/phone-en.jpg */
:root{--ease:cubic-bezier(.22,.8,.3,1)}
.tumpu-pic{position:relative;overflow:hidden;container-type:inline-size;background:#E4D8C2 url(img/paper.jpg) center/cover;width:100%}
.tumpu-pic.card{aspect-ratio:2000/1550}
.tumpu-pic.feature{aspect-ratio:2400/2000}
.tumpu-pic.card .fam{position:absolute;left:7.5%;top:18%;width:85%}
.tumpu-pic.feature .fam{position:absolute;left:1.25%;top:46.5%;width:62.5%;z-index:2}
.tp-phone{position:absolute;left:60%;top:10.5%;width:31.5%;transform:rotate(3deg);background:#1d1613;border-radius:3.4cqw;padding:.75cqw;box-shadow:0 3cqw 4cqw -1.4cqw rgba(60,35,5,.5),0 .8cqw 1.3cqw rgba(60,35,5,.22);z-index:1}
.tp-phone img{display:block;width:100%;border-radius:2.7cqw}
/* the living family portrait (from the game) */
.fam{position:relative;display:block;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.fam>*{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fam-still{object-fit:contain;transition:opacity .45s var(--ease)}
.fam.live>.fam-still{opacity:0}
.fam-amb{object-fit:contain;filter:brightness(0) blur(7px);opacity:.2;translate:6px 8px}
.fam .fh,.fam .fhand{position:absolute;inset:0;will-change:translate}
.fam .fhand{inset:auto}
.fam .fl,.fam .eye,.fam .ec,.fam .ew,.fam .pup{position:absolute;display:block;pointer-events:none;-webkit-user-drag:none}
.fam .eye .ew,.fam .eye .ec{inset:0;width:100%;height:100%}
.fam .ec{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fam .pup{will-change:transform}
@keyframes famGiggle{0%,100%{translate:0 0}50%{translate:0 -3px}}
.fam .giggle{animation:famGiggle .22s ease-in-out infinite}