/* S7 · Timeline (E10) */
.timeline { padding-top: 88px; padding-bottom: 96px; }
.tl { position: relative; width: 100%; aspect-ratio: 360 / 820; margin-top: 18px; }
/* Hai đầu đường mờ dần (không bị cắt ngang ở mép khung); các tim nằm trong vùng rõ 8–88% */
.tl__svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
}
.tl__track { fill: none; stroke: var(--green); stroke-opacity: .1; stroke-width: 1.4; }
.tl__path { fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; }
.tl__mark use { fill: var(--green); }
.tl__item { position: absolute; left: var(--x); top: var(--y); width: 46%; transform: translate(-50%, -50%); }
.tl__time { font: 600 15px/1.2 var(--sans); letter-spacing: .06em; color: var(--green); }
.tl__label { margin-top: 4px; font: 500 11px/1.5 var(--sans); letter-spacing: .12em; text-wrap: balance; }
.tl__icon { width: 44px; height: 44px; margin: 8px auto 0; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Chỉ ẩn khi JS đã sẵn sàng điều khiển (.is-ready) */
.js .tl.is-ready .tl__mark { transform: scale(0); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.js .tl.is-ready .tl__mark.is-in { transform: none; }
.js .tl.is-ready .tl__item {
  opacity: 0;
  filter: blur(6px);
  transform: translate(-50%, calc(-50% + 16px));
  transition: opacity .8s var(--ease), filter .8s var(--ease), transform 1s var(--ease-out);
}
.js .tl.is-ready .tl__item.is-in { opacity: 1; filter: none; transform: translate(-50%, -50%); }