/* Header Animado com Gradiente #00AADD */
#header.header-scrolled,
#header.header-inner-pages {
    background: linear-gradient(
        45deg,
        #00AADD 0%,
        #0099CC 15%,
        #00BBEE 30%,
        #00AADD 45%,
        #0088BB 60%,
        #00CCFF 75%,
        #00AADD 90%,
        #0099CC 100%
    ) !important;
    background-size: 400% 400% !important;
    animation: gradientFlow 8s ease-in-out infinite !important;
    overflow: hidden !important;
}

/* Animação do gradiente */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Efeito de brilho sutil */
#header.header-scrolled::before,
#header.header-inner-pages::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: shine 6s ease-in-out infinite;
    z-index: 1;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

/* Garantir que o conteúdo fique acima do efeito */
#header .container {
    position: relative !important;
    z-index: 2 !important;
}

/* Responsividade - Efeito mais sutil em mobile */
@media (max-width: 768px) {
    #header.header-scrolled,
    #header.header-inner-pages {
        animation-duration: 12s !important;
    }
    
    #header.header-scrolled::before,
    #header.header-inner-pages::before {
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.05),
            transparent
        );
        animation-duration: 8s;
    }
}