/* The descriptions open beneath their headings without moving nearby content. */
@media (prefers-reduced-motion: no-preference) {
  :is(
    .description-reveal p,
    p.description-reveal,
    .homepage-text-reveal.description-reveal
  ) {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(10px);
  }
  :is(
    .description-animated p,
    p.description-animated,
    .homepage-text-reveal.description-animated
  ) {
    transition:
      clip-path 800ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 600ms ease,
      transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0ms;
  }
  :is(
    .description-visible p,
    p.description-visible,
    .homepage-text-reveal.description-visible
  ) {
    transition-delay: var(--reveal-delay, 0ms);
    opacity: 1;
    clip-path: inset(0);
    transform: translateY(0);
  }
}
@media print {
  :is(
    .description-reveal p,
    p.description-reveal,
    .homepage-text-reveal.description-reveal
  ) {
    opacity: 1;
    clip-path: none;
    transform: none;
  }
}

/* Keep text bounds stable while observing small labels and inline links. */
.homepage-text-reveal.description-reveal {
  transform: none;
  clip-path: none;
}
.homepage-text-reveal.description-reveal:focus-visible,
.homepage-text-reveal.description-reveal:focus-within {
  opacity: 1;
}

/* Landing-page text should be ready as it enters view. */
@media (prefers-reduced-motion: no-preference) {
  .homepage-text-reveal.description-animated {
    transition: opacity 250ms ease-out;
    transition-delay: 0ms;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .homepage-text-reveal.description-animated:not(.description-visible) {
    transition: opacity 650ms ease-in-out;
    transition-delay: 120ms;
  }
}