/* ── Mascot System Styles ── */
#mascot-container {
  position: absolute;
  top: -18px; /* Bajado para que camine por el borde */
  left: 0;
  width: 100%;
  height: 48px;
  pointer-events: none;
  z-index: 100;
}

.mascot {
  position: absolute;
  width: 48px;
  height: 48px;
  background-image: url('../assets/mascot_fixed.png');
  background-repeat: no-repeat;
  /* El archivo repaquetado es un grid 8x8 de 1024x1024, se escala a 384x384 (48px por frame) */
  background-size: 384px 384px; 
  image-rendering: pixelated;
  transition: left 0.5s linear;
}


/* Animación: Idle (Parado) - Fila 1 (4 frames) */
.mascot-idle {
  background-position: 0 0;
  animation: mascot-idle-anim 0.6s steps(4) infinite;
}

@keyframes mascot-idle-anim {
  from { background-position: 0 0; }
  to { background-position: -192px 0; } /* 4 * 48 = 192 */
}

/* Animación: Walk (Caminar) - Fila 2 (6 frames) */
.mascot-walk {
  background-position: 0 -48px;
  animation: mascot-walk-anim 0.9s steps(6) infinite;
}

@keyframes mascot-walk-anim {
  from { background-position: 0 -48px; }
  to { background-position: -288px -48px; } /* 6 * 48 = 288 */
}

/* Animación: Dance (Bailar) - Fila 3 (6 frames) */
.mascot-dance {
  background-position: 0 -96px;
  animation: mascot-dance-anim 0.9s steps(6) infinite;
}

@keyframes mascot-dance-anim {
  from { background-position: 0 -96px; }
  to { background-position: -288px -96px; } /* 6 * 48 = 288 */
}




/* Efecto de aparecer/desaparecer */
.mascot-fade-in { opacity: 1; transition: opacity 0.5s; }
.mascot-fade-out { opacity: 0; transition: opacity 0.5s; }