/**
 * Page Transition - Article Shared Element
 *
 * L'image a la une morph entre la boucle d'articles et single.php.
 * Le header reste stable. Le reste fait un crossfade.
 *
 * Les animations d'entree (H1, metas, extrait, contenu) sont jouees
 * sur le vrai DOM apres viewTransition.finished pour ne pas bloquer
 * le scroll pendant la transition (~0.5s au lieu de ~2.5s).
 *
 * @package     UneAutreVoix
 * @subpackage  CSS
 * @version     0.1.0
 *
 * @changelog
 * 0.1.0 — Passage en preprod
 * 0.0.4 - Phase 1 refacto : delays hardcodés → variables CSS
 *        - 0.15s → var(--transition-fast), 0.3s → var(--transition-normal)
 * 0.0.3 - Animations entrée déplacées des pseudo-éléments vers le vrai DOM
 *        - Suppression view-transition-name sur titre/meta/extrait/contenu
 *        - Classe .article-entering (opacity:0) pendant la transition
 *        - Classe .article-revealed déclenche les animations CSS
 *        - Scroll débloqué en ~0.5s au lieu de ~2.5s
 * 0.0.2 - Entrée en cascade : H1, metas, extrait slide-in left, contenu slide-in right
 *        - Fade-out anciens éléments (article → article)
 *        - Easing organique cubic-bezier(0.16, 1, 0.3, 1)
 * 0.0.1 - Création : shared element transition image à la une
 *        - @view-transition { navigation: auto } global
 *        - Morph image (0.5s), crossfade (0.4s), header stable
 *        - Keyframes fade-in/out, slide-in left/right
 */

/* Opt-in global aux view transitions cross-document
 * NOTE : La règle canonique est déclarée en inline dans header.php
 * (<style> avant wp_head()) pour garantir qu'elle est disponible
 * avant pagereveal (un fichier CSS externe peut ne pas être parsé
 * à temps). Cette déclaration est conservée comme fallback documentaire.
 */
@view-transition {
	navigation: auto;
}

/* Par defaut : transitions instantanees (invisibles) */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0s;
}

/* -------------------------------------------------------
 * Article reveal : z-index
 * ------------------------------------------------------- */
html:active-view-transition-type(article-reveal)::view-transition-group(root) {
	z-index: 1;
}

html:active-view-transition-type(article-reveal)::view-transition-group(article-hero) {
	z-index: 2;
}

html:active-view-transition-type(article-reveal)::view-transition-group(site-header) {
	z-index: 3;
}

/* -------------------------------------------------------
 * Article reveal : header stable
 * ------------------------------------------------------- */
html:active-view-transition-type(article-reveal) #masthead {
	view-transition-name: site-header;
}

html:active-view-transition-type(article-reveal)::view-transition-old(site-header),
html:active-view-transition-type(article-reveal)::view-transition-new(site-header) {
	animation: none;
}

/* -------------------------------------------------------
 * Article reveal : crossfade du contenu
 * ------------------------------------------------------- */
html:active-view-transition-type(article-reveal)::view-transition-old(root) {
	animation: uav-fade-out 0.4s ease both;
}

html:active-view-transition-type(article-reveal)::view-transition-new(root) {
	animation: uav-fade-in 0.4s ease both;
}

/* -------------------------------------------------------
 * Article reveal : morph de l'image
 * ------------------------------------------------------- */
html:active-view-transition-type(article-reveal)::view-transition-group(article-hero) {
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
}

html:active-view-transition-type(article-reveal)::view-transition-old(article-hero),
html:active-view-transition-type(article-reveal)::view-transition-new(article-hero) {
	object-fit: cover;
}

/* -------------------------------------------------------
 * Entree en cascade sur le vrai DOM
 *
 * Declenchee par la classe .article-revealed ajoutee
 * en JS apres viewTransition.finished (~0.5s).
 * Avantage : ne bloque PAS le scroll pendant l'animation.
 * Easing organique : demarrage rapide, deceleration douce.
 * ------------------------------------------------------- */

/* Etat initial : elements caches pendant la transition */
.article-entering .single-post .main-section-demi h1,
.article-entering .single-post .main-section-demi .post-meta,
.article-entering .single-post .main-section-demi .post-excerpt,
.article-entering .single-post .article-contenu-horizontal {
	opacity: 0;
}

/* Animations apres la transition */
.article-revealed .single-post .main-section-demi h1 {
	animation: uav-slide-in-left 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.article-revealed .single-post .main-section-demi .post-meta {
	animation: uav-slide-in-left 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--transition-fast) both;
}

.article-revealed .single-post .main-section-demi .post-excerpt {
	animation: uav-slide-in-left 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--transition-normal) both;
}

.article-revealed .single-post .article-contenu-horizontal {
	animation: uav-slide-in-right 1.8s cubic-bezier(0.16, 1, 0.3, 1) var(--transition-fast) both;
}

/* -------------------------------------------------------
 * Keyframes
 * ------------------------------------------------------- */
@keyframes uav-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes uav-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes uav-slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes uav-slide-in-right {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}