/* ==========================================================================
   Glint Hero — Container & Canvas Styles
   Uses CSS custom properties from glintmenu for consistent sizing.
   ========================================================================== */

/* ---------- Hero Custom Properties ---------- */
:root {
	/* Inherit button dimensions from glintmenu or define fallbacks */
	--hero-btn-width: var(--header-btn-width, max(85px, 6.8vw));
	--hero-btn-height: var(--header-height, max(calc(85px * 0.75), 5.1vw));
}

/* Tablet/Small desktop (<1440px) */
@media (max-width: 1440px) {
	:root {
		--hero-btn-width: max(85px, 6.8vw);
		--hero-btn-height: max(calc(85px * 0.75), 5.1vw);
	}
}

/* Smartphone (<640px) */
@media (max-width: 640px) {
	:root {
		--hero-btn-width: 85px;
		--hero-btn-height: calc(85px * 0.75);
	}
}

/* ---------- Parent du canvas (.landing) - pleine largeur ---------- */
.landing {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 0;
	pointer-events: none;
}

/* ---------- Bloc Glint Hero - Forcer pleine largeur ---------- */
.wp-block-glinthero-hero {
	position: relative !important;
	width: 100vw !important;
	max-width: none !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	padding: 0 !important;
}

/* Annuler tout espacement ajouté par WordPress/Gutenberg */
.wp-site-blocks > .wp-block-glinthero-hero:first-child,
.entry-content > .wp-block-glinthero-hero:first-child,
.is-root-container > .wp-block-glinthero-hero:first-child {
	margin-block-start: 13px !important;
	margin-top: 13px !important;
}

.glinthero {
	position: relative !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
}

.glinthero__content > div {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	/* Occupe toute la hauteur disponible du calque contenu (qui n'a plus de
	   hauteur fixe : il grandit si le contenu déborde). flex-grow remplace
	   l'ancien `height: 100%` qui ne résolvait plus rien avec un parent auto. */
	flex: 1 0 auto;
	min-height: 0;
}

/* Constrain hero content group width and center text */
.glinthero__content > div > .wp-block-group {
	max-width: 50rem;
	text-align: center;
}

/* Override theme's @layer base p { max-width: 65ch !important } so paragraphs
   fill their parent inside the hero. Must be in the same @layer to win the
   cascade (!important in layers beats !important outside layers in CSS). */
@layer base {
	.glinthero__content .is-layout-constrained > * {
		max-width: none !important;
	}
}


/* Alignement full width explicite */
.wp-block-glinthero-hero.alignfull,
.glinthero.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
}

/* ---------- Hero Container ----------
   La hauteur n'est plus figée : c'est un PLANCHER.
   - --hero-fill-height  : la hauteur « plein écran » historique (85svh env.),
                           celle qu'on voit quand la fenêtre est haute/verticale.
   - --hero-floor-height : max(plein écran, hauteur min réglée dans le bloc).
   Avec `height: auto`, si la fenêtre est trop basse (quart d'écran) le héro
   s'agrandit pour contenir son contenu au lieu de le rogner ; la page défile.
   ------------------------------------------------------------------------- */
.glinthero {
	--hero-fill-height: calc(100svh - var(--hero-btn-height) - var(--menu-line-thickness, 3px) - var(--hero-height-reduction, 15svh));
	--hero-floor-height: max(var(--hero-fill-height), var(--hero-min-height-desktop, 0px));

	height: auto;
	min-height: var(--hero-floor-height);
	margin-top: calc(var(--hero-btn-height) + var(--menu-line-thickness, 3px));
}

/* Plancher Tablet (<1024px) */
@media (max-width: 1024px) {
	.glinthero {
		--hero-floor-height: max(var(--hero-fill-height), var(--hero-min-height-tablet, var(--hero-min-height-desktop, 0px)));
	}
}

/* Plancher Mobile (<640px) */
@media (max-width: 640px) {
	.glinthero {
		--hero-floor-height: max(var(--hero-fill-height), var(--hero-min-height-mobile, var(--hero-min-height-tablet, var(--hero-min-height-desktop, 0px))));
	}
}

