/* ============================================================================
   BICHOS Y MIMOS — la capa viva: quien pasea, quien vuela y quien te dice
   cosas bonitas al pasar el ratón.
   ========================================================================== */

.bichos {
  position: fixed;
  inset: 0;
  z-index: 24;   /* delante del contenido, detrás de la barra de abajo */
  pointer-events: none;   /* la capa no estorba; cada bicho sí se deja tocar */
}

.bicho {
  position: absolute;
  left: 0; top: 0;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}

/* ── El gato ─────────────────────────────────────────────────────────────── */

.gato {
  bottom: 0;
  top: auto;
  width: 80px;
  transform-origin: bottom center;
  transition: filter var(--d-md) var(--ease-out);
}
.gato:hover { filter: drop-shadow(0 6px 14px rgba(233,199,132,.45)); }
.gato .g-todo { transform-origin: 40px 56px; }
.gato .g-cabeza { transform-origin: 27px 26px; transition: transform 260ms var(--ease-out); }
.gato .g-mofletes { transition: opacity var(--d-md); }
.gato:hover .g-mofletes { opacity: .75; }

/* Dormido: cierra los ojos y le salen zetas. */
.gato.dormido .g-ojos { transform: scaleY(.1); transform-origin: 27px 23px; }
.gato.dormido::after {
  content: "z z z";
  position: absolute;
  top: -6px; left: 56px;
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--mist-dim);
  animation: zetas 3.4s ease-in-out infinite;
}
@keyframes zetas {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(.8); }
  40% { opacity: .9; transform: translate(6px, -12px) scale(1); }
  80% { opacity: 0; transform: translate(12px, -24px) scale(1.1); }
}

/* ── Burbujas de lo que dicen ────────────────────────────────────────────── */

.burbuja {
  position: absolute;
  left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 7px 13px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(244,226,190,.96);
  color: #2A2218;
  font-family: var(--mano);
  font-size: 16px;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: var(--sombra-media);
  pointer-events: none;
}

/* ── Mariposas ───────────────────────────────────────────────────────────── */

.mariposa { width: 28px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.mariposa .m-ala { transform-origin: 14px 14px; animation: aletear 380ms ease-in-out infinite alternate; }
.mariposa .m-der { animation-name: aletear-der; }
.mariposa.aleteo-rapido .m-ala { animation-duration: 130ms; }
@keyframes aletear     { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes aletear-der { from { transform: scaleX(1); } to { transform: scaleX(.35); } }

/* ── Pájaro ──────────────────────────────────────────────────────────────── */

.pajaro { width: 38px; }
.pajaro .p-ala { transform-origin: 14px 11px; animation: batir 420ms ease-in-out infinite alternate; }
@keyframes batir { from { transform: rotate(-16deg) scaleY(1); } to { transform: rotate(22deg) scaleY(.7); } }
.pajaro .p-carga { transition: opacity var(--d-md); animation: latido-mini 1.4s ease-in-out infinite; transform-origin: 34px 15px; }
@keyframes latido-mini { 0%,100% { transform: scale(1); } 30% { transform: scale(1.18); } }

/* ── Luciérnagas ─────────────────────────────────────────────────────────── */

.luciernaga {
  position: absolute;
  left: 0; top: 0;
  width: calc(4px * var(--r, 1));
  height: calc(4px * var(--r, 1));
  margin: calc(-2px * var(--r, 1));
  border-radius: 50%;
  background: #F6E3B4;
  box-shadow: 0 0 10px 2px rgba(233,199,132,.55), 0 0 22px 6px rgba(233,199,132,.25);
  pointer-events: none;
  will-change: transform, opacity;
}

/* ── Corazoncitos ────────────────────────────────────────────────────────── */

.corazoncito {
  position: fixed;
  z-index: 9997;
  width: 22px; height: 22px;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(242,120,155,.5));
}
.corazoncito svg { width: 100%; height: 100%; fill: currentColor; }

/* ── El jardín de abajo ──────────────────────────────────────────────────── */

.jardin {
  position: fixed;
  left: 0; bottom: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .72;
  mask-image: linear-gradient(180deg, transparent, #000 46%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 46%);
}

/* ── Notitas al pasar el ratón ───────────────────────────────────────────── */

.notita {
  position: fixed;
  z-index: 9996;
  padding: 8px 14px;
  border-radius: 16px 16px 16px 5px;
  background: linear-gradient(180deg, #FDF6E6, #F2E4C6);
  color: #3A2E1C;
  font-family: var(--mano);
  font-size: 19px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--sombra-media);
  pointer-events: none;
  transform-origin: bottom center;
}
.notita::after {
  content: "";
  position: absolute;
  left: 16px; bottom: -6px;
  width: 12px; height: 12px;
  background: #F2E4C6;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ── Te quiero al mantener pulsado ───────────────────────────────────────── */

.te-quiero {
  position: fixed;
  z-index: 9996;
  padding: 10px 22px;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 40% 30%, rgba(242,120,155,.95), rgba(158,91,88,.9));
  color: #FFF1F3;
  font-family: var(--display);
  font-style: italic;
  font-size: 24px;
  box-shadow: 0 0 40px rgba(242,120,155,.5);
  pointer-events: none;
}

/* ── Letras que saltan ───────────────────────────────────────────────────── */

.letra { display: inline-block; will-change: transform; }

/* ── Nieve dulce: estrellitas y corazones cayendo muy despacio ───────────── */

.nieve-dulce {
  position: fixed;
  inset: -10% 0 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.nieve-dulce i {
  position: absolute;
  top: -8%;
  display: block;
  animation-name: caer-dulce;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.nieve-dulce i svg { width: 100%; height: auto; fill: currentColor; }
@keyframes caer-dulce {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(var(--vaiven, 0), 118vh) rotate(var(--giro, 180deg)); }
}

/* ── Confeti ─────────────────────────────────────────────────────────────── */

.confeti {
  position: fixed;
  z-index: 9997;
  border-radius: 2px;
  pointer-events: none;
}

/* ── Materiales con vida: todo rebota un poquito ─────────────────────────── */

.tarjeta, .sobre, .juego-ficha, .pendiente, .polaroid {
  transition: transform var(--d-md) var(--ease-back), box-shadow var(--d-md) var(--ease-out);
}
.btn:active, .chip:active, .sobre:active, .pendiente:active { animation: gelatina 420ms var(--ease-out); }
@keyframes gelatina {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.1, .88); }
  55% { transform: scale(.94, 1.08); }
  75% { transform: scale(1.03, .97); }
  100% { transform: scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .gato, .mariposa, .pajaro, .luciernaga, .nieve-dulce { display: none; }
}