/* Tema Carnaval - Elementos decorativos atrás do conteúdo (DashFera) */
/* Não altera cores de dados, fontes ou layout - apenas camada visual de fundo */

/* Camada sempre atrás de KPIs, tabelas, gráficos e conteúdo */
#carnival-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Padrão de confetes em pontos - mais denso e espalhado */
.carnival-confetti-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 107, 107, 0.6) 2.5px, transparent 2.5px),
        radial-gradient(circle at 90% 15%, rgba(78, 205, 196, 0.6) 2.5px, transparent 2.5px),
        radial-gradient(circle at 50% 80%, rgba(255, 230, 109, 0.6) 2.5px, transparent 2.5px),
        radial-gradient(circle at 25% 60%, rgba(159, 168, 218, 0.6) 2.5px, transparent 2.5px),
        radial-gradient(circle at 75% 40%, rgba(255, 154, 158, 0.6) 2.5px, transparent 2.5px),
        radial-gradient(circle at 15% 90%, rgba(129, 199, 132, 0.6) 2.5px, transparent 2.5px),
        radial-gradient(circle at 85% 70%, rgba(186, 104, 200, 0.6) 2.5px, transparent 2.5px),
        radial-gradient(circle at 5% 50%, rgba(251, 191, 36, 0.5) 2px, transparent 2px),
        radial-gradient(circle at 95% 35%, rgba(236, 72, 153, 0.5) 2px, transparent 2px),
        radial-gradient(circle at 50% 15%, rgba(139, 92, 246, 0.5) 2px, transparent 2px),
        radial-gradient(circle at 35% 75%, rgba(52, 211, 153, 0.5) 2px, transparent 2px),
        radial-gradient(circle at 65% 55%, rgba(239, 68, 68, 0.5) 2px, transparent 2px);
    background-size: 70px 65px, 80px 70px, 65px 80px, 75px 55px, 60px 75px, 72px 68px, 68px 72px, 55px 60px, 65px 58px, 58px 70px, 70px 62px, 62px 65px;
    background-position: 0 0, 15px 8px, 30px 20px, 45px 5px, 10px 35px, 25px 45px, 40px 15px, 5px 50px, 50px 10px, 20px 25px, 35px 40px, 55px 30px;
    animation: carnival-bg-drift 60s linear infinite;
}

@keyframes carnival-bg-drift {
    0% { background-position: 0 0, 15px 8px, 30px 20px, 45px 5px, 10px 35px, 25px 45px, 40px 15px, 5px 50px, 50px 10px, 20px 25px, 35px 40px, 55px 30px; }
    100% { background-position: 70px 65px, 95px 78px, 95px 100px, 120px 60px, 70px 110px, 97px 113px, 108px 87px, 60px 110px, 115px 68px, 78px 95px, 105px 102px, 117px 95px; }
}

/* Elementos fixos de carnaval (máscaras, maracas, etc.) - maiores e espalhados */
.carnival-decoration {
    position: absolute;
    font-size: 4rem;
    opacity: 0.5;
    user-select: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}

.carnival-decoration--float {
    animation: carnival-float 8s ease-in-out infinite;
}

.carnival-decoration--float-delay-1 { animation-delay: -1s; }
.carnival-decoration--float-delay-2 { animation-delay: -3s; }
.carnival-decoration--float-delay-3 { animation-delay: -5s; }
.carnival-decoration--float-delay-4 { animation-delay: -2s; }
.carnival-decoration--float-delay-5 { animation-delay: -6s; }

@keyframes carnival-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
}

/* Posicionamento dos ícones - espalhados por toda a tela */
.carnival-decoration--top-left    { top: 1%;  left: 2%; }
.carnival-decoration--top-right  { top: 2%;  right: 2%; }
.carnival-decoration--bottom-left { bottom: 3%; left: 2%; }
.carnival-decoration--bottom-right { bottom: 4%; right: 2%; }
.carnival-decoration--mid-left   { top: 45%; left: 0.5%; }
.carnival-decoration--mid-right  { top: 50%; right: 0.5%; }
.carnival-decoration--center-top { top: 18%; left: 48%; transform: translateX(-50%); }
.carnival-decoration--center-mid { top: 42%; left: 50%; transform: translateX(-50%); }
.carnival-decoration--center-low { bottom: 22%; left: 50%; transform: translateX(-50%); }
.carnival-decoration--spread-1  { top: 12%; left: 22%; }
.carnival-decoration--spread-2  { top: 35%; right: 18%; }
.carnival-decoration--spread-3  { bottom: 15%; left: 25%; }
.carnival-decoration--spread-4  { bottom: 35%; right: 22%; }

/* Serpentinas - mais longas, mais grossas, bem espalhadas */
.carnival-serpentine {
    position: absolute;
    height: 4px;
    border-radius: 4px;
    opacity: 0.5;
    transform-origin: left center;
}

.carnival-serpentine--1 { width: 25%; top: 8%; left: 0; background: linear-gradient(90deg, transparent, #ec4899); transform: rotate(-15deg); animation: carnival-serpentine 12s ease-in-out infinite; }
.carnival-serpentine--2 { width: 22%; top: 88%; right: 0; left: auto; background: linear-gradient(270deg, transparent, #8b5cf6); transform: rotate(10deg); animation: carnival-serpentine 14s ease-in-out infinite 1s; }
.carnival-serpentine--3 { width: 20%; bottom: 15%; right: 3%; background: linear-gradient(90deg, #fbbf24, transparent); transform: rotate(5deg); animation: carnival-serpentine 10s ease-in-out infinite 2s; }
.carnival-serpentine--4 { width: 18%; top: 55%; left: 0; background: linear-gradient(90deg, #34d399, transparent); transform: rotate(-8deg); animation: carnival-serpentine 11s ease-in-out infinite 0.5s; }
.carnival-serpentine--5 { width: 20%; top: 30%; right: 0; left: auto; background: linear-gradient(270deg, transparent, #f97316); transform: rotate(12deg); animation: carnival-serpentine 13s ease-in-out infinite 0.8s; }
.carnival-serpentine--6 { width: 22%; bottom: 45%; left: 0; background: linear-gradient(90deg, #a855f7, transparent); transform: rotate(-5deg); animation: carnival-serpentine 11s ease-in-out infinite 1.5s; }
.carnival-serpentine--7 { width: 15%; top: 70%; right: 5%; background: linear-gradient(270deg, #3b82f6, transparent); transform: rotate(8deg); animation: carnival-serpentine 10s ease-in-out infinite 2.2s; }
.carnival-serpentine--8 { width: 18%; bottom: 60%; right: 0; left: auto; background: linear-gradient(270deg, transparent, #ec4899); transform: rotate(-12deg); animation: carnival-serpentine 12s ease-in-out infinite 0.3s; }

@keyframes carnival-serpentine {
    0%, 100% { opacity: 0.4; transform: scaleX(0.8); }
    50% { opacity: 0.5; transform: scaleX(1.1); }
}