/* =============================================================================
 * Hero — Accueil (Cinematic, Act 1)
 * Replaces .exspa-hero with .exspa-cinema. Header markup is shared (.exspa-hero__*)
 * so the existing header CSS still applies.
 * ========================================================================== */

:root {
	/* Cinematic hero tokens — derive from official brand palette */
	--cinema-void:      #2B2522;            /* official warm-black */
	--cinema-deep:      #394839;            /* official primary sage */
	--cinema-cream:     #EFE8DA;            /* official cream */
	--cinema-gold:      #8B6F3D;            /* official antique brass */
	--cinema-gold-soft: rgba(139, 111, 61, 0.65);
}

/* Hide GeneratePress default header on accueil */
.page-template-page-accueil .site-header,
body.home .site-header {
	display: none !important;
}

/* Cinematic hero — new SVG logo (exspa_logo helper).
 * The horizontal SVG already contains the mark + wordmark, so hide the
 * legacy inline lotus mark to avoid a doubled brand lockup. */
.exspa-cinema .exspa-hero__logo {
	height: 38px;
	width: auto;
	color: #FFFFFF;
	display: block;
}
.exspa-cinema .exspa-hero__brand:has(.exspa-hero__logo) .exspa-hero__mark {
	display: none;
}
@media (max-width: 720px) {
	.exspa-cinema .exspa-hero__logo { height: 28px; }
}

.page-template-page-accueil,
body.home {
	background: var(--cinema-void);
}

.page-template-page-accueil .site,
.page-template-page-accueil .site-content,
.page-template-page-accueil .content-area,
.page-template-page-accueil .site-main,
.page-template-page-accueil .entry-content,
.page-template-page-accueil article,
.page-template-page-accueil .inside-article,
.page-template-page-accueil .entry-header,
.page-template-page-accueil .post-navigation,
.page-template-page-accueil .widget-area,
body.home .site,
body.home .site-content,
body.home .content-area,
body.home .site-main,
body.home .entry-content,
body.home article,
body.home .inside-article,
body.home .entry-header,
body.home .post-navigation,
body.home .widget-area {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

/* Kill the WP page title h1 that GP injects at top of article */
.page-template-page-accueil .entry-title,
body.home .entry-title {
	display: none !important;
}

/* Kill the sidebar/widget on the home page */
.page-template-page-accueil #right-sidebar,
.page-template-page-accueil #left-sidebar,
body.home #right-sidebar,
body.home #left-sidebar {
	display: none !important;
}

/* Make sure sections butt up against each other — no gaps */
.exspa-accueil > *,
.exspa-exparience > * {
	margin: 0 !important;
	padding-top: inherit;
	padding-bottom: inherit;
}

/* Lenis sets html.lenis on init; allow normal scrollbar but disable native smooth */
html.lenis,
html.lenis body {
	height: auto;
}
html.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

/* -----------------------------------------------------------------------------
 * Cinema hero shell
 * -------------------------------------------------------------------------- */
.exspa-cinema {
	position: relative;
	width: 100%;
	min-height: 100svh;
	height: 100svh;
	background: var(--cinema-void);
	color: var(--cinema-cream);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
}

/* Video background — full-bleed cinema */
.exspa-cinema__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	will-change: transform;
}

/* Vignette over the video — light, just enough for text legibility.
   Lower opacity values = more of the video is visible. */
.exspa-cinema__vignette {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center, rgba(43, 37, 34, 0.10) 0%, rgba(43, 37, 34, 0.22) 60%, rgba(43, 37, 34, 0.55) 100%),
		linear-gradient(180deg, rgba(43, 37, 34, 0.32) 0%, rgba(43, 37, 34, 0.05) 25%, rgba(43, 37, 34, 0.15) 65%, rgba(43, 37, 34, 0.6) 100%);
}

/* Content layer */
.exspa-cinema__content {
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 0 24px;
	max-width: 920px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	will-change: transform, filter, opacity;
}

/* Eyebrow */
.exspa-cinema__eyebrow {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	margin: 0;
	color: #FFFFFF;
	opacity: 1;
}

/* Title — large serif, line-staggered */
.exspa-cinema__title {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: clamp(48px, 8vw, 112px);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--cinema-cream);
}

