/**
 * Animations « typographie cinétique » (inc/kinetic.php, assets/js/kinetic.js).
 * Tailles en unités de conteneur (cqw) : la scène garde ses proportions à toute taille,
 * et tout est vectoriel (texte + SVG) pour rester net jusqu'en 8K.
 */

.kx {
	--kx-ink: #0a1022;
	--kx-blue: #2952ff;
	--kx-mint: #19d3a2;
	--kx-grey: #9aa1b0;
	--kx-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--kx-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 28px;
	container-type: inline-size;
	color: var(--kx-ink);
	background: radial-gradient(circle at 50% 40%, #fff 0%, #f4f5f8 52%, #e9ebf0 100%);
	box-shadow: inset 0 0 0 1px rgba(10, 16, 34, 0.06);
	font-family: Poppins, "Segoe UI", system-ui, sans-serif;
	transition: background-color 0.6s var(--kx-ease);
	isolation: isolate;
}

/* Poussière lumineuse et anneaux de fond. */
.kx__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(circle, rgba(10, 16, 34, 0.12) 0.18cqw, transparent 0.24cqw),
		radial-gradient(circle, rgba(41, 82, 255, 0.16) 0.14cqw, transparent 0.2cqw);
	background-size: 9cqw 9cqw, 13cqw 13cqw;
	background-position: 0 0, 4cqw 6cqw;
	-webkit-mask-image: radial-gradient(circle at 50% 42%, transparent 18%, #000 46%, transparent 78%);
	mask-image: radial-gradient(circle at 50% 42%, transparent 18%, #000 46%, transparent 78%);
	transition: background-color 0.6s var(--kx-ease);
}

.kx__ring {
	position: absolute;
	top: 39%;
	left: 50%;
	width: 78cqw;
	height: 78cqw;
	margin: -39cqw 0 0 -39cqw;
	border: 0.18cqw dashed rgba(10, 16, 34, 0.12);
	border-radius: 50%;
	animation: kx-spin 40s linear infinite;
}

.kx__ring--2 {
	width: 56cqw;
	height: 56cqw;
	margin: -28cqw 0 0 -28cqw;
	border-style: solid;
	border-color: rgba(41, 82, 255, 0.1);
	animation-duration: 26s;
	animation-direction: reverse;
}

/* Transition de plan : un anneau noir qui s'ouvre (comme dans les génériques). */
.kx__wipe {
	position: absolute;
	top: 39%;
	left: 50%;
	width: 40cqw;
	height: 40cqw;
	margin: -20cqw 0 0 -20cqw;
	border: 1.6cqw solid var(--kx-ink);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.2);
}

.kx.is-wiping .kx__wipe {
	animation: kx-wipe 0.9s var(--kx-ease);
}

.kx.is-dark {
	background: radial-gradient(circle at 50% 40%, #1a2240 0%, #0a1022 60%, #05070f 100%);
	color: #fff;
}

.kx.is-dark .kx__ring {
	border-color: rgba(255, 255, 255, 0.14);
}

.kx.is-dark .kx__wipe {
	border-color: #fff;
}

.kx__stage {
	position: absolute;
	inset: 0;
}

/* Un plan. */
.kx__frame {
	position: absolute;
	inset: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.45s var(--kx-ease), transform 0.45s var(--kx-ease), visibility 0s 0.45s;
}

.kx__frame.is-in {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.3s var(--kx-ease), visibility 0s;
}

.kx__frame.is-out {
	opacity: 0;
	transform: scale(0.94);
}

/* Pastille noire. */
.kx__badge {
	position: absolute;
	top: 39%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 38cqw;
	height: 38cqw;
	margin: -19cqw 0 0 -19cqw;
	border-radius: 50%;
	background: var(--kx-ink);
	color: #fff;
	box-shadow: 0 2.4cqw 6cqw -2cqw rgba(10, 16, 34, 0.55), inset 0 0 0 0.5cqw rgba(255, 255, 255, 0.06);
	transform: scale(0);
}

.kx__frame.is-in .kx__badge {
	animation: kx-pop 0.8s var(--kx-pop) forwards;
}

.kx__badge-text {
	display: grid;
	justify-items: center;
	font-size: var(--bfs, 5cqw);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-align: center;
}

.kx__badge-text span {
	display: block;
	opacity: 0;
	transform: translateY(40%);
}

.kx__frame.is-in .kx__badge-text span {
	animation: kx-rise 0.55s var(--kx-ease) forwards;
	animation-delay: calc(0.35s + var(--n, 0) * 0.08s);
}

.kx__badge-text span:nth-child(2) {
	--n: 1;
}

.kx__badge-text span:nth-child(3) {
	--n: 2;
}

.kx__frame--dark .kx__badge {
	background: #fff;
	color: var(--kx-ink);
	box-shadow: 0 0 0 1.2cqw rgba(255, 255, 255, 0.08), 0 0 8cqw rgba(41, 82, 255, 0.35);
}

/* Éclat de points autour de la pastille (créés par kinetic.js). */
.kx__dots {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.kx__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--s);
	height: var(--s);
	margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
	border-radius: 50%;
	background: var(--c);
	opacity: 0;
}

.kx__frame.is-in .kx__dot {
	animation: kx-burst 1.6s var(--kx-ease) forwards;
	animation-delay: calc(0.18s + var(--d));
}

/* Mots qui défilent + barre + mot gris. */
.kx__line {
	position: absolute;
	top: 69%;
	right: 6cqw;
	left: 6cqw;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.32em;
	font-size: var(--fs, 7cqw);
	line-height: 1;
	white-space: nowrap;
}

.kx__line--stack {
	top: 66%;
	flex-direction: column;
	gap: 0.26em;
}

.kx__words {
	display: inline-grid;
	justify-items: end;
	overflow: hidden;
	padding: 0.06em 0;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.kx__line--stack .kx__words,
.kx__line--solo .kx__words {
	justify-items: center;
}

.kx__word {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(105%);
	transition: transform 0.5s var(--kx-ease), opacity 0.35s var(--kx-ease);
}

.kx__frame.is-in .kx__word.is-on {
	opacity: 1;
	transform: none;
	transition-delay: 0.55s;
}

.kx__frame.is-in .kx__word.is-cycled {
	transition-delay: 0s;
}

.kx__word.is-off {
	opacity: 0;
	transform: translateY(-105%);
}

.kx__bar {
	flex: none;
	width: max(2px, 0.4cqw);
	height: 1.25em;
	background: currentColor;
	transform: scaleY(0);
}

.kx__frame.is-in .kx__bar {
	animation: kx-bar 0.5s var(--kx-ease) 0.45s forwards, kx-blink 1.1s steps(1) 1.2s infinite;
}

.kx__line--stack .kx__bar {
	width: 18cqw;
	height: max(2px, 0.4cqw);
	order: 1;
	transform: scaleX(0);
}

.kx__line--stack .kx__tag {
	order: 2;
}

.kx__frame.is-in .kx__line--stack .kx__bar {
	animation: kx-rule 0.6s var(--kx-ease) 0.45s forwards;
}

.kx__tag {
	font-size: 0.62em;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--kx-grey);
	opacity: 0;
	transform: translateX(-0.6em);
	transition: opacity 0.6s var(--kx-ease) 0.8s, transform 0.6s var(--kx-ease) 0.8s;
}

.kx__line--stack .kx__tag {
	transform: translateY(0.4em);
}

.kx__frame.is-in .kx__tag {
	opacity: 1;
	transform: none;
}

/* Plan sombre : mot encadré de deux filets, comme « TOGETHER ». */
.kx__frame--dark .kx__line {
	top: 70%;
}

.kx__frame--dark .kx__words {
	position: relative;
	padding: 0.2em 0.3em;
}

.kx__frame--dark .kx__words::before,
.kx__frame--dark .kx__words::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	height: max(2px, 0.45cqw);
	background: #fff;
	transform: scaleX(0);
	transition: transform 0.7s var(--kx-ease) 0.7s;
}

