/* =================================================================== */
/*      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: 100%; /* Ajuste a contenedor */
    min-height: 200px; /* Altura mínima segura */
    position: relative; 
    background-color: transparent; /* FIX: Usar transparent para ver la animación .skeleton */
}

.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 { 
    /* Fondo base gris oscuro visible sobre negro */
    background-color: #1a1a1a !important; 
    /* Gradiente para el brillo */
    background-image: linear-gradient(
        90deg, 
        #1a1a1a 0%, 
        #333 50%, 
        #1a1a1a 100%
    ) !important;
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    display: block;
}

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

/* 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; }
}
/* ========================================================= */
/*   ACHIEVEMENT UNLOCKED (ESTILO CONSOLA)                   */
/* ========================================================= */

.achievement-popup {
    position: fixed;
    bottom: 40px; /* Un poco arriba de la barra inferior */
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    width: 320px;
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid #FFD700;
    border-radius: 50px; /* Forma de cápsula */
    display: flex;
    align-items: center;
    padding: 10px 20px;
    z-index: 100000;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.achievement-popup.show { transform: translateX(-50%) translateY(0); }

.ach-icon-circle {
    width: 45px;
    height: 45px;
    background: #FFD700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: #000;
    font-size: 1.4rem;
    box-shadow: 0 0 15px #FFD700;
}

.ach-text-group { flex: 1; }
.ach-title { color: #fff; font-weight: 800; font-size: 0.85rem; letter-spacing: 1px; margin: 0; }
.ach-desc { color: #FFD700; font-weight: 400; font-size: 0.75rem; margin: 0; }

/* --- DAILY TIPS CAROUSEL --- */
.tips-container-pro {
    background: #050505; width: 90%; max-width: 350px;
    border-radius: 24px; border: 1px solid #222;
    padding: 20px; text-align: center; box-shadow: 0 0 40px rgba(0,0,0,0.8);
}
.tips-header { display: flex; justify-content: space-between; color: #555; font-size: 0.7rem; font-weight: 800; margin-bottom: 20px; }
.close-tips { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; }
.tip-card-item { display: none; animation: slideFade 0.4s ease-out; }
.tip-card-item.active { display: block; }
.tip-icon-circle { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.tip-card-item h3 { color: #fff; font-size: 1.1rem; margin-bottom: 10px; font-family: 'Orbitron'; }
.tip-card-item p { color: #aaa; font-size: 0.85rem; line-height: 1.5; }
.tips-dots { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.t-dot { width: 6px; height: 6px; border-radius: 50%; background: #222; transition: 0.3s; }
.t-dot.active { background: #00f3ff; box-shadow: 0 0 10px #00f3ff; width: 15px; border-radius: 4px; }

@keyframes slideFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- PARALLAX PROFILE --- */
.parallax-banner {
    transform-origin: top;
    will-change: transform;
}
/* ========================================================= */
/*   RETWEET NEON HIGHLIGHT (ESTILO ELITE)                   */
/* ========================================================= */

.retweet-neon-card {
    position: relative;
    z-index: 1;
    margin: 12px 0;
    border-radius: 16px !important;
    
    /* EFECTO VIDRIO ESMERILADO (FROSTED GLASS) */
    background: rgba(255, 215, 0, 0.03) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    
    /* BORDE DE LUZ Y SOMBRA DE PROFUNDIDAD */
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8), 
                inset 0 0 15px rgba(255, 215, 0, 0.05) !important;
}

/* EL RAYO LATERAL DE IDENTIFICACIÓN */
.retweet-neon-card::before {
    content: '';
    position: absolute;
    left: 0; top: 10%; height: 80%;
    width: 3px;
    background: #FFD700;
    box-shadow: 0 0 10px #FFD700;
    border-radius: 0 4px 4px 0;
}

/* CURSOR DE ESCRITURA (Para Lyra) */
.typing-cursor::after {
    content: "|";
    animation: blink-cursor 0.8s infinite;
    color: #ab71ed;
    font-weight: bold;
    margin-left: 2px;
}

@keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* --- CINEMATIC VIDEO ZOOM --- */
@keyframes cinematic-zoom {
    from { transform: scale(1.2); filter: blur(10px); }
    to { transform: scale(1); filter: blur(0); }
}

.tv-mode .tv-video-fg {
    animation: cinematic-zoom 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    will-change: transform, filter;
}

.tv-mode .tv-layout-overlay {
    animation: fadeIn 1s ease-in-out forwards;
}
/* --- RACHA DE HIELO (Menos de 7 días) --- */
.streak-ice {
    border: 2px solid #00f3ff !important;
    box-shadow: 0 0 10px #00f3ff, inset 0 0 10px #00f3ff !important;
    animation: ice-breathe 3s infinite ease-in-out;
}

@keyframes ice-breathe {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 2px #00f3ff); }
    50% { filter: brightness(1.4) drop-shadow(0 0 8px #00f3ff); }
}

/* --- RACHA DE FUEGO (7+ días) --- */
.streak-fire {
    border: 2px solid #ff4500 !important;
    box-shadow: 0 0 15px #ff4500, inset 0 0 15px #ff4500 !important;
    animation: fire-burn 1.5s infinite alternate;
}

@keyframes fire-burn {
    from { filter: saturate(1) brightness(1) drop-shadow(0 0 5px #ff4500); }
    to { filter: saturate(2) brightness(1.3) drop-shadow(0 0 15px #ff8c00); transform: scale(1.02); }
}
/* --- DAILY TIPS CAROUSEL STYLES --- */
.tips-container-pro {
    background: #050505; width: 90%; max-width: 350px;
    border-radius: 28px; border: 1px solid #222;
    padding: 25px; text-align: center; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.tips-header { display: flex; justify-content: space-between; color: #555; font-size: 0.7rem; font-weight: 800; margin-bottom: 25px; letter-spacing: 1px; }
.close-tips { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
.tip-card-item { display: none; animation: slideFadeUp 0.4s ease-out; }
.tip-card-item.active { display: block; }
.tip-icon-circle { width: 65px; height: 65px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; border: 1px solid rgba(255,255,255,0.05); }
.tip-card-item h3 { color: #fff; font-size: 1.2rem; margin: 0 0 10px; font-family: 'Orbitron'; }
.tip-card-item p { color: #888; font-size: 0.9rem; line-height: 1.5; font-family: 'Poppins'; }
.tips-dots { display: flex; justify-content: center; gap: 8px; margin-top: 25px; }
.t-dot { width: 6px; height: 6px; border-radius: 50%; background: #222; transition: 0.3s; }
.t-dot.active { background: #00f3ff; box-shadow: 0 0 10px #00f3ff; width: 18px; border-radius: 4px; }

@keyframes slideFadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }