/**
 * blocks-dynamic.css — Animations et états dynamiques Plénit'Finances
 * Dépend de blocks.css (variables --color-* définies là-bas)
 *
 * Contient :
 *   - Animation H1 mot-à-mot (hero)
 *   - Transitions hover cartes
 *   - Entrées au scroll (Intersection Observer — optionnel)
 *
 * Enqueue dans functions.php après plenit-blocks :
 *   wp_enqueue_style( 'plenit-blocks-dynamic', .../css/blocks-dynamic.css, ['plenit-blocks'], $version );
 */


/* ============================================
   ANIMATION H1 — fade-in mot-à-mot (Notion 7.1)
   Les animation-delay sont inline sur chaque .hero-word
   car valeurs dynamiques par position — exception documentée
   au principe "zéro style inline".
   Délai : 80ms entre chaque mot.
   ============================================ */
.gutenberg-page .hero-word {
	opacity: 0;
	display: inline-block;
	animation: plenit-fade-word 0.4s ease forwards;
}

@keyframes plenit-fade-word {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Accessibilité — respecter prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.gutenberg-page .hero-word {
		opacity: 1;
		animation: none;
		transform: none;
	}
}


/* ============================================
   HOVER CARTES — élévation légère au survol
   Scènes, témoignages, coachs
   ============================================ */
.gutenberg-page .carte-scene,
.gutenberg-page .carte-temoignage,
.gutenberg-page .carte-coach {
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gutenberg-page .carte-scene:hover,
.gutenberg-page .carte-temoignage:hover,
.gutenberg-page .carte-coach:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,0.10);
	transform: translateY(-2px);
}

/* Pas d'élévation si reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.gutenberg-page .carte-scene:hover,
	.gutenberg-page .carte-temoignage:hover,
	.gutenberg-page .carte-coach:hover {
		transform: none;
	}
}


/* ============================================
   HOVER ICÔNES — légère mise en avant
   ============================================ */
.gutenberg-page .carte-scene:hover .scene-icone {
	opacity: 1;
	transition: opacity 0.2s ease;
}


/* ============================================
   STAGGERED REVEAL SCÈNES AU SCROLL (Notion 7.2)
   État initial — JS (IntersectionObserver) ajoute .visible
   prefers-reduced-motion : cartes visibles d'emblée
   ============================================ */
.gutenberg-page .carte-scene {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.gutenberg-page .carte-scene.visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.gutenberg-page .carte-scene {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ============================================
   MICRO-INTERACTIONS HOVER (Notion 7.6)
   Scopés .gutenberg-page — aucune contamination
   OnePage, header, footer non affectés
   ============================================ */

/* Bouton CTA — élévation + halo coloré */
.gutenberg-page .wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}
.gutenberg-page .is-style-cta-primary .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(243, 144, 0, 0.3);
}
.gutenberg-page .is-style-cta-inverse .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

/* Cartes scènes — bordure gauche au hover */
.gutenberg-page .carte-scene {
	border-left: 1px solid var(--color-bordure);
	transition: border-left-width 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.4s ease;
}
.gutenberg-page .carte-scene:hover {
	border-left-width: 4px;
	border-left-color: var(--color-primaire);
}

/* Liens texte — underline offset animé */
.gutenberg-page a:not(.wp-block-button__link) {
	text-underline-offset: 2px;
	transition: text-underline-offset 0.2s ease, color 0.2s ease;
}
.gutenberg-page a:not(.wp-block-button__link):hover {
	text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.gutenberg-page .wp-block-button__link,
	.gutenberg-page .carte-scene,
	.gutenberg-page a:not(.wp-block-button__link) {
		transition: none;
	}
	.gutenberg-page .is-style-cta-primary .wp-block-button__link:hover,
	.gutenberg-page .is-style-cta-inverse .wp-block-button__link:hover {
		transform: none;
		box-shadow: none;
	}
}


/* ============================================
   ENTRÉES AU SCROLL — optionnel, JS requis
   Décommenter si tu ajoutes un IntersectionObserver
   dans js/main.js ou un plugin dédié.

   Usage JS :
   document.querySelectorAll('.animate-on-scroll').forEach(el => {
     observer.observe(el);
   });
   ============================================ */
/*
.gutenberg-page .animate-on-scroll {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.gutenberg-page .animate-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.gutenberg-page .animate-on-scroll {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
*/