/*
 * Club Canin — les animations.
 *
 * Une règle tient tout le fichier : ON ANIME LES ÉLÉMENTS, PAS LES BLOCS.
 * Un bloc qui entre d'un seul tenant se remarque à peine ; un titre qui monte
 * mot à mot, une image qui se découvre, des cartes qui se posent l'une après
 * l'autre racontent la page.
 *
 *   1. Les variantes de parties, pour la scène « Composée » de Blocs Creator.
 *      Chaque gabarit de blocs/ pose `data-bc-part="<variante>"` sur ses
 *      éléments ; le plugin les révèle à l'entrée du bloc, avec un décalage.
 *      Le plugin fournit haut, bas, gauche, droite, zoom, pastille, fondu,
 *      ligne ; le thème ajoute mots, masque, flou, trait, pop, carte, et
 *      redessine ligne à son rythme. Depuis la 6.0, le plugin n'a plus que
 *      ses gestes sobres : tout ce qui fait l'allure du site est ici, y
 *      compris la scène « Signature » des citations (inc/apparitions.php).
 *   2. L'en-tête : entrée au chargement, collant, compact au défilement,
 *      caché quand on descend, barre de lecture, menu mobile en rideau.
 *   3. Le pied de page : titre mot à mot, colonnes en cascade, filet tracé,
 *      halo orange qui dérive.
 *   4. Les gabarits (en-têtes de page, grilles d'articles) : `.kahel-reveal`.
 *   5. Les micro-interactions : cartes inclinables, boutons aimantés, flèches.
 *
 * Rien n'est caché sans JavaScript : tout état de départ est conditionné à
 * `.bc-anim-prete` (posée par Blocs Creator) ou `.kahel-motion` (posée par
 * l'amorce du thème, dans functions.php). Aucune des deux ne l'est quand
 * l'appareil demande moins d'animations.
 */

