/* The site's paper-stack section transitions. */
html[data-section-transition] main> .transition-frame>section { content-visibility:visible; }
.transition-frame { position:relative; display:flow-root; }
.transition-frame>section { margin-block:0; }
.transition-frame>.manifesto,.transition-frame>.about { background-color:var(--paper); }
.transition-frame #community-workshop-canvas { transform:none; }

html[data-section-transition="stack"] main { background:#172018; }
html[data-section-transition="stack"] .transition-frame {
  height:calc(var(--section-height) + var(--section-overlap));
  margin-top:calc(-1 * var(--previous-overlap));
}
html[data-section-transition="stack"] .transition-frame.is-covered { visibility:hidden; }
html[data-section-transition="stack"] .transition-frame>section {
  position:sticky; top:var(--section-sticky-top);
  transform:scale(var(--section-scale,1)); transform-origin:center bottom;
  border-radius:var(--section-radius,0px) var(--section-radius,0px) 0 0;
  box-shadow:0 -12px 42px rgba(9,21,17,.16);
}
html[data-section-transition="stack"] .reveal {
  opacity:1; transform:none; transition:none; will-change:auto;
}

/* Every wide-screen chapter gets at least a viewport of breathing room.
   Longer content can grow naturally, and phone layouts stay content-sized. */
@media(min-width:851px) {
  main>section,.transition-frame>section { min-height:100svh; }
  main>.about,.transition-frame>.about { min-height:max(900px,100svh); }
  main>.contact,.transition-frame>.contact { min-height:max(620px,100svh); }
  .community,.contact { align-content:center; }
  .community-workshop-stage { min-height:0; max-height:none; aspect-ratio:1.48; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-section-transition] .transition-frame>section { transform:none; }
}