/* Multi-panel sections move as one stage; SSR content stays in normal flow. */
[data-slide-content] { display:flow-root; width:100%; }
.section-slide-connector { display:none; }
@media screen and (max-width:47.99rem) and (prefers-reduced-motion:no-preference) {
 /* No flash of the next section while the deferred controller downloads.
    Enabled only by the head bootstrap; script failure/timeout restores SSR. */
 html[data-section-slides-boot] [data-section-slides] > section ~ section {
  visibility:hidden; opacity:0; pointer-events:none;
 }
 [data-section-slides] { overflow-anchor:none; }
 [data-section-slides][data-slide-active] ~ footer { visibility:hidden; opacity:0; }
 [data-section-slides] > section[data-slide-phase] { box-sizing:border-box; }
 [data-section-slides] > section[data-slide-pending] { visibility:hidden; opacity:0; pointer-events:none; }
 .section-slide-connector:not([hidden]) {
  display:block; position:fixed; top:0; left:calc(50% - 24px); width:48px;
  pointer-events:none; z-index:9; overflow:hidden;
 }
}

/* Autonomous flight: the compositor owns transform interpolation. JS only
   supplies endpoints and handles completion/interruption. No animated layout. */
@media screen and (max-width:47.99rem) and (prefers-reduced-motion:no-preference) {
 .section-slide-in {
  animation:section-slide-in var(--slide-duration,900ms) cubic-bezier(.45,0,.3,1) both;
  will-change:transform;
 }
 .section-slide-out {
  animation:section-slide-out var(--slide-duration,900ms) cubic-bezier(.45,0,.3,1) both;
  will-change:transform;
 }
 .section-slide-connector.is-releasing {
  transform-origin:50% 0;
  animation:section-spring-release 900ms cubic-bezier(.45,0,.3,1) both;
  will-change:transform,opacity;
 }
}
@keyframes section-slide-in {
 from { transform:translate3d(0,var(--slide-from),0); }
 to { transform:translate3d(0,var(--slide-to),0); }
}
@keyframes section-slide-out {
 from { transform:translate3d(0,var(--slide-from),0); }
 to { transform:translate3d(0,var(--slide-to),0); }
}
@keyframes section-spring-release {
 from { transform:scaleY(1); opacity:.85; }
 to { transform:scaleY(0); opacity:0; }
}