/* Performance layer: prioritize stable interaction over continuous decorative compositing.
   Motion is reserved for short, user-triggered or one-shot feedback. */

/* Long-form desktop sections can be skipped while far off-screen.
   Mobile shows one high-level step at a time, so it uses containment instead. */
@media (min-width: 681px) {
  .root-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 620px;
  }

  .explanation {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
  }
}

@supports (animation-timeline: scroll()) {
  body::before {
    transform: scaleX(0);
    animation: page-scroll-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes page-scroll-progress { to { transform: scaleX(1); } }
}

@media (max-width: 680px) {
  /* The mobile selector lives in the top layer, so visible task surfaces can safely contain paint/layout again. */
  body.mobile-flow .control-deck,
  body.mobile-flow .root-section,
  body.mobile-flow .preview-panel,
  body.mobile-flow .output-card {
    contain: layout paint style;
  }

  /* Hidden steps are display:none, so do not ask the browser to maintain long offscreen content trees. */
  body.mobile-flow .root-section { content-visibility: visible !important; }

  .copy-button,
  .text-button,
  .nav-github { min-height: 44px !important; }
  .copy-button { min-width: 72px !important; }

  .site-header,
  .control-deck,
  .panel,
  .mobile-flow-nav {
    box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
  }

  /* The mobile flow has its own progress navigator; skip fallback JS page-progress work if scroll timelines are absent. */
  @supports not (animation-timeline: scroll()) {
    body::before { transform: scaleX(0); }
  }
}