/* Obby Lab · Obi animado: qué se ve y cómo se mueve en cada emoción (el dibujo está en /brand/obi-animado.js).
   Las coordenadas son las del viewBox (320 × 400): los pivotes van en px de ese espacio. */
.obi3d { display: inline-block; position: relative; line-height: 0; }
.obi3d-svg { overflow: visible; }
.obi3d:not(g) > .obi3d-svg { width: 100%; height: 100%; }
/* los pivotes están en px del dibujo: vale también cuando Obi va dentro de otro SVG que usa fill-box (el mapa) */
.obi3d .obi3d-svg * { transform-box: view-box; }

/* ---- piezas y pivotes */
.obi3d .obi-todo, .obi3d .obi-cuerpo-entero { transform-origin: 160px 381px; }
.obi3d .obi-sombra { transform-origin: 160px 382px; }
.obi3d .obi-banderin { transform-origin: 186px 90px; animation: obi-flamea 1.6s ease-in-out infinite alternate; }
.obi3d .obi-brazo-giro { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.obi3d .obi-brazo-izq .obi-brazo-giro { transform: rotate(8deg); }
.obi3d .obi-brazo-der .obi-brazo-giro { transform: rotate(-8deg); }
.obi3d .obi-ceja { transition: transform .25s ease; }
.obi3d .obi-ceja-izq { transform-origin: 117px 142px; }
.obi3d .obi-ceja-der { transform-origin: 202px 142px; }
.obi3d .obi-ojo-izq .obi-ojo-abierto { transform-origin: 122px 192px; }
.obi3d .obi-ojo-der .obi-ojo-abierto { transform-origin: 198px 192px; }
.obi3d .obi-ojo-izq .obi-parpado { transform-origin: 122px 159px; }
.obi3d .obi-ojo-der .obi-parpado { transform-origin: 198px 159px; }
.obi3d .obi-ojo-abierto, .obi3d .obi-pupila { transition: transform .2s ease; }
.obi3d .obi-parpado { transform: scaleY(0); transition: transform .08s ease-in; }
.obi3d.parpadea .obi-parpado { transform: scaleY(1); }

/* lo que está escondido hasta que una emoción lo pide */
.obi3d .obi-boca, .obi3d .obi-ojo-contento, .obi3d .obi-ojo-cerrado, .obi3d .obi-mano-barbilla, .obi3d .obi-pulgar,
.obi3d .obi-brazo-senala, .obi3d .obi-gota, .obi3d .obi-zetas, .obi3d .obi-chispas { opacity: 0; transition: opacity .15s ease; }
.obi3d .obi-boca[data-boca="sonrisa"] { opacity: 1; }
.obi3d .obi-brazo-der { transition: opacity .15s ease; }

/* reposo: respira */
.obi3d .obi-cuerpo-entero { animation: obi-respira 2.8s ease-in-out infinite; }

/* ---- emociones */
.obi3d[data-estado]:not([data-estado="feliz"]):not([data-estado="duerme"]) .obi-boca[data-boca="sonrisa"] { opacity: 0; }

.obi3d[data-estado="saluda"] .obi-boca[data-boca="risa"] { opacity: 1; }
.obi3d[data-estado="saluda"] .obi-brazo-der .obi-brazo-giro { transform: rotate(-138deg); animation: obi-saluda .5s ease-in-out infinite alternate; }
.obi3d[data-estado="saluda"] .obi-cuerpo-entero { animation: none; transform: rotate(-3deg); transition: transform .3s ease; }

.obi3d[data-estado="celebra"] .obi-boca[data-boca="risa"],
.obi3d[data-estado="celebra"] .obi-ojo-contento,
.obi3d[data-estado="celebra"] .obi-chispas { opacity: 1; }
.obi3d[data-estado="celebra"] .obi-ojo-abierto { opacity: 0; }
.obi3d[data-estado="celebra"] .obi-ceja { transform: translateY(-5px); }
.obi3d[data-estado="celebra"] .obi-brazo-izq .obi-brazo-giro { transform: rotate(150deg); animation: obi-agita-izq .3s ease-in-out infinite alternate; }
.obi3d[data-estado="celebra"] .obi-brazo-der .obi-brazo-giro { transform: rotate(-150deg); animation: obi-agita-der .3s ease-in-out infinite alternate; }
.obi3d[data-estado="celebra"] .obi-todo { animation: obi-salta .65s cubic-bezier(.3, .8, .4, 1) 2; }
.obi3d[data-estado="celebra"] .obi-sombra { animation: obi-sombra .65s cubic-bezier(.3, .8, .4, 1) 2; }
.obi3d[data-estado="celebra"] .obi-chispas { animation: obi-chispas .65s ease-out infinite; transform-origin: 160px 100px; }
.obi3d[data-estado="celebra"] .obi-banderin { animation-duration: .4s; }

.obi3d[data-estado="piensa"] .obi-boca[data-boca="recta"],
.obi3d[data-estado="piensa"] .obi-mano-barbilla { opacity: 1; }
.obi3d[data-estado="piensa"] .obi-brazo-der { opacity: 0; }
.obi3d[data-estado="piensa"] .obi-pupila { transform: translate(5px, -9px); }
.obi3d[data-estado="piensa"] .obi-ceja-izq { transform: translateY(-7px) rotate(-8deg); }
.obi3d[data-estado="piensa"] .obi-ceja-der { transform: translateY(2px) rotate(6deg); }
.obi3d[data-estado="piensa"] .obi-cuerpo-entero { animation: obi-balancea 3.2s ease-in-out infinite; }

.obi3d[data-estado="atascado"] .obi-boca[data-boca="ondulada"],
.obi3d[data-estado="atascado"] .obi-gota { opacity: 1; }
.obi3d[data-estado="atascado"] .obi-parpado { transform: scaleY(.38); }
.obi3d[data-estado="atascado"] .obi-pupila { transform: translateY(4px); }
.obi3d[data-estado="atascado"] .obi-ceja-izq { transform: rotate(-15deg) translateY(-2px); }
.obi3d[data-estado="atascado"] .obi-ceja-der { transform: rotate(15deg) translateY(-2px); }
.obi3d[data-estado="atascado"] .obi-brazo-izq .obi-brazo-giro { transform: rotate(16deg); }
.obi3d[data-estado="atascado"] .obi-brazo-der .obi-brazo-giro { transform: rotate(-16deg); }
.obi3d[data-estado="atascado"] .obi-cuerpo-entero { animation: obi-tiembla 1.4s ease-in-out infinite; }
.obi3d[data-estado="atascado"] .obi-gota { animation: obi-gota 1.8s ease-in infinite; }

.obi3d[data-estado="sorprendido"] .obi-boca[data-boca="o"] { opacity: 1; }
.obi3d[data-estado="sorprendido"] .obi-ojo-abierto { transform: scale(1.12); }
.obi3d[data-estado="sorprendido"] .obi-pupila { transform: scale(.85); transform-box: fill-box; transform-origin: center; }
.obi3d[data-estado="sorprendido"] .obi-ceja { transform: translateY(-11px); }
.obi3d[data-estado="sorprendido"] .obi-brazo-izq .obi-brazo-giro { transform: rotate(38deg); }
.obi3d[data-estado="sorprendido"] .obi-brazo-der .obi-brazo-giro { transform: rotate(-38deg); }
.obi3d[data-estado="sorprendido"] .obi-todo { animation: obi-brinca .5s cubic-bezier(.3, .8, .4, 1); }

.obi3d[data-estado="triste"] .obi-boca[data-boca="suave"] { opacity: 1; }
.obi3d[data-estado="triste"] .obi-parpado { transform: scaleY(.26); }
.obi3d[data-estado="triste"] .obi-pupila { transform: translateY(5px); }
.obi3d[data-estado="triste"] .obi-ceja-izq { transform: rotate(-11deg) translateY(2px); }
.obi3d[data-estado="triste"] .obi-ceja-der { transform: rotate(11deg) translateY(2px); }
.obi3d[data-estado="triste"] .obi-brazo-izq .obi-brazo-giro { transform: rotate(2deg); }
.obi3d[data-estado="triste"] .obi-brazo-der .obi-brazo-giro { transform: rotate(-2deg); }
.obi3d[data-estado="triste"] .obi-cuerpo-entero { animation: obi-respira-lento 4s ease-in-out infinite; }

.obi3d[data-estado="duerme"] .obi-boca[data-boca="dormida"],
.obi3d[data-estado="duerme"] .obi-ojo-cerrado,
.obi3d[data-estado="duerme"] .obi-zetas { opacity: 1; }
.obi3d[data-estado="duerme"] .obi-boca[data-boca="sonrisa"],
.obi3d[data-estado="duerme"] .obi-ojo-abierto { opacity: 0; }
.obi3d[data-estado="duerme"] .obi-ceja { transform: translateY(5px); }
.obi3d[data-estado="duerme"] .obi-brazo-izq .obi-brazo-giro { transform: rotate(3deg); }
.obi3d[data-estado="duerme"] .obi-brazo-der .obi-brazo-giro { transform: rotate(-3deg); }
.obi3d[data-estado="duerme"] .obi-cuerpo-entero { animation: obi-respira-lento 4s ease-in-out infinite; }
.obi3d[data-estado="duerme"] .obi-banderin { animation-duration: 3.2s; }
.obi3d[data-estado="duerme"] .obi-zetas circle { animation: obi-burbuja 3s ease-in infinite; transform-box: fill-box; transform-origin: center; }
.obi3d[data-estado="duerme"] .obi-zetas circle:nth-child(2) { animation-delay: 1s; }
.obi3d[data-estado="duerme"] .obi-zetas circle:nth-child(3) { animation-delay: 2s; }

.obi3d[data-estado="senala"] .obi-boca[data-boca="risa"] { opacity: 1; }
.obi3d[data-estado="senala"] .obi-brazo-senala { opacity: 1; animation: obi-apunta 1.1s ease-in-out infinite; }
.obi3d[data-estado="senala"] .obi-brazo-der { opacity: 0; }
.obi3d[data-estado="senala"] .obi-pupila { transform: translate(9px, 0); }
.obi3d[data-estado="senala"] .obi-cuerpo-entero { animation: none; transform: rotate(4deg); transition: transform .3s ease; }

.obi3d[data-estado="orgulloso"] .obi-boca[data-boca="picara"],
.obi3d[data-estado="orgulloso"] .obi-pulgar,
.obi3d[data-estado="orgulloso"] .obi-ojo-der .obi-ojo-contento { opacity: 1; }
.obi3d[data-estado="orgulloso"] .obi-brazo-der,
.obi3d[data-estado="orgulloso"] .obi-ojo-der .obi-ojo-abierto { opacity: 0; }
.obi3d[data-estado="orgulloso"] .obi-ceja-izq { transform: translateY(-4px); }
.obi3d[data-estado="orgulloso"] .obi-ceja-der { transform: translateY(3px) rotate(6deg); }
.obi3d[data-estado="orgulloso"] .obi-todo { animation: obi-rebota .55s ease-out 2; }
.obi3d[data-estado="orgulloso"] .obi-pulgar { transform-origin: 287px 254px; animation: obi-pulgar .45s cubic-bezier(.3, 1.6, .5, 1); }

/* el parpadeo va después de los párpados de atascado y triste para que también parpadee así */
.obi3d.parpadea[data-estado] .obi-parpado { transform: scaleY(1); }

/* ---- movimientos */
@keyframes obi-respira { 50% { transform: scale(.994, 1.018); } }
@keyframes obi-respira-lento { 50% { transform: scale(.99, 1.026); } }
@keyframes obi-flamea { from { transform: skewY(0deg) scaleX(1); } to { transform: skewY(-7deg) scaleX(.93); } }
@keyframes obi-saluda { from { transform: rotate(-150deg); } to { transform: rotate(-118deg); } }
@keyframes obi-agita-izq { from { transform: rotate(150deg); } to { transform: rotate(135deg); } }
@keyframes obi-agita-der { from { transform: rotate(-150deg); } to { transform: rotate(-135deg); } }
@keyframes obi-salta { 0% { transform: none; } 18% { transform: scale(1.06, .9); } 50% { transform: translateY(-34px) scale(.97, 1.04); } 82% { transform: scale(1.05, .92); } 100% { transform: none; } }
@keyframes obi-sombra { 50% { transform: scale(.72); opacity: .12; } }
@keyframes obi-chispas { from { transform: scale(.7); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
@keyframes obi-balancea { 50% { transform: rotate(-3deg); } }
@keyframes obi-tiembla { 0%, 100% { transform: none; } 10% { transform: rotate(-2.5deg); } 20% { transform: rotate(2.5deg); } 30% { transform: rotate(-1.5deg); } 40% { transform: none; } }
@keyframes obi-gota { from { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(26px); opacity: 0; } }
@keyframes obi-brinca { 40% { transform: translateY(-16px) scale(.98, 1.03); } 75% { transform: scale(1.03, .96); } }
@keyframes obi-burbuja { from { transform: translateY(8px) scale(.4); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-14px) scale(1.1); opacity: 0; } }
@keyframes obi-apunta { 50% { transform: translateX(5px); } }
@keyframes obi-pulgar { from { transform: scale(.55) rotate(18deg); } }
@keyframes obi-rebota { 40% { transform: translateY(-10px); } 70% { transform: scale(1.03, .97); } }

@media (prefers-reduced-motion: reduce) {
  .obi3d, .obi3d * { animation: none !important; transition: none !important; }
}