/* The chapter remains the scroll container; its links stay in document order. */
.chapter .chapter-inner { position: relative; z-index: 1; }
.chapter-blend { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg,transparent 12%,var(--next-scene) 100%); opacity: 0; }
.scene-recede { transform-origin: 50% 40%; }
.chapter .chapter-index { z-index: 3; align-items: center; bottom: 12px; }
.chapter-next { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 44px; max-width: 65%; letter-spacing: 0; color: #505764; }
.chapter-next > span { color: #686f7b; font-size: 11px; }
.chapter-next b { font-size: 12px; font-weight: 500; }
.chapter-next svg { width: 16px; height: 16px; rotate: 90deg; transition: translate .25s; }
.chapter-next:hover svg { translate: 0 3px; }
.chapter-next:hover { color: var(--accent); }
.theme-dark .chapter-next { color: #d2d7df; }
.theme-dark .chapter-next > span { color: #969eaa; }
.chapter-rail { right: 4px; }
.chapter-rail a { position: relative; width: 44px; min-width: 44px; justify-content: center; }
.chapter-rail a > span { position: absolute; right: 40px; white-space: nowrap; pointer-events: none; }

@media (min-width:1000px) and (min-height:850px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  /* JS checks the actual content fit before adding this class. */
  html[data-motion="full"] .chapter.is-story { height: calc(var(--story-height) + var(--story-dwell)); }
  html[data-motion="full"] .chapter.is-story .chapter-stage { position: sticky; top: var(--nav); height: var(--story-height); min-height: 0; max-height: none; }
  html[data-motion="full"] .chapter.is-story .chapter-inner { height: 100%; min-height: 0; padding: 36px clamp(40px,4.2vw,64px) 58px; }
}

/* A keyboard user can operate a preview even during a scroll transition. */
.chapter:has(a:focus-visible) .scene-recede,
.chapter:has(a:focus-visible) .product-art { transform: none !important; opacity: 1 !important; }

@media (max-width:600px) {
  .chapter-next { gap: 7px; }
  .chapter-next b { font-size: 11px; }
  .chapter-next > span { font-size: 10px; }
  .chapter-next svg { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .scene-recede { transform: none !important; opacity: 1 !important; }
  .chapter-blend { display: none; }
}