@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Nunito:wght@600;700&display=swap');

/* ─── Duno · mascota animada ──────────────────────────────────────
   Usalo con duno.js:  const duno = new Duno('#mi-contenedor');
   Estados disponibles: quieto | saludar | feliz | pensando | enamorado
                        trabajando | hablando | mirando | asomando | alerta
────────────────────────────────────────────────────────────────── */

:root{
  --bg:#0a0a0a;--panel:#161616;--muted:#666;--accent:#9be8c2;--yellow:#FFD94A;--pink:#FF6FAE;

  /* ── POSICIÓN DE DUNO EN EL LOGIN ─────────────────────────────
     Cambiá estos valores para mover a Duno:
     --duno-offset-y : cuánto bajar desde el centro del viewport
                       más alto = Duno sube (queda más dentro del card)
                       más bajo = Duno baja (queda más afuera del card)
     --duno-size     : tamaño de Duno (ancho del contenedor)
  ─────────────────────────────────────────────────────────────── */
  --duno-offset-y: 65px;   /* altura visible de Duno (= cuanto asoma debajo del card) */
  --duno-size:     130px;  /* tamaño de Duno */
}
  *{box-sizing:border-box;margin:0;padding:0}

  svg.duno{width:100%;height:auto;overflow:visible;color:#fff}

  /* float */
  .float{animation:float 4.4s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px) rotate(-1deg)}}

  /* blink — anima scaleY de los ojos */
  .eyes-normal{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
  @keyframes blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.05)}}

  /* brazo que saluda */
  .p-wave{transform-box:fill-box;transform-origin:0% 100%;animation:wave .85s ease-in-out infinite}
  @keyframes wave{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-20deg)}}

  /* salto feliz */
  .duno[data-state="feliz"] .body-wrap{animation:hop .68s ease-in-out infinite}
  @keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}

  /* chispas */
  .p-cheer .spark{animation:spark .9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes spark{0%,100%{opacity:.3}50%{opacity:1}}

  /* signo ? flota */
  .p-think{animation:thinkbob 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes thinkbob{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(-7px);opacity:1}}

  /* corazones laten */
  .eyes-heart{animation:beat 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes beat{0%,100%{transform:scale(1)}35%{transform:scale(1.2)}}

  /* boca hablando */
  .m-talk{transform-box:fill-box;transform-origin:center;animation:talk .3s steps(1) infinite}
  @keyframes talk{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

  /* aparece desde abajo */
  @keyframes slideUp{
    from{transform:translateY(420px)}
    to  {transform:translateY(0)}
  }
  .duno[data-state="asomando"] .entrance{
    animation:slideUp .8s cubic-bezier(.22,1,.36,1) forwards
  }
  .duno[data-state="asomando"] .body-wrap{animation:breathe 3.2s ease-in-out infinite}
  .duno[data-state="asomando"] .eyes-normal{display:none}
  .duno[data-state="asomando"] .eyes-mirar{display:block}
  .duno[data-state="asomando"] .p-mirar{display:block}
  .duno[data-state="asomando"] .m-flat{display:block}

  /* respirando: escala sutil como si el cuerpo se expande */
  .eyes-mirar{display:none;transform-box:fill-box;transform-origin:center;animation:blink 6s infinite}
  .duno[data-state="mirando"] .body-wrap{animation:breathe 3.2s ease-in-out infinite}
  @keyframes breathe{0%,100%{transform:scaleX(1) scaleY(1)}50%{transform:scaleX(1.022) scaleY(1.012)}}
  .duno[data-state="mirando"] .eyes-normal{display:none}
  .duno[data-state="mirando"] .eyes-mirar{display:block}
  .duno[data-state="mirando"] .p-mirar{display:block}
  .duno[data-state="mirando"] .m-flat{display:block}
  .scratch-arm{animation:scratch .32s ease-in-out infinite}
  @keyframes scratch{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}

  /* qué se muestra según estado */
  .prop,.mouth,.eyes-heart{display:none}
  .duno[data-state="saludar"]    .p-wave  {display:block}
  .duno[data-state="feliz"]      .p-cheer {display:block}
  .duno[data-state="pensando"]   .p-think {display:block}
  .duno[data-state="trabajando"] .p-work  {display:block}
  .duno[data-state="hablando"]   .p-bubble{display:block}
  .duno[data-state="alerta"]     .p-alerta{display:block}
  .duno[data-state="enamorado"]  .p-love  {display:block}
  .duno[data-state="enamorado"] .eyes-normal{display:none}
  .duno[data-state="enamorado"] .eyes-heart{display:block}

  .duno[data-state="quieto"]     .m-smile,
  .duno[data-state="saludar"]    .m-smile,
  .duno[data-state="enamorado"]  .m-smile,
  .duno[data-state="trabajando"] .m-smile{display:block}
  .duno[data-state="feliz"]    .m-open{display:block}
  .duno[data-state="pensando"] .m-wavy{display:block}
  .duno[data-state="hablando"] .m-talk{display:block}
  .duno[data-state="alerta"]   .m-alerta{display:block}

  /* contenedores de uso en la app */
  .duno-empty { width: 120px; margin: 32px auto; }

  /* login: Duno anclado al fondo del card, asoma desde adentro hacia arriba
     El card tiene overflow:hidden — clipea el cuerpo, deja visible solo la cabeza */
  #duno-login-container {
    position: absolute;
    bottom: -80px;  /* cuerpo oculto debajo — ajustá este valor para ver más o menos cabeza */
    left: 7%;
    width: var(--duno-size);
    transform: translateX(-50%) translateY(140px);
    opacity: 0;
    animation: dunoAsomar 0.8s cubic-bezier(.22,1,.36,1) 0.5s forwards;
  }
  #duno-login-container svg.duno { color: #201c5a !important; }
  @keyframes dunoAsomar {
    from { opacity: 0; transform: translateX(-50%) translateY(140px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }