/* ==========================================================================
   Stacked sections.

   Each major section sticks to the top of the viewport while the next one
   scrolls up over it, so sections deal themselves like cards. The rounded top
   corners and the shadow are what make the overlap legible — without them the
   sections just look like they are sliding.

   Applied only to the five major sections, never to the individual capability
   or hobby blocks: stacking a dozen elements is chaos, not a device.
   ========================================================================== */

/* Elementor does not render _css_classes on containers — only on widgets — so
   a class hook is unavailable here.

   This was a hard-coded list of anchor ids, which broke the moment a section
   was added: #about-me was never added to it, so it got no background and no
   sticky positioning and was scrolled over by the pinned panel above it —
   invisible on screen while perfectly present in the HTML. Targeting every
   top-level container means new sections join the stack automatically. */
.elementor-page .e-con.e-parent:not(#work),
.stack {
	position: sticky;
	top: 0;
	background: var(--paper);
	/* All four corners, not just the top two. A panel with a square bottom
	   meets the next one as a hard seam, and its own lower edge is visible as
	   a straight cut whenever it is shorter than the viewport. */
	border-radius: var(--radius-stack);
	/* Lifts each panel off the one beneath it. Direction matters: the shadow
	   goes up, because the section above is what it covers. */
	box-shadow: 0 -18px 40px -24px color-mix(in srgb, var(--ink) 55%, transparent);
	padding-block: var(--s-8);
	/* The horizontal inset comes from .elementor-page .e-con.e-parent in
	   layout.css, so it is defined once for every container rather than
	   repeated per section. */
	will-change: transform;
}

:root { --radius-stack: 28px; }

/* The rounded corners are only visible against something. The page behind the
   stack uses --surface, one step off the panel colour, so every rounded edge
   and every overlap reads. Without this the corners are paper on paper and
   the whole effect is invisible. */
body { background: var(--surface); }

/* No sliver above the first panel — it sits flush to the top of the viewport.
   The rounded corners still read, because the backdrop shows through them. */

/* The first panel sticks like the rest, so it keeps the rounded top edge for
   consistency. It has nothing above it to cast onto, so no shadow. */
.elementor-page #hello-world.e-con.e-parent,
#hello-world,
.section--greet.stack {
	background: var(--greet-bg);
	box-shadow: none;
	padding-block: 0;
	/* The welcome sits flush against the top of the viewport, so its upper
	   corners have nothing to round against. */
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

/* The last panel must be able to scroll fully clear of the one before it. */
/* The last panel runs into the footer, so its lower corners stay square —
   a rounded edge there would float above the footer rule. */
.elementor-page .e-con.e-parent:last-child,
.section--hobbies.stack {
	margin-block-end: 0;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

/* Elementor sets its own container background; ours has to win or the panels
   are transparent and the stack reads as overlapping text. */
#hello-world.e-con { background: var(--greet-bg); }

.elementor-page .e-con.e-parent:not(#work),
.stack.e-con,
.stack.e-con-inner { background: var(--paper); }

/* Nested containers must stay transparent, or every child paints over the
   panel it sits in. */
.elementor-page .e-con:not(.e-parent) { background: transparent; }

@media (max-width: 47.99em) {
	:root { --radius-stack: 20px; }
	.elementor-page .e-con.e-parent:not(#work),
	.stack { padding-block: var(--s-7); }
	#hello-world { padding-block: 0; }
}

/* Sticky stacking is motion tied to scroll position. Under reduced motion the
   sections simply follow one another. */
@media (prefers-reduced-motion: reduce) {
	.elementor-page .e-con.e-parent:not(#work),
	.stack {
		position: static;
		box-shadow: none;
		animation: none !important;
	}
}

/* Very short viewports cannot hold a sticky panel and still show the next one
   arriving; the effect becomes a jitter instead. */
@media (max-height: 34rem) {
	.elementor-page .e-con.e-parent:not(#work),
	.stack { position: static; box-shadow: none; }
}

/* Single-container pages (contact, projects, legal) have nothing to stack
   against, so pinning them just wastes a scroll. */
.elementor-page .e-con.e-parent:only-of-type {
	position: static;
	box-shadow: none;
}

/* The one exception ---------------------------------------------------------
   #work cannot be a pinned card, because it IS the scroll budget for the
   Werdegang rail: a sticky element taller than the viewport pins at top:0 and
   the part hanging below the fold becomes unreachable, so there is no travel
   left to map onto the rail.

   It therefore gives up the panel treatment and hands it to the two panels
   inside it — .cv__pin and .work__rest in cv.css — which look and behave
   exactly like every other card. The stack reads as unbroken; one of its
   cards is simply taller than it appears.

   Hardcoding an id here is the very thing that broke #about-me once, so it is
   worth naming the difference: if this id is ever wrong, the rail loses its
   pin and stays a scroller the reader pushes by hand. Visibly degraded, not
   silently blank. */
#work.e-con.e-parent {
	position: static;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding-block: 0;
	padding-inline: 0;
	display: block;
}