/* =========================================================
   HOME — Animaciones de scroll (copia de trabajo)
   Solo transform y opacity. No toca css/styles.css.
   - Marquee de logos (index.html): arranque acelerado
   - Timeline (nosotros.html): línea que se llena + hitos que se iluminan
   ========================================================= */

/* ---------- Marquee de logos ---------- */
/* Mientras JS controla el track (anim-scroll.js), se apaga la animación
   CSS para no pelear con el transform inline que fija cada frame. */
.marquee-track.js-marquee{animation:none}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation-play-state:paused}
}

/* ---------- Timeline ---------- */
/* .timeline-line ya es el "riel" gris (position:absolute, ver styles.css).
   Un ::after violeta se escala verticalmente según el scroll. */
.timeline-line{overflow:hidden}
.timeline-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--purple);
  transform:scaleY(var(--timeline-progress,0));
  transform-origin:top;
  will-change:transform;
}

.timeline-item .timeline-dot,
.timeline-item .timeline-year,
.timeline-item .timeline-title{
  opacity:.3;
  transition:opacity .45s ease;
}
.timeline-item .timeline-dot{
  transform:scale(.7);
  transition:opacity .45s ease,transform .45s ease;
}
.timeline-item.is-lit .timeline-dot,
.timeline-item.is-lit .timeline-year,
.timeline-item.is-lit .timeline-title{
  opacity:1;
}
.timeline-item.is-lit .timeline-dot{
  transform:scale(1);
}

@media (prefers-reduced-motion:reduce){
  .timeline-line::after{transform:scaleY(1)}
  .timeline-item .timeline-dot,
  .timeline-item .timeline-year,
  .timeline-item .timeline-title{
    opacity:1;
    transform:none;
    transition:none;
  }
}