/* Only what Elementor can't express. Colors/fonts/sizes stay in Elementor. */
html { overflow-x: clip; }

/* Desktop stage: the 3 sections are stacked; the timeline slides them over each other */
.sept-stage { position: relative; height: 100vh; overflow: hidden; }
.sept-stage > #page1,
.sept-stage > #page2,
.sept-stage > #page3 {
	position: absolute; top: 0; left: 0; width: 100%;
	height: 100vh; min-height: 100vh; margin: 0;
	will-change: transform; backface-visibility: hidden;
}
.sept-stage > #page2 { padding-top: 30px; overflow: hidden; align-items: flex-start; } /* cards rest 30px below top */
.sept-stage > #page3 { overflow: hidden; }
.septiembre-hero-image, .project-card { will-change: transform; }

/* Project cards */
.project-card { position: relative; display: block; overflow: hidden; cursor: pointer; }
.project-card > .e-con:nth-child(2) { top: 0; left: 0; width: 100%; height: 100%; }
.project-card img { display: block; width: 100%; }

/* Cursor bubble */
.project-cursor-bubble {
	position: fixed; top: 0; left: 0; z-index: 9999;
	width: 96px; height: 96px; border-radius: 50%;
	display: grid; place-items: center; text-align: center;
	background: #ffffff; color: #8b0000; font: 500 13px/1.2 Poppins, sans-serif;
	pointer-events: none;
}

/* Manifesto words: dim start state, JS animates to white */
.manifesto-text .sept-word { color: rgba(255, 255, 255, .25); }

@media (hover: none), (prefers-reduced-motion: reduce) { .project-cursor-bubble { display: none; } }