.exspa-cinema__title .motion-line-mask {
	display: block;
	overflow: hidden;
	line-height: 1.04;
}

.exspa-cinema__title .motion-line {
	display: inline-block;
	will-change: transform, filter, opacity;
}

.exspa-cinema__title .motion-line--italic {
	font-style: italic;
}

/* Single-line variant — scales bigger, never breaks across lines.
   Combined with the Romance font this delivers a clean one-line wordmark feel. */
.exspa-cinema__title--single {
	font-size: clamp(40px, 8.8vw, 152px);
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.exspa-cinema__title--single .motion-line {
	white-space: nowrap;
}
@media (max-width: 720px) {
	.exspa-cinema__title--single {
		font-size: clamp(34px, 11vw, 64px);
		letter-spacing: -0.015em;
	}
}

/* Gold line under title — drawn from center outward */
.exspa-cinema__rule {
	width: 280px;
	max-width: 60vw;
	height: 2px;
	margin: 12px 0 4px;
	color: var(--cinema-gold);
	overflow: visible;
	display: block;
}

/* Subtitle — pure white for max legibility over video */
.exspa-cinema__subtitle {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	margin: 0;
	color: #FFFFFF;
	opacity: 1;
}

/* CTA */
.exspa-cinema__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 18px 36px;
	border: 1px solid var(--cinema-gold);
	color: var(--cinema-cream);
	text-decoration: none;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	background: rgba(196, 167, 101, 0.04);
	transition: background 350ms ease, color 350ms ease, border-color 350ms ease;
	will-change: transform;
}
.exspa-cinema__cta:hover {
	background: var(--cinema-gold);
	color: var(--cinema-void);
	border-color: var(--cinema-gold);
}

/* Scroll cue */
.exspa-cinema__scroll {
	position: absolute;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	background: none;
	border: 0;
	color: var(--cinema-cream);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 10px;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	opacity: 0.7;
}
.exspa-cinema__scroll-line {
	display: block;
	width: 1px;
	height: 70px;
	background: linear-gradient(180deg, transparent 0%, var(--cinema-cream) 50%, transparent 100%);
	position: relative;
	overflow: hidden;
}
.exspa-cinema__scroll-line::after {
	content: '';
	position: absolute;
	top: -70px;
	left: 0;
	width: 100%;
	height: 70px;
	background: var(--cinema-cream);
	opacity: 0.7;
	animation: exspa-cinema-pulse 2.4s ease-in-out infinite;
}
@keyframes exspa-cinema-pulse {
	0%   { top: -70px; opacity: 0; }
	30%  { opacity: 0.9; }
	100% { top: 70px;   opacity: 0; }
}

/* -----------------------------------------------------------------------------
 * Mobile
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.exspa-cinema__title {
		font-size: clamp(36px, 11vw, 64px);
	}
	.exspa-cinema__eyebrow {
		font-size: 10px;
		letter-spacing: 0.32em;
	}
	.exspa-cinema__subtitle {
		font-size: 11px;
		letter-spacing: 0.32em;
	}
	.exspa-cinema__cta {
		padding: 16px 28px;
		letter-spacing: 0.22em;
	}
	.exspa-cinema__scroll {
		bottom: 24px;
	}
}

/* -----------------------------------------------------------------------------
 * Reduced motion — keep everything visible, kill the pulse + scroll-bound stuff
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.exspa-cinema__particles {
		display: none;
	}
	/* Reduced-motion users still get a cinematic static composition:
	   the spa image fully visible behind a strong sage gradient. */
	.exspa-cinema__reveal {
		clip-path: none;
		-webkit-clip-path: none;
		opacity: 1;
		mask-image: none;
		-webkit-mask-image: none;
	}
	.exspa-cinema__reveal img {
		filter: blur(4px) saturate(0.7) brightness(0.4);
	}
	.exspa-cinema__scroll-line::after {
		animation: none;
	}
}

/* -----------------------------------------------------------------------------
 * No-JS safety: if JS is disabled, show everything immediately.
 * GSAP/JS handles the entrance choreography when active.
 * -------------------------------------------------------------------------- */
html:not(.has-motion) .exspa-cinema__content > * {
	opacity: 1;
}