/* =================================================================== */
/*      MAKUMOTO FX (v2.0)
/*      Motor de Animaciones, Keyframes y Efectos Especiales
/* =================================================================== */

/* =================================================================== */
/*      1. KEYFRAMES GLOBALES (Librería de Movimiento)
/* =================================================================== */

/* Pulso de Estrella / Éxito */
@keyframes star-pulse { 
    0%, 100% { opacity: 1; transform: scale(1); color: #fff; text-shadow: 0 0 5px #fff; } 
    50% { opacity: 0.8; transform: scale(1.2); color: var(--color-primary); text-shadow: 0 0 15px var(--color-primary); } 
}

/* Latido de Corazón (Salud/Like) */
@keyframes heart-beat-eternal { 
    0% { transform: scale(1); } 
    15% { transform: scale(1.25); color: var(--color-danger); } 
    30% { transform: scale(1); } 
    45% { transform: scale(1.25); color: var(--color-danger); } 
    100% { transform: scale(1); } 
}

/* Dinero Saltando (Gana) */
@keyframes money-bounce { 
    0%, 100% { transform: translateY(0); color: #fff; } 
    50% { transform: translateY(-3px); color: #2ecc71; text-shadow: 0 0 10px #2ecc71; } 
}

/* Culebreo de la BOA */
@keyframes snake-wiggle { 
    0% { filter: hue-rotate(0deg); transform: rotate(0deg); } 
    25% { transform: rotate(-10deg); } 
    50% { filter: hue-rotate(90deg); transform: rotate(10deg); } 
    75% { transform: rotate(-5deg); } 
    100% { filter: hue-rotate(0deg); transform: rotate(0deg); } 
}

/* Carga Esqueleto (Skeleton Loading) */
@keyframes skeleton-loading { 
    0% { background-color: rgba(255,255,255,0.05); } 
    50% { background-color: rgba(255,255,255,0.15); } 
    100% { background-color: rgba(255,255,255,0.05); } 
}

/* Efecto de Respiración Neón (Botón Crear) */
@keyframes neon-breathing {
    0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); border-color: var(--color-primary); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 10px #fff; border-color: #fff; }
    100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); border-color: var(--color-primary); }
}

/* Iconos Flotantes (Magazine) */
@keyframes mag-float { 
    0%, 100% { transform: translateY(0) rotate(0deg); } 
    50% { transform: translateY(-3px) rotate(-5deg); color: var(--color-primary); } 
}

/* Marquesina de Texto (Ticker) */
@keyframes ticker-slide { 
    0% { transform: translateX(100%); } 
    100% { transform: translateX(-100%); } 
}

/* =================================================================== */
/*      2. APLICACIÓN DE ANIMACIONES A ELEMENTOS
/* =================================================================== */

/* Iconos de la Barra Superior */
.comando-btn i.fa-star { animation: star-pulse 3s infinite ease-in-out; }
.comando-btn i.fa-money-bill-wave { animation: money-bounce 2s infinite ease-in-out; }
.comando-btn i.fa-staff-snake { animation: snake-wiggle 5s infinite linear; }

/* Iconos de la Barra Inferior */
.bottom-nav-btn i.fa-heart-pulse { animation: heart-beat-eternal 1.5s infinite ease-in-out; }

/* Botón Crear Activo */
#create-action-btn.pulsado {
    animation: neon-breathing 1.5s infinite ease-in-out;
}

/* Texto de la Tribu */
.nexus-ticker {
    animation: ticker-slide 20s linear infinite;
}

/* =================================================================== */
/*      3. EFECTOS ESPECIALES (OVERLAYS)
/* =================================================================== */

/* Efecto PUM! (Texto gigante explosivo) */
.pum-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; 
    z-index: var(--z-god);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.1s ease-out, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pum-overlay.active {
    opacity: 1;
    transform: scale(1.5);
}

.pum-text {
    font-size: 6rem;
    font-weight: 900;
    color: var(--color-primary);
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 0 0 20px rgba(255, 215, 0, 0.8);
    font-family: 'Impact', sans-serif;
    transform: rotate(-10deg);
    text-transform: uppercase;
}

/* Efecto Tragamonedas (Sacudida al recargar feed) */
.slot-machine-shuffling {
    animation: slot-machine-shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    filter: blur(1px); 
}

@keyframes slot-machine-shake {
    0% { transform: translateY(0); }
    10% { transform: translateY(-50px); }
    50% { transform: translateY(50px); }
    100% { transform: translateY(0); }
}

/* =================================================================== */
/*      4. SKELETON SCREENS (PLACEHOLDERS DE CARGA)
/* =================================================================== */

.skeleton { 
    animation: skeleton-loading 1.5s infinite ease-in-out; 
    background-color: #222; 
    border-radius: 4px; 
    display: block; 
}

.skeleton-card { 
    width: 100vw; height: 100dvh; 
    position: relative; background: #000; 
}

.skeleton-avatar { 
    width: 45px; height: 45px; 
    border-radius: 50%; background: #333; 
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-text { 
    height: 15px; width: 70%; 
    margin: 5px 0; border-radius: 4px; background: #333; 
    animation: skeleton-loading 1.5s infinite;
}
/* =========================================
   SKELETON SHIMMER (Carga de Lujo)
   ========================================= */

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* Sobrescribimos la clase .skeleton anterior */
.skeleton { 
    background-color: #111; /* Color base oscuro */
    background-image: linear-gradient(
        to right, 
        #111 0%, 
        #222 20%, /* El brillo es un gris un poco más claro */
        #111 40%, 
        #111 100%
    );
    background-repeat: no-repeat;
    background-size: 2000px 100%; 
    animation: shimmer 1.5s infinite linear; /* Movimiento fluido constante */
    border-radius: 4px; 
    display: block;
}

/* Ajustes específicos para el avatar y texto del skeleton */
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-text { height: 12px; margin-bottom: 8px; border-radius: 6px; }
/* =========================================
   BIG HEART POP (Doble Tap)
   ========================================= */
.big-heart-animation {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
    pointer-events: none;
    z-index: 50;
    animation: heartPop 0.8s ease-out forwards;
}

@keyframes heartPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    30% { transform: translate(-50%, -50%) scale(0.9); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}