/* Copia de fase0-gancho/orbi (orbi.css + orbi-director.css, propios de HookOrbit) con .orbi renombrado a .orbi-vivo
   para no chocar con los estilos del rediseño. Usado por la espera de Orbi Director (13/10/2026). */
/* Animaciones de Orbi. Solo transform y opacity (las que el iPhone hace con la
   GPU), sin filter ni blur, y todo quieto con prefers-reduced-motion. */

.orbi-vivo { display: inline-block; line-height: 0; animation: orbi-flotar 4.2s ease-in-out infinite; will-change: transform; }
.orbi-vivo svg { width: 100%; height: auto; overflow: visible; }

.orbi-vivo .cuerpo { transform-box: fill-box; transform-origin: 50% 85%; }
.orbi-vivo .giro { transform-box: view-box; transform-origin: 0 0; transform: rotate(-16deg); }
.orbi-vivo .ojos, .orbi-vivo .boca, .orbi-vivo .ceja-alta, .orbi-vivo .ojos-felices, .orbi-vivo .pupilas { transform-box: fill-box; transform-origin: center; }
.orbi-vivo .ojos { animation: orbi-parpadeo 5.2s infinite; }
.orbi-vivo .ojos-felices { opacity: 0; }
.orbi-vivo .chispas > * { opacity: 0; transform-box: fill-box; transform-origin: center; }
.orbi-vivo .destello { transform-box: fill-box; transform-origin: center; animation: orbi-destello 3.6s ease-in-out infinite; }

/* Hablando: el anillo se balancea, la luna viaja con él y la boca se mueve. */
.orbi-vivo.hablando .giro { animation: orbi-girar 1.1s ease-in-out infinite alternate; }
.orbi-vivo.hablando .boca { animation: orbi-hablar .22s ease-in-out infinite alternate; }
.orbi-c.hablando .ojos, .orbi-vivo.hablando .orbi-c .ojos { animation: orbi-asentir .5s ease-in-out infinite alternate; }
.orbi-vivo.hablando .ceja-alta { animation: orbi-ceja 1.6s ease-in-out infinite; }

/* Parpadeo a pedido (además del automático). */
.orbi-vivo.parpadea .ojos { animation: orbi-parpadeo-ya .28s ease-in-out; }

/* Alegría: salto con un poco de elasticidad, ojos felices, chispas y vuelta del anillo. */
.orbi-vivo.alegre .cuerpo { animation: orbi-salto .75s cubic-bezier(.3,.7,.4,1.4); }
.orbi-vivo.alegre .ojos { opacity: 0; animation: none; }
.orbi-vivo.alegre .ojos-felices { opacity: 1; }
.orbi-vivo.alegre .giro { animation: orbi-vuelta .75s ease-out; }
.orbi-vivo.alegre .ceja-alta { transform: translateY(-2px); }
.orbi-vivo.alegre .chispas > * { animation: orbi-chispa .8s ease-out; }
.orbi-vivo.alegre .chispas > :nth-child(2) { animation-delay: .06s; }
.orbi-vivo.alegre .chispas > :nth-child(3) { animation-delay: .12s; }
.orbi-vivo.alegre .chispas > :nth-child(4) { animation-delay: .18s; }

