/* =========================================
   PERSONAJES GAMER ANIMADOS — FixPointMx
   Paleta: Púrpura #B4A0E6 | Teal #4BBFAA
========================================= */

.personajes-fondo {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.personaje-flotante {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
    user-select: none;
    /* Púrpura oscuro visible en fondo claro */
    filter: invert(0)
            sepia(1)
            saturate(4)
            hue-rotate(240deg)
            brightness(0.55);
}

/* ---- Movimientos ---- */
@keyframes flotar-derecha {
    0%   { transform: translateX(-120px) translateY(0px) rotate(0deg); opacity: 0; }
    5%   { opacity: 0.80; }
    95%  { opacity: 0.80; }
    100% { transform: translateX(110vw) translateY(-30px) rotate(5deg); opacity: 0; }
}

@keyframes flotar-izquierda {
    0%   { transform: translateX(110vw) translateY(0px) scaleX(-1); opacity: 0; }
    5%   { opacity: 0.75; }
    95%  { opacity: 0.75; }
    100% { transform: translateX(-120px) translateY(20px) scaleX(-1); opacity: 0; }
}

@keyframes flotar-diagonal-abajo {
    0%   { transform: translate(-80px, -80px) rotate(-15deg); opacity: 0; }
    5%   { opacity: 0.72; }
    95%  { opacity: 0.72; }
    100% { transform: translate(110vw, 110vh) rotate(15deg); opacity: 0; }
}

@keyframes flotar-diagonal-arriba {
    0%   { transform: translate(110vw, 110vh) rotate(10deg); opacity: 0; }
    5%   { opacity: 0.72; }
    95%  { opacity: 0.72; }
    100% { transform: translate(-80px, -80px) rotate(-10deg); opacity: 0; }
}

@keyframes bobbing {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}

@keyframes parpadeo {
    0%, 90%, 100% { opacity: 0.78; }
    95%            { opacity: 0.28; }
}

/* ---- Puntitos comida — color teal ---- */
@keyframes comida-aparecer {
    0%   { opacity: 0; transform: scale(0); }
    20%  { opacity: 0.60; transform: scale(1); }
    80%  { opacity: 0.60; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

.comida-punto {
    position: absolute;
    pointer-events: none;
    animation: comida-aparecer 4s ease-in-out infinite;
    /* Teal oscuro visible en fondo claro */
    filter: invert(0)
            sepia(1)
            saturate(5)
            hue-rotate(155deg)
            brightness(0.55);
    opacity: 0.6;
}