/* Perú Pendiente · la mascota animada
   Viste a <pp-mascota> (mascota.js). El movimiento se elige con el atributo `movimiento`. */

pp-mascota { display: inline-block; flex: none; width: 96px; aspect-ratio: 1; vertical-align: middle; }
pp-mascota svg { display: block; width: 100%; height: 100%; overflow: visible; }

.pp-mascota-todo, .pp-mascota-cuerpo, .pp-mascota-ojo, .pp-mascota-sombra { transform-box: fill-box; }
.pp-mascota-todo, .pp-mascota-cuerpo, .pp-mascota-ojo { transform-origin: 50% 100%; }
.pp-mascota-sombra { transform-origin: 50% 50%; fill: currentColor; opacity: .14; display: none; }
pp-mascota[sombra] .pp-mascota-sombra { display: block; }

/* Parpadeo: respira y parpadea. Es el de por defecto. */
pp-mascota:not([movimiento]) .pp-mascota-cuerpo,
pp-mascota[movimiento="parpadeo"] .pp-mascota-cuerpo { animation: pp-mascota-respira 3.6s ease-in-out infinite; }
pp-mascota:not([movimiento]) .pp-mascota-ojo,
pp-mascota[movimiento="parpadeo"] .pp-mascota-ojo { animation: pp-mascota-parpadea 3.6s ease-in-out infinite; }
@keyframes pp-mascota-respira { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .98); } }
@keyframes pp-mascota-parpadea {
  0%, 44%, 52%, 60%, 100% { transform: scaleY(1); }
  48%, 56% { transform: scaleY(.1); }
}

/* Rebote: salta de alegría. */
pp-mascota[movimiento="rebote"] .pp-mascota-todo { animation: pp-mascota-salta 1.5s cubic-bezier(.3, 0, .3, 1) infinite; }
pp-mascota[movimiento="rebote"] .pp-mascota-cuerpo { animation: pp-mascota-aplasta 1.5s ease-in-out infinite; }
pp-mascota[movimiento="rebote"] .pp-mascota-sombra { animation: pp-mascota-sombra 1.5s cubic-bezier(.3, 0, .3, 1) infinite; }
@keyframes pp-mascota-salta {
  0%, 18%, 62%, 100% { transform: translateY(0); }
  40% { transform: translateY(-23%); }
}
@keyframes pp-mascota-aplasta {
  0%, 100% { transform: scale(1, 1); }
  10% { transform: scale(1.1, .86); }
  28%, 48% { transform: scale(.94, 1.07); }
  64% { transform: scale(1.12, .84); }
  78% { transform: scale(.98, 1.03); }
}
@keyframes pp-mascota-sombra {
  0%, 18%, 62%, 100% { transform: scale(1); opacity: .16; }
  40% { transform: scale(.62); opacity: .07; }
}

/* Guiño: se ladea y guiña un ojo. */
pp-mascota[movimiento="guino"] .pp-mascota-todo { animation: pp-mascota-ladea 3.2s ease-in-out infinite; }
pp-mascota[movimiento="guino"] .pp-mascota-ojo.der { animation: pp-mascota-guina 3.2s ease-in-out infinite; }
@keyframes pp-mascota-ladea {
  0%, 30%, 70%, 100% { transform: rotate(0); }
  42%, 58% { transform: rotate(-9deg); }
}
@keyframes pp-mascota-guina {
  0%, 36%, 64%, 100% { transform: scaleY(1); }
  42%, 58% { transform: scaleY(.12); }
}

/* Entrada: aparece, saluda y se va. */
pp-mascota[movimiento="entrada"] .pp-mascota-todo { animation: pp-mascota-entra 3.4s cubic-bezier(.3, 1.4, .5, 1) infinite; }
pp-mascota[movimiento="entrada"] .pp-mascota-ojo { animation: pp-mascota-parpadea-corto 3.4s ease-in-out infinite; }
@keyframes pp-mascota-entra {
  0% { transform: scale(0) rotate(-24deg); }
  16% { transform: scale(1.08) rotate(4deg); }
  24%, 80% { transform: scale(1) rotate(0); }
  92%, 100% { transform: scale(0) rotate(16deg); }
}
@keyframes pp-mascota-parpadea-corto {
  0%, 46%, 54%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.1); }
}

/* Colores: el rosa viene en el dibujo; los otros tres de la paleta de campaña lo pisan. Entre las
   tres animaciones se reparten para que ninguno mande: el amarillo, que ya es el de los botones,
   aparece una sola vez. */
