/* Short chapter entrances; the settled text keeps its normal layout and paint. */
html body.visual-refresh .title-panel .chapter-title-enter {
  --chapter-enter-distance: 10px;
  --chapter-enter-opacity: 1;
  display: block;
  opacity: 1;
  transform: none;
  will-change: auto;
}

html body.visual-refresh.mobile-continuous .title-panel .chapter-title-enter {
  --chapter-enter-distance: 6px;
  --chapter-enter-opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  /* Keep incoming text fully legible and its starting position continuous. */
  html body.visual-refresh .title-panel:not([data-current]) .chapter-title-enter {
    opacity: var(--chapter-enter-opacity);
    transform: translateY(var(--chapter-enter-distance));
    transition: transform 160ms ease-out, opacity 160ms ease-out !important;
  }

  /* The inner span moves while mobile layout keeps the outer spans steady. */
  html body.visual-refresh .title-panel[data-current] .chapter-title-enter {
    animation: dp-chapter-arrive 440ms cubic-bezier(.22, .7, .2, 1) 0ms 1 normal backwards !important;
    transition: none !important;
  }

  html body.visual-refresh .title-panel[data-current] .chapter-line-accent > .chapter-title-enter {
    animation-delay: 60ms !important;
  }
}

html body.visual-refresh.is-page-hidden .title-panel .chapter-copy .chapter-title-enter {
  animation-play-state: paused !important;
  transition: none !important;
}

/* Existing decorative drift stays off; the entrance is the only chapter motion. */
html body.visual-refresh .title-panel[data-current] :is(.chapter-line-primary, .chapter-line-accent, .chapter-index, .chapter-keywords > span) {
  animation: none !important;
}

@keyframes dp-chapter-arrive {
  from {
    opacity: var(--chapter-enter-opacity);
    transform: translate3d(0, var(--chapter-enter-distance), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.performance-lite body.visual-refresh .title-panel .chapter-copy .chapter-title-enter,
html body.visual-refresh.a11y-reduce-motion .title-panel .chapter-copy .chapter-title-enter {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.visual-refresh .title-panel .chapter-copy .chapter-title-enter {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}