:root {
	--kahel-ease: var(--wp--custom--motion--ease, cubic-bezier(0.16, 1, 0.3, 1));
	--kahel-ease-expo: var(--wp--custom--motion--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
	--kahel-ease-spring: var(--wp--custom--motion--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
	--kahel-cadence-mots: 55ms;
}

/* ================================================================== *
 * 1. Variantes de parties — scène « Composée » de Blocs Creator
 *
 * `html` en tête de sélecteur : un cran de spécificité au-dessus des règles
 * du plugin, quel que soit l'ordre de chargement des feuilles.
 * ================================================================== */

/* Mots — le titre reste en place, chaque mot monte de sous sa ligne. */
.kahel-mot {
	display: inline-block;
	padding: 0.1em 0.06em 0.2em;
	margin: -0.1em -0.06em -0.2em;
	overflow: hidden;
	vertical-align: top;
}

.kahel-mot__in {
	display: inline-block;
}

/* Une fois posés, les mots rendent leurs débords (italiques, accents). */
.kahel-mots-poses .kahel-mot {
	overflow: visible;
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"] [data-bc-part="mots"] {
	opacity: 1;
	transform: none;
}

html.bc-anim-prete .bc-anim[data-bc-anim] [data-bc-part="mots"] .kahel-mot__in {
	transform: translate3d(0, 110%, 0) rotate(4deg);
	transform-origin: 0 100%;
	transition: transform 1050ms var(--kahel-ease-expo) calc(var(--bc-p-delai, 0ms) + var(--kahel-i, 0) * var(--kahel-cadence-mots));
}

html.bc-anim-prete .bc-anim[data-bc-anim].is-vu [data-bc-part="mots"] .kahel-mot__in {
	transform: none;
}

/* Masque — un rideau qui se lève ; l'image derrière se pose en dézoomant. */
html.bc-anim-prete .bc-anim[data-bc-anim="composee"] [data-bc-part="masque"] {
	opacity: 1;
	transform: none;
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1250ms var(--kahel-ease-expo) var(--bc-p-delai, 0ms);
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"].is-vu [data-bc-part="masque"] {
	clip-path: inset(-12% -12% -12% -12%);
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"] [data-bc-part="masque"] :is(img, .kahel-parallax, .kahel-home-project-art) {
	scale: 1.16;
	transition: scale 1700ms var(--kahel-ease-expo) var(--bc-p-delai, 0ms);
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"].is-vu [data-bc-part="masque"] :is(img, .kahel-parallax, .kahel-home-project-art) {
	scale: 1;
}

/* Flou — le texte sort de la brume en montant d'un rien. */
html.bc-anim-prete .bc-anim[data-bc-anim="composee"] [data-bc-part="flou"] {
	--bc-p-y: 0.6rem;

	filter: blur(12px);
	transition:
		opacity 900ms var(--kahel-ease) var(--bc-p-delai, 0ms),
		transform 900ms var(--kahel-ease-expo) var(--bc-p-delai, 0ms),
		filter 900ms var(--kahel-ease) var(--bc-p-delai, 0ms);
}

/* Trait — une ligne qui se tire de gauche à droite. */
html.bc-anim-prete .bc-anim[data-bc-anim="composee"] [data-bc-part="trait"] {
	opacity: 1;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 1100ms var(--kahel-ease-expo) var(--bc-p-delai, 0ms);
}

/* Pop — petit, penché, puis posé d'un rebond. Pour une icône, un guillemet, une étiquette. */
html.bc-anim-prete .bc-anim[data-bc-anim="composee"] [data-bc-part="pop"] {
	transform: scale(0.4) rotate(-14deg);
	transition:
		opacity 500ms var(--kahel-ease) var(--bc-p-delai, 0ms),
		transform 900ms var(--kahel-ease-spring) var(--bc-p-delai, 0ms);
}

/* Carte — monte de loin, légèrement tournée, et se redresse. Une sur deux tourne dans l'autre sens. */
html.bc-anim-prete .bc-anim[data-bc-anim="composee"] [data-bc-part="carte"] {
	transform: translate3d(0, 3.2rem, 0) rotate(var(--kahel-carte-rot, 2.5deg)) scale(0.96);
	transform-origin: 50% 100%;
	transition:
		opacity 700ms var(--kahel-ease) var(--bc-p-delai, 0ms),
		transform 1200ms var(--kahel-ease-expo) var(--bc-p-delai, 0ms);
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"] [data-bc-part="carte"]:nth-child(even) {
	--kahel-carte-rot: -2.5deg;
}

/* Ligne — une rangée de liste qui glisse depuis la gauche. */
html.bc-anim-prete .bc-anim[data-bc-anim="composee"] [data-bc-part="ligne"] {
	--bc-p-x: -1.75rem;

	transition:
		opacity 700ms var(--kahel-ease) var(--bc-p-delai, 0ms),
		transform 1000ms var(--kahel-ease-expo) var(--bc-p-delai, 0ms);
}

/*
 * Les parties qui attendent leur tour (assets/js/animations.js).
 *
 * Blocs Creator révèle un bloc d'un seul coup, dès que son haut entre à
 * l'écran. Sur un téléphone, une section fait souvent deux écrans de haut :
 * ses cartes, son image, son bouton jouaient leur entrée hors de l'écran.
 * Une partie encore sous l'écran garde donc son état de départ —
 * `kahel-attend` l'emporte sur l'arrivée commune (`.is-vu`) — jusqu'à ce
 * qu'elle arrive elle-même à l'écran. Mêmes états de départ que plus haut.
 *
 * Blocs Creator fait de même depuis sa 5.0, avec `bc-attend`, mais la 6.0
 * ne connaît plus l'état de départ des variantes du thème : seul, il
 * cacherait un masque ou un titre mot à mot (opacité 0) le temps que les
 * deux classes tombent, puis le ferait apparaître d'un coup. Les deux
 * classes tiennent donc le même état : tant que l'une reste, la partie
 * attend, et elle entre quand la dernière s'en va. Le thème garde sa propre
 * attente pour le plugin 4.2, qui n'en a pas.
 */
html.bc-anim-prete .bc-anim[data-bc-anim].is-vu [data-bc-part]:is(.kahel-attend, .bc-attend) {
	opacity: 0;
	transform: translate3d(0, 1.1rem, 0);
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"].is-vu [data-bc-part]:is(.kahel-attend, .bc-attend) {
	opacity: 0;
	transform: translate3d(var(--bc-p-x, 0), var(--bc-p-y, 0), 0) scale(var(--bc-p-echelle, 1));
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"].is-vu [data-bc-part="flou"]:is(.kahel-attend, .bc-attend) {
	filter: blur(12px);
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"].is-vu [data-bc-part="trait"]:is(.kahel-attend, .bc-attend) {
	opacity: 1;
	transform: scaleX(0);
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"].is-vu [data-bc-part="pop"]:is(.kahel-attend, .bc-attend) {
	transform: scale(0.4) rotate(-14deg);
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"].is-vu [data-bc-part="carte"]:is(.kahel-attend, .bc-attend) {
	transform: translate3d(0, 3.2rem, 0) rotate(var(--kahel-carte-rot, 2.5deg)) scale(0.96);
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"].is-vu [data-bc-part="masque"]:is(.kahel-attend, .bc-attend) {
	opacity: 1;
	transform: none;
	clip-path: inset(100% 0 0 0);
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"].is-vu [data-bc-part="masque"]:is(.kahel-attend, .bc-attend) :is(img, .kahel-parallax, .kahel-home-project-art) {
	scale: 1.16;
}

html.bc-anim-prete .bc-anim[data-bc-anim="composee"].is-vu [data-bc-part="mots"]:is(.kahel-attend, .bc-attend) {
	opacity: 1;
	transform: none;
}

html.bc-anim-prete .bc-anim[data-bc-anim].is-vu [data-bc-part="mots"]:is(.kahel-attend, .bc-attend) .kahel-mot__in {
	transform: translate3d(0, 110%, 0) rotate(4deg);
}

html.bc-anim-prete .bc-anim[data-bc-anim].is-vu .kahel-kicker:is(.kahel-attend, .bc-attend)::before {
	transform: scaleX(0);
}

/* Le trait des surtitres se dessine à l'entrée de chaque section. */
html.bc-anim-prete .bc-anim[data-bc-anim] .kahel-kicker::before {
	transform-origin: 0 50%;
	transition: transform 900ms var(--kahel-ease-expo) calc(var(--bc-p-delai, 0ms) + 180ms);
}

html.bc-anim-prete .bc-anim[data-bc-anim]:not(.is-vu) .kahel-kicker::before {
	transform: scaleX(0);
}

/*
 * Signature — la scène des citations (inc/apparitions.php) : un balayage de
 * la gauche vers la droite, comme le coup de pinceau du menu. Elle venait de
 * Blocs Creator, qui l'a retirée en 6.0 (son allure était celle de ce site) :
 * elle vit désormais ici, à l'identique. Sa courbe lui est propre : franche
 * au départ, elle s'arrête net. Elle passe par la variable, et non par
 * `transition-timing-function` : le socle du plugin est plus spécifique.
 *
 * L'arrivée reste celle du socle (`.is-vu`, plus spécifique que ces règles) :
 * opacité pleine, plus de découpe.
 */
html.bc-anim-prete .bc-anim[data-bc-anim="signature"] {
	opacity: 1;
	clip-path: inset(0 100% 0 0);

	--bc-anim-courbe: cubic-bezier(0.65, 0.02, 0.28, 1);
	--bc-p-courbe: cubic-bezier(0.22, 0.68, 0.36, 1);
	--bc-a-repose: 1;
	--bc-p-cadence: 60ms;
	--bc-p-depart: 220ms;
}

html.bc-anim-prete .bc-anim[data-bc-anim="signature"] [data-bc-part] {
	opacity: 0;
}

/* ================================================================== *
 * 2. L'en-tête
 * ================================================================== */

.kahel-header-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	transition: transform 520ms var(--kahel-ease);
}

@media (max-width: 600px) {
	.kahel-header-part {
		top: 0;
	}
}

/* Caché quand on descend, rendu dès qu'on remonte. */
.kahel-header-part.is-cache {
	transform: translate3d(0, -100%, 0);
}

.kahel-header {
	position: relative;
	isolation: isolate;
	background-color: var(--wp--preset--color--base);
	transition:
		padding 420ms var(--kahel-ease),
		border-color 420ms var(--kahel-ease);
}

/*
 * Le fond est plein, sans transparence. L'ombre portée, elle, n'apparaît
 * qu'au défilement : elle est portée par un pseudo-élément.
 */
.kahel-header::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 14px 34px -22px rgba(88, 46, 18, 0.45);
	opacity: 0;
	transition: opacity 420ms var(--kahel-ease);
	pointer-events: none;
}

