/* =========================================================================
   KREED NOVA — animations.css (V2)
   Split text · Reveal · View Transitions · Grain film · Smooth scroll
   ========================================================================= */

/* -------------------------------------------------------------------------
   Split text (animation lettre par lettre des titres clés)
   ------------------------------------------------------------------------- */
.kn-split {
	display: inline-block;
}
.kn-split__word {
	display: inline-block;
	white-space: nowrap;
}
.kn-split__char {
	display: inline-block;
	transform: translateY(110%);
	opacity: 0;
	transition:
		transform 900ms var(--ease-luxe, cubic-bezier(0.22, 0.61, 0.36, 1)),
		opacity   600ms ease-out;
	transition-delay: var(--kn-char-delay, 0ms);
	will-change: transform, opacity;
}
.kn-split.is-visible .kn-split__char {
	transform: translateY(0);
	opacity: 1;
}
.kn-split__space {
	display: inline-block;
	width: 0.25em;
}

/* -------------------------------------------------------------------------
   Reveal au scroll — variantes
   ------------------------------------------------------------------------- */
.kn-reveal,
.kn-reveal-up,
.kn-reveal-left,
.kn-reveal-right,
.kn-reveal-scale {
	opacity: 0;
	transition:
		opacity   1000ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.kn-reveal,
.kn-reveal-up   { transform: translateY(20px); }
.kn-reveal-left { transform: translateX(-20px); }
.kn-reveal-right{ transform: translateX(20px); }
.kn-reveal-scale{ transform: scale(0.985); }

.kn-reveal.is-visible,
.kn-reveal-up.is-visible,
.kn-reveal-left.is-visible,
.kn-reveal-right.is-visible,
.kn-reveal-scale.is-visible {
	opacity: 1;
	transform: none;
}

/* Délais cascade pour groupes (les enfants .kn-reveal d'un .kn-stagger) */
.kn-stagger > .kn-reveal,
.kn-stagger > .kn-reveal-up,
.kn-stagger > .kn-reveal-left,
.kn-stagger > .kn-reveal-right { transition-delay: 0ms; }
.kn-stagger.is-visible > *:nth-child(1) { transition-delay: 60ms;  }
.kn-stagger.is-visible > *:nth-child(2) { transition-delay: 180ms; }
.kn-stagger.is-visible > *:nth-child(3) { transition-delay: 300ms; }
.kn-stagger.is-visible > *:nth-child(4) { transition-delay: 420ms; }
.kn-stagger.is-visible > *:nth-child(5) { transition-delay: 540ms; }

/* -------------------------------------------------------------------------
   Grain film (overlay subtil sur sections sombres)
   ------------------------------------------------------------------------- */
.kn-grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.08;
	mix-blend-mode: overlay;
	filter: url(#kn-grain-filter);
	background: rgba(255, 255, 255, 0.02);
}

/* Pour que les sections puissent porter le grain */
.kn-section--dark { position: relative; overflow: hidden; }
.kn-section--dark > .kn-wrap,
.kn-section--dark > *:not(.kn-grain):not(svg) { position: relative; z-index: 2; }

/* -------------------------------------------------------------------------
   View Transitions API (Chrome 111+, Safari 18+)
   ------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
	animation: kn-fade-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
	animation: kn-fade-in 280ms cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes kn-fade-out {
	to { opacity: 0; transform: translateY(-4px); }
}
@keyframes kn-fade-in {
	from { opacity: 0; transform: translateY(8px); }
}

/* Préserver le header pendant la transition */
.kn-header { view-transition-name: kn-header; }
::view-transition-old(kn-header),
::view-transition-new(kn-header) { animation: none; opacity: 1; }

/* -------------------------------------------------------------------------
   Smooth scroll desktop (initialisé par smooth-scroll.js)
   ------------------------------------------------------------------------- */
html.kn-smooth { scroll-behavior: auto; }
html.kn-smooth body {
	overscroll-behavior: none;
}

/* -------------------------------------------------------------------------
   Hero title animation
   ------------------------------------------------------------------------- */
.kn-hero__title .kn-split__char {
	transition:
		transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity   800ms ease-out;
}

/* -------------------------------------------------------------------------
   Hover micro-interactions
   ------------------------------------------------------------------------- */
.kn-duo__item,
.kn-product-card {
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kn-duo__item:hover { transform: translateY(-4px); }

/* -------------------------------------------------------------------------
   Réduction du mouvement
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kn-split__char,
	.kn-reveal,
	.kn-reveal-up,
	.kn-reveal-left,
	.kn-reveal-right,
	.kn-reveal-scale {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none !important;
	}
	.kn-grain { display: none; }
}