/*
 * Styles de la page d'attente h2a. Le gros du spectacle (les gouttes qui
 * bougent) se passe en JS sur un <canvas> — ici, c'est surtout de la mise
 * en page classique, plus les deux ou trois propriétés qui permettent au
 * <canvas> et au <clipPath> de trouver leur place dans l'empilement.
 */

@font-face {
	font-family: "Sofia Pro";
	src: url("../assets/fonts/SofiaPro-UltraLight.woff2") format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sofia Pro";
	src: url("../assets/fonts/SofiaPro-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sofia Pro";
	src: url("../assets/fonts/SofiaPro-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Chillax;
	src: url("../assets/fonts/Chillax-Variable.woff2") format("woff2");
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Chillax;
	src: url("../assets/fonts/Chillax-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Chillax;
	src: url("../assets/fonts/Chillax-Semibold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
}

body {
	background: #bf022e;
	color: #fff;
	/* crosshair plutôt que la flèche par défaut : un petit indice que la
	   souris fait partie du décor ici, pas juste un pointeur. */
	cursor: crosshair;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}

.comingsoon {
	position: relative;
	width: 100%;
	height: 100%;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
}

.layer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 3.5rem);
	color: #fff;
}

.layer--back {
	z-index: 1;
	background: #ff003c;
	font-family: Chillax, system-ui, sans-serif;
}

/* Couleurs peintes par le canvas (voir index.html / bubbles.js) : lues en JS
   via ces custom properties, comme le fait déjà le composant page-404 du
   thème h2a pour les siennes (--page-404-bg / --page-404-fluid).
   --comingsoon-back doit rester égal à la background-color de .layer--back
   ci-dessus : le canvas peint cette même couleur en OPAQUE juste avant de
   devenir transparent, pour qu'il n'y ait aucune couture visible. */
.comingsoon {
	--comingsoon-front: #bf022e;
	--comingsoon-back: #ff003c;
}

/* Peint le rouge « front » avec une opacité qui varie selon le champ de
   métaballes (voir commentaire dans index.html) : pas de background ici,
   c'est le canvas qui le fournit, pixel par pixel. */
.comingsoon__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.layer--front {
	position: absolute;
	inset: 0;
	z-index: 3;
	font-family: "Sofia Pro", system-ui, sans-serif;
	/* Le découpage qui laisse voir le calque back à travers les gouttes —
	   voir le commentaire dans index.html, à côté du <clipPath>. */
	-webkit-clip-path: url(#comingsoon-text-clip);
	clip-path: url(#comingsoon-text-clip);
}

.comingsoon__mask-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.layer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: min(100%, 63.5rem);
	height: min(43.75rem, calc(100dvh - 4rem));
	text-align: center;
}

.logo {
	display: block;
	width: 9rem;
	height: auto;
	flex-shrink: 0;
}

.logo--back {
	width: 9rem;
	height: 3.625rem;
	object-fit: fill;
	background: #fff;
}

.headline {
	margin: 0;
	max-width: 100%;
	font-size: clamp(1.35rem, 2.4vw + 0.6rem, 2.25rem);
	line-height: 1.25;
	font-weight: 200;
}

.headline--front {
	font-family: "Sofia Pro", system-ui, sans-serif;
	font-weight: 200;
}

.headline--front strong {
	font-weight: 700;
}

.headline--back {
	font-family: Chillax, system-ui, sans-serif;
	font-weight: 400;
	/* Pas de taille propre ici : hérite du même clamp() que
	   .headline--front (défini sur .headline ci-dessus), pour que les deux
	   calques restent à la même échelle visuelle. */
}

.headline--back strong {
	font-weight: 600;
}

.social--spacer {
	width: min(100%, 16.75rem);
	height: 5.9rem;
	visibility: hidden;
	pointer-events: none;
}

.chrome {
	position: absolute;
	left: 50%;
	bottom: clamp(1.5rem, 4vw, 3.5rem);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: min(100%, 16.75rem);
	transform: translateX(-50%);
	font-family: "Sofia Pro", system-ui, sans-serif;
	pointer-events: auto;
}

.social__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
	font-weight: 300;
	text-align: center;
	color: #fff;
}

.social__text strong {
	font-weight: 700;
}

.social__icons {
	position: relative;
	width: 8.66rem;
	height: 2.915rem;
}

.social__icons img {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.social__hit {
	position: absolute;
	top: 0;
	width: 33.333%;
	height: 100%;
	border-radius: 50%;
	cursor: pointer;
}

.social__hit--fb {
	left: 0;
}

.social__hit--ig {
	left: 33.333%;
}

.social__hit--li {
	left: 66.666%;
}

.social__hit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Sans animation : le canvas est masqué (rien à peindre en continu), et le
   calque front récupère une couleur de fond fixe pour rester lisible. */
.comingsoon.is-reduced .comingsoon__canvas {
	display: none;
}

.comingsoon.is-reduced .layer--front {
	background: var(--comingsoon-front);
	-webkit-clip-path: none;
	clip-path: none;
}

.comingsoon.is-reduced {
	cursor: default;
}

@media (max-width: 640px) {
	.layer__inner {
		height: min(38rem, calc(100dvh - 2.5rem));
		gap: 2rem;
	}

	.headline--front {
		padding-inline: 0.5rem;
	}
}