{% load wagtailcore_tags wagtailimages_tags %}

<section class="timeline-section {{ value.cor_fundo }} {{ value.espacamento_vertical }}
                {% if value.mostrar_decoracao %}timeline-decorated{% endif %}
                {% if value.animacao_entrada %}timeline-animated{% endif %}">
    
    {% if value.mostrar_decoracao %}
    <!-- Elementos Decorativos -->
    <div class="timeline-decoration">
        <div class="decoration-circle decoration-circle-1"></div>
        <div class="decoration-circle decoration-circle-2"></div>
        <div class="decoration-line decoration-line-1"></div>
        <div class="decoration-line decoration-line-2"></div>
    </div>
    {% endif %}
    
    <div class="{{ value.container_class }}">
        <div class="row justify-content-center">
            <div class="col-12 col-xl-10">
                {% include_block value.timeline %}
            </div>
        </div>
    </div>
</section>

<style>
/* Estilos do Container */
.timeline-section {
    position: relative;
    overflow: hidden;
}

.timeline-decorated {
    position: relative;
}

/* Elementos Decorativos */
.timeline-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(40, 167, 69, 0.1));
    animation: float 6s ease-in-out infinite;
}

.decoration-circle-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    right: -100px;
    animation-delay: 0s;
}

.decoration-circle-2 {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: -75px;
    animation-delay: 3s;
}

.decoration-line {
    position: absolute;
    background: linear-gradient(45deg, rgba(0, 102, 204, 0.05), rgba(40, 167, 69, 0.05));
    border-radius: 4px;
}

.decoration-line-1 {
    width: 300px;
    height: 2px;
    top: 30%;
    right: 0;
    transform: rotate(45deg);
}

.decoration-line-2 {
    width: 200px;
    height: 2px;
    bottom: 40%;
    left: 0;
    transform: rotate(-45deg);
}

/* Animação Float */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

/* Container com maior z-index */
.timeline-section .container,
.timeline-section .container-fluid,
.timeline-section .container-sm,
.timeline-section .container-lg {
    position: relative;
    z-index: 1;
}

/* Cores de fundo específicas */
.timeline-section.bg-light {
    background-color: #f8f9fa !important;
}

.timeline-section.bg-white {
    background-color: #ffffff !important;
}

.timeline-section.bg-primary {
    background-color: var(--bs-primary, #0066cc) !important;
    color: white;
}

.timeline-section.bg-primary .timeline-title {
    color: white;
}


.timeline-section.bg-secondary {
    background-color: var(--bs-secondary, #6c757d) !important;
    color: white;
}

.timeline-section.bg-dark {
    background-color: var(--bs-dark, #212529) !important;
    color: white;
}

/* Responsividade das decorações */
@media (max-width: 768px) {
    .decoration-circle-1 {
        width: 100px;
        height: 100px;
        right: -50px;
    }
    
    .decoration-circle-2 {
        width: 80px;
        height: 80px;
        left: -40px;
    }
    
    .decoration-line-1,
    .decoration-line-2 {
        width: 150px;
    }
}

@media (max-width: 576px) {
    .timeline-decoration {
        display: none;
    }
}
</style>