/* L’Orangerie — le fond: the layers assets/js/fond/fond.js lays inside the stage.
 *
 * The stage ([data-lo-fond], div.lo-fond: fixed, inset 0, z-index 0) and its
 * golden-hour still (img.lo-fond-image, the page without JS or WebGL) belong to
 * Bricks. The defaults given for them here sit in :where(), so Bricks' own rules
 * always win. Bricks sets html { font-size: 62.5% }: 1rem = 10px in this file.
 *
 * Inside the stage, in paint order:
 *   .lo-fond-image           the still (Bricks: a <picture>, or an <img>)
 *   canvas.lo-fond-journee   Une journée de lumière (fades in over the still)
 *   div.lo-fond-lumiere      Lumière profonde, opacity = setMelange (inline, by fond.js)
 *     div.lo-fond-degrade    the CSS gradient: stand-in while the light loads, and
 *                            the whole light without WebGL (--lo-degrade-*, by fond.js)
 *     canvas.lo-fond-lumiere-canvas  the WebGL light (fades in over the gradient)
 *   canvas.lo-fond-grain     the film grain: ONE overlay over the whole background,
 *                            the same in every section (fond/grain.js), soft-light;
 *                            above the light, below the page. One canvas pixel per
 *                            grain cell, scaled up crisp. Without WebGL2 (.is-tuile)
 *                            a still tile stands in.
 *
 * The layers are 100lvh tall (the large viewport): a phone's URL bar showing or
 * hiding never resizes, so never clears, a canvas. The stage clips them.
 *
 * fond.js marks the stage with data-lo-fond-etat tokens:
 *   journee  frames are drawing        lumiere  the WebGL light is drawing
 *   plein    the light covers it all   nogl     no WebGL (2D frames + gradient)
 *   reduit   prefers-reduced-motion
 * and data-lo-fond-ambiance with the dominant preset. html { --lo-fond-moyen }
 * holds the current mean colour of the whole stage. */

:where([data-lo-fond]) {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Framed like the Journée canvas (its focus keeps the window side in shot), so
   the frames fade in over the still without a jump. */
:where([data-lo-fond] > .lo-fond-image) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
:where([data-lo-fond] img.lo-fond-image, [data-lo-fond] .lo-fond-image img) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40% 50%;
}

.lo-fond-journee,
.lo-fond-lumiere,
.lo-fond-degrade,
.lo-fond-lumiere-canvas,
.lo-fond-grain {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100lvh;
	display: block;
}

/* --- Une journée de lumière ------------------------------------------------ */

.lo-fond-journee {
	opacity: 0;
	transition: opacity 1.4s cubic-bezier(.45, 0, .2, 1);
}
[data-lo-fond-etat~="journee"] > .lo-fond-journee { opacity: 1; }
/* Once the frames are up the still is only a cost: drop it after the fade. */
[data-lo-fond-etat~="journee"] > .lo-fond-image {
	visibility: hidden;
	transition: visibility 0s linear 1.4s;
}
/* Under a fully opaque light nothing below needs painting. */
[data-lo-fond-etat~="plein"] > .lo-fond-image,
[data-lo-fond-etat~="plein"] > .lo-fond-journee { visibility: hidden; }

/* --- Lumière profonde ------------------------------------------------------ */

/* Hidden until setMelange says otherwise (fond.js writes opacity + visibility). */
.lo-fond-lumiere {
	opacity: 0;
	visibility: hidden;
}

.lo-fond-lumiere-canvas {
	opacity: 0;
	transition: opacity 1.2s cubic-bezier(.45, 0, .2, 1);
}
.lo-fond-lumiere-canvas.is-pret { opacity: 1; }
[data-lo-fond-etat~="lumiere"] .lo-fond-degrade {
	visibility: hidden;
	transition: visibility 0s linear 1.2s;
}

/* The gradient: the ambiance's flat colour and one diagonal band of light
   placed like the shader's band (the grain is the overlay's, below). Every
   value is blended a → b by fond.js, so it follows the scroll as smoothly as
   the shader. The defaults are the « accueil » ambiance. */
.lo-fond-degrade {
	background:
		linear-gradient(
			var(--lo-degrade-angle, 58deg),
			transparent var(--lo-degrade-avant, 40%),
			var(--lo-degrade-eclat, rgb(176 96 42 / .35)) var(--lo-degrade-pos, 56%),
			transparent var(--lo-degrade-apres, 100%)
		),
		var(--lo-degrade-fond, #66300F);
}

/* --- Grain ----------------------------------------------------------------- */

.lo-fond-grain {
	mix-blend-mode: soft-light;
	image-rendering: pixelated;
}
/* No WebGL2: a still tile (its filter works in sRGB so the noise centres on
   mid-grey and leaves the mean colour alone). */
.lo-fond-grain.is-tuile {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.2 .2 .2 0 .2 .2 .2 .2 0 .2 .2 .2 .2 0 .2 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 16rem 16rem;
}
/* --- Reduced motion -------------------------------------------------------- */
/* The Journée shows its still and the light one frame per ambiance: no fades. */
@media (prefers-reduced-motion: reduce) {
	.lo-fond-journee,
	.lo-fond-lumiere-canvas,
	[data-lo-fond-etat~="journee"] > .lo-fond-image,
	[data-lo-fond-etat~="lumiere"] .lo-fond-degrade { transition: none; }
}