/* =========================================================
   SOURIRE PRESTIGE — Animations
   États initiaux repris par GSAP (voir animations.js) + keyframes CSS pures.
   ========================================================= */

.sp-reveal-up { opacity: 0; transform: translateY(40px); }
.sp-reveal-fade { opacity: 0; }
.sp-reveal-scale { opacity: 0; transform: scale(0.94); }
.sp-reveal-left { opacity: 0; transform: translateX(-40px); }
.sp-reveal-right { opacity: 0; transform: translateX(40px); }

.js-ready .sp-reveal-up,
.js-ready .sp-reveal-fade,
.js-ready .sp-reveal-scale,
.js-ready .sp-reveal-left,
.js-ready .sp-reveal-right {
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.sp-reveal-up, .sp-reveal-fade, .sp-reveal-scale, .sp-reveal-left, .sp-reveal-right {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Sans JS (progressive enhancement) : tout reste visible. */
.no-js .sp-reveal-up, .no-js .sp-reveal-fade, .no-js .sp-reveal-scale, .no-js .sp-reveal-left, .no-js .sp-reveal-right {
	opacity: 1; transform: none;
}

/* ---- Indicateur de scroll du hero ---- */
.sp-scroll-indicator {
	position: absolute;
	bottom: var(--space-8);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	color: var(--sp-text);
}
.sp-scroll-indicator__line { width: 1px; height: 46px; background: rgba(10, 10, 9, 0.2); overflow: hidden; position: relative; }
.sp-scroll-indicator__line::after {
	content: '';
	position: absolute;
	top: -100%; left: 0; right: 0;
	height: 100%;
	background: var(--sp-gold);
	animation: sp-scroll-line 2.2s var(--ease-premium) infinite;
}
@keyframes sp-scroll-line {
	0% { top: -100%; }
	60% { top: 100%; }
	100% { top: 100%; }
}

/* ---- Parallax containers (transform piloté par GSAP/ScrollTrigger) ---- */
.sp-parallax { will-change: transform; }

/* ---- Fondu d'entrée de page ---- */
.sp-page-fade { animation: sp-page-fade var(--duration-base) var(--ease-premium) both; }
@keyframes sp-page-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---- Loader initial ---- */
.sp-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--sp-white);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--duration-slow) var(--ease-premium), visibility var(--duration-slow) var(--ease-premium);
}
.sp-loader img { width: 64px; height: auto; animation: sp-loader-pulse 1.4s ease-in-out infinite; }
.sp-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes sp-loader-pulse {
	0%, 100% { opacity: 0.4; transform: scale(0.96); }
	50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.sp-loader { display: none; }
}

/* ---- Mask-reveal de texte (SplitText, cf. split-reveal.js) ---- */
.sp-split-lines { overflow: hidden; }
.sp-split-lines .split-line { will-change: transform; }
.sp-split-words .split-word { will-change: transform, opacity; }

/* ---- Révélation d'image par bande (cf. reveal-image.js) ---- */
.sp-image-reveal { position: relative; overflow: hidden; }
.sp-image-reveal__curtain {
	position: absolute;
	inset: 0;
	background: var(--sp-black);
	z-index: 2;
	transform-origin: top;
}
.sp-image-reveal img, .sp-image-reveal .sp-placeholder { will-change: transform; }

/* ---- Boutons / liens magnétiques (déplacement piloté par magnetic.js) ---- */
[data-magnetic] {
	display: inline-flex;
	will-change: transform;
}
[data-magnetic] .sp-btn__text, [data-magnetic] .sp-btn__icon { will-change: transform; }

/* ---- Bandeau défilant (marquee, cf. marquee.js) ---- */
.sp-marquee { overflow: hidden; white-space: nowrap; }
.sp-marquee__track { display: inline-flex; will-change: transform; }
.sp-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	padding-inline: var(--space-6);
	font-family: var(--font-display);
	font-style: italic;
	white-space: nowrap;
}

/* ---- Scroll horizontal pinned (cf. horizontal-scroll.js) ---- */
.sp-h-scroll { overflow: hidden; }
.sp-h-scroll__track { display: flex; will-change: transform; }

/* ---- Rideau de transition de page (cf. page-transitions.js) ---- */
.sp-transition-curtain {
	position: fixed;
	inset: 0;
	z-index: var(--z-transition);
	background: var(--sp-black);
	transform: scaleY(1);
	transform-origin: bottom;
	pointer-events: none;
}
/* Sans JS, le rideau ne doit jamais bloquer le contenu. */
.no-js .sp-transition-curtain { display: none; }

@media (prefers-reduced-motion: reduce) {
	.sp-transition-curtain, .sp-image-reveal__curtain { display: none; }
	.sp-marquee__track { animation: none !important; }
}