/* ============================================
   FILTRO DE FOTOS DE USUÁRIOS
   Aplica efeito preto e branco com tons de verde
   ============================================ */

:root {
    --filter-green: #35f4b2;
    --filter-green-rgb: 53, 244, 178;
}

/* ===== FILTRO PRINCIPAL PARA FOTOS DE USUÁRIOS ===== */
.user-photo-filter {
    /* Converte para escala de cinza e adiciona tonalidade verde */
    filter: 
        grayscale(100%)                    /* Converte para preto e branco */
        brightness(1.1)                    /* Aumenta levemente o brilho */
        contrast(1.15)                     /* Aumenta o contraste */
        sepia(0.3)                         /* Adiciona leve tom sépia como base */
        hue-rotate(100deg)                 /* Rotaciona para tons de verde */
        saturate(0.8);                     /* Controla a saturação do verde */
    
    transition: filter 0.4s ease;
}

/* Efeito hover - remove o filtro e mostra a foto original */
.user-photo-filter:hover {
    filter: 
        grayscale(0%)
        brightness(1)
        contrast(1)
        sepia(0)
        hue-rotate(0deg)
        saturate(1);
}

/* ===== VARIAÇÃO COM BORDA VERDE ===== */
.user-photo-filter-bordered {
    filter: 
        grayscale(100%)
        brightness(1.1)
        contrast(1.15)
        sepia(0.3)
        hue-rotate(100deg)
        saturate(0.8);
    
    border: 3px solid var(--filter-green) !important;
    box-shadow: 
        0 0 15px rgba(var(--filter-green-rgb), 0.3),
        inset 0 0 20px rgba(var(--filter-green-rgb), 0.1);
    
    transition: all 0.4s ease;
}

.user-photo-filter-bordered:hover {
    filter: 
        grayscale(0%)
        brightness(1)
        contrast(1)
        sepia(0)
        hue-rotate(0deg)
        saturate(1);
    
    box-shadow: 
        0 0 25px rgba(var(--filter-green-rgb), 0.5),
        inset 0 0 30px rgba(var(--filter-green-rgb), 0.15);
    
    transform: scale(1.05);
}

/* ===== VARIAÇÃO MAIS INTENSA (MAIS VERDE) ===== */
.user-photo-filter-intense {
    filter: 
        grayscale(100%)
        brightness(1.15)
        contrast(1.2)
        sepia(0.5)                         /* Mais sépia para base mais quente */
        hue-rotate(95deg)                  /* Ajuste fino do verde */
        saturate(1.2);                     /* Mais saturação = mais verde */
    
    transition: filter 0.4s ease;
}

.user-photo-filter-intense:hover {
    filter: 
        grayscale(0%)
        brightness(1)
        contrast(1)
        sepia(0)
        hue-rotate(0deg)
        saturate(1);
}

/* ===== VARIAÇÃO SUTIL (MENOS VERDE) ===== */
.user-photo-filter-subtle {
    filter: 
        grayscale(100%)
        brightness(1.08)
        contrast(1.1)
        sepia(0.15)                        /* Menos sépia */
        hue-rotate(105deg)
        saturate(0.5);                     /* Menos saturação = menos verde */
    
    transition: filter 0.4s ease;
}

.user-photo-filter-subtle:hover {
    filter: 
        grayscale(0%)
        brightness(1)
        contrast(1)
        sepia(0)
        hue-rotate(0deg)
        saturate(1);
}

/* ===== VARIAÇÃO SEM HOVER (SEMPRE COM FILTRO) ===== */
.user-photo-filter-permanent {
    filter: 
        grayscale(100%)
        brightness(1.1)
        contrast(1.15)
        sepia(0.3)
        hue-rotate(100deg)
        saturate(0.8);
}

/* ===== VARIAÇÃO COM OVERLAY VERDE ===== */
.user-photo-overlay {
    position: relative;
    overflow: hidden;
}

.user-photo-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg, 
        rgba(var(--filter-green-rgb), 0.3) 0%, 
        rgba(var(--filter-green-rgb), 0.1) 100%
    );
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s ease;
}

.user-photo-overlay img {
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.4s ease;
}

.user-photo-overlay:hover::before {
    opacity: 0;
}

.user-photo-overlay:hover img {
    filter: grayscale(0%) contrast(1);
}

/* ===== CLASSES AUXILIARES ===== */

/* Desabilita o efeito hover em dispositivos mobile */
@media (max-width: 768px) {
    .user-photo-filter:hover,
    .user-photo-filter-bordered:hover,
    .user-photo-filter-intense:hover,
    .user-photo-filter-subtle:hover {
        /* Mantém o filtro em mobile */
        filter: 
            grayscale(100%)
            brightness(1.1)
            contrast(1.15)
            sepia(0.3)
            hue-rotate(100deg)
            saturate(0.8);
        
        transform: none;
    }
}

/* ===== ANIMAÇÃO DE ENTRADA ===== */
@keyframes fadeInFilter {
    from {
        opacity: 0;
        filter: 
            grayscale(100%)
            brightness(0.8)
            contrast(1)
            sepia(0)
            hue-rotate(0deg)
            saturate(0);
    }
    to {
        opacity: 1;
        filter: 
            grayscale(100%)
            brightness(1.1)
            contrast(1.15)
            sepia(0.3)
            hue-rotate(100deg)
            saturate(0.8);
    }
}

.user-photo-filter-animated {
    animation: fadeInFilter 0.8s ease-out forwards;
}

/* ===== MODO ESCURO ===== */
@media (prefers-color-scheme: dark) {
    .user-photo-filter,
    .user-photo-filter-bordered,
    .user-photo-filter-intense,
    .user-photo-filter-subtle {
        /* Aumenta o brilho em modo escuro para melhor visibilidade */
        filter: 
            grayscale(100%)
            brightness(1.2)
            contrast(1.2)
            sepia(0.3)
            hue-rotate(100deg)
            saturate(0.8);
    }
}