/* ═══════════════════════════════════════════════════════
   LA CHOCOLATA — Mascota interactiva · Huellitas Dulces
   Motor de personaje animado para AxisNode SalesRoom v1
   ══════════════════════════════════════════════════════ */

.choc-mascot {
  position: fixed;
  z-index: 320;
  display: none;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Marco circular — recorta texto "La Chocolata" del PNG, muestra solo la perrita */
.choc-frame {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(61,32,16,.32), 0 0 0 3px rgba(255,255,255,.7);
}

/* Imagen posicionada para mostrar cara + cuerpo, sin el texto del logo */
.choc-sprite {
  position: absolute;
  width: 190%;
  height: auto;
  left: -72%;
  top: -8%;
  pointer-events: none;
}

/* Espejo (corre hacia la izquierda) */
.choc-frame.choc-flip { transform: scaleX(-1); }

/* Hoyo para excavar */
.choc-hole {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  background: radial-gradient(ellipse, #2A0800 25%, #6B3010 100%);
  border-radius: 50%;
  pointer-events: none;
  transition: width .5s ease, height .4s ease;
}
.choc-hole--active { width: 90px; height: 28px; }

/* Corazones al acariciar */
.choc-hearts {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  color: #e85d8a;
  font-size: 15px;
  letter-spacing: 6px;
  pointer-events: none;
  opacity: 0;
}
.choc-hearts--show { animation: chocHeartsFloat 2.4s ease-out forwards; }
@keyframes chocHeartsFloat {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0);     }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-50px);  }
}

/* ── ENTRADAS ─────────────────────────────────────── */
.choc--enter-up   { animation: chocEnterUp   .5s cubic-bezier(.34,1.45,.64,1) both; }
.choc--peek-in    { animation: chocPeekIn    .4s cubic-bezier(.34,1.3,.64,1)  both; }

@keyframes chocEnterUp {
  from { transform: translateY(80px) scale(.5); opacity: 0; }
  to   { transform: translateY(0)    scale(1);  opacity: 1; }
}
@keyframes chocPeekIn {
  from { transform: translateX(55px); opacity: .3; }
  to   { transform: translateX(0);    opacity: 1;  }
}

/* ── SALIDAS ──────────────────────────────────────── */
.choc--exit-down  { animation: chocExitDown  .45s ease-in both; }
.choc--exit-dig   { animation: chocExitDig   .9s  ease-in both; }
.choc--peek-out   { animation: chocPeekOut   .35s ease-in both; }

@keyframes chocExitDown {
  from { transform: translateY(0)    scale(1);   opacity: 1; }
  to   { transform: translateY(80px) scale(.4);  opacity: 0; }
}
@keyframes chocExitDig {
  0%   { transform: translateY(0)   scale(1); }
  50%  { transform: translateY(8px) scaleX(1.15) scaleY(.9); }
  80%  { transform: translateY(22px) scale(.55); }
  100% { transform: translateY(52px) scale(.04); opacity: 0; }
}
@keyframes chocPeekOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(70px); opacity: 0; }
}

/* ════════════════════════════════════════════════════
   COMPORTAMIENTOS (16 en el pool)
   ════════════════════════════════════════════════════ */

/* 1 — IDLE: flota */
.choc--idle .choc-sprite { animation: chocIdle 3.2s ease-in-out infinite; }
@keyframes chocIdle {
  0%,100% { transform: translateY(0)   scale(1);    }
  50%     { transform: translateY(-6px) scale(1.03); }
}

/* 2 — SNIFF: olfatea el suelo */
.choc--sniff .choc-sprite { animation: chocSniff 1.1s ease-in-out 3 both; }
@keyframes chocSniff {
  0%,100% { transform: translateY(0)    rotate(0deg);   }
  30%,70% { transform: translateY(7px)  rotate(-14deg); }
  50%     { transform: translateY(11px) rotate(-20deg); }
}

/* 3 — BARK: saltitos de ladrido */
.choc--bark .choc-sprite { animation: chocBark .44s cubic-bezier(.34,1.56,.64,1) 5 both; }
@keyframes chocBark {
  0%,100% { transform: translateY(0)    scale(1);    }
  30%     { transform: translateY(-17px) scale(1.08); }
  60%     { transform: translateY(4px)  scale(.95);  }
}

/* 4 — JUMP: salto emocionado */
.choc--jump .choc-sprite { animation: chocJump .62s cubic-bezier(.34,1.56,.64,1) 4 both; }
@keyframes chocJump {
  0%,100% { transform: translateY(0)    scale(1);    }
  25%     { transform: translateY(-25px) scale(1.10); }
  55%     { transform: translateY(5px)  scale(.92);  }
  75%     { transform: translateY(-10px) scale(1.04); }
}

/* 5 — SHAKE: post-baño */
.choc--shake .choc-sprite { animation: chocShake .16s ease-in-out 17 both; }
@keyframes chocShake {
  0%,100% { transform: rotate(0deg)   translateX(0);   }
  33%     { transform: rotate(-14deg) translateX(-5px); }
  67%     { transform: rotate(14deg)  translateX(5px);  }
}

