/**
 * Page Services — panneaux sticky full h-screen, effet YSL.
 */

/* ── Intro ───────────────────────────────────────────────────── */
.studio-services-intro {
	display: none; /* masquée : titre visible uniquement pour accessibilité */
}

/* ── Stack : conteneur des panneaux ─────────────────────────── */
.studio-services-stack {
	/* Chaque panel est sticky dans ce wrapper */
}

/* ── Un panneau ──────────────────────────────────────────────── */
.studio-service-panel {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: grid;
	align-items: end;
	color: #ffffff;
	/* Chaque panneau doit recouvrir le précédent → z-index croissant */
}

.studio-service-panel:nth-child(1) { z-index: 1; }
.studio-service-panel:nth-child(2) { z-index: 2; }
.studio-service-panel:nth-child(3) { z-index: 3; }
.studio-service-panel:nth-child(4) { z-index: 4; }

/* ── Fond média ──────────────────────────────────────────────── */
.studio-service-panel__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.studio-service-panel__video,
.studio-service-panel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Légère mise à l'échelle au départ, révélée par GSAP */
	transform: scale( 1.06 );
	transition: transform 1.2s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.studio-service-panel.is-active .studio-service-panel__video,
.studio-service-panel.is-active .studio-service-panel__image {
	transform: scale( 1 );
}

.studio-service-panel__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient( 145deg, #1a1a1a, #111 );
}

/* ── Voile gradient ──────────────────────────────────────────── */
.studio-service-panel__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, 0.08 ) 0%,
		rgba( 0, 0, 0, 0.18 ) 40%,
		rgba( 0, 0, 0, 0.72 ) 100%
	);
	z-index: 1;
}

/* ── Contenu ─────────────────────────────────────────────────── */
.studio-service-panel__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 6vw 6vh;
}

.studio-service-panel__content-inner {
	max-width: 52rem;
}

/* Numéro */
.studio-service-panel__number {
	margin: 0 0 0.75rem;
	font-family: var( --studio-font-body, "Outfit", sans-serif );
	font-size: 0.65rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var( --studio-accent, #B8955A );
	opacity: 0;
	transform: translateY( 20px );
}

/* Titre */
.studio-service-panel__title {
	margin: 0 0 1.25rem;
	font-family: var( --studio-font-heading, "Cormorant Garamond", serif );
	font-size: clamp( 2.5rem, 7vw, 6rem );
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.01em;
	opacity: 0;
	transform: translateY( 30px );
}

/* Texte */
.studio-service-panel__text {
	margin: 0 0 2.25rem;
	font-family: var( --studio-font-body, "Outfit", sans-serif );
	font-size: clamp( 0.9rem, 1.5vw, 1.05rem );
	font-weight: 300;
	line-height: 1.7;
	max-width: 42ch;
	opacity: 0;
	transform: translateY( 20px );
}

/* CTA */
.studio-service-panel__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var( --studio-font-body, "Outfit", sans-serif );
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.4 );
	padding-bottom: 0.4rem;
	opacity: 0;
	transform: translateY( 16px );
	transition: border-color 0.3s, gap 0.3s;
}

.studio-service-panel__cta:hover {
	border-color: #ffffff;
	gap: 1.25rem;
}

.studio-service-panel__cta-arrow {
	display: inline-block;
	transition: transform 0.3s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.studio-service-panel__cta:hover .studio-service-panel__cta-arrow {
	transform: translateX( 6px );
}

/* ── Compteur de progression (barre latérale) ────────────────── */
.studio-services-progress {
	position: fixed;
	right: 2rem;
	top: 50%;
	transform: translateY( -50% );
	z-index: 9100;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	pointer-events: none;
}

.studio-services-progress__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.35 );
	transition: background 0.4s, transform 0.4s;
}

.studio-services-progress__dot.is-active {
	background: #ffffff;
	transform: scale( 1.6 );
}

/* ── Responsive ──────────────────────────────────────────────── */
@media ( max-width: 768px ) {
	.studio-service-panel__content {
		padding: 0 6vw 8vh;
	}

	.studio-service-panel__text {
		display: none; /* masqué sur mobile pour ne pas surcharger */
	}

	.studio-services-progress {
		display: none;
	}
}