/* The pet companion.
   All motion is CSS keyframes on one sprite element — no per-frame JS, so it
   stays smooth on an old tablet while an activity is doing real work. */

.pet-layer { z-index: 40; }

.pet {
  position: absolute;
  display: grid;
  place-items: center;
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1;
  transition: left var(--dur-slow) var(--ease-out),
              bottom var(--dur-slow) var(--ease-out),
              top var(--dur-slow) var(--ease-out),
              transform var(--dur) var(--ease-out),
              opacity var(--dur);
}

.pet--hidden { opacity: 0; pointer-events: none; }

/* Placement.
   `corner` floats the pet over the interface, out of the way — used on home
   and wherever there is no scene to stand in.
   `scene` is the one that matters during a session: the pet is moved into the
   illustrated scene and stands in it. That rule lives in kid.css next to the
   rest of the visit layout, since it is the scene that decides where the
   ground is. */
.pet[data-place="corner"] {
  left: max(var(--s-4), env(safe-area-inset-left));
  bottom: max(var(--s-4), env(safe-area-inset-bottom));
}

.pet__body {
  display: block;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 6px 10px rgba(29, 39, 51, 0.22));
}

.pet__mood {
  position: absolute;
  top: -0.35em;
  right: -0.45em;
  font-size: 0.42em;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-bounce);
}
.pet[data-state]:not([data-state="idle"]) .pet__mood { opacity: 1; transform: scale(1); }

/* Accessories sit around the sprite, so several can be worn at once. */
.pet__accessories { position: absolute; inset: 0; pointer-events: none; }
.pet__acc { position: absolute; font-size: 0.42em; }
.pet__acc--head  { top: -0.28em; left: 50%; transform: translateX(-50%) rotate(-8deg); }
.pet__acc--face  { top: 0.22em;  left: 50%; transform: translateX(-50%); }
.pet__acc--neck  { bottom: 0.06em; left: 50%; transform: translateX(-50%); }
.pet__acc--hand  { bottom: 0.2em; right: -0.18em; }
.pet__acc--aura  { top: -0.15em; left: -0.2em; }

/* Speech bubble used when the pet introduces a new word. */
.pet__bubble {
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.9);
  min-width: max-content;
  max-width: min(60vw, 18rem);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-2);
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur), transform var(--dur) var(--ease-bounce);
}
.pet__bubble.is-visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* In the corner the pet sits against the screen edge, so a bubble centred on
   it hangs off the side and gets clipped. Anchor it to the pet's inner edge
   instead. */
.pet[data-place="corner"] .pet__bubble {
  left: 0;
  transform: translateX(0) translateY(6px) scale(0.9);
  transform-origin: bottom left;
}
.pet[data-place="corner"] .pet__bubble.is-visible {
  transform: translateX(0) translateY(0) scale(1);
}

/* --- States ------------------------------------------------------------ */

.pet[data-state="idle"] .pet__body      { animation: pet-breathe 3.2s var(--ease-out) infinite; }
.pet[data-state="ask"] .pet__body       { animation: pet-ask 1.1s var(--ease-out) infinite; }
.pet[data-state="cheer"] .pet__body     { animation: pet-cheer 0.6s var(--ease-bounce) 2; }
.pet[data-state="encourage"] .pet__body { animation: pet-tilt 1.1s var(--ease-out) 2; }
.pet[data-state="dance"] .pet__body     { animation: pet-dance 0.75s var(--ease-out) infinite; }
.pet[data-state="celebrate"] .pet__body { animation: pet-party 0.7s var(--ease-bounce) infinite; }
.pet[data-state="sleep"] .pet__body     { animation: pet-sleep 4s ease-in-out infinite; }

.pet[data-state="point"] .pet__body     { animation: pet-point 1s var(--ease-out) infinite; }
.pet[data-dir="left"]  .pet__body { --point-x: -14px; }
.pet[data-dir="right"] .pet__body { --point-x: 14px; }

.pet[data-state="sleep"] .pet__mood { animation: pet-zzz 2.6s ease-in-out infinite; }

