/* Estilos para a animação suave de troca de avatar */

/* Container principal */
.avatar-hero-container {
    position: relative;
    transition: transform 0.5s ease;
    overflow: visible;
    display: flex; /* Para centralizar o conteúdo */
    justify-content: center; /* Para centralizar o conteúdo */
    align-items: center; /* Para centralizar o conteúdo */
    margin: 0 auto; /* Centraliza horizontalmente */
    margin-left: 40px; /* Mais espaço à esquerda para o avatar extremamente grande */
    padding: 15px; /* Adiciona mais espaço interno */
    z-index: 5; /* Garantir que fique acima de outros elementos */
    /* Não definimos largura/altura fixas para respeitar o CSS original do site */
}

/* Wrapper para manter as duas imagens sobrepostas */
.avatar-images-wrapper {
    position: relative;
    width: 380px; /* Aumentando para um tamanho extremamente grande e impactante */
    height: 380px; /* Aumentando para um tamanho extremamente grande e impactante */
    border-radius: 50%;
    overflow: hidden;
}

/* Estilo base para ambas as fotos */
.avatar-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

/* Estilização da imagem em si */
.avatar-hero {
    width: 380px; /* Tamanho extremamente grande para máximo destaque */
    height: 380px; /* Tamanho extremamente grande para máximo destaque */
    max-width: 100%; /* Para manter responsividade */
    object-fit: cover;
    border-radius: 50%; /* Mantém a forma circular */
}

/* Imagem primária sempre visível por padrão */
#avatar-picture-primary {
    opacity: 1;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    transform: scale(1);
    filter: brightness(1);
}

/* Imagem secundária oculta por padrão */
#avatar-picture-secondary {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    transform: scale(0.9);
    filter: brightness(1.2);
}

/* No hover, a imagem primária fica transparente e a secundária aparece com efeito */
.avatar-hero-container:hover #avatar-picture-primary {
    opacity: 0;
    transform: scale(1.1);
    filter: brightness(0.8);
}

.avatar-hero-container:hover #avatar-picture-secondary {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.1);
}

/* Efeito de elevação no hover */
.avatar-hero-container:hover {
    transform: translateY(-5px);
}

/* Efeito de brilho ao redor da imagem */
.avatar-hero-container::after {
    content: '';
    position: absolute;
    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.8s ease;
    z-index: -1;
    opacity: 0;
    box-shadow: 0 0 0 rgba(255, 137, 180, 0);
}

.avatar-hero-container:hover::after {
    opacity: 1;
    background: linear-gradient(45deg, #ff89b4, #ab76ff, #89fffd, #ff89b4);
    background-size: 300% 300%;
    filter: blur(18px);
    box-shadow: 0 8px 35px rgba(255, 137, 180, 0.8);
    animation: glow-pulse 3s infinite alternate, gradient-shift 8s infinite linear;
}

/* Animação de pulso suave no brilho */
@keyframes glow-pulse {
    0% {
        filter: blur(18px);
        opacity: 0.6;
    }
    100% {
        filter: blur(25px);
        opacity: 0.85;
    }
}

/* Animação de mudança gradual do gradiente */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Suporte para dispositivos touch */
.touch-active #avatar-picture-primary {
    opacity: 0;
}

.touch-active #avatar-picture-secondary {
    opacity: 1;
}

/* Assegurando que o estilo será aplicado corretamente em dispositivos móveis */
@media (hover: none) {
    .avatar-hero-container:hover #avatar-picture-primary {
        opacity: 1; /* Desativa o efeito hover em dispositivos touch */
    }
    
    .avatar-hero-container:hover #avatar-picture-secondary {
        opacity: 0; /* Desativa o efeito hover em dispositivos touch */
    }
}

/* Regras para telas menores */
@media (max-width: 1200px) {
    .avatar-images-wrapper {
        width: 340px; /* Tamanho para desktops menores */
        height: 340px;
    }
    
    .avatar-hero {
        width: 340px;
        height: 340px;
    }
}

@media (max-width: 992px) {
    .avatar-images-wrapper {
        width: 300px; /* Tamanho médio para tablets */
        height: 300px;
    }
    
    .avatar-hero {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .avatar-images-wrapper {
        width: 280px; /* Tamanho menor para celulares maiores */
        height: 280px;
    }
    
    .avatar-hero {
        width: 280px;
        height: 280px;
    }
    
    .avatar-hero-container {
        margin: 20px auto; /* Centralizar em telas menores */
    }
}

@media (max-width: 576px) {
    .avatar-images-wrapper {
        width: 260px; /* Tamanho ainda menor para celulares pequenos */
        height: 260px;
    }
    
    .avatar-hero {
        width: 260px;
        height: 260px;
    }
}