/*
 * Scroll behaviour: the header and the about/orb block stay pinned while the
 * project list scrolls up over them. hero-scroll.js fades and moves them (values
 * are written on the elements, not through a CSS variable on <html>). Both blocks
 * stay in the normal flow, so the list starts below them with no spacer.
 */
header,
.section-about {
	position: sticky;
	z-index: 0;
}
header { top: 0; }
.section-about { top: var(--hero-header-h, 0px); }

/* The list needs an opaque background to cover the pinned blocks as it rises. */
.section-index { background: var(--page-bg); }

/* Individual `translate` / `scale` (set by the script) never collide with the
   `transform` and `opacity` the compact layout uses to swap the orb and text. */
.section-about .circle { transform-origin: 50% 40%; will-change: translate, scale; }
.section-about .text { will-change: translate; }

html.hero-faded header,
html.hero-faded .section-about {
	visibility: hidden;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.section-about .circle,
	.section-about .text { will-change: auto; }
}

/*
 * Native scroll snap between the two clean states: hero visible (top of the page)
 * and list at the top. The browser picks the target from the momentum at the
 * start of the gesture, so it is one continuous motion, never a second move after
 * the inertia ends. The list is a snap area taller than the viewport, which the
 * browser treats as free scrolling inside it; only the gap above the list snaps.
 */
html { scroll-snap-type: y mandatory; }
body { position: relative; }
body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	scroll-snap-align: start;
	pointer-events: none;
}
.section-index { scroll-snap-align: start; }

/* Reading the about text on a compact screen: everything scrolls normally. */
html.hero-reading { scroll-snap-type: none; }
html.hero-reading header,
html.hero-reading .section-about {
	position: relative;
	top: auto;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}