/*============================================================================*/
/*--------------------------- animated-wave-footer --------------------------*/
/* Baseado no componente "Animated Wave Footer" do 21st.dev (versão React com
   Tailwind/shadcn) - reescrito em CSS/SVG puro pro padrão deste projeto
   (Blade + CSS modular). Decorativo (aria-hidden) - não afeta leitura de tela
   nem layout, só uma faixa de ondas animada marcando a transição entre 2
   seções de cores diferentes.

   Partes genéricas (reaproveitadas por qualquer aplicação desta onda):
   .cms-wave-trilha, .cms-wave-svg, @keyframes cms-wave-deslocar e o
   prefers-reduced-motion no final. Cada aplicação específica define sua
   própria classe de posição (altura/margem, ex.: .cms-wave-footer) e de cor
   (fill/opacidade, ex.: .cms-wave-footer-onda-*) - documentado junto do
   bloco abaixo.

   Só existe a aplicação do footer por enquanto - a tentativa de aplicar
   embaixo de includes/components/ultrawide_video.blade.php foi revertida a
   pedido do usuário (dava problema em sites onde a cor de fundo logo depois
   do vídeo não batia com a onda, criando uma faixa reta visível). */

.cms-wave-trilha {
    display: flex;
    width: 200%;
    height: 100%;
    animation: cms-wave-deslocar 16s linear infinite;
    will-change: transform;
}

.cms-wave-svg {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    display: block;
}

@keyframes cms-wave-deslocar {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Movimento é só decoração - sem perda de informação ao desligar */
@media (prefers-reduced-motion: reduce) {
    .cms-wave-trilha {
        animation: none;
    }
}

/*----------------------------------------------------------------------------*/
/* Aplicação 1: topo do footer (resources/views/ecotowers/includes/footer.blade.php).
   Cor igual à do PRÓPRIO background do footer (#001c42, mesmo valor de
   ".footer"/".footer-copyright" em assets/css/style.css do ecotowers) - só a
   opacidade muda entre as 2 camadas, pra dar profundidade sem introduzir uma
   cor nova. Se o background do footer mudar, atualizar aqui também.

   Fica como irmão logo ANTES de <footer> (não dentro dela) - só assim a
   crista da onda consegue subir pra área clara acima; dentro do footer ela
   ficaria cortada pelo overflow:hidden de ".footer" (style.css). ".footer"
   também tem margin-top:60px (style.css) - o margin-bottom negativo abaixo
   cancela exatamente essa margem, senão sobrava um vão em branco entre a
   onda e o footer de verdade. Se o margin-top de ".footer" mudar, atualizar
   aqui também. */

.cms-wave-footer {
    position: relative;
    width: 100%;
    height: 110px;
    margin-bottom: -60px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.cms-wave-footer-onda-1 {
    fill: #001c42;
    opacity: .5;
}

.cms-wave-footer-onda-2 {
    fill: #001c42;
    opacity: 1;
}