/* ==========================================================================
   Timeline Section Styles
   ========================================================================== */

.timeline-section {
    position: relative;
    padding: var(--space-5xl) var(--space-2xl);
    background-color: var(--color-white);
    z-index: 1;
}

/* Wrapper that holds timeline + CTA in a controlled layout */
.timeline-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.timeline {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 260px;
    max-width: 300px;
    position: relative;
}

/* Timeline Image Container */
.timeline-image {
    position: relative;
    width: 100%;
    max-width: 275px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--space-xl);
}

.timeline-image-inner {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 300px;
    background: var(--color-cream-dark);
}

.timeline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter var(--transition-base), transform var(--transition-slow);
}

.timeline-item:hover .timeline-image img {
    filter: grayscale(70%);
    transform: scale(1.05);
}

/* Number styles */
.timeline-number,
.timeline-number-white {
    position: absolute;
    bottom: 10px;
    right: -30px;
    font-family: var(--font-display);
    font-size: 110px;
    font-weight: 300;
    font-style: italic;
    line-height: 88px;
    pointer-events: none;
    text-align: right;
    transition: opacity 0.25s ease-in-out;
}

.timeline-number-white {
    z-index: 3;
    color: var(--color-white);
}

.timeline-number {
    color: var(--color-dark);
}

/* Timeline Line */
.timeline-line {
    width: 2px;
    height: 35px;
    background: var(--color-gold);
    margin-bottom: var(--space-md);
}

/* Timeline Date */
.timeline-date {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
}

/* Timeline Label */
.timeline-label {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-dark);
}

/* Hover */
.timeline-item {
    cursor: pointer;
}

.timeline-label {
    transition: color var(--transition-base);
}

.timeline-item:hover .timeline-label {
    color: var(--color-gold-dark);
}

/* ==========================================================================
   Timeline CTA — right-aligned, elegant inline link
   
   Sits naturally as a continuation of the timeline, 
   not as a disconnected button.
   ========================================================================== */

.timeline-cta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin-top: var(--space-3xl);
    padding-right: var(--space-md);
    text-decoration: none;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.timeline-cta:hover {
    color: var(--color-dark);
}

.timeline-cta-label {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.04em;
    position: relative;
}

/* Subtle underline that expands on hover */
.timeline-cta-label::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-cta:hover .timeline-cta-label::after {
    transform: scaleX(1);
    transform-origin: left;
}

.timeline-cta-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
    color: var(--color-gold);
}

.timeline-cta:hover .timeline-cta-arrow {
    transform: translateX(6px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .timeline {
        gap: var(--space-xs);
    }
}

@media (max-width: 768px) {
    .timeline-section {
        padding: var(--space-4xl) var(--space-lg);
    }
    
    .timeline {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3xl);
    }
    
    .timeline-item {
        max-width: 280px;
    }
    
    .timeline-image {
        max-width: 250px;
    }
    
    .timeline-image-inner {
        height: 400px;
    }
    
    .timeline-number,
    .timeline-number-white {
        display: none;
    }

    /* On mobile, center the CTA */
    .timeline-cta {
        justify-content: center;
        margin-top: var(--space-2xl);
        padding-right: 0;
    }
}

/* ==========================================================================
   Carrossel mobile (≤885px) + swipe hint

   No mobile, a timeline vira um scroll horizontal com snap.
   Cada cartão ocupa 85% da largura visível, deixando uma "espiada"
   do próximo cartão na borda. Abaixo dos cartões, um indicador
   "‹ Arraste para o lado ›" pulsa nos primeiros segundos.

   Cascade: este bloco vem DEPOIS do @media 768px no arquivo,
   então suas regras vencem nas propriedades sobrepostas
   (flex-direction, max-width). O bloco 768px continua valendo
   nas outras (altura da imagem, ocultar números, CTA centralizado).
   ========================================================================== */

@keyframes timeline-swipe-pulse {
    0%, 100% { opacity: 0.45; transform: translateY(0); }
    50%      { opacity: 1;    transform: translateY(-2px); }
}

.timeline-swipe-hint {
    display: none;
}

@media (max-width: 885px) {
    .timeline-swipe-hint {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: var(--space-xl);
        font-family: var(--font-body);
        font-size: 0.7rem;
        font-weight: 400;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--color-text-light);
        animation: timeline-swipe-pulse 1.8s ease-in-out 1s 4;
    }

    .timeline-swipe-arrow {
        font-size: 1.4rem;
        line-height: 1;
        color: var(--color-gold-dark);
    }

    /* Tira o padding lateral da section pra o carrossel ir edge-to-edge.
       O CTA recupera o padding logo abaixo. */
    .timeline-section {
        padding-left: 0;
        padding-right: 0;
    }

    /* Timeline vira scroll horizontal nativo com scroll-snap */
    .timeline {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--space-md);
        padding: 0 7.5%;
        scrollbar-width: none;          /* Firefox */
        -webkit-overflow-scrolling: touch;
    }

    /* Esconde a barra de scroll horizontal no Chrome/Safari */
    .timeline::-webkit-scrollbar {
        display: none;
    }

    /* Cada item ocupa 85% da largura visível e ancora no centro do viewport */
    .timeline-item {
        flex: 0 0 85%;
        min-width: 0;
        max-width: none;
        scroll-snap-align: center;
    }

    /* CTA fica fora do scroll horizontal — recupera padding lateral
       pra alinhar com o resto da página */
    .timeline-cta {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .timeline-swipe-hint { animation: none; opacity: 0.7; }
}

/* No carrossel mobile, os 3 timeline-items entram em viewport juntos
   e o translateY(40px) do .scroll-reveal faz parecer que o "container"
   inteiro mexe verticalmente. Mantém o fade-in mas neutraliza o
   deslocamento vertical aqui. */
@media (max-width: 885px) {
    .timeline-item.scroll-reveal,
    .timeline-item.scroll-reveal.revealed {
        transform: none;
    }
}