.kahel-header-part.is-defile .kahel-header {
	padding-top: 12px;
	padding-bottom: 12px;
	border-bottom-color: transparent;
}

.kahel-header-part.is-defile .kahel-header::before {
	opacity: 1;
}

/* Caché, l'en-tête ne laisse pas son ombre dépasser en haut de l'écran. */
.kahel-header-part.is-cache .kahel-header::before {
	box-shadow: none;
}

/* La barre de lecture, sous l'en-tête. */
.kahel-progression {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	max-width: none !important;
	margin: 0 !important;
	background: linear-gradient(90deg, var(--wp--preset--color--orange), var(--wp--preset--color--orange-deep));
	transform: scaleX(var(--kahel-lecture, 0));
	transform-origin: 0 50%;
	opacity: 0;
	transition: opacity 300ms var(--kahel-ease);
	pointer-events: none;
}

.kahel-header-part.is-defile .kahel-progression {
	opacity: 1;
}

/* Les liens : un trait orange qui se tire sous le libellé. */
.kahel-header .wp-block-navigation-item__content {
	position: relative;
}

/* Le trait orange suffit : pas de soulignement du texte en plus. */
.kahel-header .wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus, :focus-visible, :active) {
	text-decoration: none;
}

.kahel-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -6px;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--orange);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 450ms var(--kahel-ease);
}

