/**
 * BAIRS — Timeline scroll vertical
 * Línea vertical con nodos que se activan a medida que scrolleas.
 * Usado en "Cómo operamos" de Nosotros.
 */

.bairs-timeline {
    position: relative;
    max-width: 900px;
    margin: var(--space-12, 48px) auto 0;
    padding-left: clamp(40px, 8vw, 80px);
}

/* Riel vertical */
.bairs-timeline::before {
    content: '';
    position: absolute;
    left: clamp(15px, 3vw, 28px);
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
        var(--color-line, rgba(255,255,255,0.1)) 0%,
        var(--color-line, rgba(255,255,255,0.1)) 100%);
}

/* Riel "lleno" que avanza con scroll progress (CSS scroll-driven, fallback en JS si hace falta) */
.bairs-timeline-fill {
    position: absolute;
    left: clamp(15px, 3vw, 28px);
    top: 0;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom,
        var(--color-primary-soft, #38bdf8) 0%,
        var(--color-accent, #00d4ff) 100%);
    transition: height var(--dur-narrative, 700ms) var(--ease-out, ease);
    box-shadow: 0 0 16px rgba(56,189,248,0.5);
}

@supports (animation-timeline: view()) {
    .bairs-timeline-fill {
        height: 100%;
        transform-origin: top;
        animation: bairs-timeline-fill linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 90%;
        transition: none;
    }
    @keyframes bairs-timeline-fill {
        from { transform: scaleY(0); }
        to   { transform: scaleY(1); }
    }
}

.bairs-timeline-item {
    position: relative;
    padding: var(--space-6, 24px) 0 var(--space-12, 48px);
    opacity: 0.4;
    transform: translateX(20px);
    transition: opacity var(--dur-narrative, 700ms) var(--ease-out, ease),
                transform var(--dur-narrative, 700ms) var(--ease-out, ease);
}

.bairs-timeline-item.is-on {
    opacity: 1;
    transform: none;
}

/* Nodo del item (círculo en el riel) */
.bairs-timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1 * clamp(40px, 8vw, 80px) + clamp(15px, 3vw, 28px) - 7px);
    top: var(--space-6, 24px);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-bg-0, #07090d);
    border: 2px solid var(--color-line, rgba(255,255,255,0.2));
    transition: background var(--dur-normal, 320ms) var(--ease-out, ease),
                border-color var(--dur-normal, 320ms) var(--ease-out, ease),
                box-shadow var(--dur-normal, 320ms) var(--ease-out, ease);
}

.bairs-timeline-item.is-on::before {
    background: var(--color-primary-soft, #38bdf8);
    border-color: var(--color-primary-soft, #38bdf8);
    box-shadow: 0 0 0 6px rgba(56,189,248,0.18);
}

.bairs-timeline-item-num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--color-primary-soft, #38bdf8);
    margin-bottom: var(--space-2, 8px);
    display: block;
}

.bairs-timeline-item-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 var(--space-2, 8px);
    text-wrap: balance;
}

.bairs-timeline-item-text {
    color: rgba(255,255,255,0.72);
    font-size: 16px;
    line-height: 1.6;
    max-width: 60ch;
}

@media (prefers-reduced-motion: reduce) {
    .bairs-timeline-item,
    .bairs-timeline-fill,
    .bairs-timeline-item::before { transition: none !important; animation: none !important; }
    .bairs-timeline-item { opacity: 1 !important; transform: none !important; }
}