/* 6 — SPIN: persigue su cola */
.choc--spin .choc-sprite { animation: chocSpin .62s linear 6 both; }
@keyframes chocSpin {
  from { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.06); }
  to   { transform: rotate(360deg) scale(1);    }
}

/* 7 — YAWN: bostezo */
.choc--yawn .choc-sprite { animation: chocYawn 4.2s ease-in-out 1 both; }
@keyframes chocYawn {
  0%,100% { transform: scale(1)    rotate(0deg); }
  20%     { transform: scale(1.04) rotate(-4deg); }
  40%,60% { transform: scale(1.09) rotate(5deg);  }
  80%     { transform: scale(1.02) rotate(2deg);  }
}

/* 8 — BEG: dos patas */
.choc--beg .choc-sprite { animation: chocBeg .8s ease-in-out 4 both; }
@keyframes chocBeg {
  0%,100% { transform: scale(1)    translateY(0)    rotate(0deg);  }
  40%,60% { transform: scale(1.07) translateY(-12px) rotate(-7deg); }
  50%     { transform: scale(1.09) translateY(-15px) rotate(7deg);  }
}

/* 9 — SCRATCHY: rasca la oreja */
.choc--scratchy .choc-sprite { animation: chocScratchy .17s ease-in-out 18 both; }
@keyframes chocScratchy {
  0%,100% { transform: rotate(0deg)   translateX(0);   }
  33%     { transform: rotate(-20deg) translateX(-5px); }
  67%     { transform: rotate(12deg)  translateX(4px);  }
}

/* 10 — ROLL: se da vuelta */
.choc--roll .choc-sprite { animation: chocRoll 1.1s ease-in-out 4 both; }
@keyframes chocRoll {
  0%,100% { transform: rotate(0deg)   scale(1);    }
  25%     { transform: rotate(90deg)  scale(.88);  }
  50%     { transform: rotate(180deg) scale(.82);  }
  75%     { transform: rotate(270deg) scale(.88);  }
}

/* 11 — LAY: se acuesta y "ronca" */
.choc--lay .choc-sprite {
  animation: chocLayDown 1.2s ease-in-out 1 both,
             chocSnore   1.8s ease-in-out 3s 2 both;
}
@keyframes chocLayDown {
  0%   { transform: rotate(0deg)   scale(1); }
  100% { transform: rotate(-85deg) scaleX(1.1) translateY(10px); }
}
@keyframes chocSnore {
  0%,100% { transform: rotate(-85deg) scaleX(1.1)  translateY(10px) scaleY(1);    }
  50%     { transform: rotate(-85deg) scaleX(1.1)  translateY(8px)  scaleY(1.04); }
}

/* 12 & 13 — RUN: rebote al correr (el movimiento lateral lo hace el JS) */
.choc--run .choc-sprite,
.choc--run-flip .choc-sprite { animation: chocRunBob .3s ease-in-out infinite; }
@keyframes chocRunBob {
  0%,100% { transform: translateY(0)    scaleY(1);    }
  35%     { transform: translateY(-9px) scaleY(1.05); }
  65%     { transform: translateY(4px)  scaleY(.95);  }
}

/* 14 — DIG: empieza a excavar (JS añade choc--exit-dig para hundirse) */
.choc--dig .choc-sprite { animation: chocDig .5s ease-in-out infinite alternate; }
@keyframes chocDig {
  from { transform: translateY(0)   scaleX(1);    }
  to   { transform: translateY(5px) scaleX(1.12); }
}

/* 15 — PEEK: asoma detrás de Estela */
.choc--peek .choc-frame { transform: scaleX(-1); }
.choc--peek .choc-sprite { animation: chocPeekBob 1.2s ease-in-out infinite; }
@keyframes chocPeekBob {
  0%,100% { transform: translateX(0)    rotate(0deg);  }
  40%,60% { transform: translateX(-9px)  rotate(8deg);  }
  50%     { transform: translateX(-13px) rotate(12deg); }
}

/* 16 — PET: acariciada ♥ */
.choc--petted .choc-sprite { animation: chocPetted .46s cubic-bezier(.34,1.6,.64,1) 4 both; }
@keyframes chocPetted {
  0%   { transform: scale(1)    rotate(0deg);   }
  20%  { transform: scale(1.20) rotate(-12deg); }
  40%  { transform: scale(1.20) rotate(12deg);  }
  60%  { transform: scale(1.12) rotate(-7deg);  }
  80%  { transform: scale(1.06) rotate(3deg);   }
  100% { transform: scale(1)    rotate(0deg);   }
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 768px) {
  .choc-frame { width: 80px; height: 80px; }
}
@media (max-width: 480px) {
  .choc-frame { width: 66px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .choc-sprite  { animation: none !important; }
  .choc-mascot  { display: none !important;   }
}