/* ============================================================
   LOGO.CSS — Estilos del logo PZVerse
   Patricia Alonso · patriciaalonso.es
   ============================================================ */

/* ============================================================
   LOGO DENTRO DEL SIDEBAR — desktop
   El posicionamiento lo gestiona el sidebar en menu.css
   ============================================================ */
.logo-pz {
    display: block;
    width: 70px;
    height: auto;
    text-decoration: none;
}

.logo-pz img {
    width: 70px;
    height: auto;
    transition: filter 0.3s ease, transform 0.3s ease;
    filter: drop-shadow(0 0 6px rgba(123, 95, 224, 0.4));
}

.logo-pz:hover img {
    transform: scale(1.08);
    filter: drop-shadow(0 0 12px rgba(123, 95, 224, 0.8));
}

/* ============================================================
   ESTADOS ONLINE / OFFLINE — páginas de Twitch
   ============================================================ */
.online-patz .logo-pz img {
    filter: drop-shadow(0 0 10px #7b5fe0);
    animation: parpadeo 1.2s infinite;
}

.offline-patz .logo-pz img {
    filter: drop-shadow(0 0 5px #7b5fe0);
}

.online-zhoomn .logo-pz img {
    filter: drop-shadow(0 0 10px #00c8ff);
    animation: parpadeo 1.2s infinite;
}

.offline-zhoomn .logo-pz img {
    filter: drop-shadow(0 0 5px #00c8ff);
}

/* ============================================================
   ANIMACIÓN PARPADEO
   ============================================================ */
@keyframes parpadeo {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

/* ============================================================
   RESPONSIVE MÓVIL
   En móvil el logo va fijo arriba (sin sidebar)
   ============================================================ */
@media (max-width: 768px) {
    .logo-pz {
        position: fixed;
        top: 10px;
        left: 50px;
        z-index: 9998;
        width: 40px;
    }

    .logo-pz img {
        width: 40px;
    }
}