/* Animações para ornamentos decorativos */

/* Animação de flutuação com rotação suave */
@keyframes float-rotate {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(20px, -20px) rotate(90deg);
    }
    50% {
        transform: translate(0, -40px) rotate(180deg);
    }
    75% {
        transform: translate(-20px, -20px) rotate(270deg);
    }
}

/* Animação de pulso com escala */
@keyframes pulse-scale {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.8;
    }
}

/* Animação diagonal */
@keyframes diagonal-movement {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(50px, 50px) rotate(360deg);
    }
}

/* Animação de onda */
@keyframes wave-motion {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(45deg);
    }
    25% {
        transform: translateY(-30px) translateX(20px) rotate(90deg);
    }
    50% {
        transform: translateY(-50px) translateX(0) rotate(135deg);
    }
    75% {
        transform: translateY(-30px) translateX(-20px) rotate(180deg);
    }
}

/* Animação em forma de 8 */
@keyframes figure-eight {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(40px, -30px) rotate(90deg);
    }
    50% {
        transform: translate(0, -60px) rotate(180deg);
    }
    75% {
        transform: translate(-40px, -30px) rotate(270deg);
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

/* Animação de zoom pulsante */
@keyframes zoom-pulse {
    0%, 100% {
        transform: scale(0.8) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 0.9;
    }
}

/* Classes para os ornamentos */
.ornament {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

/* Quadrados - Paleta de amarelos e complementares */
.ornament-square {
    border-radius: 1rem;
}

.ornament-square-1 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 5%;
    background: rgba(255, 215, 0, 0.3); /* Amarelo dourado */
    animation: float-rotate 8s ease-in-out infinite;
}

.ornament-square-2 {
    width: 80px;
    height: 80px;
    top: 60%;
    left: 15%;
    background: rgba(138, 43, 226, 0.25); /* Violeta (complementar) */
    animation: pulse-scale 6s ease-in-out infinite;
    animation-delay: 1s;
}

.ornament-square-3 {
    width: 100px;
    height: 100px;
    bottom: 15%;
    right: 10%;
    background: rgba(255, 193, 7, 0.35); /* Amarelo âmbar */
    animation: diagonal-movement 10s ease-in-out infinite;
    animation-delay: 2s;
}

/* Triângulos - Amarelos e roxos */
.ornament-triangle {
    width: 0;
    height: 0;
    border-style: solid;
}

.ornament-triangle-1 {
    border-width: 0 60px 100px 60px;
    border-color: transparent transparent rgba(255, 235, 59, 0.3) transparent; /* Amarelo limão */
    top: 30%;
    right: 8%;
    animation: wave-motion 7s ease-in-out infinite;
}

.ornament-triangle-2 {
    border-width: 80px 50px 0 50px;
    border-color: rgba(147, 51, 234, 0.28) transparent transparent transparent; /* Roxo púrpura */
    bottom: 25%;
    left: 8%;
    animation: figure-eight 9s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* Formas em X - Amarelos vibrantes e roxos */
.ornament-x {
    width: 80px;
    height: 80px;
    position: relative;
}

.ornament-x::before,
.ornament-x::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    top: 100%;
    left: 0;
}

.ornament-x-1::before,
.ornament-x-1::after {
    background: rgba(255, 204, 0, 0.4); /* Amarelo ouro */
}

.ornament-x::before {
    transform: translateY(-50%) rotate(45deg);
}

.ornament-x::after {
    transform: translateY(-50%) rotate(-45deg);
}

.ornament-x-1 {
    top: 20%;
    left: 25%;
    animation: zoom-pulse 5s ease-in-out infinite;
}

.ornament-x-2::before,
.ornament-x-2::after {
    background: rgba(156, 39, 176, 0.35); /* Roxo magenta */
}

.ornament-x-2 {
    bottom: 30%;
    right: 20%;
    animation: float-rotate 7s ease-in-out infinite reverse;
    animation-delay: 2s;
}

/* Círculos decorativos - Mix de amarelos e roxos */
.ornament-circle {
    border-radius: 50%;
}

.ornament-circle-1 {
    width: 60px;
    height: 60px;
    top: 50%;
    right: 5%;
    background: rgba(253, 216, 53, 0.32); /* Amarelo suave */
    animation: pulse-scale 8s ease-in-out infinite;
    animation-delay: 3s;
}

.ornament-circle-2 {
    width: 90px;
    height: 90px;
    top: 5%;
    right: 30%;
    background: rgba(124, 58, 237, 0.3); /* Índigo violeta */
    animation: diagonal-movement 12s ease-in-out infinite;
}

/* Responsividade */
@media (max-width: 768px) {
    .ornament-square-1,
    .ornament-square-2,
    .ornament-square-3 {
        width: 60px;
        height: 60px;
    }
    
    .ornament-triangle-1 {
        border-width: 0 40px 70px 40px;
    }
    
    .ornament-triangle-2 {
        border-width: 60px 35px 0 35px;
    }
    
    .ornament-x,
    .ornament-x-1,
    .ornament-x-2 {
        width: 50px;
        height: 50px;
    }
    
    .ornament-circle-1 {
        width: 40px;
        height: 40px;
    }
    
    .ornament-circle-2 {
        width: 60px;
        height: 60px;
    }
}

/* ============================================
   CORES PERSONALIZADAS POR BANNER
   ============================================ */

/* Banner GEWEB - Amarelo #fdd777 e complementares */
.geweb .ornament-square-1 {
    background: rgba(253, 215, 119, 0.35);
}

.geweb .ornament-square-2 {
    background: rgba(138, 98, 49, 0.3); /* Marrom complementar */
}

.geweb .ornament-square-3 {
    background: rgba(253, 215, 119, 0.4);
}

.geweb .ornament-triangle-1 {
    border-color: transparent transparent rgba(253, 215, 119, 0.35) transparent;
}

.geweb .ornament-triangle-2 {
    border-color: rgba(138, 98, 49, 0.32) transparent transparent transparent;
}

.geweb .ornament-x-1::before,
.geweb .ornament-x-1::after {
    background: rgba(253, 215, 119, 0.4);
}

.geweb .ornament-x-2::before,
.geweb .ornament-x-2::after {
    background: rgba(138, 98, 49, 0.35);
}

.geweb .ornament-circle-1 {
    background: rgba(253, 215, 119, 0.33);
}

.geweb .ornament-circle-2 {
    background: rgba(138, 98, 49, 0.28);
}

/* Banner ALMOXARIFADO - Azul claro #bdf2f7 e complementares */
.almoxarifado .ornament-square-1 {
    background: rgba(189, 242, 247, 0.4);
}

.almoxarifado .ornament-square-2 {
    background: rgba(247, 189, 193, 0.35); /* Coral complementar */
}

.almoxarifado .ornament-square-3 {
    background: rgba(189, 242, 247, 0.45);
}

.almoxarifado .ornament-triangle-1 {
    border-color: transparent transparent rgba(189, 242, 247, 0.4) transparent;
}

.almoxarifado .ornament-triangle-2 {
    border-color: rgba(247, 189, 193, 0.38) transparent transparent transparent;
}

.almoxarifado .ornament-x-1::before,
.almoxarifado .ornament-x-1::after {
    background: rgba(189, 242, 247, 0.42);
}

.almoxarifado .ornament-x-2::before,
.almoxarifado .ornament-x-2::after {
    background: rgba(247, 189, 193, 0.37);
}

.almoxarifado .ornament-circle-1 {
    background: rgba(189, 242, 247, 0.38);
}

.almoxarifado .ornament-circle-2 {
    background: rgba(247, 189, 193, 0.33);
}

/* Banner LOTAGOVRH - Verde #92ceb0 e complementares */
.lotagovrh .ornament-square-1 {
    background: rgba(146, 206, 176, 0.4);
}

.lotagovrh .ornament-square-2 {
    background: rgba(206, 146, 176, 0.35); /* Rosa complementar */
}

.lotagovrh .ornament-square-3 {
    background: rgba(146, 206, 176, 0.45);
}

.lotagovrh .ornament-triangle-1 {
    border-color: transparent transparent rgba(146, 206, 176, 0.4) transparent;
}

.lotagovrh .ornament-triangle-2 {
    border-color: rgba(206, 146, 176, 0.38) transparent transparent transparent;
}

.lotagovrh .ornament-x-1::before,
.lotagovrh .ornament-x-1::after {
    background: rgba(146, 206, 176, 0.42);
}

.lotagovrh .ornament-x-2::before,
.lotagovrh .ornament-x-2::after {
    background: rgba(206, 146, 176, 0.37);
}

.lotagovrh .ornament-circle-1 {
    background: rgba(146, 206, 176, 0.38);
}

.lotagovrh .ornament-circle-2 {
    background: rgba(206, 146, 176, 0.33);
}

/* Banner NUTRIGOV - Roxo/Lilás rgb(172, 117, 160) e complementares */
.nutrigov .ornament-square-1 {
    background: rgba(172, 117, 160, 0.4);
}

.nutrigov .ornament-square-2 {
    background: rgba(117, 172, 129, 0.35); /* Verde complementar */
}

.nutrigov .ornament-square-3 {
    background: rgba(172, 117, 160, 0.45);
}

.nutrigov .ornament-triangle-1 {
    border-color: transparent transparent rgba(172, 117, 160, 0.4) transparent;
}

.nutrigov .ornament-triangle-2 {
    border-color: rgba(117, 172, 129, 0.38) transparent transparent transparent;
}

.nutrigov .ornament-x-1::before,
.nutrigov .ornament-x-1::after {
    background: rgba(172, 117, 160, 0.42);
}

.nutrigov .ornament-x-2::before,
.nutrigov .ornament-x-2::after {
    background: rgba(117, 172, 129, 0.37);
}

.nutrigov .ornament-circle-1 {
    background: rgba(172, 117, 160, 0.38);
}

.nutrigov .ornament-circle-2 {
    background: rgba(117, 172, 129, 0.33);
}

/* Banner CENSO - Bege/Dourado rgb(242, 205, 145) e complementares */
.censo .ornament-square-1 {
    background: rgba(242, 205, 145, 0.4);
}

.censo .ornament-square-2 {
    background: rgba(145, 182, 242, 0.35); /* Azul complementar */
}

.censo .ornament-square-3 {
    background: rgba(242, 205, 145, 0.45);
}

.censo .ornament-triangle-1 {
    border-color: transparent transparent rgba(242, 205, 145, 0.4) transparent;
}

.censo .ornament-triangle-2 {
    border-color: rgba(145, 182, 242, 0.38) transparent transparent transparent;
}

.censo .ornament-x-1::before,
.censo .ornament-x-1::after {
    background: rgba(242, 205, 145, 0.42);
}

.censo .ornament-x-2::before,
.censo .ornament-x-2::after {
    background: rgba(145, 182, 242, 0.37);
}

.censo .ornament-circle-1 {
    background: rgba(242, 205, 145, 0.38);
}

.censo .ornament-circle-2 {
    background: rgba(145, 182, 242, 0.33);
}