/* ========================================
   Componente: Barras Animadas
   ======================================== */

:root {
    --primary-red: #AD0505;
    --animation-duration-base: 4s;
}

.animated-section {
    flex: 1;
    background: #f8f9fa;
    position: relative;
    overflow: hidden;
}

.animated-bar {
    position: absolute;
    background: var(--primary-red);
    height: 58px;
    width: 0;
    animation: slideBarRandom ease-in-out infinite;
    border-radius: 0 4px 4px 0;
}

/* Distribuição das barras */
.animated-bar:nth-child(1) { 
    top: 5%; 
    animation-delay: 0s;
    animation-duration: 4.2s;
}

.animated-bar:nth-child(2) { 
    top: 15%; 
    animation-delay: 0.6s;
    animation-duration: 5.1s;
}

.animated-bar:nth-child(3) { 
    top: 25%; 
    animation-delay: 1.3s;
    animation-duration: 3.8s;
}

.animated-bar:nth-child(4) { 
    top: 35%; 
    animation-delay: 2.1s;
    animation-duration: 4.7s;
}

.animated-bar:nth-child(5) { 
    top: 45%; 
    animation-delay: 0.9s;
    animation-duration: 5.3s;
}

.animated-bar:nth-child(6) { 
    top: 55%; 
    animation-delay: 1.8s;
    animation-duration: 4.1s;
}

.animated-bar:nth-child(7) { 
    top: 65%; 
    animation-delay: 2.7s;
    animation-duration: 4.9s;
}

.animated-bar:nth-child(8) { 
    top: 75%; 
    animation-delay: 0.3s;
    animation-duration: 5.6s;
}

.animated-bar:nth-child(9) { 
    top: 85%; 
    animation-delay: 1.5s;
    animation-duration: 4.4s;
}

/* Animação das barras */
@keyframes slideBarRandom {
    0% {
        width: 0;
        left: 0;
    }
    25% {
        width: 45%;
        left: 0;
    }
    50% {
        width: 65%;
        left: 0;
    }
    75% {
        width: 50%;
        left: 0;
    }
    100% {
        width: 0;
        left: 0;
    }
}

/* ========================================
   Responsividade
   ======================================== */

@media (max-width: 768px) {
    .animated-section {
        height: 120px;
        flex: none;
    }
    
    .animated-bar {
        height: 25px;
    }
    
    /* Redistribuição para mobile */
    .animated-bar:nth-child(1) { top: 8%; }
    .animated-bar:nth-child(2) { top: 18%; }
    .animated-bar:nth-child(3) { top: 28%; }
    .animated-bar:nth-child(4) { top: 38%; }
    .animated-bar:nth-child(5) { top: 48%; }
    .animated-bar:nth-child(6) { top: 58%; }
    .animated-bar:nth-child(7) { top: 68%; }
    .animated-bar:nth-child(8) { top: 78%; }
    .animated-bar:nth-child(9) { top: 88%; }
}

/* ========================================
   Acessibilidade
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .animated-bar {
        animation: none;
        width: 50%;
        opacity: 0.6;
    }
}