/* The Sheepdog Filter sheepdog and sheep (/pals.js). The painting is the still; WebGL draws over it when live. */
.pal { position: relative; display: inline-block; flex: none; height: var(--pal-h, 96px); aspect-ratio: var(--pal-ar, 900 / 1167); vertical-align: bottom; -webkit-tap-highlight-color: transparent; user-select: none; }
.pal img, .pal canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pal img { object-fit: contain; padding: 5%; box-sizing: border-box; transform-origin: 50% 86%; animation: pal-breathe 4.2s ease-in-out infinite; }
.pal.is-live img { visibility: hidden; animation: none; }
.pal.is-live { cursor: pointer; }
.pal[data-mood="sleep"]::before, .pal[data-mood="sleep"]::after { content: "z"; position: absolute; right: 12%; top: 4%; font: 600 calc(var(--pal-h, 96px) * .13)/1 var(--font, system-ui, sans-serif); color: #7a8a85; animation: pal-zz 3.2s ease-in-out infinite; pointer-events: none; }
.pal[data-mood="sleep"]::after { right: 5%; top: -3%; font-size: calc(var(--pal-h, 96px) * .09); animation-delay: 1s; }
@keyframes pal-breathe { 0%, to { transform: none; } 50% { transform: scale(1.006, 1.012); } }
@keyframes pal-zz { 0% { opacity: 0; transform: translateY(6px); } 30%, 70% { opacity: 1; } to { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .pal img, .pal::before, .pal::after { animation: none !important; } }
.lost-dog { display: block; margin: 0 auto 10px; }
/* 404: the sheep peeks in from the edge of the page */
.lost-sheep { position: fixed; right: -64px; bottom: 12%; z-index: 1; animation: lost-peek 9s ease-in-out infinite; }
@keyframes lost-peek { 0%, 18%, 82%, to { transform: translateX(0) rotate(-8deg); } 30%, 70% { transform: translateX(-70px) rotate(-14deg); } }
@media (prefers-reduced-motion: reduce) { .lost-sheep { animation: none; } }
/* Tap Easter egg: a small thought cloud above the head (pals.js think()) */
.pal-think { position: absolute; bottom: 92%; left: 50%; z-index: 5; white-space: nowrap; pointer-events: none; padding: .55em 1em; border-radius: 999px; background: #fff; color: #23302c; font: 500 clamp(13px, calc(var(--pal-h, 96px) * .045), 17px)/1.2 var(--font, system-ui, sans-serif); box-shadow: 0 6px 18px rgba(20, 40, 35, .14), 0 0 0 1px rgba(20, 40, 35, .06); transform-origin: 50% 120%; animation: pal-think 2.6s cubic-bezier(.2, .8, .2, 1) both; }
.pal-think[data-side="l"] { translate: -80% 0; }
.pal-think[data-side="r"] { translate: -20% 0; }
.pal-think::before, .pal-think::after { content: ""; position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(20, 40, 35, .12); }
.pal-think::before { width: .7em; height: .7em; bottom: -.75em; left: 50%; }
.pal-think::after { width: .4em; height: .4em; bottom: -1.3em; left: calc(50% + .25em); }
.pal-think[data-side="l"]::before { left: 72%; } .pal-think[data-side="l"]::after { left: calc(72% + .25em); }
.pal-think[data-side="r"]::before { left: 22%; } .pal-think[data-side="r"]::after { left: calc(22% - .1em); }
@keyframes pal-think { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 12% { opacity: 1; transform: translateY(0) scale(1.03); } 20% { transform: scale(1); } 82% { opacity: 1; transform: translateY(-6px); } to { opacity: 0; transform: translateY(-14px); } }