/* The section transition: the next section slides up over the previous one like a sheet. The previous section holds
   still once its end reaches the bottom of the screen (sticky, set by sheet.js), sinks back a touch and dims; the sheet
   has softly rounded top corners and fades into black at its end; no lines at either edge. Add class "sheet" to any section to use it. */
.sheet { position: relative; z-index: 2; min-height: 100vh; background: #000;   /* OLED black (was a #070708 → #000 gradient, which read grey on normal screens) */
  border-radius: 30px 30px 0 0; margin-top: 0; box-shadow: 0 -40px 90px -20px rgba(0,0,0,.85); }
/* the thin light edge: brightest in the middle, fading out towards the corners */
/* (no light edge line along the top: section edges carry no lines) */
.sheet-under { position: sticky; z-index: 1; transform-origin: 50% calc(100% - 50vh);   /* scale about the middle of what is on screen */ will-change: transform; }
.sheet-under::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sheet-under { position: relative; transform: none !important; } .sheet-under::after { opacity: 0 !important; } }

.sheet-pair { position: relative; }

/* The fade-up: a section with class "rise" lifts and fades in as it scrolls into view (driven by scroll in sheet.js). */
.rise > * { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .rise > * { transform: none !important; opacity: 1 !important; } }