/* ========================================
   MELHORIAS SIMPLES - APATHANY
   CSS mínimo e específico sem conflitos
   ======================================== */

/* === OTIMIZAÇÃO DE AVATARES === */
.item-media-content,
.avatar {
    will-change: auto;
    background-color: rgba(120, 120, 120, 0.1);
}

/* Placeholder durante carregamento */
.item-media-content:not([style*="background-image"]) {
    background: linear-gradient(90deg, 
        rgba(120, 120, 120, 0.1) 25%, 
        rgba(120, 120, 120, 0.15) 50%, 
        rgba(120, 120, 120, 0.1) 75%);
    background-size: 200% 100%;
    animation: avatar-loading 1.5s infinite;
}

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

/* Melhor transição de carregamento */
.item-media-content {
    transition: opacity 0.3s ease;
}

.item-media-content[loading="lazy"] {
    opacity: 0;
    animation: fade-in 0.3s ease forwards;
}

@keyframes fade-in {
    to {
        opacity: 1;
    }
}

/* Otimização para avatares pequenos no menu */
.avatar.w-32 img,
.avatar.avatar-32 {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Prevenir layout shift */
.item-media {
    min-height: 100%;
    background-color: rgba(120, 120, 120, 0.05);
}

/* === MELHORIAS APENAS NOS CARDS DE MÚSICA === */
.item.r {
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.item.r:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* === MELHORIAS NOS BOTÕES DE PLAY === */
.btn-playpause {
    transition: all 0.2s ease;
}

.btn-playpause:hover {
    transform: scale(1.05);
}

/* === MELHORIAS NOS TÍTULOS === */
.item-title a {
    transition: color 0.2s ease;
}

.item-title a:hover {
    color: #ff0048 !important;
}

/* === MELHORIAS NOS OVERLAYS === */
.item-overlay {
    transition: opacity 0.2s ease;
}

.item:hover .item-overlay {
    opacity: 0.8;
}

/* === MELHORIAS NO HEADER === */
.app-header {
    transition: box-shadow 0.2s ease;
}

/* === MELHORIAS NOS LINKS DE NAVEGAÇÃO === */
.nav-link {
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #ff0048 !important;
}

/* === MELHORIAS NO PLAYER === */
.video-player-container {
    border-radius: 8px;
    overflow: hidden;
}

/* === MELHORIAS RESPONSIVAS === */
@media (max-width: 768px) {
    .item.r:hover {
        transform: none;
    }
    
    .btn-playpause:hover {
        transform: none;
    }
}