.kx__frame--dark .kx__words::before {
	top: 0;
}

.kx__frame--dark .kx__words::after {
	bottom: 0;
}

.kx__frame--dark.is-in .kx__words::before,
.kx__frame--dark.is-in .kx__words::after {
	transform: none;
}

/* Icônes en orbite. */
.kx__icons {
	position: absolute;
	inset: 0;
}

.kx__icon {
	position: absolute;
	top: var(--y);
	left: var(--x);
	display: grid;
	place-items: center;
	width: 11.5cqw;
	height: 11.5cqw;
	margin: -5.75cqw 0 0 -5.75cqw;
	border-radius: 3.2cqw;
	background: #fff;
	box-shadow: 0 1.6cqw 4cqw -1.6cqw rgba(10, 16, 34, 0.35), inset 0 0 0 1px rgba(10, 16, 34, 0.05);
	opacity: 0;
	filter: blur(1.4cqw);
	transform: scale(0.4);
	transition: opacity 0.7s var(--kx-ease), filter 0.7s var(--kx-ease), transform 0.8s var(--kx-pop);
	transition-delay: calc(0.6s + var(--i) * 0.11s);
}

.kx__frame.is-in .kx__icon {
	opacity: 1;
	filter: none;
	transform: none;
	animation: kx-float 4.2s ease-in-out calc(1.4s + var(--i) * 0.3s) infinite;
}

