/**
 * Animation du logo (hero -> #logos-confiance), accueil uniquement.
 * Inspiration : transition circulaire de fmia.ai, adaptée à la charte Nitrolabz.
 *
 * Principe : deux calques plein écran fixes, SOUS le contenu (z-index
 * négatif) — un sombre, un clair révélé par un clip-path circulaire — au
 * lieu d'un disque peint par-dessus (qui cacherait le contenu). Seuls le
 * hero et #logos-confiance (le raccord immédiat) deviennent transparents
 * pour laisser apparaître ce calque partagé derrière eux ; les sections
 * suivantes gardent en permanence leur propre fond, sans dépendre de ce
 * calque (portée volontairement limitée, voir hero-logo-reveal.js).
 *
 * Mouvement continu, une seule progression partagée mais des courbes
 * distinctes : les anneaux/halo restent attachés à la composition du hero
 * (aucune transformation, seulement un fondu en sortie) ; SEUL le symbole
 * (PNG) se détache et voyage vers son point d'ancrage réel (juste au-dessus
 * du bandeau "Ils nous ont fait confiance"), en se contractant PENDANT que
 * le disque s'ouvre autour de lui — pas de phases successives. Le symbole
 * n'atteint sa taille de petit point que tout à la fin, où un échange bref
 * le remplace par un point vectoriel plat (.hla-dot, élément indépendant,
 * pas mis à l'échelle — sa taille à l'écran reste donc fixe et nette).
 * Voir hero-logo-reveal.js pour la chorégraphie exacte.
 *
 * Sans JS, ou avec prefers-reduced-motion : le symbole reste affiché tel
 * quel dans le hero (en flux normal), le hero garde son fond opaque
 * d'origine, aucun calque fixe n'est créé — composition statique inchangée.
 *
 * Réglages rapides regroupés ici : tailles, amplitudes, couleurs.
 */

/* Diamètre extérieur des anneaux : cible fmia.ai, à ajuster selon
   l'espace disponible dans la colonne droite du hero. Le symbole occupe
   ~60% de ce diamètre (--hla-mark-size). */
:root {
	--hla-stage-size: clamp(340px, 38vw, 580px);
	--hla-mark-size: 60%;
	--hla-float-amp: 8px;
	--hla-float-dur: 6.5s;
	--hla-ring-dur: 60s;
	--hla-dot-size: clamp(16px, 1.5vw, 22px);
}
@media (max-width: 960px) {
	:root {
		--hla-stage-size: clamp(220px, 58vw, 340px);
		--hla-dot-size: 16px;
	}
}

.hero-logo-anim {
	margin: 0;
	min-width: var(--hla-stage-size);
	min-height: var(--hla-stage-size);
	display: grid;
	place-items: center;
	pointer-events: none;
}

/* Une fois le symbole déplacé dans le calque fixe (JS), le hero — et
   UNIQUEMENT #logos-confiance, le raccord immédiat — deviennent transparents
   pour laisser apparaître le calque partagé derrière eux. Portée
   volontairement limitée à ces deux-là (voir hero-logo-reveal.js) : les
   sections suivantes gardent toujours leur propre fond. La classe est
   retirée de #logos-confiance une fois la scène terminée (il retrouve alors
   son vrai fond, sans dépendre du calque). */
.hero--reveal-active,
.hla-transparent {
	background: transparent;
}

/* Un peu plus d'espace avant le bandeau logos : nécessaire pour que le
   point d'ancrage et les ondes aient la place de se lire sans jamais
   chevaucher le label ni la rangée de marques (point C du brief). Reste
   modeste (+32px) : pas une longue section vide dédiée à l'animation. */
#logos-confiance {
	padding-top: 4.5rem;
}

/* #nos-expertises (comme toute section ".section" sans modificateur
   --ink/--cream) n'a normalement PAS de fond propre : elle compte sur le
   fond blanc du <body>, visible juste derrière. Notre calque .hla-bg-base,
   fixe et toujours présent (plein viewport, sous tout le contenu), vient se
   glisser entre les deux tant que le disque n'a pas fini de grandir : comme
   le scénario tient en moins d'une hauteur d'écran, le haut de cette
   section peut déjà être visible pendant que la scène tourne encore. Fond
   explicite ici pour qu'elle reste TOUJOURS lisible, sans dépendre du
   calque (point 6 du brief) — jamais de texte sombre sur fond sombre. */
#nos-expertises {
	background: var(--white);
}
@media (max-width: 600px) {
	/* Le label passe souvent sur une ligne en moins large sur mobile :
	   un peu plus de marge pour que le disque localisé ne l'atteigne pas. */
	#logos-confiance {
		padding-top: 6rem;
	}
}

/* Quadrillage décoratif du hero : très fortement atténué au repos, et
   fondu à zéro bien avant que le fond ne devienne clair. */
.hero::before {
	opacity: calc(.09 * var(--hla-grid-fade, 1));
	transition: opacity .2s linear;
}

/* Le CTA secondaire (style "ghost", pensé pour un fond sombre), la ligne
   "Partenaires / Modèles" et le paragraphe d'intro peuvent se retrouver
   sur le disque de révélation clair avant d'avoir entièrement défilé hors
   champ : protégés pour rester lisibles sur les deux fonds. Le CTA a un
   fond semi-opaque + flou ; les deux lignes de texte ont leur couleur
   interpolée en JS (voir hero-logo-reveal.js) vers une teinte sombre
   lisible sur clair, synchronisée avec la progression locale du disque. */