.kahel-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.kahel-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.kahel-header .wp-block-navigation__container > :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content::after,
.kahel-header .wp-block-navigation__container > .wp-block-navigation-item > [aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

/* L'entrée au chargement. `backwards` : l'animation ne garde pas la main
 * après coup, pour laisser vivre les survols. */
.kahel-motion .kahel-header {
	animation: kahel-entete-descend 900ms var(--kahel-ease-expo) backwards;
}

.kahel-motion .kahel-header-brand a {
	animation: kahel-glisse-gauche 900ms var(--kahel-ease-expo) 120ms backwards;
}

.kahel-motion .kahel-header-brand a::before {
	animation: kahel-patte-eclot 1000ms var(--kahel-ease-spring) 220ms backwards;
}

.kahel-motion .kahel-header .wp-block-navigation__container > .wp-block-navigation-item,
.kahel-motion .kahel-header .wp-block-navigation__responsive-container-open {
	animation: kahel-descend 800ms var(--kahel-ease-expo) backwards;
	animation-delay: calc(280ms + var(--kahel-i, 0) * 70ms);
}

.kahel-motion .kahel-header-cta {
	animation: kahel-eclot 900ms var(--kahel-ease-spring) 620ms backwards;
}

/*
 * Le menu mobile : un rideau circulaire qui part du bouton, puis la marque,
 * les pages en cascade et le bouton d'appel. À la fermeture, le rideau se
 * referme vers le bouton (assets/js/animations.js retient la fermeture le
 * temps du geste). La mise en page du menu est dans kahel.css.
 */
.kahel-motion .kahel-header .wp-block-navigation__responsive-container.is-menu-open {
	animation: kahel-rideau-menu 700ms var(--kahel-ease-expo) both;
}

.kahel-motion .kahel-header .is-menu-open .kahel-menu-marque {
	animation: kahel-glisse-gauche 700ms var(--kahel-ease-expo) 120ms backwards;
}

.kahel-motion .kahel-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	animation: kahel-menu-lien 800ms var(--kahel-ease-expo) backwards;
	animation-delay: calc(160ms + var(--kahel-i, 0) * 65ms);
}

.kahel-motion .kahel-header .is-menu-open .kahel-menu-appel {
	animation: kahel-menu-lien 800ms var(--kahel-ease-expo) 520ms backwards;
}

.kahel-motion .kahel-header .is-menu-open .kahel-menu-reseaux .kahel-reseau {
	animation: kahel-menu-lien 800ms var(--kahel-ease-expo) backwards;
	animation-delay: calc(600ms + var(--kahel-i, 0) * 50ms);
}

.kahel-motion .kahel-header .wp-block-navigation__responsive-container.is-menu-open.is-fermeture {
	animation: kahel-rideau-menu-ferme 480ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

.kahel-motion .kahel-header .is-menu-open.is-fermeture :is(.kahel-menu-marque, .kahel-menu-appel, .kahel-menu-reseaux .kahel-reseau, .wp-block-navigation__container > .wp-block-navigation-item) {
	animation: kahel-menu-lien-sort 260ms cubic-bezier(0.55, 0, 1, 0.45) both;
	animation-delay: calc(var(--kahel-i, 0) * 25ms);
}

/* ================================================================== *
 * 3. Le pied de page
 * ================================================================== */

.kahel-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Le halo orange qui dérive derrière le texte. */
.kahel-footer::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: min(90vw, 980px);
	max-width: none !important;
	aspect-ratio: 1;
	margin: 0 !important;
	right: -24%;
	top: -58%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(244, 122, 31, 0.2) 0%, rgba(244, 122, 31, 0.05) 42%, transparent 66%);
	pointer-events: none;
	animation: kahel-halo-pied 18s var(--wp--custom--motion--ease-soft) infinite alternate;
}

