/* Shared character cutouts + animation for the dawnpwatson.com mockups.
   Characters: ../characters/*.svg (clean vector redraws, see ../characters/ROUTES.md).
   Every animation stops under prefers-reduced-motion. */
.ch{position:relative;display:inline-block;line-height:0}
.ch img,.ch svg{display:block;width:100%;height:auto}
.framed{overflow:hidden}.framed svg{display:block;width:100%;height:100%}
.duo{display:flex;align-items:flex-end;justify-content:center;width:100%}
.ch img.layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Nana: left arm sways from the shoulder, whole figure breathes */
.ch.nana img{animation:nana-sway 6s ease-in-out infinite;transform-origin:50% 100%}
.x{transform-box:fill-box;transform-origin:100% 0;animation:nana-arm 4.5s ease-in-out infinite}
@keyframes nana-sway{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}
@keyframes nana-arm{0%,100%{transform:rotate(0)}40%{transform:rotate(-10deg)}60%{transform:rotate(-14deg)}}
/* Wowler (standing): tail swish from the base, gentle breathe */
.x{transform-box:fill-box;transform-origin:0% 100%;animation:tail-swish 2.6s ease-in-out infinite}
@keyframes tail-swish{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(7deg)}}
/* Wowler peeking: rises out of the grass, blinks, ducks back down */
.peek{position:relative;overflow:hidden;line-height:0;aspect-ratio:4/3;height:auto!important}  /* fixed shape keeps the cutout's raw bottom edge under the grass */
.peek .ch{display:block;width:100%;animation:peek-rise 9s ease-in-out infinite;transform-origin:50% 100%}
@keyframes peek-rise{0%,8%{transform:translateY(62%)}18%,72%{transform:translateY(4%)}24%{transform:translateY(4%) rotate(-3deg)}32%{transform:translateY(4%) rotate(2deg)}38%,72%{transform:translateY(4%) rotate(0)}84%,100%{transform:translateY(62%)}}
.peek .grass{position:absolute;left:-2%;right:-2%;bottom:-2px;width:104%;height:auto;z-index:2}
.lid{display:none;position:absolute;border-radius:50%;background:var(--lid,#f4905a);border-bottom:.35em solid #1d1d1b;transform:scaleY(0);transform-origin:50% 0;animation:blink 4.2s infinite}
.lid.l{left:25.2%;top:34.5%;width:19%;height:27%}
.lid.r{left:55.3%;top:34.5%;width:19%;height:27%}
@keyframes blink{0%,90%,100%{transform:scaleY(0)}93%,95%{transform:scaleY(1)}}
/* Dalmatians bounce (Sparky and Sheba offset so they never move together) */
.ch.dog{animation:dog-bounce 1.1s cubic-bezier(.3,0,.4,1) infinite;transform-origin:50% 100%}
.ch.dog.sheba{animation-delay:-.55s}
@keyframes dog-bounce{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-9%) scale(.98,1.02) rotate(-2deg)}55%{transform:translateY(-9%) rotate(-2deg)}}
.ch.dog.calm{animation-duration:2.4s}
/* sticker look: white die-cut edge + soft shadow */
.sticker img{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 6px 10px rgba(0,0,0,.18))}
@media (prefers-reduced-motion: reduce){
  .ch,.ch *,.peek .ch,.lid{animation:none!important}
  .peek .ch{transform:translateY(4%)}
}

.x{transform-box:fill-box;transform-origin:50% 40%;animation:blink2 4.2s infinite}
@keyframes blink2{0%,90%,100%{transform:scaleY(1)}93%,95%{transform:scaleY(.15)}}
.pol .in .duo .ch{position:static;left:auto;top:auto}
.gc .st{height:250px}