/* FF Configurateur 3D — scroll story ([ff_histoire]). */

.ffp-story {
	position: relative;
}

/* Sticky 3D stage ---------------------------------------------------- */
.ffp-story-sticky {
	position: sticky;
	top: 0;
	height: var( --ffp-story-vh, 100vh );
	width: 100%;
	overflow: hidden;
}
.ffp-story-viewer {
	width: 100%;
	height: 100%;
	--poster-color: transparent;
}

/* Scroll cue (intro only, hidden once the user scrolls) --------------- */
.ffp-story-cue {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX( -50% );
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba( 29, 36, 51, 0.55 );
	pointer-events: none;
	transition: opacity 0.4s ease;
}
.ffp-story-cue::after {
	content: '';
	width: 1px;
	height: 34px;
	background: currentColor;
	animation: ffp-cue-drop 1.6s ease-in-out infinite;
	transform-origin: top;
}
@keyframes ffp-cue-drop {
	0%   { transform: scaleY( 0 ); opacity: 0; }
	35%  { transform: scaleY( 1 ); opacity: 1; }
	100% { transform: scaleY( 1 ) translateY( 10px ); opacity: 0; }
}
.ffp-story:not( .ffp-story-start ) .ffp-story-cue {
	opacity: 0;
}

/* Steps overlay ------------------------------------------------------ */
.ffp-story-steps {
	position: relative;
	z-index: 2;
	margin-top: calc( -1 * var( --ffp-story-vh, 100vh ) );
	pointer-events: none;
}
/* Steps are shorter than the stage so the sequence reads at a tighter
   scroll rhythm. */
.ffp-story-step {
	min-height: calc( var( --ffp-story-vh, 100vh ) * 0.8 );
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 6vw;
	box-sizing: border-box;
}
/* Alternation counts SECTIONS only: the intro block and the outro spacer are
   divs inside the same overlay, so :nth-child would shift the rhythm. */
.ffp-align-droite .ffp-story-step,
.ffp-align-alterne .ffp-story-step:nth-of-type( even ) {
	justify-content: flex-end;
}
/* Intro: the title OVERLAYS the pinned 3D stage, exactly like the step cards.
   The stage therefore fills the viewport from the very top of the block, so
   the model is properly centered instead of being pushed below the fold by a
   title block sitting above it — which is what left a large empty band under
   the intro text. Height tweakable via --ffp-story-intro-vh. */
.ffp-story-lead {
	min-height: var( --ffp-story-intro-vh, 70vh );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 26px;
	text-align: center;
	/* Title in the upper third: the first piece sits mid-stage, so a vertically
	   centered title would land right on top of it. */
	padding: 12vh 6vw 4vh;
	box-sizing: border-box;
}
.ffp-story-lead .ffp-story-card,
.ffp-story-lead-card {
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	max-width: 620px;
	opacity: 1;
	filter: none;
	transform: none;
	padding: 0;
	--ffp-card-slide: 0px;
}
.ffp-story-lead .ffp-story-card h3 {
	font-size: clamp( 30px, 4.6vw, 46px );
	line-height: 1.12;
}
.ffp-story-lead .ffp-story-card p {
	font-size: 17px;
	line-height: 1.6;
}
.ffp-story-lead .ffp-story-cue {
	position: static;
	transform: none;
}

/* Trailing space, scrolled through AFTER the last text: this is what gives the
   final camera move (pull back + slow turn) its run-up, so the finished pair is
   revealed whole instead of staying on the last, very close framing. Needs real
   height or the move is over in a flash. Tweak via --ffp-story-outro-vh. */
.ffp-story-outro {
	min-height: var( --ffp-story-outro-vh, 100vh );
	pointer-events: none;
}
/* During that final move the last card steps aside — nothing left to read, and
   it would sit on the product just as it becomes fully visible. */
.ffp-story-final .ffp-story-step.is-active .ffp-story-card {
	opacity: 0;
	filter: blur( 8px );
	transform: translateY( -14px );
}

/* Text cards ---------------------------------------------------------- */
.ffp-story-card {
	pointer-events: auto;
	max-width: 400px;
	background: rgba( 255, 255, 255, 0.9 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	border-radius: 14px;
	padding: 24px 26px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.12 );
	opacity: 0;
	filter: blur( 8px );
	transform: translateY( 20px ) translateX( var( --ffp-card-slide, -18px ) );
	transition: opacity 0.55s cubic-bezier( 0.22, 1, 0.36, 1 ),
	            filter 0.55s cubic-bezier( 0.22, 1, 0.36, 1 ),
	            transform 0.55s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.ffp-align-droite .ffp-story-step .ffp-story-card,
.ffp-align-alterne .ffp-story-step:nth-of-type( even ) .ffp-story-card {
	--ffp-card-slide: 18px;
}
.ffp-story-step.is-active .ffp-story-card {
	opacity: 1;
	filter: none;
	transform: none;
}
.ffp-story-card h3 {
	margin: 0 0 0.5em;
	font-size: 22px;
	line-height: 1.25;
}
.ffp-story-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

/* Mobile: cards pinned to the bottom, full width ---------------------- */
@media ( max-width: 782px ) {
	.ffp-story-step,
	.ffp-align-droite .ffp-story-step,
	.ffp-align-alterne .ffp-story-step:nth-of-type( even ) {
		align-items: flex-end;
		justify-content: center;
		padding: 0 14px 9vh;
	}
	.ffp-story-card {
		max-width: 100%;
		padding: 18px 18px;
	}
	.ffp-story-card h3 {
		font-size: 18px;
	}
	.ffp-story-lead .ffp-story-card {
		padding: 0;
	}
	.ffp-story-lead .ffp-story-card h3 {
		font-size: 27px;
	}
}

/* Reduced motion: keep cards readable, no translate/blur --------------- */
@media ( prefers-reduced-motion: reduce ) {
	.ffp-story-card {
		transition: opacity 0.2s ease;
		transform: none;
		filter: none;
	}
	.ffp-story-cue::after {
		animation: none;
	}
}