/* Crear para Vivir · mascota v2
   Las transformaciones las mueve character.js con muelles (springs);
   aquí solo viven pivotes, capas, burbuja y partículas. */

.cpv-widget {
  --size: clamp(190px, 24vw, 300px);
  --lift: 0;
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  pointer-events: none;
  font-family: ui-rounded, "Nunito", "Segoe UI", system-ui, sans-serif;
}
.cpv-widget--floating {position: fixed}
/* Sombra de suelo: se encoge cuando el personaje salta (--lift 0..1) */
.cpv-widget::before {
  content: "";
  position: absolute;
  left: 34%; top: 80.2%; width: 32%; height: 4.6%;
  border-radius: 50%;
  background: #4646ff;
  opacity: calc(.2 - var(--lift) * .1);
  filter: blur(5px);
  transform: scale(calc(1 - var(--lift) * .3));
}

.cpv-character {
  --character-scale: 1;
  position: relative;
  width: min(520px, 88vw);
  aspect-ratio: 1 / 1;
  scale: var(--character-scale);
  transform-origin: 50% 82.8%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  pointer-events: none;
}
.cpv-widget .cpv-character { position: absolute; inset: 0; width: 100%; }
.cpv-character * { box-sizing: border-box; }

/* Zona clicable/arrastrable ajustada al dibujo (el lienzo PNG tiene mucho aire) */
.cpv-character__hit {
  position: absolute;
  inset: 16% 13% 14% 13%;
  border-radius: 40%;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.cpv-widget.is-dragging .cpv-character__hit { cursor: grabbing; }
.cpv-character:focus-visible .cpv-character__hit { outline: 3px dashed #4646ff; outline-offset: 2px; }

.cpv-character__layer,
.cpv-character__head-group,
.cpv-character__face,
.cpv-character__head,
.cpv-character__eye,
.cpv-character__brow,
.cpv-character__mouth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  will-change: transform;
}

/* Pivotes (en % del lienzo 1920×1920 original) */
.cpv-character__arm--screen-left  { z-index: 1; transform-origin: 35.5% 63.5%; }
.cpv-character__arm--screen-right { z-index: 1; transform-origin: 64.5% 63.5%; }
.cpv-character__torso             { z-index: 2; transform-origin: 50% 82.8%; }
.cpv-character__head-group        { z-index: 3; transform-origin: 50% 57%; }
.cpv-character__face              { z-index: 2; }
.cpv-character__head  { z-index: 1; }
.cpv-character__eye   { z-index: 2; }
.cpv-character__brow  { z-index: 3; }
.cpv-character__mouth { z-index: 4; transform-origin: 50% 53%; }

.cpv-character__eye[data-side="l"]  { transform-origin: 38.5% 43.5%; }
.cpv-character__eye[data-side="r"]  { transform-origin: 62% 43.5%; }
.cpv-character__brow[data-side="l"] { transform-origin: 41.7% 30.1%; }
.cpv-character__brow[data-side="r"] { transform-origin: 59.1% 30.1%; }

.cpv-character__eye,
.cpv-character__mouth { transition: opacity 45ms linear; }
.cpv-character__eye--closed,
.cpv-character__mouth--open { opacity: 0; }

.cpv-character.is-blinking .cpv-character__eye--open,
.cpv-character.is-sleeping .cpv-character__eye--open { opacity: 0; }
.cpv-character.is-blinking .cpv-character__eye--closed,
.cpv-character.is-sleeping .cpv-character__eye--closed { opacity: 1; }
.cpv-character.is-mouth-open .cpv-character__mouth--closed { opacity: 0; }
.cpv-character.is-mouth-open .cpv-character__mouth--open { opacity: 1; }

/* Partículas (corazones, !, z, ♪) */
.cpv-fx {position: absolute;top: 24%;z-index: 10;color: var(--c, #4646ff);pointer-events: none;animation: cpv-float 1.7s ease-out forwards}
@keyframes cpv-float {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--size) * -.26)) rotate(var(--r)) scale(1.15); }
}

/* Burbuja de diálogo estilo cómic */
.cpv-bubble {position: absolute;z-index: 11;font-size: .95rem;font-weight: 650;line-height: 1.38;opacity: 0;pointer-events: none;transition: opacity .2s, transform .38s cubic-bezier(.3, 1.5, .5, 1)}
.cpv-bubble.is-on {opacity: 1;pointer-events: auto}

.cpv-bubble::after {content: "";position: absolute}
.cpv-bubble__x {position: absolute;padding: 0;font-size: 1.15rem;line-height: 1;cursor: pointer}

.cpv-bubble__actions {display: flex;flex-wrap: wrap}

.cpv-bubble__actions button {font-size: .85rem;font-weight: 700;cursor: pointer;transition: transform .15s}

@media (prefers-reduced-motion: reduce) {
  .cpv-bubble, .cpv-bubble__actions button { transition-duration: .01ms; }
  .cpv-fx { display: none; }
}