/* Local palette: one-off colours for this page, named by role. Global tokens live in style.css. */
:root {
  --pl-crumb-bg: #c98a3a;
  --pl-goo-bg: #8fd14f;
}
/* Pet life (public/petlife.js): reactions, idle antics and pats on [data-pet-react] pets, plus the pets' speech bubbles.
   Motion stays small. Both reduced-motion rules (style.css, shell.css) switch every animation here off; the JS also skips it. */

/* The pat targets: the panel's stage and the home hero pet are buttons now */
button.pet-stage, button.hero-pet { font: inherit; color: inherit; cursor: pointer; }
button.hero-pet { padding: 0; background: none; border: 0; }
.pet-profile-art[role="button"] { cursor: pointer; }
[data-pet-react]:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* Speech bubbles fed by petSay */
.pet-profile .pl-say { margin: 0 0 12px; max-width: 420px; background: #fff; }
.pet-panel .pl-say { max-width: none; padding: 8px 12px; font-size: var(--fs-sm); background: #fff; }
.pet-panel .pl-say::before { left: 50%; top: -11px; margin-left: -10px; border: 10px solid transparent; border-bottom-color: var(--ink); border-top: 0; }
.pl-say.pl-live { animation: pl-say-pop .35s var(--ease-out); }
@keyframes pl-say-pop { from { transform: scale(.9); opacity: .4; } }
@media (max-width: 999px) {
  .pet-panel .pl-say { grid-column: 1 / -1; }
  .pet-panel .pl-say::before { left: 42px; }
  .pet-panel .pl-say:not(.pl-live) { display: none; } /* the phone strip stays short; a pat or a reaction shows the line */
}

/* Everything moves the outer svg from its feet; the inner .pet-idle keeps breathing and blinking. */
[data-pet-react] > svg.pet-svg { transform-origin: 50% 92%; }
[data-pet-react].pl-munch > svg.pet-svg, [data-pet-react].pl-fav > svg.pet-svg { animation: pl-munch .3s ease-in-out 4; }
[data-pet-react].pl-hop > svg.pet-svg { animation: pl-hop .5s var(--ease-out) 2; }
[data-pet-react].pl-sparkle > svg.pet-svg, [data-pet-react].pl-heal > svg.pet-svg { animation: pl-glow 1.4s ease-in-out; }
[data-pet-react].pl-yuck > svg.pet-svg { animation: pl-wobble .9s ease-in-out; }
[data-pet-react].pl-read > svg.pet-svg { animation: pl-look 1.4s ease-in-out; }
[data-pet-react].pl-pat > svg.pet-svg { animation: pl-squish .45s var(--ease-out); }
/* idle antics */
[data-pet-react].pl-yawn > svg.pet-svg { animation: pl-yawn 2s ease-in-out; }
[data-pet-react].pl-look > svg.pet-svg, [data-pet-react].pl-critter > svg.pet-svg { animation: pl-look 2s ease-in-out; }
[data-pet-react].pl-hop-small > svg.pet-svg { animation: pl-hop-small .45s var(--ease-out) 2; }
.pl-seed .pet-seed { transform-box: fill-box; transform-origin: 50% 50%; animation: pl-seed 2.2s ease-in-out; }
.pl-flame .pet-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: pl-flame .35s ease-in-out 6 alternate; }
.pl-key .pet-key { transform-box: fill-box; transform-origin: 50% 50%; animation: pl-key .3s ease-in-out 6 alternate; } /* Tickerwhirl winds itself */
.pl-critter .pet-petpet { animation: pl-scurry 2s ease-in-out; }

@keyframes pl-munch { 50% { transform: scale(1.04, .95); } }
@keyframes pl-hop { 40% { transform: translateY(-16px) scale(.98, 1.03); } 80% { transform: translateY(0) scale(1.03, .97); } }
@keyframes pl-hop-small { 45% { transform: translateY(-8px); } }
@keyframes pl-squish { 30% { transform: scale(1.06, .92); } 65% { transform: scale(.97, 1.04); } }
@keyframes pl-glow { 40%, 60% { filter: drop-shadow(0 0 10px var(--sun-soft)) brightness(1.08); transform: scale(1.03); } }
@keyframes pl-wobble { 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes pl-look { 25%, 40% { transform: rotate(-4deg); } 65%, 80% { transform: rotate(4deg); } }
@keyframes pl-yawn { 30%, 55% { transform: scale(.97, 1.05); } 70% { transform: scale(1.03, .97); } }
@keyframes pl-seed { 50% { transform: translate(-14px, -22px) rotate(-20deg); opacity: 0; } 51% { transform: none; opacity: 0; } }
@keyframes pl-flame { to { transform: scale(.85, 1.2) rotate(4deg); } }
@keyframes pl-key { to { transform: scaleY(-1); } }
@keyframes pl-scurry { 35% { transform: translateX(-60px) scaleX(1); } 40%, 45% { transform: translateX(-60px) scaleX(-1); } 85% { transform: translateX(0) scaleX(-1); } 90% { transform: none; } }

/* Little bits that fly off the pet: crumbs, hearts, sparkles, goo */
.pl-bit { position: absolute; left: 50%; top: 45%; pointer-events: none; z-index: 3; font: 700 1.3rem/1 var(--display); animation: pl-fly 1.2s var(--ease-out) both; }
.pl-crumb { width: 7px; height: 6px; border-radius: 40%; background: var(--pl-crumb-bg); border: 1.5px solid var(--ink); top: 55%; }
.pl-goo { width: 9px; height: 9px; border-radius: 50%; background: var(--pl-goo-bg); border: 1.5px solid var(--ink); top: 50%; }
.pl-heart::before { content: '♥'; color: var(--pink); -webkit-text-stroke: 1px var(--ink); }
.pl-spark::before { content: '✦'; color: var(--sun); -webkit-text-stroke: 1px var(--ink); }
@keyframes pl-fly { from { transform: translate(-50%, 0) scale(.4); opacity: 0; } 20% { opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1); opacity: 0; } }
.pl-crumb, .pl-goo { animation-name: pl-fall; }
@keyframes pl-fall { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), 40px) rotate(200deg); opacity: 0; } }