/* All three layers stack on top of each other */
.glinthero__layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ---------- Canvas Sizing Rules ---------- */
/* Force l'ID du canvas - position absolute dans le conteneur hero */
/* Padding de 16px autour pour éviter le débordement des animations */
#gameOfLifeCanvas {
	position: absolute !important;
	top: calc((var(--hero-btn-height, max(calc(85px * 0.75), 5.1vw)) + var(--menu-line-thickness, 3px)) - 16px) !important;
	left: calc(var(--container-padding, 1rem) - 4px) !important;
	width: calc(100% - var(--container-padding, 1rem) - 16px) !important;
	height: calc(100% + var(--hero-btn-height, max(calc(85px * 0.75), 5.1vw)) + var(--menu-line-thickness, 3px)) !important;
	z-index: 0 !important;
	border-radius: 0 !important;
	pointer-events: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Smartphone (<640px): Canvas pleine largeur avec padding */
@media (max-width: 640px) {
	#gameOfLifeCanvas {
		left: 16px !important;
		width: calc(100% - 32px) !important;
	}
}

/* Desktop: Canvas avec padding de 16px */
.glinthero__canvas-gameoflife,
.glinthero__canvas-threejs {
	position: absolute !important;
	top: 16px !important;
	left: 16px !important;
	width: calc(100% - 32px) !important;
	height: calc(100% - 32px) !important;
	z-index: 0 !important;
	border-radius: 0 !important;
	pointer-events: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Game of Life canvas - always visible */
.glinthero__canvas-gameoflife {
	z-index: 0;
}

/* Three.js canvas - above Game of Life, hidden by default */
.glinthero__canvas-threejs {
	z-index: 2;
	display: none;
	visibility: hidden;
}

/* Three.js canvas when enabled via settings */
.glinthero--threejs-enabled .glinthero__canvas-threejs {
	display: block;
	visibility: visible;
}

/* ---------- Override Three.js bundled CSS ---------- */
/* The bundled Three.js CSS sets overflow:hidden on body and position:fixed on .webgl */
/* We need to override these to integrate properly */

/* Restore body overflow */
body.glinthero--threejs-enabled {
	overflow: auto !important;
}

/* Position the Three.js .webgl canvas inside the hero container */
.glinthero .webgl,
.glinthero canvas.webgl {
	position: absolute !important;
	top: 16px !important;
	left: 16px !important;
	width: calc(100% - 32px) !important;
	height: calc(100% - 32px) !important;
	z-index: 5 !important; /* Above Game of Life (z-index: 0), below content (z-index: 10) */
	pointer-events: auto !important;
	/* Initially hidden via visibility (not opacity - WebGL needs opacity: 1 to render) */
	visibility: hidden;
}

/* Reveal Three.js canvas after text animations complete */
.glinthero .webgl--visible,
.glinthero canvas.webgl.webgl--visible {
	visibility: visible !important;
}

/* Smartphone (<640px): Three.js canvas full width */
@media (max-width: 640px) {
	.glinthero .webgl,
	.glinthero canvas.webgl {
		left: 16px !important;
		width: calc(100% - 32px) !important;
	}
}

/* ---------- Logo Watermark Layer ---------- */
/* Positioned at page top:0 via negative top to escape hero's margin-top */
.glinthero__logo-layer {
	position: absolute;
	top: calc(-1 * (var(--hero-btn-height, max(calc(85px * 0.75), 5.1vw)) + var(--menu-line-thickness, 3px)));
	left: 50%;
	transform: translateX(-50%);
	width: 90vw;
	z-index: 1;
	pointer-events: none;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	color: white;
}

.glinthero__logo-svg {
	width: 100%;
	height: auto;
}

/* ---------- Content Layer ---------- */
.glinthero__content {
	position: relative;
	margin-left: 0;
	width: 100%;
	/* Même plancher que le conteneur, mais hauteur libre : c'est ce calque qui
	   pousse le héro quand le texte ne tient pas dans la fenêtre. */
	height: auto;
	min-height: var(--hero-floor-height);
	z-index: 10;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 2rem;
	box-sizing: border-box;
}

/* Allow pointer events on interactive elements inside content */
.glinthero__content a,
.glinthero__content button,
.glinthero__content input,
.glinthero__content [role="button"] {
	pointer-events: auto;
}

/* ---------- Smartphone (<640px) ---------- */
@media (max-width: 640px) {
	.glinthero {
		/* Plancher = plein écran moins header, filet et réduction ; hauteur libre. */
		height: auto;
		min-height: var(--hero-floor-height);
		margin-top: calc(var(--hero-btn-height) + var(--menu-line-thickness, 3px));
	}

	/* Canvas full width on mobile */
	.glinthero__canvas-gameoflife,
	.glinthero__canvas-threejs {
		left: 0 !important;
		width: 100% !important;
	}

	/* Content full width on mobile */
	.glinthero__content {
		margin-left: 0;
		width: 100%;
		padding: 1rem;
	}
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.glinthero__canvas-gameoflife,
	.glinthero__canvas-threejs {
		/* Canvas will handle reduced motion internally */
	}
}

/* ---------- Inner Content Styles ---------- */
.glinthero__content .wp-block-spacer.hidden-mobile {
	display: block;
}

.glinthero__content .wp-block-spacer.show-only-mobile {
	display: none;
}

@media (max-width: 640px) {
	.glinthero__content .wp-block-spacer.hidden-mobile {
		display: none;
	}

	.glinthero__content .wp-block-spacer.show-only-mobile {
		display: block;
	}
}

/* Typography - hérite des styles du thème, pas d'override */

/* ---------- Header Logo / Blur Toggle (driven by hero logo visibility) ---------- */
/*
 * The blur lives in a dedicated overlay (.glint-header__blur-overlay) injected by
 * glinthero view.js. A clip-path inset is animated via GSAP to create a curtain
 * wipe effect: the clip sweeps from bottom to top to hide/reveal the blur.
 *
 * On page load the hero is at top so the big logo is visible — we must hide the
 * native header blur and logo immediately via CSS to prevent a flash.
 */

/* Kill native backdrop-filter on header when hero block is present on the page */
body:has(.glinthero) .glint-header {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Kill soft blur layer when hero block is present (JS will animate it) */
body:has(.glinthero) .glint-header-blur-soft {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	opacity: 0;
}

/* Hide header logo on load (JS will animate it back when needed) */
body:has(.glinthero) .glint-header__logo-img {
	opacity: 0;
}

.glint-header__blur-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	pointer-events: none;
	opacity: 0;
}

/* Ensure header children sit above the blur overlay (without overriding position) */
.glint-header__left,
.glint-header__center,
.glint-header__right {
	z-index: 1;
}

/* ---------- Text Animation Styles ---------- */
/* Initial state: hide every element that view.js animates (h1 chars, h2 words,
   p lines, .glint-button-wrapper fade) to prevent a flash of visible content
   before GSAP runs. GSAP starts only after document.fonts.ready, so without
   this the h2/p/buttons would show first, then hide, then animate in. */
.glinthero__content h1,
.glinthero__content h2,
.glinthero__content p,
.glinthero__content .glint-button-wrapper {
	visibility: hidden;
	/* Failsafe: if GSAP never runs (module load error, fonts.ready never
	   resolves, JS disabled), reveal the content so it can never stay
	   permanently invisible. .gsap-animated reveals it far earlier.
	   Delay porté à 10s : sous forte charge (machine qui rame), fonts.ready
	   peut dépasser 4s — un délai trop court révélait le texte BRUT (mauvaise
	   police/taille) avant l'anim. Les fonts héro sont aussi préchargées par
	   glintflow pour que fonts.ready résolve vite. */
	animation: glinthero-failsafe-reveal 0s linear 10s forwards;
}

@keyframes glinthero-failsafe-reveal {
	to {
		visibility: visible;
	}
}

/* Show each element once its animation is ready (gsap-animated is added by
   view.js right after the initial GSAP opacity:0 state is set). */
.glinthero__content h1.gsap-animated,
.glinthero__content h2.gsap-animated,
.glinthero__content p.gsap-animated,
.glinthero__content .glint-button-wrapper.gsap-animated {
	visibility: visible;
}

/* Réduire l'espacement entre les h1 dans le hero */
.glinthero__content h1 {
	margin-top: 0;
	margin-bottom: 0;
}

.glinthero__content h1 + h1 {
	margin-top: 1rem !important;
}

/* SplitText mask containers */
.glinthero-word-mask,
.glinthero-line-mask {
	position: relative;
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	padding-bottom: 0.15em; /* Space for font descenders (g, y, p, q, j) */
}

.glinthero-line-mask {
	display: block;
	width: 100%;
}

/* SplitText words and lines */
.glinthero-word,
.glinthero-line {
	display: inline-block;
	will-change: transform;
}

.glinthero-line {
	display: block;
}

/* Ensure proper word spacing */
.glinthero__content h1 .glinthero-word-mask {
	margin-right: 0.3em;
}

.glinthero__content h1 .glinthero-word-mask:last-child {
	margin-right: 0;
}