.kahel-footer-top {
	position: relative;
}

/* Le « soleil » du titre miroite doucement. */
.kahel-footer-title strong .kahel-mot__in {
	background: linear-gradient(100deg, var(--wp--preset--color--orange) 20%, var(--wp--preset--color--apricot) 45%, var(--wp--preset--color--orange) 70%) 0 0 / 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: kahel-miroite 6s linear infinite;
}

/* Les liens : décalés d'un cran et soulignés au survol. */
.kahel-footer-nav .wp-block-navigation-item__content {
	position: relative;
	transition: color var(--wp--custom--motion--duration-fast) var(--kahel-ease), transform 400ms var(--kahel-ease);
}

.kahel-footer-nav .wp-block-navigation-item__content:hover {
	transform: translateX(4px);
}

/*
 * L'entrée : chaque groupe — la marque, chaque colonne de liens, le bas —
 * entre quand il arrive à l'écran (assets/js/animations.js lui pose `is-vu`),
 * et dans le groupe, chaque élément attend son tour (--kahel-d).
 */
.kahel-motion .kahel-footer :is(
	.kahel-footer-brandline,
	.kahel-footer-copy,
	.kahel-footer-brand .wp-block-buttons,
	.kahel-footer-reseaux .kahel-reseau,
	.kahel-footer-nav > .wp-block-heading,
	.kahel-footer-nav .wp-block-navigation-item,
	.kahel-footer-bottom > *
) {
	opacity: 0;
	transform: translate3d(0, 1.25rem, 0);
	transition:
		opacity 800ms var(--kahel-ease) var(--kahel-d, 0ms),
		transform 1000ms var(--kahel-ease-expo) var(--kahel-d, 0ms);
}

.kahel-motion .kahel-footer .kahel-footer-nav .wp-block-navigation-item {
	transform: translate3d(-1rem, 0, 0);
}

.kahel-motion .kahel-footer .kahel-footer-brand.is-vu :is(.kahel-footer-brandline, .kahel-footer-copy, .wp-block-buttons, .kahel-reseau),
.kahel-motion .kahel-footer .kahel-footer-nav.is-vu > .wp-block-heading,
.kahel-motion .kahel-footer .kahel-footer-nav.is-vu .wp-block-navigation-item,
.kahel-motion .kahel-footer .kahel-footer-bottom.is-vu > * {
	opacity: 1;
	transform: none;
}

.kahel-footer .kahel-footer-copy {
	--kahel-d: 420ms;
}

.kahel-footer .kahel-footer-brand .wp-block-buttons {
	--kahel-d: 540ms;
}

.kahel-footer .kahel-footer-reseaux .kahel-reseau {
	--kahel-d: calc(640ms + var(--kahel-i, 0) * 60ms);
}

.kahel-footer .kahel-footer-nav:nth-child(2) {
	--kahel-base: 260ms;
}

.kahel-footer .kahel-footer-nav:nth-child(3) {
	--kahel-base: 380ms;
}

.kahel-footer .kahel-footer-nav > .wp-block-heading {
	--kahel-d: var(--kahel-base, 260ms);
}

.kahel-footer .kahel-footer-nav .wp-block-navigation-item {
	--kahel-d: calc(var(--kahel-base, 260ms) + 80ms + var(--kahel-i, 0) * 60ms);
}

.kahel-footer .kahel-footer-bottom > * {
	--kahel-d: 760ms;
}

/* Sur mobile, le bas arrive seul à l'écran : il n'attend pas les colonnes. */
@media (max-width: 700px) {
	.kahel-footer .kahel-footer-bottom > * {
		--kahel-d: 120ms;
	}
}