@keyframes pet-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.035) translateY(-3px); }
}
@keyframes pet-ask {
  0%, 100% { transform: rotate(-3deg) translateY(0) scale(1.04); }
  50%      { transform: rotate(3deg) translateY(-5px) scale(1.08); }
}
@keyframes pet-cheer {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-26px) scale(1.16) rotate(-10deg); }
  70%  { transform: translateY(-6px) scale(1.04) rotate(8deg); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes pet-tilt {
  0%, 100% { transform: rotate(0) scale(1); }
  30%      { transform: rotate(-13deg) scale(0.97); }
  60%      { transform: rotate(6deg) scale(0.99); }
}
@keyframes pet-dance {
  0%   { transform: translateY(0) rotate(-9deg); }
  25%  { transform: translateY(-14px) rotate(0deg) scale(1.06); }
  50%  { transform: translateY(0) rotate(9deg); }
  75%  { transform: translateY(-14px) rotate(0deg) scale(1.06); }
  100% { transform: translateY(0) rotate(-9deg); }
}
@keyframes pet-party {
  0%   { transform: translateY(0) rotate(0) scale(1); }
  25%  { transform: translateY(-20px) rotate(-14deg) scale(1.12); }
  50%  { transform: translateY(0) rotate(0) scale(1); }
  75%  { transform: translateY(-20px) rotate(14deg) scale(1.12); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}
@keyframes pet-sleep {
  0%, 100% { transform: scale(1) translateY(0) rotate(-4deg); }
  50%      { transform: scale(0.96) translateY(4px) rotate(-4deg); }
}
@keyframes pet-point {
  0%, 100% { transform: translateX(0) rotate(0); }
  50%      { transform: translateX(var(--point-x, 0)) rotate(calc(var(--point-x, 0) * 0.6deg)); }
}
@keyframes pet-zzz {
  0%, 100% { opacity: 0.35; transform: scale(0.85) translateY(0); }
  50%      { opacity: 1;    transform: scale(1.05) translateY(-8px); }
}

/* --- Reduced motion -----------------------------------------------------
   base.css flattens decorative animation globally. The pet needs more care:
   its reactions carry the app's entire feedback channel, so instead of
   removing them we swap movement for a static scale/tint change plus the
   mood bubble, which stays visible and readable. */
@media (prefers-reduced-motion: reduce) {
  .pet .pet__body { animation: none !important; }
  .pet[data-state="cheer"] .pet__body     { transform: scale(1.18); }
  .pet[data-state="encourage"] .pet__body { transform: rotate(-10deg); }
  .pet[data-state="ask"] .pet__body       { transform: scale(1.08); }
  .pet[data-state="celebrate"] .pet__body { transform: scale(1.25); }
  .pet[data-state="sleep"] .pet__body     { opacity: 0.7; }
  .pet__mood { transition: none; }
}

/* Standalone preview sprite. Used by the onboarding picker, the trophy
   screen, and by home and the celebration — those two place the pet inside
   the layout rather than through the floating layer, so it can never end up
   sitting on top of a button. */
.pet-preview {
  position: relative;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}
.pet-preview__body {
  display: block;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 5px 8px rgba(29, 39, 51, 0.2));
}

.pet-preview--idle .pet-preview__body     { animation: pet-breathe 3.2s var(--ease-out) infinite; }
.pet-preview--sleeping .pet-preview__body { animation: pet-sleep 4s ease-in-out infinite; }
.pet-preview--partying .pet-preview__body { animation: pet-party 0.7s var(--ease-bounce) infinite; }

@media (prefers-reduced-motion: reduce) {
  .pet-preview .pet-preview__body { animation: none !important; }
  .pet-preview--sleeping .pet-preview__body { opacity: 0.7; }
  .pet-preview--partying .pet-preview__body { transform: scale(1.2); }
}

/* Drawn pet artwork. A background image so every keyframe animation above
   keeps transforming the same element, whether it is showing an emoji or a
   picture.

   Sized at 1.35em rather than 1em, pulled back by a negative margin so the
   visual centre does not move. Drawn characters carry 13-28% transparent
   padding of their own, so at 1em they render noticeably smaller than the
   emoji they replace. Scaling the *element* rather than the background keeps
   `contain` honest — the tightest artwork has only 1% headroom at the top, so
   cropping to fill would shave the top off a head. */
.pet__body.pet--art,
.pet-preview__body.pet--art {
  width: 1.35em;
  height: 1.35em;
  margin: -0.175em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}