/* ==========================================================================
   Section: About / Timeline. Ported from about-styles.css.
   ========================================================================== */

.timeline { margin-top: 56px; position: relative; padding-left: 0; }
.timeline::before { content:''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--cyan), var(--green)); border-radius: 2px; opacity: 0.5; }
.tl-row { position: relative; padding: 0 0 36px 42px; }
.tl-row:last-child { padding-bottom: 0; }
.tl-row::before { content:''; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--line); box-sizing: border-box; transition: border-color .3s ease, transform .3s ease; }
.tl-row.now::before { border-color: transparent; background: var(--grad); box-shadow: 0 0 0 5px rgba(98,207,95,0.16); }
.tl-year { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--cyan); text-transform: uppercase; }
.tl-row h3 { font-size: 21px; margin: 5px 0 7px; }
.tl-row p { color: var(--body); font-size: 15.5px; max-width: 64ch; }

/* Pulse when jumped to from the hero year-rail (main.js adds .pulse). */
@keyframes tlPulse {
	0% { box-shadow: 0 0 0 0 rgba(24,173,231,0); }
	20% { box-shadow: -8px 0 0 0 rgba(24,173,231,0.18); }
	100% { box-shadow: 0 0 0 0 rgba(24,173,231,0); }
}
.tl-row.pulse { animation: tlPulse 1.6s ease; border-radius: 8px; }
.tl-row.pulse::before { transform: scale(1.35); border-color: transparent; background: var(--grad); box-shadow: 0 0 0 5px rgba(24,173,231,0.18); transition: all .3s ease; }