/* Le titre, mot à mot. */
.kahel-motion .kahel-footer .kahel-footer-title .kahel-mot__in {
	transform: translate3d(0, 110%, 0) rotate(4deg);
	transform-origin: 0 100%;
	transition: transform 1050ms var(--kahel-ease-expo) calc(120ms + var(--kahel-i, 0) * var(--kahel-cadence-mots));
}

.kahel-motion .kahel-footer .kahel-footer-brand.is-vu .kahel-footer-title .kahel-mot__in {
	transform: none;
}

/* Le filet sous les colonnes se tire de gauche à droite, quand le bas du pied de page paraît. */
.kahel-motion .kahel-footer-top {
	border-bottom-color: transparent;
}

.kahel-motion .kahel-footer-top::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: var(--wp--preset--color--line-on-ink);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 1600ms var(--kahel-ease-expo) 500ms;
}

.kahel-motion .kahel-footer:has(.kahel-footer-bottom.is-vu) .kahel-footer-top::after {
	transform: scaleX(1);
}

/* ================================================================== *
 * 4. Les gabarits — en-têtes de page, visuels, grilles d'articles
 * ================================================================== */

.kahel-motion .kahel-reveal > * {
	opacity: 0;
	transform: translate3d(0, 1.4rem, 0);
	transition:
		opacity 800ms var(--kahel-ease) calc(var(--kahel-i, 0) * 90ms),
		transform 1000ms var(--kahel-ease-expo) calc(var(--kahel-i, 0) * 90ms);
}

.kahel-motion .kahel-reveal > [data-kahel-mots] {
	opacity: 1;
	transform: none;
}

.kahel-motion .kahel-reveal.is-vu > * {
	opacity: 1;
	transform: none;
}

/* Article : le titre, sous l'image, se lève une fois l'image lancée. */
.kahel-motion .kahel-single-featured + .kahel-single-header {
	--kahel-d: 380ms;
}

.kahel-motion .kahel-single-featured + .kahel-single-header > * {
	transition-delay: calc(280ms + var(--kahel-i, 0) * 90ms);
}

.kahel-motion .kahel-reveal [data-kahel-mots] .kahel-mot__in {
	transform: translate3d(0, 110%, 0) rotate(4deg);
	transform-origin: 0 100%;
	transition: transform 1050ms var(--kahel-ease-expo) calc(var(--kahel-d, 90ms) + var(--kahel-i, 0) * var(--kahel-cadence-mots));
}

.kahel-motion .kahel-reveal.is-vu [data-kahel-mots] .kahel-mot__in {
	transform: none;
}

.kahel-motion .kahel-reveal .kahel-kicker::before {
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 900ms var(--kahel-ease-expo) 200ms;
}

.kahel-motion .kahel-reveal.is-vu .kahel-kicker::before {
	transform: none;
}

.kahel-motion .kahel-reveal-media {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1300ms var(--kahel-ease-expo) 150ms;
}

.kahel-motion .kahel-reveal-media img {
	scale: 1.16;
	transition: scale 1800ms var(--kahel-ease-expo) 150ms;
}

.kahel-motion .kahel-reveal-media.is-vu {
	clip-path: inset(-12% -12% -12% -12%);
}

.kahel-motion .kahel-reveal-media.is-vu img {
	scale: 1;
}

/* Les cartes d'articles se posent une à une, colonne par colonne. */
.kahel-motion :is(.kahel-archive-grid, .kahel-related-query, .kahel-404-recent-query) .wp-block-post > * {
	opacity: 0;
	transform: translate3d(0, 2.6rem, 0) rotate(var(--kahel-carte-rot, 1.5deg));
	transform-origin: 50% 100%;
	transition:
		opacity 700ms var(--kahel-ease) calc(var(--kahel-i, 0) * 110ms),
		transform 1200ms var(--kahel-ease-expo) calc(var(--kahel-i, 0) * 110ms);
}

.kahel-motion :is(.kahel-archive-grid, .kahel-related-query, .kahel-404-recent-query) .wp-block-post:nth-child(even) {
	--kahel-carte-rot: -1.5deg;
}

.kahel-motion :is(.kahel-archive-grid, .kahel-related-query, .kahel-404-recent-query) .wp-block-post.is-vu > * {
	opacity: 1;
	transform: none;
}

/* Le visuel des cartes d'archive zoome au survol. */
.kahel-archive-story-media img,
.kahel-related-card .wp-block-post-featured-image img {
	transition: transform 900ms var(--kahel-ease);
}

