/* ============================================================
   TIMELINE — the shape of the evening (programme.html)
   Horizontal ribbon on wide screens, a vertical list on narrow.
   The connecting line draws in on scroll; on the day itself a
   gold "now" marker sits on it. See modules/timeline.js.
   ============================================================ */
.timeline{margin-top:1.8rem;position:relative;padding-top:30px}

.timeline__track{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
}
.timeline__track::before{               /* full grey rail */
  content:"";position:absolute;left:7px;right:7px;top:8px;height:2px;
  background:var(--c-line);
}
.timeline__track::after{                /* the part that has "happened" */
  content:"";position:absolute;left:7px;top:8px;height:2px;width:0;
  background:linear-gradient(90deg,var(--c-gold),var(--c-primary));
  transition:width 1.1s var(--ease-out);
}
.timeline__track.is-drawn::after{width:calc(100% - 14px)}
.timeline__track.is-live.is-drawn::after{width:var(--now,100%)}

.timeline__stop{
  position:relative;display:flex;flex-direction:column;gap:.15rem;
  padding:26px 14px 0 0;
}
.timeline__dot{
  position:absolute;top:2px;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--c-surface);border:2px solid var(--c-line);
  transition:border-color .35s var(--ease-out),background .35s var(--ease-out);
  transition-delay:calc(var(--i,0) * .1s);
}
.timeline__track.is-drawn .timeline__dot{border-color:var(--c-primary);background:var(--c-primary)}
.timeline__icon{
  display:grid;place-items:center;width:23px;height:23px;border-radius:var(--r-md);
  margin-bottom:.5rem;color:var(--c-primary-ink);
  background:color-mix(in srgb,var(--c-primary) 14%,transparent);
  transform:scale(.6);opacity:0;
  transition:transform .4s var(--ease-spring),opacity .3s var(--ease-out);
  transition-delay:calc(var(--i,0) * .1s + .1s);
}
.timeline__track.is-drawn .timeline__icon{transform:scale(1);opacity:1}
.timeline__icon svg{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){
  .timeline__icon{transform:none;opacity:1;transition:none}
}

.timeline__at{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;
  font-weight:var(--weight-semi);color:var(--c-primary-ink);
}
.timeline__label{font-weight:var(--weight-semi);font-size:var(--fs-sm);color:var(--c-ink);line-height:1.25}
.timeline__note{font-size:.72rem;color:var(--c-ink-mute);line-height:1.4;max-width:20ch}

/* the live "now" marker (wide screens only) */
.timeline__now{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.timeline__now-dot{
  position:absolute;top:38px;left:calc(7px + (100% - 14px) * var(--now-n,0));
  width:12px;height:12px;border-radius:50%;
  background:var(--c-gold);transform:translate(-50%,-50%);
  transition:left 1s var(--ease-out);
  animation:tl-pulse 2.4s ease-in-out infinite;
}
.timeline__now-label{
  position:absolute;top:2px;left:calc(7px + (100% - 14px) * var(--now-n,0));transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-gold);white-space:nowrap;
}
@keyframes tl-pulse{
  0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--c-gold) 32%,transparent)}
  50%    {box-shadow:0 0 0 10px color-mix(in srgb,var(--c-gold) 4%,transparent)}
}

.timeline__foot{
  margin-top:1.5rem;font-family:var(--font-mono);font-size:.76rem;
  color:var(--c-ink-mute);line-height:1.5;
}

@media (max-width:640px){
  .timeline__track{grid-auto-flow:row;grid-auto-columns:auto}
  .timeline__track::before{left:6px;right:auto;top:4px;bottom:14px;width:2px;height:auto}
  .timeline__track::after{left:6px;right:auto;top:4px;width:2px;height:0}
  .timeline__track.is-drawn::after{height:calc(100% - 18px);width:2px}
  .timeline__stop{padding:0 0 20px 26px}
  .timeline__dot{top:2px}
  .timeline__note{max-width:none}
  .timeline__now{display:none}
}
@media (prefers-reduced-motion:reduce){
  .timeline__track::after{transition:none}
  .timeline__now-dot{animation:none}
}