pp-mascota[color="amarillo"] rect { fill: #FFE600; }
pp-mascota[color="naranja"] rect { fill: #F78D03; }
pp-mascota[color="verde"] rect { fill: #1DBA69; }
pp-mascota[color="blanco"] rect { fill: #FFFFFF; }

/* La familia: dos grandes a los lados, la verde más alta que la naranja, y una amarilla chica al centro,
   por delante. Las grandes se arriman y se inclinan una hacia la otra; la chica salta entre las
   dos, y vuelven. */
pp-familia { display: inline-block; flex: none; position: relative; width: 96px; aspect-ratio: 1.6; vertical-align: middle; }
pp-familia pp-mascota { position: absolute; bottom: 0; transform-origin: 50% 100%; }
.pp-familia-a { left: 0; width: 56%; animation: pp-familia-a 3.4s ease-in-out infinite; }
.pp-familia-b { right: 0; width: 43%; animation: pp-familia-b 3.4s ease-in-out infinite; }
.pp-familia-c { left: 40%; width: 29%; z-index: 1; animation: pp-familia-c 3.4s cubic-bezier(.3, 0, .3, 1) infinite; }
@keyframes pp-familia-a {
  0%, 22%, 74%, 100% { transform: translateX(0) rotate(0); }
  36%, 60% { transform: translateX(10%) rotate(9deg); }
}
@keyframes pp-familia-b {
  0%, 22%, 74%, 100% { transform: translateX(0) rotate(0); }
  36%, 60% { transform: translateX(-10%) rotate(-9deg); }
}
@keyframes pp-familia-c {
  0%, 30%, 70%, 100% { transform: translateY(0) scale(1, 1); }
  35% { transform: translateY(0) scale(1.12, .84); }
  48% { transform: translateY(-78%) scale(.94, 1.08); }
  62% { transform: translateY(0) scale(1.1, .88); }
}

/* La entrega: la rosa, a la izquierda, tiene una caja naranja; se inclina y la lanza en arco;
   la verde, a la derecha, la recibe, se aplasta con el peso y salta de alegría. La caja se
   desvanece y vuelve a aparecer en manos de la rosa. */
pp-entrega { display: inline-block; flex: none; position: relative; width: 96px; aspect-ratio: 1.9; vertical-align: middle; }
pp-entrega pp-mascota { position: absolute; bottom: 0; width: 42%; transform-origin: 50% 100%; }
.pp-entrega-da { left: 0; animation: pp-entrega-da 3.6s ease-in-out infinite; }
.pp-entrega-recibe { right: 0; animation: pp-entrega-recibe 3.6s cubic-bezier(.3, 0, .3, 1) infinite; }
.pp-entrega-caja {
  position: absolute; left: 20%; bottom: 0; z-index: 1; width: 24%; aspect-ratio: 1;
  transform-origin: 50% 100%; animation: pp-entrega-caja 3.6s ease-in-out infinite;
}
@keyframes pp-entrega-da {
  0%, 8%, 40%, 100% { transform: rotate(0); }
  18% { transform: rotate(-7deg); }
  28% { transform: rotate(10deg); }
}
/* La caja viaja el 150% de su ancho: de las manos de una a las de la otra */
@keyframes pp-entrega-caja {
  0%, 14% { transform: translate(0, 0) rotate(0); opacity: 1; }
  20% { transform: translate(-10%, -6%) rotate(-6deg); opacity: 1; }
  34% { transform: translate(72%, -105%) rotate(14deg); opacity: 1; }
  46% { transform: translate(150%, 0) rotate(0) scale(1.08, .88); opacity: 1; }
  52%, 84% { transform: translate(150%, 0) rotate(0); opacity: 1; }
  91% { transform: translate(150%, 0); opacity: 0; }
  92% { transform: translate(0, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes pp-entrega-recibe {
  0%, 42%, 86%, 100% { transform: translateY(0) scale(1, 1); }
  48% { transform: translateY(0) scale(1.1, .86); }
  58% { transform: translateY(-26%) scale(.95, 1.06); }
  66% { transform: translateY(0) scale(1.08, .9); }
  74% { transform: translateY(-12%) scale(.98, 1.03); }
  80% { transform: translateY(0) scale(1.03, .97); }
}

/* Quien pidió menos movimiento la ve quieta. */
@media (prefers-reduced-motion: reduce) {
  pp-mascota * { animation: none !important; }
  pp-familia pp-mascota { animation: none !important; }
  pp-entrega pp-mascota, .pp-entrega-caja { animation: none !important; }
}