.kahel-archive-story:hover .kahel-archive-story-media img,
.kahel-related-card:hover .wp-block-post-featured-image img {
	transform: scale(1.06);
}

.kahel-related-card .wp-block-post-featured-image {
	overflow: hidden;
}

/* ================================================================== *
 * 5. Micro-interactions
 * ================================================================== */

/* Cartes inclinables : elles suivent le pointeur, un reflet glisse dessus. */
.kahel-motion [data-kahel-tilt] {
	transform: perspective(1100px) rotateX(var(--kahel-rx, 0deg)) rotateY(var(--kahel-ry, 0deg)) translate3d(0, var(--kahel-leve, 0px), 0);
	transition:
		transform 700ms var(--kahel-ease),
		box-shadow 450ms var(--kahel-ease);
}

.kahel-motion [data-kahel-tilt].is-inclinee {
	transition:
		transform 140ms linear,
		box-shadow 450ms var(--kahel-ease);
}

.kahel-motion [data-kahel-tilt]:hover {
	--kahel-leve: -6px;

	box-shadow: var(--wp--preset--shadow--card-hover);
}

[data-kahel-tilt]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at var(--kahel-gx, 50%) var(--kahel-gy, 0%), rgba(255, 255, 255, 0.3), transparent 48%);
	opacity: 0;
	transition: opacity 450ms var(--kahel-ease);
	pointer-events: none;
}

.kahel-motion [data-kahel-tilt]:hover::after {
	opacity: 1;
}

/* Boutons aimantés : ils se laissent attirer par le pointeur. */
.kahel-motion :is(.kahel-magnetic, .kahel-header-cta, .kahel-footer-cta) {
	transform: translate3d(var(--kahel-aimant-x, 0px), var(--kahel-aimant-y, 0px), 0);
	transition: transform 600ms var(--kahel-ease-spring);
}

/* Les flèches avancent au survol de leur lien. */
.kahel-fleche {
	display: inline-block;
	transition: transform 420ms var(--kahel-ease-spring);
}

a:hover > .kahel-fleche,
a:focus-visible > .kahel-fleche {
	transform: translateX(5px);
}

/* ================================================================== *
 * Images-clés
 * ================================================================== */

@keyframes kahel-entete-descend {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}
}

@keyframes kahel-glisse-gauche {
	from {
		opacity: 0;
		transform: translate3d(-1.25rem, 0, 0);
	}
}

@keyframes kahel-descend {
	from {
		opacity: 0;
		transform: translate3d(0, -0.9rem, 0);
	}
}

@keyframes kahel-eclot {
	from {
		opacity: 0;
		transform: scale(0.6);
	}
}

@keyframes kahel-patte-eclot {
	from {
		transform: scale(0) rotate(-150deg);
	}
}

@keyframes kahel-rideau-menu {
	from {
		clip-path: circle(0% at calc(100% - 36px) 36px);
	}

	to {
		clip-path: circle(160% at calc(100% - 36px) 36px);
	}
}

@keyframes kahel-rideau-menu-ferme {
	from {
		clip-path: circle(160% at calc(100% - 36px) 36px);
	}

	to {
		clip-path: circle(0% at calc(100% - 36px) 36px);
	}
}

@keyframes kahel-menu-lien {
	from {
		opacity: 0;
		transform: translate3d(0, 1.6rem, 0);
	}
}

@keyframes kahel-menu-lien-sort {
	to {
		opacity: 0;
		transform: translate3d(0, -0.8rem, 0);
	}
}

@keyframes kahel-halo-pied {
	from {
		translate: 0 0;
		scale: 1;
	}

	to {
		translate: -30% 22%;
		scale: 1.18;
	}
}

@keyframes kahel-miroite {
	to {
		background-position: -250% 0;
	}
}

/* ================================================================== *
 * Moins d'animations
 *
 * L'amorce ne pose pas `.kahel-motion`, et Blocs Creator ne pose pas
 * `.bc-anim-prete` : il n'y a déjà rien à révéler. Restent les mouvements
 * décoratifs permanents, qu'on arrête ici.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.kahel-header-part,
	.kahel-header,
	.kahel-header::before,
	.kahel-progression {
		transition: none;
	}

	.kahel-footer::before,
	.kahel-footer-title strong .kahel-mot__in {
		animation: none;
	}
}