@keyframes orbi-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes orbi-parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } 96% { transform: scaleY(1); } }
@keyframes orbi-parpadeo-ya { 50% { transform: scaleY(.08); } }
@keyframes orbi-destello { 0%, 100% { transform: scale(.75) rotate(0); opacity: .6; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes orbi-girar { from { transform: rotate(-21deg); } to { transform: rotate(-9deg); } }
@keyframes orbi-hablar { from { transform: scale(1, .55); } to { transform: scale(.9, 1.35); } }
@keyframes orbi-asentir { from { transform: scaleY(1); } to { transform: scaleY(.8) translateY(1px); } }
@keyframes orbi-ceja { 0%, 100% { transform: translateY(0); } 40%, 60% { transform: translateY(-2.5px); } }
@keyframes orbi-salto {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.08, .9); }
  50% { transform: translateY(-22px) scale(.96, 1.05); }
  80% { transform: translateY(0) scale(1.05, .95); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes orbi-vuelta { from { transform: rotate(-16deg); } 60% { transform: rotate(-4deg); } to { transform: rotate(-16deg); } }
@keyframes orbi-chispa { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(.6) translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  .orbi-vivo, .orbi-vivo * { animation: none !important; transition: none !important; }
}
/* Orbi Director (versión D): la A con boina, claqueta, megáfono y marco de dedos.
   Mismas reglas que orbi.css: solo transform y opacity, sin filtros, quieto con
   prefers-reduced-motion (los estados se ven igual, pero sin movimiento). */

/* Sin boina es la A de siempre: los accesorios no existen. */
.orbi-vivo .director { display: none; }
.orbi-vivo.con-boina .director { display: inline; }
.orbi-vivo .ups-cara, .orbi-vivo .marco, .orbi-vivo .ondas, .orbi-vivo .golpe { opacity: 0; }

.orbi-vivo .boina, .orbi-vivo .claqueta, .orbi-vivo .megafono, .orbi-vivo .marco, .orbi-vivo .brazo, .orbi-vivo .gota, .orbi-vivo .ondas, .orbi-vivo .golpe { transform-box: fill-box; }
.orbi-vivo .boina { transform-origin: 50% 100%; transition: transform .35s ease; }
.orbi-vivo .claqueta { transform-origin: 90% 60%; transition: transform .3s ease, opacity .3s ease; }
.orbi-vivo .megafono { transform-origin: 10% 90%; transition: transform .3s ease, opacity .3s ease; }
.orbi-vivo .marco { transform-origin: center; transition: opacity .3s ease; }
.orbi-vivo .brazo { transform-origin: 0% 100%; transform: rotate(-16deg); }
.orbi-vivo .ondas { transform-origin: 0% 50%; }
.orbi-vivo .boca, .orbi-vivo .cachete { transition: opacity .2s; }

/* Ponerse y quitarse la boina (los accesorios aparecen en las manos). */
.orbi-vivo.poniendo .boina { animation: dir-boina-pone .6s cubic-bezier(.3,.8,.4,1.3) both; }
.orbi-vivo.poniendo .claqueta { animation: dir-aparece .4s .22s cubic-bezier(.3,.8,.4,1.4) both; }
.orbi-vivo.poniendo .megafono { animation: dir-aparece .4s .32s cubic-bezier(.3,.8,.4,1.4) both; }
.orbi-vivo.quitando .boina { animation: dir-boina-quita .45s ease-in both; }
.orbi-vivo.quitando .claqueta, .orbi-vivo.quitando .megafono { animation: dir-desaparece .3s ease-in both; }

/* ¡Acción!: la claqueta se abre y golpea, el megáfono grita. */
.orbi-vivo.accion .brazo, .orbi-vivo.corte .brazo { animation: dir-golpe .8s ease-in-out; }
.orbi-vivo.accion .golpe, .orbi-vivo.corte .golpe { animation: dir-chispazo .8s ease-out; }
.orbi-vivo.accion .ondas { animation: dir-ondas .4s ease-out 2; }
.orbi-vivo.accion .cuerpo { animation: dir-empujon .8s ease-in-out; }

/* Dirigiendo (bucle de espera): guarda la claqueta y el megáfono, encuadra con los
   dedos, entrecierra los ojos y mira de un lado a otro. */
/* El megáfono y la claqueta se quedan en pantalla (Orbi sale completo): el megáfono
   grita en la primera mitad del ciclo y en la segunda encuadra con los dedos y entrecierra los ojos. */
.orbi-vivo.dirigiendo .megafono { animation: dir-megafono 4.4s ease-in-out infinite; }
.orbi-vivo.dirigiendo .ondas { animation: dir-ondas-ciclo 4.4s ease-out infinite; }
.orbi-vivo.dirigiendo .marco { animation: dir-encuadre-ciclo 4.4s ease-in-out infinite; }
.orbi-vivo.dirigiendo .ojos { animation: dir-ojos-ciclo 4.4s ease-in-out infinite; }
.orbi-vivo.dirigiendo .pupilas { animation: dir-mirar 2.6s ease-in-out infinite; }
.orbi-vivo.dirigiendo .boina { transform: rotate(-5deg); }

/* ¡Corte!: golpe de claqueta + la alegría de orbi.css (salto, ojos ^ ^, chispas). */
.orbi-vivo.corte .megafono { transform: rotate(-18deg) translateY(-4px); }

/* Ups: se inclina apenado, cejas preocupadas, gotita, la boina se le corre. */
.orbi-vivo.ups .cuerpo { animation: dir-apenado .7s ease-out forwards; }
.orbi-vivo.ups .ups-cara { opacity: 1; }
.orbi-vivo.ups .boca { opacity: 0; }
.orbi-vivo.ups .cachete { opacity: .2; }
.orbi-vivo.ups .pupilas { transform: translateY(2px); }
.orbi-vivo.ups .gota { animation: dir-gota 1.8s ease-in infinite; }
.orbi-vivo.ups .boina { transform: rotate(-9deg) translate(-3px, 3px); }
.orbi-vivo.ups .megafono { transform: rotate(22deg) translateY(3px); }
.orbi-vivo.ups .claqueta { transform: rotate(10deg) translateY(4px); }


/* ---- Tamaño automático ----
   Cada .orbi-vivo es su propio contenedor (siempre tiene un ancho fijo), así que el
   SVG se simplifica solo según lo que mide en pantalla, sin clases a mano:
   - grande (> 96 px): todo;
   - mediano (41–96 px, p. ej. 64): con claqueta, sin megáfono ni marco de dedos;
   - chico (≤ 40 px, p. ej. 32): solo cara, anillo y boina (sin estrella).
   Vale para la A y la D: la A en chico también pierde la estrella. */
.orbi-vivo { container-type: inline-size; }
@container (max-width: 96px) {
  .megafono, .marco, .ondas, .golpe { display: none; }
}
@container (max-width: 40px) {
  .claqueta, .destello, .chispas, .ups-cara .gota { display: none; }
  .boina { transform: scale(1.12); }
}

@keyframes dir-boina-pone {
  0% { opacity: 0; transform: translate(16px, -70px) rotate(35deg); }
  25% { opacity: 1; }
  65% { transform: translate(0, 3px) rotate(-4deg) scale(1.06, .88); }
  100% { opacity: 1; transform: none; }
}
@keyframes dir-boina-quita { to { opacity: 0; transform: translate(-14px, -60px) rotate(-30deg); } }
@keyframes dir-aparece { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes dir-desaparece { to { opacity: 0; transform: scale(0); } }
@keyframes dir-golpe {
  0% { transform: rotate(-16deg); }
  35% { transform: rotate(-42deg); }
  52% { transform: rotate(0); }
  60% { transform: rotate(-4deg); }
  68%, 85% { transform: rotate(0); }
  100% { transform: rotate(-16deg); }
}
@keyframes dir-chispazo { 0%, 48% { opacity: 0; transform: scale(.5); } 58% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes dir-ondas { from { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } to { opacity: 0; transform: scale(1.25); } }
@keyframes dir-empujon { 0%, 100% { transform: none; } 50% { transform: translateY(2px) scale(1.03, .97); } 58% { transform: translateY(-3px); } }
@keyframes dir-megafono { 0%, 45%, 100% { transform: none; } 10%, 30% { transform: rotate(-12deg) translateY(-2px); } 20%, 38% { transform: rotate(-4deg); } }
@keyframes dir-ondas-ciclo { 0%, 4% { opacity: 0; transform: scale(.6); } 12%, 32% { opacity: 1; transform: scale(1.1); } 22% { opacity: .4; transform: scale(.8); } 44%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes dir-encuadre-ciclo { 0%, 48% { opacity: 0; transform: scale(1.12); } 56% { opacity: 1; transform: scale(1); } 74% { opacity: 1; transform: scale(.9) translateX(2px); } 90% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(1.12); } }
@keyframes dir-ojos-ciclo { 0%, 50%, 96%, 100% { transform: scaleY(1); } 56%, 90% { transform: scaleY(.62); } }
@keyframes dir-mirar { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-2.5px); } 70% { transform: translateX(2.5px); } }
@keyframes dir-apenado { 0% { transform: none; } 45% { transform: rotate(-9deg) translateY(2px); } 100% { transform: rotate(-6deg) translateY(1px); } }
@keyframes dir-gota { 0% { opacity: 0; transform: translateY(-3px); } 25% { opacity: 1; } 80% { opacity: 1; transform: translateY(6px); } 100% { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .orbi-vivo .boina, .orbi-vivo .claqueta, .orbi-vivo .megafono, .orbi-vivo .marco { transition: none !important; }
}