/* ==========================================================================
   SEZIONI · STORIA
   Timeline verticale con il biscione che si disegna allo scroll.
   Il tracciato viene ricostruito in pixel reali da js/timeline.js.
   ========================================================================== */

.timeline { position: relative; padding-left: 56px; }

.timeline__snake {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 100%;
  color: var(--oro);
  pointer-events: none;
}

/* Il path viene ricostruito da JS in scala 1:1 sui pixel reali della colonna,
   così dasharray/dashoffset lavorano nelle stesse unità del tracciato.
   Senza JS la linea resta visibile per intero (fallback: none / 0). */
.timeline__snake-path {
  stroke-dasharray: var(--snake-len, none);
  stroke-dashoffset: var(--snake-offset, 0);
}

.timeline__list { display: grid; gap: var(--space-7); }

.timeline__item { position: relative; }

/* le stelle dello stemma come marcatori di tappa */
.timeline__dot {
  position: absolute;
  left: -56px;
  top: 0.55rem;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) translateX(28px);
  background-color: var(--oro);
  -webkit-mask: var(--star-mask) center / contain no-repeat;
  mask: var(--star-mask) center / contain no-repeat;
}

.timeline__year {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--oro);
}

.timeline__item .pill { margin-top: var(--space-2); }

.timeline__title {
  font-size: var(--step-2);
  margin: var(--space-2) 0 var(--space-3);
  color: var(--ink-invert);
}

.timeline__item p { color: var(--ink-invert-muted); max-width: 56ch; }

.timeline__item--now .timeline__year { color: var(--rosso); }

@media (min-width: 768px) {
  .timeline { padding-left: 96px; }
  .timeline__snake { width: 96px; }
  .timeline__dot { left: -96px; transform: translateX(-50%) translateX(48px); }
  .timeline__list { gap: var(--space-8); }
}