/* Decorative artwork starts hidden; text remains visible without JavaScript. */
.botanicals-ready .botanical-art {
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse at var(--botanical-origin, top right), #000000 55%, #00000000 72%);
  mask-image: radial-gradient(ellipse at var(--botanical-origin, top right), #000000 55%, #00000000 72%);
  -webkit-mask-position: var(--botanical-origin, top right);
  mask-position: var(--botanical-origin, top right);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 0% 0%;
  mask-size: 0% 0%;
}
.botanicals-playing .botanical-art {
  animation: botanicals-grow 4s 0.4s linear both;
}
@keyframes botanicals-grow {
  from {
    opacity: 1;
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;
  }
  to {
    opacity: 1;
    -webkit-mask-size: 200% 200%;
    mask-size: 200% 200%;
  }
}
@media (prefers-reduced-motion: reduce), print {
  .botanical-art,
  .botanicals-ready .botanical-art {
    animation: none;
    opacity: 1;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.reveal-pending { opacity: 0; }
.reveal-pending:focus-within { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; }
}
@media print {
  .reveal-pending { opacity: 1; }
}

/* Draw each connector after its numbered step, before the next one appears. */
.timeline-ready .approach-number { border-bottom-color: #00000000; }
.timeline-ready .approach-number::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--section-divider);
  transform: scaleX(0);
  transform-origin: left center;
}
.timeline-ready .timeline-label,
.timeline-ready .approach-number::after,
.timeline-ready .approach-step-title,
.timeline-ready .section-text { opacity: 0; }
.timeline-playing .timeline-label,
.timeline-playing .approach-number::after,
.timeline-playing .approach-step-title,
.timeline-playing .section-text {
  animation: timeline-appear 0.8s calc(var(--step-index) * 1.4s + 0.2s) ease-out both;
}
.timeline-playing .approach-number::before {
  animation: timeline-draw 0.7s calc(var(--step-index) * 1.4s + 0.9s) ease-in-out both;
}
@keyframes timeline-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes timeline-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce), print {
  .timeline-ready .timeline-label,
  .timeline-ready .approach-number::after,
  .timeline-ready .approach-step-title,
  .timeline-ready .section-text { animation: none; opacity: 1; }
  .timeline-ready .approach-number::before { animation: none; transform: scaleX(1); }
}