/**
 * Consonance — charte motion : calme, sobre, épuré.
 * Transitions inter-pages, entrées, micro-interactions nav.
 */

/* View Transitions API — Chrome / Edge (navigation same-origin) */
@view-transition {
	navigation: auto;
}

::view-transition-old(mc-header),
::view-transition-new(mc-header),
::view-transition-old(mc-footer),
::view-transition-new(mc-footer) {
	animation: none;
}

::view-transition-old(mc-main) {
	animation: mc-vt-out 0.48s var(--mc-ref-e) both;
}

::view-transition-new(mc-main) {
	animation: mc-vt-in 0.72s var(--mc-ref-e) 0.06s both;
}

@keyframes mc-vt-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-10px);
	}
}

@keyframes mc-vt-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Éléments persistants vs contenu */
.mc-header {
	view-transition-name: mc-header;
}

main,
.mc-ref-landing,
.mc-about-page,
.mc-genese-landing,
.mc-shop,
.single-product main {
	view-transition-name: mc-main;
}

.mc-footer {
	view-transition-name: mc-footer;
}

/* Voile de transition (fallback Safari / Firefox) */
#mc-page-veil {
	position: fixed;
	inset: 0;
	z-index: 9997;
	background: var(--mc-ref-creme);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.48s var(--mc-ref-e);
}

body:not(.mc-editorial):not(.home) #mc-page-veil {
	background: var(--mc-ref-noir);
}

html.mc-page-leaving #mc-page-veil {
	opacity: 1;
	pointer-events: auto;
}

/* Sortie / entrée JS */
html.mc-page-leaving main,
html.mc-page-leaving .mc-ref-landing,
html.mc-page-leaving .mc-about-page,
html.mc-page-leaving .mc-genese-landing,
html.mc-page-leaving .mc-shop,
html.mc-page-leaving .single-product main {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.48s var(--mc-ref-e), transform 0.48s var(--mc-ref-e);
}

html.mc-page-enter main,
html.mc-page-enter .mc-ref-landing,
html.mc-page-enter .mc-about-page,
html.mc-page-enter .mc-genese-landing,
html.mc-page-enter .mc-shop,
html.mc-page-enter .single-product main {
	animation: mc-page-enter 0.82s var(--mc-ref-e) both;
}

@keyframes mc-page-enter {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ——— Scroll reveals (accueil, éditorial, boutique, fiche produit) ——— */
html.js body.mc-motion .rv {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 1.2s var(--mc-ref-e), transform 1.2s var(--mc-ref-e);
}

html.js body.mc-motion .rv.in {
	opacity: 1;
	transform: none;
}

html.js body.mc-motion .rv.d1 { transition-delay: 0.12s; }
html.js body.mc-motion .rv.d2 { transition-delay: 0.24s; }
html.js body.mc-motion .rv.d3 { transition-delay: 0.36s; }

html.js body.mc-motion .ph {
	position: relative;
	overflow: hidden;
}

html.js body.mc-motion .ph img,
html.js body.mc-motion .ph video {
	transform: scale(1.06);
	transition: transform 2s var(--mc-ref-e);
}

html.js body.mc-motion .ph::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--mc-ref-creme);
	transform: scaleY(1);
	transform-origin: top;
	transition: transform 1.3s var(--mc-ref-e);
	pointer-events: none;
}

html.js body.mc-motion .ph.dark::after {
	background: var(--mc-ref-noir);
}

html.js body.mc-motion .ph.in::after {
	transform: scaleY(0);
}

html.js body.mc-motion .ph.in img,
html.js body.mc-motion .ph.in video {
	transform: scale(1);
}

/* Nav — soulignement lent (signature Consonance) */
body.mc-motion .mc-header__nav a,
body.mc-motion .mc-header__nav-list a {
	position: relative;
}

body.mc-motion .mc-header__nav a::after,
body.mc-motion .mc-header__nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.55s var(--mc-ref-e);
	opacity: 0.85;
}

body.mc-motion .mc-header__nav a:hover::after,
body.mc-motion .mc-header__nav-list a:hover::after,
body.mc-motion .mc-header__nav a:focus-visible::after,
body.mc-motion .mc-header__nav-list a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Liens éditoriaux — glissement discret */
body.mc-motion.mc-editorial main a:not(.mc-about-btn):not(.mc-genese-btn):not(.wp-block-button__link):not(.btn) {
	transition: color 0.45s var(--mc-ref-e), border-color 0.45s var(--mc-ref-e);
}

/* Boutons — même rythme partout */
body.mc-motion .mc-about-btn,
body.mc-motion .mc-genese-btn,
body.mc-motion .mc-ref-pc .btn,
body.mc-motion .mc-ref-pc a.button {
	transition: all 0.55s var(--mc-ref-e);
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	::view-transition-old(mc-main),
	::view-transition-new(mc-main) {
		animation: none;
	}

	html.mc-page-enter main,
	html.mc-page-enter .mc-ref-landing,
	html.mc-page-enter .mc-about-page,
	html.mc-page-enter .mc-genese-landing {
		animation: none;
	}

	html.mc-page-leaving main,
	html.mc-page-leaving .mc-ref-landing {
		transition: none;
	}

	html.js body.mc-motion .rv,
	html.js body.mc-motion .ph::after,
	html.js body.mc-motion .ph img,
	html.js body.mc-motion .ph video {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	body.mc-motion .mc-header__nav a::after,
	body.mc-motion .mc-header__nav-list a::after {
		display: none;
	}
}