.hero--reveal-active .btn--ghost {
	background: rgba(17, 17, 17, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.hero--reveal-active .btn--ghost:hover {
	background: var(--on-ink);
	color: var(--ink);
}

/* Composition plus grande du hero : resserre un peu le CTA secondaire et
   l'espacement du bloc pour garder l'ensemble équilibré face à des anneaux
   nettement plus grands. */
.hero--split .btn-row {
	flex-wrap: wrap;
	row-gap: .6rem;
}

/* Anneaux + halo : restent dans le flux normal du hero (aucune transformation
   de scroll ne leur est appliquée, contrairement au symbole) ; seule leur
   opacité est pilotée en JS pendant que le hero défile hors champ. Occupent
   le même emplacement que prenait l'ancien .hla-stage pour ne pas bouger la
   mise en page. */
.hla-rings-stage {
	position: relative;
	width: var(--hla-stage-size);
	height: var(--hla-stage-size);
	grid-area: 1 / 1;
	will-change: opacity;
}

.hla-halo {
	position: absolute;
	inset: -34%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 107, 0, .22) 0%, rgba(232, 61, 37, .12) 45%, rgba(255, 107, 0, 0) 75%);
	filter: blur(4px);
	pointer-events: none;
}

.hla-rings {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.hla-ring {
	fill: none;
	stroke: var(--on-ink);
	opacity: .14;
	stroke-width: .75;
}
.hla-ring--b { opacity: .09; }
.hla-ring--dashed {
	stroke: var(--primary);
	opacity: .32;
	stroke-width: .75;
	stroke-dasharray: 1.2 11;
	transform-origin: 100px 100px;
	animation: hla-spin var(--hla-ring-dur) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.hla-ring--dashed { animation: none; }
}
@keyframes hla-spin {
	to { transform: rotate(360deg); }
}

/* Emplacement du symbole au repos : même cellule de grille que les anneaux
   (superposés), pour que le symbole parte visuellement bien centré dedans
   avant que le JS ne le fasse voyager. */
.hla-mark-slot {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	width: var(--hla-stage-size);
	height: var(--hla-stage-size);
	animation: hla-float var(--hla-float-dur) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.hla-mark-slot { animation: none; }
}
@keyframes hla-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(-1 * var(--hla-float-amp))); }
}

.hla-mark {
	display: block;
	width: var(--hla-mark-size);
	height: auto;
	filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .22));
}

/* --- Calques créés dynamiquement en JS (voir hero-logo-reveal.js) --- */

/* Symbole seul, ancré à l'écran pendant le scroll (équivalent de #node) :
   SEULEMENT le mark, jamais les anneaux/halo (voir point 2 du brief). Le
   flottement ambiant (.hla-mark-float) reste une transformation CSS séparée
   de celle pilotée en JS (translate+scale) sur ce wrapper externe. */
/* Centré via marge négative plutôt que translate(-50%,-50%) : ce wrapper
   fixe n'a pas de taille propre dans son contexte (percentage de transform
   peu fiable sur une boîte dont la taille vient d'un ancêtre 0×0) — la
   marge négative, elle, se résout toujours en pixels réels via calc(). Le
   JS n'applique donc plus qu'un translate(x,y) simple sur .hla-fixed, et un
   scale(s) simple (sans translate) sur .hla-mark-float, scale() tournant
   par défaut autour du centre de sa propre boîte. */
.hla-fixed {
	position: fixed;
	left: 0;
	top: 0;
	width: var(--hla-stage-size);
	height: var(--hla-stage-size);
	margin-left: calc(var(--hla-stage-size) / -2);
	margin-top: calc(var(--hla-stage-size) / -2);
	z-index: 6;
	pointer-events: none;
}
/* .hla-mark-float reçoit UNIQUEMENT le scale() piloté en JS à chaque frame
   — aucune animation CSS ne doit toucher sa propriété transform : une
   animation CSS écrase silencieusement tout style inline qu'on lui donne
   sur la même propriété (priorité de cascade), ce qui annulait le scale()
   ici dans une première version. Le flottement ambiant est donc isolé sur
   un troisième niveau, .hla-mark-ambient, qui ne reçoit jamais de transform
   en JS. */
.hla-fixed .hla-mark-float {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}
.hla-fixed .hla-mark-ambient {
	display: grid;
	place-items: center;
	animation: hla-float var(--hla-float-dur) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.hla-fixed .hla-mark-ambient { animation: none; }
}

/* Point final : élément INDÉPENDANT (pas un enfant de .hla-stage), donc sa
   taille à l'écran ne dépend jamais de l'échelle du grand symbole — c'est
   ce qui garantit un petit point net (~18-22px) plutôt qu'un hybride flou.
   Dégradé plat à deux teintes, sans reflet ni ombre : pas d'effet sphère. */
.hla-dot {
	position: fixed;
	left: 0;
	top: 0;
	width: var(--hla-dot-size);
	height: var(--hla-dot-size);
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary) 0%, #C23B1F 100%);
	opacity: 0;
	pointer-events: none;
	z-index: 6;
}

/* Calque sombre permanent (remplace le fond du hero une fois actif) et
   calque clair révélé par un clip-path circulaire — tous deux plein écran,
   fixes, sous le contenu normal (sections suivantes toujours opaques,
   donc elles recouvrent naturellement ces calques plus bas dans la page). */
.hla-bg-base,
.hla-bg-reveal {
	position: fixed;
	inset: 0;
	pointer-events: none;
}
.hla-bg-base {
	z-index: -2;
	background: var(--ink);
}
.hla-bg-reveal {
	z-index: -1;
	background: var(--ink);
	clip-path: circle(0px at 50% 50%);
}

/* Ondes de sortie : traits fins, derrière le contenu et les logos clients
   (z-index négatif, comme .hla-bg-reveal), jamais de disque rempli. */
.hla-wave {
	position: fixed;
	left: 0;
	top: 0;
	border-radius: 50%;
	border: 1px solid var(--primary);
	opacity: 0;
	pointer-events: none;
	z-index: -1;
}