/* Louves: opening cover "Révélation au défilement" (public site only, not in the editor). */

/* --- Cover "Révélation au défilement": the title is cut out of a white sheet and shows the
   fresco; scrolling lifts the sheet off. Black text on white, blended with "screen" over the photo:
   black lets the photo through, white stays white. ------------------------------------------- */
.wp-block-cover.is-style-louves-reveal {
	isolation: isolate;
	min-height: 100vh;
	min-height: 100svh;
	padding: 0;
}
.is-style-louves-reveal .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	max-width: none;
	padding: 0 3vw;
	color: #000;
	mix-blend-mode: screen;
}
/* The white sheet, behind the title (the container's blend mode makes it a stacking context). */
.is-style-louves-reveal .wp-block-cover__inner-container::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #fff;
}
.is-style-louves-reveal .wp-block-cover__inner-container > * { max-width: none; }
.is-style-louves-reveal .wp-block-cover__inner-container h1,
.is-style-louves-reveal .wp-block-cover__inner-container h2 {
	margin: 0;
	color: #000;
	font-family: var(--wp--preset--font-family--display);
	font-size: min(19vw, 36vh);
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: .86;
	text-align: center;
	text-transform: uppercase;
}
/* The photo is darkened while it shows only through the letters, so a light fresco keeps the title
   readable; it gets its own light back as the sheet lifts (below). */
.is-style-louves-reveal .wp-block-cover__image-background { filter: brightness(.55) contrast(1.25); }
/* The project caption sits under the cover (Louves admin), quiet. */
.louves-hero-caption { margin-top: .75rem !important; color: var(--wp--preset--color--muted); }
.louves-hero-caption a { color: inherit; }

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		/* The cover is taller than the screen; photo and sheet stay pinned while it scrolls by. */
		.wp-block-cover.is-style-louves-reveal {
			display: block;
			height: 190vh;
		}
		.is-style-louves-reveal .wp-block-cover__image-background {
			position: sticky;
			top: 0;
			height: 100vh;
			height: 100svh;
		}
		.is-style-louves-reveal .wp-block-cover__inner-container {
			position: sticky;
			top: 0;
			height: 100vh;
			height: 100svh;
			margin-top: -100vh;
			margin-top: -100svh;
		}
		/* Sheet and title slide up together, like a sheet pulled off the wall. */
		.is-style-louves-reveal .wp-block-cover__inner-container::before,
		.is-style-louves-reveal .wp-block-cover__inner-container :is(h1, h2) {
			animation: louves-lift cubic-bezier(.5, 0, .7, 1) both;
			animation-timeline: scroll(root);
			animation-range: 0 75vh;
		}
		.is-style-louves-reveal .wp-block-cover__image-background {
			animation: louves-light linear both;
			animation-timeline: scroll(root);
			animation-range: 0 75vh;
		}
	}
}
@keyframes louves-lift { to { transform: translateY(-100vh); } }
@keyframes louves-light { to { filter: none; } }