/* ════════════════════════════════════════════════════════════════════
pio.css — la mascota de Piofly, animada por estados
────────────────────────────────────────────────────────────────────
Uso: . El clon vive en un shadow DOM y el CSS
de fuera NO cruza esa frontera: ningún selector .pio-pico, .pio-ala…
alcanza nada y TODOS los estados se ven idénticos.
══ POR QUÉ HAY TRES FASES ══════════════════════════════════════════
Cambiar `data-pio` a secas cambia QUÉ animación corre, y una animación
CSS siempre arranca en su 0%. Si el cuerpo venía a media respiración y
el nuevo ciclo empieza con el ala en otro ángulo, el navegador salta a
esa postura en un solo cuadro. Eso es lo que se ve como cambio de
lámina de sprite: la postura cambia, pero nadie se movió para llegar.
La solución no es una animación más larga: es que TODO pase por una
pose común.
saliendo → lo que esté corriendo se apaga y todas las partes viajan
a la POSE NEUTRAL con una transición (~180 ms). Da igual
en qué cuadro del ciclo anterior estuviera.
entrando → una animación de UNA sola pasada que sale de la pose
neutral, hace la anticipación (agacharse antes de
saltar, echar el ala atrás antes de aletear) y aterriza
justo en el 0% del ciclo.
ciclo → ahí sí, el bucle de siempre.
`data-pio-fase` la maneja pio.js. Este archivo solo describe cada fase.
════════════════════════════════════════════════════════════════════ */
.pio{ display:inline-grid; place-items:center; line-height:0 }
.pio svg{ width:100%; height:100%; overflow:visible }
/* OJO: `.pio svg *` y no `.pio *` — el segundo alcanzaría también al
propio , y ponerle transform-box rompe el translateY en % */
.pio svg *{ transform-box:view-box }
/* ══ POSE NEUTRAL ═════════════════════════════════════════════════════
El punto de encuentro. Todo estado sale de aquí y regresa aquí; por
eso cualquier cambio entre cualesquiera dos estados se ve continuo sin
tener que escribir una transición por cada par. */
.pio-cuerpo { transform-origin:60px 99px }
.pio-ala--izq{ transform-origin:34px 52px; transform:rotate(32deg) scale(.8) }
.pio-ala--der{ transform-origin:86px 52px; transform:rotate(-32deg) scale(.8) }
.pio-ojos { transform-origin:60px 62px }
.pio-pico { transform-origin:60px 68px }
/* ══ CICLO BASE (idle) ════════════════════════════════════════════════ */
/* Ritmo recalibrado (Edgar 2026-08-13: «van muy rápidas, todo va muy
rápido, hasta el parpadeo»): aleteos de .14-.26s eran colibrí; ahora
.24-.38s (3-4 por segundo, pájaro de caricatura). Los ángulos máximos
de ala bajaron de 68-84° a 54-68°: se abrían tanto que salían del
cuadro. El techo del viewBox vive en pio.js. */
.pio-cuerpo{ animation:pio-respirar 3s ease-in-out infinite }
@keyframes pio-respirar{ 0%,100%{transform:scale(1,1)} 50%{transform:scale(1.05,.95)} }
.pio svg{ animation:pio-flotar 5s ease-in-out infinite }
@keyframes pio-flotar{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5%)} }
.pio-ojos{ animation:pio-parpadear 5.2s infinite }
@keyframes pio-parpadear{ 0%,93%,100%{transform:scaleY(1)} 96.5%{transform:scaleY(.06)} }
/* Las caras alternativas se cruzan en opacidad, nunca se intercambian de
golpe: un swap instantáneo de ojos es, literalmente, cambiar de sprite. */
.pio-ojos-feliz,.pio-ojos-cerrado,.pio-cejas,.pio-zzz,.pio-chispas,.pio-nota{ opacity:0 }
.pio-ojos,.pio-ojos-feliz,.pio-ojos-cerrado,.pio-cejas,
.pio-zzz,.pio-chispas,.pio-nota{ transition:opacity .18s ease }
/* ══ ESTADOS — el bucle de cada uno ═══════════════════════════════════ */
/* ── HABLANDO ── */
.pio[data-pio="hablando"] .pio-pico{ animation:pio-hablar 1.15s ease-in-out infinite }
@keyframes pio-hablar{
0%{transform:scaleY(1)} 7%{transform:scaleY(2.8)} 15%{transform:scaleY(1.15)}
24%{transform:scaleY(2.2)} 32%{transform:scaleY(1)} 42%{transform:scaleY(3)}
52%{transform:scaleY(1.3)} 60%{transform:scaleY(2.1)} 70%{transform:scaleY(1)}
80%{transform:scaleY(2.5)} 90%,100%{transform:scaleY(1)} }
.pio[data-pio="hablando"] .pio-cuerpo{ transform-origin:60px 95px;
animation:pio-hablar-cuerpo 1.15s ease-in-out infinite }
@keyframes pio-hablar-cuerpo{
0%,100%{transform:rotate(0) translateY(0)}
25%{transform:rotate(-3deg) translateY(-2px)}
60%{transform:rotate(3deg) translateY(0)} }
.pio[data-pio="hablando"] .pio-ala--izq{ animation:pio-gesto-i 1.9s ease-in-out infinite }
.pio[data-pio="hablando"] .pio-ala--der{ animation:pio-gesto-d 1.9s ease-in-out infinite }
@keyframes pio-gesto-i{ 0%,100%{transform:rotate(32deg) scale(.8)} 50%{transform:rotate(20deg) scale(.82)} }
@keyframes pio-gesto-d{ 0%,100%{transform:rotate(-32deg) scale(.8)} 50%{transform:rotate(-20deg) scale(.82)} }
/* ── FELIZ ── */
.pio[data-pio="feliz"] .pio-ojos{ opacity:0; animation:none }
.pio[data-pio="feliz"] .pio-ojos-feliz{ opacity:1 }
.pio[data-pio="feliz"] .pio-cuerpo{
animation:pio-brincar 1.05s cubic-bezier(.3,1.4,.5,1) infinite }
@keyframes pio-brincar{
0%,100%{transform:translateY(0) scale(1,1)}
18%{transform:translateY(0) scale(1.14,.86)}
50%{transform:translateY(-14px) scale(.92,1.1)}
76%{transform:translateY(0) scale(1.1,.9)} }
.pio[data-pio="feliz"] .pio-ala--izq{ animation:pio-aletear-i .38s ease-in-out infinite }
.pio[data-pio="feliz"] .pio-ala--der{ animation:pio-aletear-d .38s ease-in-out infinite }
@keyframes pio-aletear-i{ 0%,100%{transform:rotate(18deg) scale(.8)} 50%{transform:rotate(54deg) scale(.8)} }
@keyframes pio-aletear-d{ 0%,100%{transform:rotate(-18deg) scale(.8)} 50%{transform:rotate(-54deg) scale(.8)} }
/* ── TRISTE ── */
.pio[data-pio="triste"] .pio-cejas{ opacity:1 }
.pio[data-pio="triste"] .pio-pupilas{ transform:translateY(3.5px) }
.pio[data-pio="triste"] .pio-ala--izq{ transform:rotate(-34deg) scale(.76) }
.pio[data-pio="triste"] .pio-ala--der{ transform:rotate(34deg) scale(.76) }
.pio[data-pio="triste"] .pio-cuerpo{ animation:pio-suspirar 3.4s ease-in-out infinite }
@keyframes pio-suspirar{
0%,100%{transform:translateY(3px) scale(1.02,.96)} 45%{transform:translateY(0) scale(1,1)} }
.pio[data-pio="triste"] svg{ animation:none; transform:translateY(3%) }
/* ── PENSANDO ── */
.pio[data-pio="pensando"] .pio-pupilas{ animation:pio-buscar 2.6s ease-in-out infinite }
@keyframes pio-buscar{
0%,100%{transform:translate(3px,-4px)} 50%{transform:translate(-3px,-4px)} }
.pio[data-pio="pensando"] .pio-cuerpo{ transform-origin:60px 92px;
animation:pio-ladear 2.6s ease-in-out infinite }
@keyframes pio-ladear{ 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(-2deg)} }
.pio[data-pio="pensando"] .pio-nota{ opacity:1; animation:pio-nota 2.6s ease-in-out infinite }
@keyframes pio-nota{
0%,100%{opacity:0;transform:translateY(5px) scale(.6)}
40%,72%{opacity:1;transform:translateY(0) scale(1)} }
/* ── LECCIÓN ── */
.pio[data-pio="leccion"] .pio-ala--der{ animation:pio-senalar 2s ease-in-out infinite }
@keyframes pio-senalar{
0%,100%{transform:rotate(-32deg) scale(.8)} 30%,70%{transform:rotate(2deg) scale(1)} }
.pio[data-pio="leccion"] .pio-cuerpo{ transform-origin:60px 95px;
animation:pio-inclinar 2s ease-in-out infinite }
@keyframes pio-inclinar{ 0%,100%{transform:rotate(0)} 30%,70%{transform:rotate(9deg)} }
.pio[data-pio="leccion"] .pio-pupilas{ transform:translateX(3px) }
/* ── CELEBRAR ── */
.pio[data-pio="celebrar"] .pio-ojos{ opacity:0; animation:none }
.pio[data-pio="celebrar"] .pio-ojos-feliz{ opacity:1 }
.pio[data-pio="celebrar"] .pio-ala--izq{ animation:pio-celebrar-i .36s ease-in-out infinite }
.pio[data-pio="celebrar"] .pio-ala--der{ animation:pio-celebrar-d .36s ease-in-out infinite }
@keyframes pio-celebrar-i{ 0%,100%{transform:rotate(48deg) scale(.85)} 50%{transform:rotate(68deg) scale(.85)} }
@keyframes pio-celebrar-d{ 0%,100%{transform:rotate(-48deg) scale(.85)} 50%{transform:rotate(-68deg) scale(.85)} }
.pio[data-pio="celebrar"] .pio-cuerpo{
animation:pio-brincar-alto .85s cubic-bezier(.3,1.5,.5,1) infinite }
@keyframes pio-brincar-alto{
0%,100%{transform:translateY(0) scale(1,1)}
16%{transform:translateY(0) scale(1.16,.84)}
50%{transform:translateY(-22px) scale(.9,1.12)}
78%{transform:translateY(0) scale(1.12,.88)} }
.pio[data-pio="celebrar"] .pio-chispas{ opacity:1 }
.pio[data-pio="celebrar"] .chispa{ animation:pio-chispa 1.2s ease-out infinite }
.pio[data-pio="celebrar"] .chispa:nth-child(2){ animation-delay:.3s }
.pio[data-pio="celebrar"] .chispa:nth-child(3){ animation-delay:.6s }
.pio[data-pio="celebrar"] .chispa:nth-child(4){ animation-delay:.9s }
@keyframes pio-chispa{
0%{opacity:0;transform:translateY(8px) scale(.3) rotate(0)}
35%{opacity:1;transform:translateY(-5px) scale(1.3) rotate(90deg)}
100%{opacity:0;transform:translateY(-24px) scale(.4) rotate(220deg)} }
/* ── SORPRESA ──
El respingo entero vive en la ENTRADA; el ciclo solo sostiene la cara
con un temblorcito, porque un susto que se repite en bucle deja de ser
un susto. */
.pio[data-pio="sorpresa"] .pio-ojos{ transform:scale(1.22); animation:none }
.pio[data-pio="sorpresa"] .pio-pico{ transform:scaleY(2.6) }
.pio[data-pio="sorpresa"] .pio-ala--izq{ transform:rotate(60deg) scale(.95) }
.pio[data-pio="sorpresa"] .pio-ala--der{ transform:rotate(-60deg) scale(.95) }
.pio[data-pio="sorpresa"] .pio-cuerpo{ animation:pio-temblar .22s ease-in-out infinite }
@keyframes pio-temblar{
0%,100%{transform:translate(0,-4px)} 50%{transform:translate(.7px,-4.6px)} }
/* ── DORMIR ── */
.pio[data-pio="dormir"] .pio-ojos{ opacity:0; animation:none;
/* el párpado tarda en cerrarse: la línea de ojo cerrado no aparece
hasta que la entrada terminó de bajarlo */
transition:opacity .08s ease .3s }
.pio[data-pio="dormir"] .pio-ojos-cerrado{ opacity:1; transition:opacity .08s ease .3s }
.pio[data-pio="dormir"] .pio-cuerpo{ animation:pio-respirar-lento 5s ease-in-out infinite }
@keyframes pio-respirar-lento{
0%,100%{transform:translateY(3px) scale(1,1)} 50%{transform:translateY(3px) scale(1.07,.93)} }
.pio[data-pio="dormir"] .pio-ala--izq{ transform:rotate(-16deg) scale(.76) }
.pio[data-pio="dormir"] .pio-ala--der{ transform:rotate(16deg) scale(.76) }
.pio[data-pio="dormir"] svg{ animation:none }
.pio[data-pio="dormir"] .pio-zzz{ opacity:1; transition-delay:.5s }
.pio[data-pio="dormir"] .zzz{ animation:pio-zzz 2.4s ease-out infinite }
.pio[data-pio="dormir"] .zzz:nth-child(2){ animation-delay:.8s }
.pio[data-pio="dormir"] .zzz:nth-child(3){ animation-delay:1.6s }
@keyframes pio-zzz{
0%{opacity:0;transform:translate(0,4px) scale(.5)}
30%{opacity:1}
100%{opacity:0;transform:translate(10px,-18px) scale(1.2)} }
/* ── VOLANDO ── */
.pio[data-pio="volando"] .pio-ala--izq{ animation:pio-volar-i .24s ease-in-out infinite }
.pio[data-pio="volando"] .pio-ala--der{ animation:pio-volar-d .24s ease-in-out infinite }
@keyframes pio-volar-i{ 0%,100%{transform:rotate(6deg) scale(.8)} 50%{transform:rotate(60deg) scale(.8)} }
@keyframes pio-volar-d{ 0%,100%{transform:rotate(-6deg) scale(.8)} 50%{transform:rotate(-60deg) scale(.8)} }
.pio[data-pio="volando"] svg{ animation:pio-volar-cuerpo .6s ease-in-out infinite }
@keyframes pio-volar-cuerpo{
0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-9%) rotate(5deg)} }
/* ════════════════════════════════════════════════════════════════════
FASE «entrando» — la anticipación
────────────────────────────────────────────────────────────────────
Va DESPUÉS de los estados a propósito: `[data-pio="feliz"][data-pio-fase="entrando"]`
pesa más que `[data-pio="feliz"]`, así que el arranque manda sobre el
bucle mientras dura.
Regla de oro de cada entrada: el 0% ES la pose neutral y el 100% ES el
0% del ciclo. Si no, vuelve el salto — solo que ahora escondido.
════════════════════════════════════════════════════════════════════ */
.pio[data-pio-fase="entrando"] .pio-cuerpo,
.pio[data-pio-fase="entrando"] .pio-ala--izq,
.pio[data-pio-fase="entrando"] .pio-ala--der,
.pio[data-pio-fase="entrando"] .pio-pico,
.pio[data-pio-fase="entrando"] .pio-pupilas{ animation:none }
/* idle — se acomoda, con un rebotito */
.pio[data-pio="idle"][data-pio-fase="entrando"] .pio-cuerpo{
animation:pio-ent-idle .3s cubic-bezier(.3,1.4,.5,1) both }
@keyframes pio-ent-idle{
0%{transform:scale(1,1) translateY(0)}
45%{transform:scale(1.06,.94) translateY(2px)}
100%{transform:scale(1,1) translateY(0)} }
/* hablando — toma aire: el pico se cierra un instante antes de soltar */
.pio[data-pio="hablando"][data-pio-fase="entrando"] .pio-pico{
animation:pio-ent-hablando .24s ease-out both }
@keyframes pio-ent-hablando{
0%{transform:scaleY(1)} 45%{transform:scaleY(.55)} 100%{transform:scaleY(1)} }
.pio[data-pio="hablando"][data-pio-fase="entrando"] .pio-cuerpo{
transform-origin:60px 95px; animation:pio-ent-hablando-cuerpo .24s ease-out both }
@keyframes pio-ent-hablando-cuerpo{
0%{transform:rotate(0)} 55%{transform:rotate(-4deg) translateY(-2px)} 100%{transform:rotate(0)} }
/* feliz — se AGACHA antes de saltar y echa las alas atrás antes de batir */
.pio[data-pio="feliz"][data-pio-fase="entrando"] .pio-cuerpo{
animation:pio-ent-feliz .36s cubic-bezier(.3,1.3,.5,1) both }
@keyframes pio-ent-feliz{
0%{transform:translateY(0) scale(1,1)}
30%{transform:translateY(5px) scale(1.16,.84)}
64%{transform:translateY(-18px) scale(.88,1.14)}
100%{transform:translateY(0) scale(1,1)} }
.pio[data-pio="feliz"][data-pio-fase="entrando"] .pio-ala--izq{
animation:pio-ent-feliz-i .36s cubic-bezier(.3,1.3,.5,1) both }
.pio[data-pio="feliz"][data-pio-fase="entrando"] .pio-ala--der{
animation:pio-ent-feliz-d .36s cubic-bezier(.3,1.3,.5,1) both }
@keyframes pio-ent-feliz-i{
0%{transform:rotate(32deg) scale(.8)} 30%{transform:rotate(46deg) scale(.78)}
100%{transform:rotate(18deg) scale(.8)} }
@keyframes pio-ent-feliz-d{
0%{transform:rotate(-32deg) scale(.8)} 30%{transform:rotate(-46deg) scale(.78)}
100%{transform:rotate(-18deg) scale(.8)} }
/* triste — lento y sin rebote. La tristeza no tiene resorte. */
.pio[data-pio="triste"][data-pio-fase="entrando"] .pio-cuerpo{
animation:pio-ent-triste .52s ease-in-out both }
@keyframes pio-ent-triste{
0%{transform:translateY(0) scale(1,1)}
22%{transform:translateY(-3px) scale(.98,1.04)}
100%{transform:translateY(3px) scale(1.02,.96)} }
.pio[data-pio="triste"][data-pio-fase="entrando"] .pio-ala--izq{
animation:pio-ent-triste-i .52s ease-in-out both }
.pio[data-pio="triste"][data-pio-fase="entrando"] .pio-ala--der{
animation:pio-ent-triste-d .52s ease-in-out both }
@keyframes pio-ent-triste-i{
0%{transform:rotate(32deg) scale(.8)} 20%{transform:rotate(40deg) scale(.8)}
100%{transform:rotate(-34deg) scale(.76)} }
@keyframes pio-ent-triste-d{
0%{transform:rotate(-32deg) scale(.8)} 20%{transform:rotate(-40deg) scale(.8)}
100%{transform:rotate(34deg) scale(.76)} }
.pio[data-pio="triste"][data-pio-fase="entrando"] .pio-pupilas{
animation:pio-ent-triste-ojos .52s ease-in-out both }
@keyframes pio-ent-triste-ojos{
0%{transform:translateY(0)} 100%{transform:translateY(3.5px)} }
/* pensando — la cabeza titubea hacia el otro lado antes de ladearse */
.pio[data-pio="pensando"][data-pio-fase="entrando"] .pio-cuerpo{
transform-origin:60px 92px; animation:pio-ent-pensando .32s ease-out both }
@keyframes pio-ent-pensando{
0%{transform:rotate(0)} 38%{transform:rotate(4deg)} 100%{transform:rotate(-8deg)} }
/* lección — el ala se echa atrás antes de señalar */
.pio[data-pio="leccion"][data-pio-fase="entrando"] .pio-ala--der{
animation:pio-ent-leccion .34s ease-out both }
@keyframes pio-ent-leccion{
0%{transform:rotate(-32deg) scale(.8)} 45%{transform:rotate(-52deg) scale(.78)}
100%{transform:rotate(-32deg) scale(.8)} }
.pio[data-pio="leccion"][data-pio-fase="entrando"] .pio-cuerpo{
transform-origin:60px 95px; animation:pio-ent-leccion-cuerpo .34s ease-out both }
@keyframes pio-ent-leccion-cuerpo{
0%{transform:rotate(0)} 45%{transform:rotate(-5deg)} 100%{transform:rotate(0)} }
/* celebrar — el agache es más hondo que en feliz, y el despegue más alto */
.pio[data-pio="celebrar"][data-pio-fase="entrando"] .pio-cuerpo{
animation:pio-ent-celebrar .34s cubic-bezier(.3,1.5,.5,1) both }
@keyframes pio-ent-celebrar{
0%{transform:translateY(0) scale(1,1)}
32%{transform:translateY(7px) scale(1.2,.8)}
66%{transform:translateY(-26px) scale(.86,1.16)}
100%{transform:translateY(0) scale(1,1)} }
.pio[data-pio="celebrar"][data-pio-fase="entrando"] .pio-ala--izq{
animation:pio-ent-celebrar-i .34s cubic-bezier(.3,1.5,.5,1) both }
.pio[data-pio="celebrar"][data-pio-fase="entrando"] .pio-ala--der{
animation:pio-ent-celebrar-d .34s cubic-bezier(.3,1.5,.5,1) both }
@keyframes pio-ent-celebrar-i{
0%{transform:rotate(32deg) scale(.8)} 32%{transform:rotate(14deg) scale(.78)}
100%{transform:rotate(48deg) scale(.85)} }
@keyframes pio-ent-celebrar-d{
0%{transform:rotate(-32deg) scale(.8)} 32%{transform:rotate(-14deg) scale(.78)}
100%{transform:rotate(-48deg) scale(.85)} }
/* sorpresa — el respingo completo, de una pasada */
/* El rebote bajó de 1.7 a 1.25 (2026-08-13): con 1.7 las alas se
pasaban del ángulo final un instante — 'se abren mucho' aunque el
ángulo ya fuera 60°. El respingo sigue; el latigazo no. */
.pio[data-pio="sorpresa"][data-pio-fase="entrando"] .pio-ojos{
animation:pio-ent-sorpresa-ojos .46s cubic-bezier(.3,1.25,.5,1) both }
@keyframes pio-ent-sorpresa-ojos{
0%{transform:scale(1)} 18%{transform:scale(.86)} 55%{transform:scale(1.38)}
100%{transform:scale(1.22)} }
.pio[data-pio="sorpresa"][data-pio-fase="entrando"] .pio-pico{
animation:pio-ent-sorpresa-pico .46s ease-out both }
@keyframes pio-ent-sorpresa-pico{
0%{transform:scaleY(1)} 18%{transform:scaleY(.7)} 100%{transform:scaleY(2.6)} }
.pio[data-pio="sorpresa"][data-pio-fase="entrando"] .pio-ala--izq{
animation:pio-ent-sorpresa-i .46s cubic-bezier(.3,1.25,.5,1) both }
.pio[data-pio="sorpresa"][data-pio-fase="entrando"] .pio-ala--der{
animation:pio-ent-sorpresa-d .46s cubic-bezier(.3,1.25,.5,1) both }
@keyframes pio-ent-sorpresa-i{
0%{transform:rotate(32deg) scale(.8)} 18%{transform:rotate(26deg) scale(.78)}
100%{transform:rotate(60deg) scale(.95)} }
@keyframes pio-ent-sorpresa-d{
0%{transform:rotate(-32deg) scale(.8)} 18%{transform:rotate(-26deg) scale(.78)}
100%{transform:rotate(-60deg) scale(.95)} }
.pio[data-pio="sorpresa"][data-pio-fase="entrando"] .pio-cuerpo{
animation:pio-ent-sorpresa .46s cubic-bezier(.3,1.25,.5,1) both }
@keyframes pio-ent-sorpresa{
0%{transform:translateY(0)} 18%{transform:translateY(2px) scale(1.08,.92)}
55%{transform:translateY(-12px) scale(.94,1.06)} 100%{transform:translateY(-4px)} }
/* dormir — bosteza, se estira y se deja caer. Lo más lento de todo. */
.pio[data-pio="dormir"][data-pio-fase="entrando"] .pio-cuerpo{
animation:pio-ent-dormir .7s ease-in-out both }
@keyframes pio-ent-dormir{
0%{transform:translateY(0) scale(1,1)}
30%{transform:translateY(-5px) scale(.96,1.06)}
100%{transform:translateY(3px) scale(1,1)} }
.pio[data-pio="dormir"][data-pio-fase="entrando"] .pio-ala--izq{
animation:pio-ent-dormir-i .7s ease-in-out both }
.pio[data-pio="dormir"][data-pio-fase="entrando"] .pio-ala--der{
animation:pio-ent-dormir-d .7s ease-in-out both }
@keyframes pio-ent-dormir-i{
0%{transform:rotate(32deg) scale(.8)} 30%{transform:rotate(52deg) scale(.84)}
100%{transform:rotate(-16deg) scale(.76)} }
@keyframes pio-ent-dormir-d{
0%{transform:rotate(-32deg) scale(.8)} 30%{transform:rotate(-52deg) scale(.84)}
100%{transform:rotate(16deg) scale(.76)} }
/* el párpado baja mientras el cuerpo se acomoda */
.pio[data-pio="dormir"][data-pio-fase="entrando"] .pio-ojos{
opacity:1; animation:pio-ent-cerrar .36s ease-in both }
@keyframes pio-ent-cerrar{ 0%{transform:scaleY(1)} 100%{transform:scaleY(.06)} }
/* volando — las alas suben antes del primer batir */
.pio[data-pio="volando"][data-pio-fase="entrando"] .pio-ala--izq{
animation:pio-ent-volar-i .3s ease-out both }
.pio[data-pio="volando"][data-pio-fase="entrando"] .pio-ala--der{
animation:pio-ent-volar-d .3s ease-out both }
@keyframes pio-ent-volar-i{
0%{transform:rotate(32deg) scale(.8)} 40%{transform:rotate(60deg) scale(.8)}
100%{transform:rotate(6deg) scale(.8)} }
@keyframes pio-ent-volar-d{
0%{transform:rotate(-32deg) scale(.8)} 40%{transform:rotate(-60deg) scale(.8)}
100%{transform:rotate(-6deg) scale(.8)} }
.pio[data-pio="volando"][data-pio-fase="entrando"] .pio-cuerpo{
animation:pio-ent-volar .3s ease-out both }
@keyframes pio-ent-volar{
0%{transform:translateY(0)} 40%{transform:translateY(4px) scale(1.06,.94)}
100%{transform:translateY(0)} }
/* ════════════════════════════════════════════════════════════════════
FASE «saliendo» — el regreso a la pose neutral
────────────────────────────────────────────────────────────────────
Apaga TODO lo que corra y lleva cada parte a la pose neutral con una
transición. Va con !important porque tiene que ganarle a cualquier
estado y a cualquier entrada, sin importar en qué cuadro se le
interrumpió.
Funciona sin congelar nada en JS porque, al quitar una animación y
cambiar el valor base en el mismo cuadro, el navegador arranca la
transición desde el valor ANIMADO, no desde el base. Es el
«before-change style» de la spec de transiciones.
`--pio-salida` la pone pio.js: despertarse tarda más que dejar de
hablar.
════════════════════════════════════════════════════════════════════ */
.pio[data-pio-fase="saliendo"] svg,
.pio[data-pio-fase="saliendo"] svg *{
animation:none !important;
transition:transform var(--pio-salida,180ms) cubic-bezier(.35,0,.25,1),
opacity var(--pio-salida,180ms) ease !important }
.pio[data-pio-fase="saliendo"] svg,
.pio[data-pio-fase="saliendo"] .pio-cuerpo,
.pio[data-pio-fase="saliendo"] .pio-pico,
.pio[data-pio-fase="saliendo"] .pio-pupilas{ transform:none !important }
.pio[data-pio-fase="saliendo"] .pio-ojos{ transform:scaleY(1) !important }
.pio[data-pio-fase="saliendo"] .pio-ala--izq{ transform:rotate(32deg) scale(.8) !important }
.pio[data-pio-fase="saliendo"] .pio-ala--der{ transform:rotate(-32deg) scale(.8) !important }
/* ══ MOVIMIENTO REDUCIDO ══════════════════════════════════════════════
Se apaga el MOVIMIENTO, no el ESTADO: quien pidió menos animación
igual necesita ver si Pío está triste o contento. pio.js además se
salta las fases y cambia de golpe, que aquí sí es lo correcto. */
@media (prefers-reduced-motion:reduce){
.pio svg *,.pio svg{ animation:none !important; transition:none !important }
}
/* ═══════════════════════════════════════════════════════════════════
LA CASA EN EL DASHBOARD (esto no existe en app): el holder flotante
y arrastrable donde vive Pio en ideas.html. Los botones (bocina y
cerrar) solo aparecen al pasar el mouse. Solo escritorio.
═══════════════════════════════════════════════════════════════════ */
.pio-holder {
position: fixed; z-index: 240;
display: grid; justify-items: center; gap: 2px;
user-select: none; touch-action: none;
}
.pio-holder .pio { width: 110px; height: 125px; }
.pio-holder-acts { display: flex; gap: 6px; opacity: 0; transition: opacity .18s ease; }
.pio-holder:hover .pio-holder-acts,
.pio-holder:focus-within .pio-holder-acts { opacity: 1; }
.pio-holder-btn {
width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
display: grid; place-items: center; font-size: 13px;
background: color-mix(in srgb, var(--text-main, #eee) 8%, transparent);
color: var(--text-soft, #aaa);
}
.pio-holder-btn:hover {
background: color-mix(in srgb, var(--text-main, #eee) 14%, transparent);
color: var(--text-main, #eee);
}
.pio-holder-mute.is-muted { color: var(--red, #e5484d); }
/* La fisica (Edgar 2026-08-14: "como gravedad"): espejo segun hacia
donde vuela, y el squash del aterrizaje tras caer. El espejo va en el
SVG interno para no pelearse con la animacion del .pio. */
.pio-holder--espejo .pio svg { transform: scaleX(-1); }
@media (max-width: 760px) { .pio-holder { display: none; } }