/* About page extras — see about-fun.js */
.af-on .page-narrow h1{letter-spacing:-.01em}
.af-ch{display:inline-block;opacity:0;transform:translateY(.45em) rotate(-4deg);animation:afCh .7s cubic-bezier(.2,.9,.25,1.3) forwards}
.af-ch.sp{width:.28em}
@keyframes afCh{to{opacity:1;transform:none}}
.af-on .page-narrow > h1:hover .af-ch{animation:afWave .6s ease-in-out;opacity:1;transform:none}
.af-on .page-narrow > h1:hover .af-ch:nth-child(3n){animation-delay:.05s}.af-on .page-narrow > h1:hover .af-ch:nth-child(3n+1){animation-delay:.1s}
@keyframes afWave{0%,100%{transform:none}40%{transform:translateY(-5px)}}

.af-rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.af-rv.in{opacity:1;transform:none}

/* headings get a hand-drawn squiggle */
.af-on .page-narrow > h2{position:relative;padding-bottom:12px}
.af-on .page-narrow > h2::after{content:"";position:absolute;left:0;bottom:0;height:10px;width:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 6 Q 12 0 22 6 T 42 6 T 62 6 T 82 6 T 102 6 T 118 5' fill='none' stroke='%23e07a5f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") left center/120px 10px no-repeat;transition:width 1s cubic-bezier(.2,.8,.2,1) .25s}
.af-on .page-narrow > h2.in::after{width:120px}

/* pull-quote */
.af-quote{clear:both;position:relative;font-size:1.18em;line-height:1.6;padding:22px 24px 22px 58px;margin:30px 0;background:#fff;border:1px solid var(--line,#eadfca);border-radius:22px;box-shadow:0 14px 34px -18px rgba(44,38,34,.35)}
.af-quote::before{content:"\201C";position:absolute;left:16px;top:6px;font:700 64px/1 Georgia,serif;color:#e07a5f;opacity:.85}
.af-quote.in{animation:afPop .8s cubic-bezier(.2,.9,.25,1.25)}
@keyframes afPop{0%{transform:scale(.96)}60%{transform:scale(1.01)}100%{transform:none}}

/* polaroids with tape */
.af-polaroid{position:relative;background:#fff;padding:10px 10px 12px;border-radius:6px;box-shadow:0 16px 36px -14px rgba(44,38,34,.38);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.af-polaroid img{border-radius:3px!important;box-shadow:none!important}
.af-polaroid figcaption{font-style:italic;margin-top:10px!important}
.af-polaroid::before{content:"";position:absolute;top:-11px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(224,122,95,.32);border-radius:2px;transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.af-polaroid.tilt-r.in{transform:rotate(2.2deg)}.af-polaroid.tilt-l.in{transform:rotate(-1.6deg)}
.af-polaroid.tilt-r{transform:rotate(6deg) translateY(18px)}.af-polaroid.tilt-l{transform:rotate(-5deg) translateY(18px)}
@media(hover:hover){.af-polaroid.in:hover{transform:rotate(0) scale(1.03);box-shadow:0 22px 44px -14px rgba(44,38,34,.42)}}
.af-heart{position:absolute;bottom:40%;width:18px;height:16px;pointer-events:none;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23e07a5f' d='M12 21s-8.6-5.3-10.8-10.4C-.4 6.8 2 2 6.6 2c2.4 0 4.2 1.4 5.4 3.2C13.2 3.4 15 2 17.4 2 22 2 24.4 6.8 22.8 10.6 20.6 15.7 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;animation:afHeart 1.4s ease-out forwards}
.af-heart.big{bottom:auto;width:22px;height:20px;animation:afHeartB 1.5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes afHeart{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1)}}
@keyframes afHeartB{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-110px) scale(1.1)}}

/* reading progress */
.af-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.af-progress i{position:relative;display:block;height:100%;width:0;background:linear-gradient(90deg,#e8b04a,#e07a5f);border-radius:0 3px 3px 0}
.af-progress i::after{content:"🐾";position:absolute;right:-9px;top:-1px;font-size:12px;line-height:1}

/* running pup */
.af-run{position:relative;height:104px;margin:34px 0 8px;border-bottom:2px dashed rgba(224,122,95,.35);overflow:visible;clear:both}
.af-pup{position:absolute;bottom:2px;left:-110px;width:104px;height:73px;background:url(/assets/pup-sprite.webp) 0 0/832px 73px no-repeat;cursor:pointer;transition:left 2.3s linear;filter:drop-shadow(0 4px 3px rgba(0,0,0,.08))}
.af-pup.run{animation:afRun .44s steps(1,end) infinite}
.af-pup.wag{animation:afWag .9s steps(1,end) infinite}
.af-pup.sit{background-position:-728px 0}
.af-pup.hop{animation:afHop .5s cubic-bezier(.3,.7,.4,1)}
.af-pup.sit.hop{background-position:-728px 0}
@keyframes afRun{0%{background-position:0 0}25%{background-position:-104px 0}50%{background-position:-208px 0}75%,100%{background-position:-312px 0}}
@keyframes afWag{0%{background-position:-416px 0}25%{background-position:-520px 0}50%{background-position:-624px 0}75%,100%{background-position:-520px 0}}
@keyframes afHop{0%,100%{transform:none}40%{transform:translateY(-16px)}}
@media(max-width:600px){.af-quote{padding:18px 18px 18px 48px;font-size:1.08em}.af-quote::before{font-size:52px;left:12px}.af-polaroid.tilt-r.in{transform:rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){.af-rv,.af-ch,.af-polaroid{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}.af-pup{transition:none}}