/**
 * Eden Boreal — Animations
 *
 * 1. Parallaxe souris sur .eb-hero
 *    — .eb-hero__media  : couche lente   (×15 / ×10)
 *    — .eb-hero__headline : couche moyenne (×8  / ×5)
 *    — .eb-hero__trust    : couche rapide  (×20 / ×12)
 *
 * 2. Gouttes de rosée interactives (.eb-dew-drop)
 *    — particules 4–8 px, cyan Eden Boreal, glissement vers le bas 800 ms
 *
 * 3. Fade-in au scroll (.eb-animate → .eb-visible)
 *    — opacity 0 → 1, translateY(24px) → 0, 600 ms ease
 *    — cascade delay appliquée via JS sur les enfants des grilles
 *
 * prefers-reduced-motion : désactive toutes les animations.
 *
 * @package KadenceChild
 */


/* ══════════════════════════════════════════════════════════════════════════
 * 1. PARALLAXE — couches du hero
 * ══════════════════════════════════════════════════════════════════════════ */

/* Ancrage pour les gouttes positionnées en absolu */
.eb-hero {
	position: relative;
}

/* Chaque couche parallaxe reçoit une transition CSS pour fluidifier le rendu.
   Le JS met à jour transform via requestAnimationFrame ; la transition lisse
   les micro-saccades entre deux frames. */
.eb-hero__media,
.eb-hero__headline,
.eb-hero__trust {
	will-change: transform;
	transition: transform 0.1s ease-out;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 2. GOUTTES DE ROSÉE
 * ══════════════════════════════════════════════════════════════════════════ */

.eb-dew-drop {
	position: absolute;
	border-radius: 50%;
	background: rgba(26, 138, 138, 0.35); /* Cyan foncé semi-transparent — fallback mode jour (le JS override inline) */
	box-shadow: 0 0 4px rgba(26, 138, 138, 0.2);
	pointer-events: none;
	z-index: 10;
	/* Transition partagée pour glissement + fondu (durée gérée inline par le JS) */
	transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* Mode nuit gouttes — DÉSACTIVÉ v1
[data-theme="dark"] .eb-dew-drop {
	background: rgba(168, 222, 222, 0.85);
	box-shadow: 0 0 6px rgba(168, 222, 222, 0.4);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .eb-dew-drop {
		background: rgba(168, 222, 222, 0.85);
		box-shadow: 0 0 6px rgba(168, 222, 222, 0.4);
	}
} */


/* ══════════════════════════════════════════════════════════════════════════
 * 3. FADE-IN AU SCROLL
 * ══════════════════════════════════════════════════════════════════════════ */

/* État initial — invisible et décalé vers le bas */
.eb-animate {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* État visible — ajouté par IntersectionObserver */
.eb-animate.eb-visible {
	opacity: 1;
	transform: translateY(0);
}

/*
 * Safety fallback — contenu principal de fiche plante toujours visible.
 * Le contenu éditorial et la sidebar ne portent plus la classe eb-animate
 * (retirée dans template-plant.php) mais cette règle garantit une visibilité
 * totale même si une future régression réintroduisait la classe.
 */
.eb-plant-content,
.eb-plant-content__body,
.eb-plant-sidebar {
	opacity: 1 !important;
	transform: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * prefers-reduced-motion — désactiver toutes les animations
 * ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.eb-hero__media,
	.eb-hero__headline,
	.eb-hero__trust {
		transition: none !important;
		transform: none !important;
		will-change: auto;
	}

	.eb-dew-drop {
		display: none !important;
	}

	.eb-animate {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.eb-hero-constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}