/*
 * Atmosphère : faisceau de projecteur, grain de pellicule, vignettage.
 *
 * Purement décoratif, en position fixe derrière tout le contenu, sans jamais
 * intercepter un clic. C'est ce qui donne de la profondeur à des aplats qui,
 * sans ça, ressemblent à un tableau de bord.
 */

.ccc-atmosphere {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* Le contenu passe au-dessus. */
.ccc-site-header,
.ccc-main,
.ccc-site-footer {
	position: relative;
	z-index: 1;
}

/* --- Faisceau ---------------------------------------------------------------
 * Une immense ellipse chaude dont on ne voit que l'arc bas, comme un
 * projecteur qui déborde du cadre. Décalée hors écran vers le haut.
 */

.ccc-atmosphere__beam {
	position: absolute;
	top: -60vh;
	left: 50%;
	width: max(140vw, 70rem);
	height: 110vh;
	transform: translateX(-50%);
	background:
		radial-gradient(
			ellipse 50% 50% at 50% 50%,
			color-mix(in srgb, var(--ccc-color-accent) 20%, transparent) 0%,
			color-mix(in srgb, var(--ccc-color-accent) 7%, transparent) 38%,
			transparent 68%
		);
	/*
	 * Deux animations qui ne se marchent pas dessus : l'allumage ne touche
	 * qu'opacité et flou, la dérive ne touche que la transformation. Les
	 * faire porter sur la même propriété ferait gagner la dernière déclarée.
	 */
	filter: blur(40px);
	opacity: 0.85;
	animation:
		ccc-beam-ignite 2200ms cubic-bezier(0.16, 0.8, 0.3, 1) both,
		ccc-beam-drift 24s ease-in-out 2200ms infinite alternate;
}

/* Le projecteur s'allume : large et diffus, puis il se resserre. */
@keyframes ccc-beam-ignite {
	0%   { opacity: 0; filter: blur(150px) brightness(2.4); }
	35%  { opacity: 1; filter: blur(90px) brightness(1.8); }
	100% { opacity: 0.85; filter: blur(40px) brightness(1); }
}

@keyframes ccc-beam-drift {
	from { transform: translateX(-52%) scale(1); opacity: 0.7; }
	to   { transform: translateX(-48%) scale(1.06); opacity: 0.95; }
}

/* --- Grain ------------------------------------------------------------------
 * Bruit fractal tuilé, décalé par à-coups. C'est le détail qui fait qu'une
 * page sombre cesse d'avoir l'air d'un aplat vectoriel.
 */

.ccc-atmosphere__grain {
	position: absolute;
	inset: -150%;
	width: 400%;
	height: 400%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.05;
	animation: ccc-grain-jitter 700ms steps(1, end) infinite;
	will-change: transform;
}

@keyframes ccc-grain-jitter {
	0%   { transform: translate(0, 0); }
	12%  { transform: translate(-3%, -2%); }
	25%  { transform: translate(2%, -4%); }
	37%  { transform: translate(-4%, 3%); }
	50%  { transform: translate(3%, 2%); }
	62%  { transform: translate(-2%, -3%); }
	75%  { transform: translate(4%, -1%); }
	87%  { transform: translate(-1%, 4%); }
	100% { transform: translate(0, 0); }
}

/* --- Vignettage -------------------------------------------------------------
 * Les coins s'assombrissent, comme une image projetée sur un écran.
 */

.ccc-atmosphere__vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 78% 68% at 50% 42%,
		transparent 0%,
		transparent 52%,
		rgba(0, 0, 0, 0.55) 100%
	);
}

/*
 * Mouvement réduit : le décor reste, il cesse de bouger. Supprimer le grain
 * entièrement ferait perdre la texture, qui n'est pas du mouvement.
 */
@media (prefers-reduced-motion: reduce) {
	.ccc-atmosphere__beam,
	.ccc-atmosphere__grain {
		animation: none;
	}

	.ccc-atmosphere__beam {
		opacity: 0.85;
	}
}