/* The renderer masks edge-connected white paper once; the mascot's own
   colours use normal compositing through every hard-cut pose and press. */
#footer-mascot{width:min(100%,390px);aspect-ratio:360/330;margin-inline:auto;border-radius:0;background:var(--lilac);isolation:isolate;transition:translate 140ms var(--entrance)}
#footer-mascot:active{translate:0 2px}
/* A small keyboard-only underline keeps focus visible without framing the face. */
#footer-mascot::after{content:"";position:absolute;left:50%;bottom:14px;width:84px;border-bottom:3px solid var(--coral-dark);border-radius:2px;transform:translateX(-50%);opacity:0;pointer-events:none}
#footer-mascot:focus-visible{outline:none}
#footer-mascot:focus-visible::after{opacity:1}
#footer-mascot>canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:normal;pointer-events:none}
#footer-mascot>img{object-fit:contain}
.footer-mascot-wrap .footer-hello{position:static;display:block;max-width:none;min-height:2.3em;margin:0 0 14px;transform:none;text-align:center;line-height:1.15;white-space:pre-line}
.footer-mascot-wrap .gaze-note{margin:0 auto 4px;max-width:24ch;font:500 clamp(23px,2.4vw,28px)/1.15 Caveat,cursive;color:var(--plum);white-space:pre-line;text-wrap:balance}
body[data-motion="off"] #footer-mascot{transition:none}
@media(prefers-reduced-motion:reduce){#footer-mascot{transition:none}}
@media(forced-colors:active){#footer-mascot::after{border-color:Highlight}}

/* Handmade paper PNG strips use their full transparent square cell. */
#footer-mascot{aspect-ratio:1;background:transparent}