/* ============================================================================
   Cauris — Design system d'animations
   ----------------------------------------------------------------------------
   - Tokens : durées + courbes d'easing premium (à utiliser partout)
   - Setup Lenis (smooth scroll)
   - Utilities : split-text (.js-split-title / .cauris-word), parallax
   - prefers-reduced-motion : neutralise tout
   ========================================================================== */

:root {
	/* Durées */
	--cauris-dur-fast:    180ms;
	--cauris-dur-base:    420ms;
	--cauris-dur-slow:    800ms;
	--cauris-dur-xslow:  1200ms;

	/* Easings (premium, calmes) */
	--cauris-ease-out:        cubic-bezier(0.22, 1, 0.36, 1);     /* expo.out — punch + soft */
	--cauris-ease-out-soft:   cubic-bezier(0.16, 1, 0.3, 1);      /* quint.out — encore plus soft */
	--cauris-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);     /* doux entrée et sortie */
	--cauris-ease-stand:      cubic-bezier(0.4, 0, 0.2, 1);       /* Material standard */
}

/* ── Lenis (smooth scroll) — CSS officiel requis ─────────────────────────── */

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: clip;
}

.lenis.lenis-scrolling iframe {
	pointer-events: none;
}

/* ── Split-text (mots animés un par un via GSAP) ─────────────────────────── */

.js-split-title {
	/* Avant que le JS ne tourne, on reste invisible le temps du split.
	   Sans JS / sans GSAP → fallback opacity 1 via .no-anim plus bas. */
}

.cauris-word {
	display: inline-block;
	overflow: hidden;
	overflow: clip;
	overflow-clip-margin: 0.25em;
	vertical-align: top;
	line-height: inherit;
}

.cauris-word__inner {
	display: inline-block;
	will-change: transform, opacity;
}

/* ── Parallax (image qui glisse au scroll) ───────────────────────────────── */

.js-parallax {
	display: block;
	will-change: transform;
}

.js-parallax-wrap {
	overflow: hidden;
}

/* ── Reveal manuel (fallback / cas où AOS ne convient pas) ───────────────── */

.cauris-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity   var(--cauris-dur-slow) var(--cauris-ease-out),
		transform var(--cauris-dur-slow) var(--cauris-ease-out);
}

.cauris-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ── Hover micro-interactions ────────────────────────────────────────────── */

.cauris-lift {
	transition: transform var(--cauris-dur-base) var(--cauris-ease-out),
	            box-shadow var(--cauris-dur-base) var(--cauris-ease-out);
}

.cauris-lift:hover,
.cauris-lift:focus-visible {
	transform: translateY(-3px);
}

/* ── Soft state pendant que Lenis n'est pas encore prêt ──────────────────── */

html:not(.lenis) .js-parallax {
	transform: none;
}

/* ── Accessibilité : prefers-reduced-motion ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration:    0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:   0.01ms !important;
		scroll-behavior:       auto    !important;
	}

	html.lenis,
	html.lenis body {
		height: auto;
		overflow: visible;
	}

	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}

	.js-split-title,
	.cauris-word,
	.cauris-word__inner {
		opacity: 1 !important;
		transform: none !important;
	}

	.cauris-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ── No-JS fallback ──────────────────────────────────────────────────────── */

html.no-js [data-aos],
html.no-js .js-split-title,
html.no-js .cauris-reveal {
	opacity: 1 !important;
	transform: none !important;
}