/* Estilos específicos da seção Hero */
#hero {
    position: relative;
    z-index: 1;
}

/* Hero Content */
.hero-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Círculos decorativos */
.hero-circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.hero-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.circle-1 {
    top: 10%;
    right: 20%;
    width: 300px;
    height: 300px;
    animation: float 8s ease-in-out infinite alternate;
}

.circle-2 {
    bottom: 15%;
    left: 5%;
    width: 150px;
    height: 150px;
    animation: float 12s ease-in-out infinite alternate-reverse;
}

.circle-3 {
    top: 40%;
    right: 35%;
    width: 80px;
    height: 80px;
    animation: float 6s ease-in-out infinite alternate;
}

/* Imagem do Hero */
.hero-image-wrapper {
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.hero-img {
    height: auto;
    max-height: 110%;
    max-width: 100%;
    object-fit: contain;
    transform-origin: bottom center;
    animation: heroFloat 6s ease-in-out infinite alternate;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.25));
    z-index: 5;
}

.hero-image-backdrop {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0) 70%
    );
    z-index: 1;
}

/* Animações */
@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(20px) rotate(5deg);
    }
}

@keyframes heroFloat {
    0% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(-15px) scale(1.02);
    }
}

/* Media Queries */
@media (max-width: 991.98px) {
    .hero-image-wrapper {
        height: 450px;
        margin-top: 20px;
    }
    
    .hero-img {
        max-height: 450px;
    }
    
    .hero-circle {
        opacity: 0.5;
    }
}

@media (max-width: 767.98px) {
    .hero-image-wrapper {
        height: 400px;
    }
    
    .hero-img {
        max-height: 400px;
    }
}

@media (max-width: 575.98px) {
    .hero-image-wrapper {
        height: 350px;
    }
    
    .hero-img {
        max-height: 350px;
    }
    
    .circle-1 {
        width: 150px;
        height: 150px;
    }
    
    .circle-2, .circle-3 {
        display: none;
    }
}