/* Mascota = logo animado de Sync: capas del símbolo, burbujas, partículas,
   asomarse en el ingreso y desplazamiento en el encabezado.
   (Las clases .bex-* se conservan del motor original; ver js/mascota.js.) */

/* ===== Mascota en interludio entre preguntas ===== */
.bex-inter{display:flex;flex-direction:column;align-items:center;margin:-4px 0 10px}
.bex-inter-img{width:118px;height:118px;display:block;transform-origin:50% 60%}
@keyframes bubbleIn{0%{opacity:0;transform:translateY(6px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* ===== SVG: el contenedor flota y las capas se animan ===== */
.bex-slot{display:inline-block;position:relative}
.bex-slot .bex-svg{width:100%;height:100%;display:block;overflow:visible;transform-origin:50% 55%}
/* Color del símbolo: blanco sobre el fondo oscuro, negro dentro de tarjetas blancas */
.bex-svg .bx-core path{fill:var(--logo-core,#fff)}
.card .bex-slot{--logo-core:#000}
.bex-svg g{transform-box:view-box}

/* Copias azul y verde: se separan y vuelven a "sincronizarse" con el símbolo */
.bx-ghost{opacity:.95}
.bx-ghost-b{animation:bxSyncB 4.2s ease-in-out infinite}
.bx-ghost-l{animation:bxSyncL 4.2s ease-in-out infinite}
@keyframes bxSyncB{0%,100%{transform:translate(-7px,6px)}45%,60%{transform:translate(0,0)}}
@keyframes bxSyncL{0%,100%{transform:translate(7px,-6px)}45%,60%{transform:translate(0,0)}}
/* Puntos en órbita alrededor del centro del símbolo */
.bx-orbit{transform-origin:61.5px 60.5px;animation:bxOrbit 9s linear infinite}
@keyframes bxOrbit{to{transform:rotate(360deg)}}
/* Destello naranjo */
.bx-spark{transform-origin:122px 4px;animation:bxSpark 2.6s ease-in-out infinite}
@keyframes bxSpark{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.15) rotate(45deg);opacity:1}}

/* ===== Asomarse detrás del cuadro de ingreso ===== */
.bex-peek{position:absolute;z-index:1;width:96px;height:96px;left:50%;bottom:calc(100% - 30px);transform:translateX(-50%);overflow:visible;pointer-events:none;opacity:0}
.bex-peek .bex-svg{width:96px;height:96px;transform-origin:50% 100%}
.bex-peek .bex-bubble2{white-space:nowrap}
.bex-peek.peeking{animation:peek 3s ease-in-out 1}
@keyframes peek{
  0%{opacity:0;transform:translateX(-50%) translateY(60px)}
  15%{opacity:1;transform:translateX(-50%) translateY(0)}
  75%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(60px)}
}
.bex-peek.peeking .bx-ghost-b,.bex-peek.peeking .bx-ghost-l{animation-duration:1.4s}

/* ===== Reacciones ===== */
/* acierto: salto + giro */
.bex-slot.rx-win .bex-svg{animation:bxWin .8s cubic-bezier(.34,1.56,.64,1) 1}
@keyframes bxWin{0%{transform:translateY(0) scale(1) rotate(0)}30%{transform:translateY(-24px) scale(1.1) rotate(8deg)}55%{transform:translateY(-6px) rotate(-4deg)}100%{transform:translateY(0) scale(1) rotate(0)}}
/* error: sacudida y las capas se desordenan */
.bex-slot.rx-fail .bex-svg{animation:bxFail .5s ease 1}
@keyframes bxFail{0%,100%{transform:translateX(0)}15%{transform:translateX(-10px) rotate(-4deg)}30%{transform:translateX(9px) rotate(4deg)}45%{transform:translateX(-7px) rotate(-2deg)}60%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.bex-slot.rx-fail .bx-ghost-b{animation:bxScatterB .5s ease 1}
.bex-slot.rx-fail .bx-ghost-l{animation:bxScatterL .5s ease 1}
@keyframes bxScatterB{50%{transform:translate(-16px,10px)}}
@keyframes bxScatterL{50%{transform:translate(16px,-10px)}}
/* entrada: sube desde abajo con rebote */
.bex-slot.rx-enter .bex-svg{animation:bxEnter .9s cubic-bezier(.22,1,.36,1) 1}
@keyframes bxEnter{0%{transform:translateY(80px) scale(.5);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
/* saludo: las capas se abren en abanico y se vuelven a sincronizar */
.bex-slot.rx-wave .bx-ghost-b{animation:bxFanB .8s ease 2}
.bex-slot.rx-wave .bx-ghost-l{animation:bxFanL .8s ease 2}
@keyframes bxFanB{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(-18px,12px) rotate(-10deg)}}
@keyframes bxFanL{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(18px,-12px) rotate(10deg)}}
/* giro completo */
.bex-slot.rx-spin .bex-svg{animation:bxSpin .7s ease 1}
@keyframes bxSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* Desplazamiento de un extremo a otro en el encabezado */
header.top .brand-logo.bex-walk{animation:bxWalk 7s ease-in-out infinite}
@keyframes bxWalk{0%{transform:translateX(0)}50%{transform:translateX(180px)}100%{transform:translateX(0)}}
header.top .brand-logo{cursor:pointer}

/* halo verde al acertar */
.bex-slot .bx-halo{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(closest-side,rgba(96,233,109,.35),transparent 70%);opacity:0;pointer-events:none;transition:opacity .3s}
.bex-slot.rx-win .bx-halo{opacity:1;animation:haloFade 1s ease forwards}
@keyframes haloFade{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* burbuja de diálogo */
.bex-bubble2{position:absolute;left:50%;top:-8px;transform:translate(-50%,-100%) scale(.9);background:#fff;color:var(--ink);font-family:'Poppins',sans-serif;font-weight:700;font-size:.8rem;padding:7px 12px;border-radius:13px;box-shadow:0 8px 22px rgba(0,0,0,.35);opacity:0;transition:opacity .25s,transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:5;max-width:70vw;white-space:normal;text-align:center}
.card .bex-bubble2{background:var(--ink);color:#fff}
.bex-bubble2::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff;border-bottom:0}
.card .bex-bubble2::after{border-top-color:var(--ink)}
.bex-bubble2.show{opacity:1;transform:translate(-50%,-100%) scale(1)}
.bex-bubble2.ok{color:#14883A}.bex-bubble2.bad{color:#D9431F}
.card .bex-bubble2.ok{color:var(--lima)}.card .bex-bubble2.bad{color:#FF8A6B}
/* Variante lateral: la burbuja sale al costado */
.bex-slot.bubble-side .bex-bubble2{left:auto;right:-6px;top:6px;transform:translate(100%,0) scale(.9)}
.bex-slot.bubble-side .bex-bubble2.show{transform:translate(100%,0) scale(1)}
.bex-slot.bubble-side .bex-bubble2::after{bottom:auto;left:-6px;top:16px;transform:none;border:7px solid transparent;border-right-color:#fff;border-left:0;border-top:0}
@media (max-width:560px){
  .bex-slot.bubble-side .bex-bubble2{right:auto;left:50%;top:auto;bottom:-6px;transform:translate(-50%,100%) scale(.9);max-width:80vw}
  .bex-slot.bubble-side .bex-bubble2.show{transform:translate(-50%,100%) scale(1)}
  .bex-slot.bubble-side .bex-bubble2::after{top:-6px;left:50%;transform:translateX(-50%);border:7px solid transparent;border-bottom-color:#fff;border-top:0;border-right:0}
}

/* partículas */
.bex-fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6}
.bex-fx .p{position:absolute;font-size:20px;opacity:0;will-change:transform,opacity}
@keyframes fxRise{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(var(--rot))}}
.landing-logo .bex-bubble2{white-space:nowrap}