/* En-têtes verts des pages intérieures : même décor que le hero de l'accueil (feuillage, lumière).
   Les feuilles s'écartent pour révéler le titre, suivent la souris et s'envolent au défilement.
   Le décor est en pseudo-éléments : les pages restent éditables, rien n'est ajouté à leur contenu.
   translate porte la parallaxe et la sortie, transform l'ouverture : les deux ne se gênent pas. */
@property --sortie { syntax: "<length>"; inherits: false; initial-value: 0px; }

.wp-block-post-content > .tt-foret:first-child {
	--pm: 1;
	position: relative;
	isolation: isolate;
	overflow: clip;
	view-timeline: --entete block;
}
.wp-block-post-content > .tt-foret:first-child > .tt-section { position: relative; z-index: 1; isolation: isolate; }

/* Plans de feuillage */
.wp-block-post-content > .tt-foret:first-child::before,
.wp-block-post-content > .tt-foret:first-child::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background: center / contain no-repeat;
}
.wp-block-post-content > .tt-foret:first-child::before {
	left: -3%;
	top: -6%;
	width: min(13vw, 190px);
	aspect-ratio: 520 / 991;
	background-image: url("../images/hero/feuilles-gauche.webp");
	translate: calc(var(--mx, 0) * -14px * var(--pm)) calc(var(--my, 0) * -10px * var(--pm) + var(--sortie));
	animation: tte-ouvre-g 1.1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.wp-block-post-content > .tt-foret:first-child::after {
	right: -3%;
	top: 4%;
	width: min(15vw, 225px);
	aspect-ratio: 480 / 975;
	background-image: url("../images/hero/feuilles-droite.webp");
	translate: calc(var(--mx, 0) * -18px * var(--pm)) calc(var(--my, 0) * -12px * var(--pm) + var(--sortie));
	animation: tte-ouvre-d 1.1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
/* La feuille du haut dépasse de l'en-tête du site */
.wp-block-post-content > .tt-foret:first-child > .tt-section::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 44%;
	top: -70px;
	width: min(26vw, 380px);
	aspect-ratio: 680 / 186;
	pointer-events: none;
	background: url("../images/hero/feuille-haut.webp") center / contain no-repeat;
	translate: calc(var(--mx, 0) * -8px * var(--pm)) calc(var(--my, 0) * -6px * var(--pm) + var(--sortie));
	animation: tte-ouvre-h 1.2s 0.1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
/* Lumière qui passe entre les feuilles */
.wp-block-post-content > .tt-foret:first-child > .tt-section::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -20%;
	pointer-events: none;
	mix-blend-mode: soft-light;
	opacity: 0.55;
	background:
		radial-gradient(28% 26% at 30% 30%, rgba(255, 240, 200, 0.55), transparent 70%),
		radial-gradient(18% 20% at 62% 22%, rgba(255, 236, 190, 0.35), transparent 70%);
	animation: tte-soleil 22s ease-in-out infinite alternate;
}

/* Le titre s'imprime, le reste monte à sa suite */
.wp-block-post-content > .tt-foret:first-child h1 { animation: tte-imprime 0.6s 0.3s cubic-bezier(0.3, 1.3, 0.5, 1) both; }
.wp-block-post-content > .tt-foret:first-child .tt-surtitre { animation: tte-monte 0.6s 0.15s ease both; }
.wp-block-post-content > .tt-foret:first-child h1 + * { animation: tte-monte 0.7s 0.65s ease both; }
.wp-block-post-content > .tt-foret:first-child h1 + * + * { animation: tte-monte 0.7s 0.78s ease both; }
.wp-block-post-content > .tt-foret:first-child h1 + * + * ~ * { animation: tte-monte 0.7s 0.9s ease both; }
.wp-block-post-content > .tt-foret:first-child .wp-block-column + .wp-block-column { animation: tte-monte 0.8s 0.8s ease both; }

@keyframes tte-ouvre-g { from { transform: translateX(34%) scale(1.1); opacity: 0.2; } }
@keyframes tte-ouvre-d { from { transform: translateX(-34%) scale(1.1); opacity: 0.2; } }
@keyframes tte-ouvre-h { from { transform: translateY(30%) scale(1.06); opacity: 0; } }
@keyframes tte-soleil { to { transform: translate(6%, 4%) rotate(4deg); } }
@keyframes tte-imprime { from { opacity: 0; transform: translateY(-6px) scale(1.03); } }
@keyframes tte-monte { from { opacity: 0; transform: translateY(14px); } }
@keyframes tte-sortie { to { --sortie: -110px; } }

/* Au défilement, le feuillage monte plus vite que la page */
@supports (animation-timeline: view()) {
	.wp-block-post-content > .tt-foret:first-child::before,
	.wp-block-post-content > .tt-foret:first-child::after,
	.wp-block-post-content > .tt-foret:first-child > .tt-section::after {
		animation-name: var(--ouvre), tte-sortie;
		animation-duration: 1.1s, 1ms;
		animation-timeline: auto, --entete;
		animation-range: normal, exit 0% exit 100%;
		animation-fill-mode: both, both;
		animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1), linear;
	}
	.wp-block-post-content > .tt-foret:first-child::before { --ouvre: tte-ouvre-g; }
	.wp-block-post-content > .tt-foret:first-child::after { --ouvre: tte-ouvre-d; }
	.wp-block-post-content > .tt-foret:first-child > .tt-section::after { --ouvre: tte-ouvre-h; }
}

/* Téléphone : le titre occupe toute la largeur, on garde une seule touffe en haut à droite */
@media (max-width: 760px) {
	.wp-block-post-content > .tt-foret:first-child::before,
	.wp-block-post-content > .tt-foret:first-child > .tt-section::after { display: none; }
	.wp-block-post-content > .tt-foret:first-child::after { top: -24px; right: -8%; width: 30vw; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-content > .tt-foret:first-child { --pm: 0; }
	.wp-block-post-content > .tt-foret:first-child,
	.wp-block-post-content > .tt-foret:first-child *,
	.wp-block-post-content > .tt-foret:first-child::before,
	.wp-block-post-content > .tt-foret:first-child::after,
	.wp-block-post-content > .tt-foret:first-child > .tt-section::before,
	.wp-block-post-content > .tt-foret:first-child > .tt-section::after { animation: none !important; }
}