.kx__frame.is-out .kx__icon {
	transition-delay: 0s;
}

.kx__icon .icon,
.kx__icon .kx__logo {
	width: 6.6cqw;
	height: 6.6cqw;
}

.kx__icon .kx__logo {
	color: var(--brand, var(--kx-ink));
}

.kx__icon .brand-logo--mono {
	color: var(--kx-ink);
}

.kx__icon .brand-logo--wide {
	width: 8.6cqw;
	height: auto;
}

.kx__frame--dark .kx__icon {
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Plan final : symbole, nom espacé, rôle de la page. */
.kx__badge--logo {
	background: #fff;
	color: var(--kx-ink);
	box-shadow: 0 0 0 1.1cqw var(--kx-ink), 0 2.4cqw 6cqw -2cqw rgba(10, 16, 34, 0.45);
}

.kx__symbol {
	width: 13cqw;
	height: auto;
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}

.kx__frame.is-in .kx__symbol {
	animation: kx-symbol 0.9s var(--kx-pop) 0.35s forwards;
}

.kx__brand,
.kx__tagline {
	position: absolute;
	right: 0;
	left: 0;
	margin: 0;
	text-align: center;
	opacity: 0;
	transition: opacity 0.7s var(--kx-ease), letter-spacing 1.2s var(--kx-ease);
}

.kx__brand {
	top: 64%;
	font-size: 6cqw;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.kx__tagline {
	top: 75%;
	font-size: 2.4cqw;
	font-weight: 500;
	letter-spacing: 0.3em;
	color: var(--kx-blue);
	transition-delay: 0.5s;
}

.kx__frame.is-in .kx__brand {
	opacity: 1;
	letter-spacing: 0.34em;
	transition-delay: 0.6s;
}

.kx__frame.is-in .kx__tagline {
	opacity: 1;
	transition-delay: 1.1s;
}

/* Dans un pôle d'expertise, la scène occupe tout le panneau. */
.pillar__visual--anim:has(.kx) {
	padding: 0;
	overflow: hidden;
	border: 0;
}

.pillar__visual--anim .kx {
	border-radius: inherit;
}

@keyframes kx-pop {
	0% { transform: scale(0); }
	100% { transform: scale(1); }
}

@keyframes kx-rise {
	to { opacity: 1; transform: none; }
}

@keyframes kx-burst {
	0% { opacity: 0; transform: translate(0, 0) scale(0.2); }
	12% { opacity: 1; }
	70% { opacity: 0.95; transform: translate(var(--x), var(--y)) scale(1); }
	100% { opacity: var(--o, 0); transform: translate(var(--x), var(--y)) scale(var(--e, 1)); }
}

@keyframes kx-bar {
	to { transform: scaleY(1); }
}

@keyframes kx-rule {
	to { transform: scaleX(1); }
}

@keyframes kx-blink {
	50% { opacity: 0.15; }
}

@keyframes kx-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-1.4cqw); }
}

@keyframes kx-spin {
	to { transform: rotate(360deg); }
}

@keyframes kx-wipe {
	0% { opacity: 1; transform: scale(0.2); }
	100% { opacity: 0; transform: scale(3.2); }
}

@keyframes kx-symbol {
	to { opacity: 1; transform: none; }
}

/* « Réduire les animations » (réglage d'accessibilité, ou économie d'énergie sur certains
 * téléphones) : plus aucun déplacement, mais plans et mots s'enchaînent en fondu. */
@media (prefers-reduced-motion: reduce) {
	.kx *,
	.kx *::before,
	.kx *::after {
		animation: none !important;
		transition: opacity 0.5s ease !important;
	}

	.kx__frame {
		transition: opacity 0.45s ease, visibility 0s 0.45s !important;
	}

	.kx__frame.is-in {
		transition: opacity 0.3s ease, visibility 0s !important;
	}

	.kx__frame.is-out,
	.kx__word,
	.kx__word.is-off {
		transform: none;
	}

	.kx__frame.is-in .kx__badge,
	.kx__frame.is-in .kx__symbol {
		transform: none;
		opacity: 1;
	}

	.kx__frame.is-in .kx__badge-text span,
	.kx__frame.is-in .kx__bar {
		opacity: 1;
		transform: none;
	}
}