/* Progressive enhancement: content stays visible without JavaScript. */
.personal-timeline:has(.reveal-ready)::before {
  display: none;
}

/* Each chapter owns its stretch of the timeline, so the line fades with it. */
.personal-timeline .story-chapter.reveal-ready::before {
  content: "";
  position: absolute;
  left: 120px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--gold);
  opacity: var(--reveal-progress, 1);
  pointer-events: none;
}

@media (max-width: 700px) {
  .personal-timeline .story-chapter.reveal-ready::before { left: 0; }
}

[data-scroll-reveal],
.story-chapter {
  scroll-margin-top: 110px;
}

[data-scroll-reveal].reveal-ready,
.story-chapter.reveal-ready .story-art,
.story-chapter.reveal-ready .story-copy {
  opacity: var(--reveal-progress, 1);
  transform: translate3d(0, var(--reveal-offset, 0), 0);
}

.story-chapter.reveal-ready .story-art {
  transform: translate3d(0, var(--reveal-art-offset, 0), 0)
    scale(var(--reveal-art-scale, 1));
}

.reveal-transitioning,
.story-chapter.reveal-transitioning .story-art,
.story-chapter.reveal-transitioning .story-copy {
  will-change: opacity, transform;
}

[data-scroll-reveal].reveal-force-visible,
.story-chapter.reveal-force-visible .story-art,
.story-chapter.reveal-force-visible .story-copy {
  opacity: 1;
  transform: none;
}

@media (max-width: 700px) {
  /* Opacity only on mobile keeps measurement independent of animated transforms. */
  .story-chapter.reveal-ready .story-copy {
    opacity: 1;
    transform: none;
  }
  .story-chapter.reveal-ready .story-art,
  .story-chapter.reveal-ready .story-copy > * {
    opacity: var(--part-progress, 1);
    transform: none;
  }
  .personal-timeline .story-chapter.reveal-ready::before {
    opacity: 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--line-exit-end), #000 var(--line-exit-start), #000 var(--line-entry-end), transparent var(--line-entry-start));
    mask-image: linear-gradient(to bottom, transparent var(--line-exit-end), #000 var(--line-exit-start), #000 var(--line-entry-end), transparent var(--line-entry-start));
  }
  .story-chapter.reveal-force-visible .story-art,
  .story-chapter.reveal-force-visible .story-copy > * { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .personal-timeline .story-chapter::before { opacity: 1 !important; }
  [data-scroll-reveal],
  .story-chapter .story-art,
  .story-chapter .story-copy,
  .story-chapter .story-copy > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media print {
  .personal-timeline .story-chapter::before { opacity: 1 !important; }
  [data-scroll-reveal],
  .story-chapter .story-art,
  .story-chapter .story-copy,
  .story-chapter .story-copy > * {
    opacity: 1 !important;
    transform: none !important;
  }
}