/* Trabajo (work.html): una línea de tinta que baja de lo más reciente a lo más antiguo; de ella brotan proyectos y publicaciones.
   La cabecera y los filtros vienen de thoughts.css. Todos los valores salen de tokens.css. */

.timeline { position: relative; z-index: 0; isolation: isolate; display: flex; flex-direction: column; margin: var(--space-4xl) 0 0; padding: 0; list-style: none; }
/* (en columna flexible los márgenes no se funden, así el zigzag calculado es exacto) */

/* la línea: gris de fondo y, encima, la tinta que crece al deslizar (con una gota roja en la punta) */
.timeline::before, .timeline .ink {
  content: ''; position: absolute; left: 50%; top: 0; width: var(--border-strong); transform: translateX(-50%);
}
.timeline::before { bottom: 0; background: var(--color-rule); }
.timeline .ink { height: var(--ink-h, 0); background: var(--color-ink); z-index: 1; }
.timeline .ink .drop {
  position: absolute; left: 50%; bottom: calc(-1 * var(--tl-drop)); width: var(--tl-drop); height: var(--tl-drop);
  transform: translateX(-50%); background: var(--color-accent); border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
}

/* ---------- Hitos: los lugares donde trabajé, sobre la propia línea ---------- */
.milestone {
  position: relative; z-index: 2; width: fit-content; max-width: min(var(--measure-text), 80%);
  margin: var(--space-3xl) auto; padding: var(--space-md) var(--space-lg);
  text-align: center; background: var(--color-bg);
}
/* logo del lugar de trabajo: en blanco y negro, en color al pasar el ratón */
.milestone .logo { display: block; height: var(--logo-h); width: auto; margin: 0 auto var(--space-xs); filter: grayscale(1); transition: filter var(--dur-base) var(--ease); }
.milestone:hover .logo { filter: none; }
/* todos con la misma altura (los archivos ya no tienen margen); RISE, que es vertical, un poco más alto para que pese lo mismo */
.milestone .logo-rise { height: calc(var(--logo-h) * 1.3); }
.milestone .when {
  display: inline-block; padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-pill);
  border: var(--border-strong) solid var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.milestone.now .when { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-paper); }
.milestone .org { margin: var(--space-xs) 0 0; font-weight: var(--weight-bold); }
.milestone .desc { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); line-height: var(--leading-story); color: var(--color-text-soft); }

/* ---------- Proyectos: brotan de la línea, a un lado y a otro ---------- */
.event { position: relative; margin: 0 0 var(--tl-gap-y); }
/* el zigzag (cada tarjeta empieza antes de que acabe la del otro lado) lo calcula projects.js */
/* la fila ocupa todo el ancho y en zigzag se solapa con la anterior: solo la tarjeta recibe clics */
.event { pointer-events: none; }
.event .card { position: relative; width: calc(50% - var(--tl-gap)); pointer-events: auto; }
.event.left .card { margin-right: auto; text-align: right; }
.event.right .card { margin-left: auto; }
/* rama que une la tarjeta con la línea, y su punto */
.event .card::before {
  content: ''; position: absolute; top: var(--tl-branch-y); width: calc(var(--tl-gap) - var(--tl-dot) / 2); height: var(--border-hair);
  background: var(--color-ink);
}
.event.left .card::before { left: 100%; }
.event.right .card::before { right: 100%; }
.event::after {
  content: ''; position: absolute; z-index: 2; left: 50%; top: calc(var(--tl-branch-y) - var(--tl-dot) / 2);
  width: var(--tl-dot); height: var(--tl-dot); transform: translateX(-50%);
  border-radius: 50%; background: var(--color-bg); border: var(--border-strong) solid var(--color-ink);
}
.event:has(.card:hover)::after { background: var(--color-accent); border-color: var(--color-accent); }

/* imagen del proyecto, entera (sin recortar): en blanco y negro; recupera el color al pasar el ratón */
.card .shot {
  display: block; width: 100%; height: auto;
  margin: 0 0 var(--space-sm); border: var(--border-hair) solid var(--color-rule);
  filter: var(--shot-filter); transition: filter var(--dur-base) var(--ease);
}
.card:hover .shot { filter: none; }
.card .when { margin: 0; font-size: var(--text-sm); color: var(--color-text-soft); }
.card .kind { letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.card h2 { margin: var(--space-2xs) 0 0; font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-story); }
.card .meta { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.card .desc { margin: var(--space-xs) 0 0; font-size: var(--text-sm); line-height: var(--leading-loose); color: var(--color-text-soft); }
.card .more { margin: var(--space-xs) 0 0; font-size: var(--text-sm); }
.card .more a { color: var(--color-accent); text-decoration: none; }
.card .more a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }

/* aparecen al llegar a ellas (solo si el script está activo) */
.reveal .event .card, .reveal .milestone { opacity: 0; transform: translateY(var(--space-md)); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal .event.in .card, .reveal .milestone.in { opacity: 1; transform: none; }
.event[hidden], .milestone[hidden] { display: none; }

/* ---------- Móvil: la línea a la izquierda y todo a un lado ---------- */
@media (max-width: 760px) {
  .timeline::before, .timeline .ink { left: var(--tl-left-mobile); }
  .milestone { margin: var(--space-2xl) 0; padding: var(--space-sm) 0 var(--space-sm) var(--space-xl); text-align: left; max-width: none; width: auto; background: none; }
  .milestone::before {
    content: ''; position: absolute; left: var(--tl-left-mobile); top: calc(var(--space-sm) + var(--tl-dot)); width: var(--tl-dot); height: var(--tl-dot);
    transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-ink);
  }
  .milestone.now::before { background: var(--color-accent); }
  /* en móvil, el año va primero (alineado con el punto de la línea) y el logo debajo */
  .milestone { display: flex; flex-direction: column; align-items: flex-start; }
  .milestone .when { order: 0; }
  .milestone .logo { order: 1; margin: var(--space-sm) 0 0; }
  .milestone .org { order: 2; }
  .milestone .desc { order: 3; }
  .event .card, .event.left .card, .event.right .card { width: auto; margin: 0 0 0 calc(var(--tl-left-mobile) + var(--tl-gap-mobile)); text-align: left; }
  .event.left .card::before, .event.right .card::before { left: auto; right: 100%; width: calc(var(--tl-gap-mobile) - var(--tl-dot) / 2); }
  .event::after { left: var(--tl-left-mobile); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal .event .card, .reveal .milestone { opacity: 1; transform: none; transition: none; }
}