/* ============================================================
   Floratek – Loader
   Styles pour les 3 variantes
   ============================================================ */

.ftl-loader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: var(--ftl-loader-bg, #1E213C);
	color: var(--ftl-loader-color, #ffffff);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	will-change: transform;
}

.ftl-loader[hidden] {
	display: none !important;
}

.ftl-loader__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90vw;
}

/* ----- Caractères avec masque (variantes 2 et 3) ----- */
.ftl-loader__char-wrap {
	display: inline-block;
	overflow: hidden;
	line-height: 1;
	padding: 0.08em 0;
	vertical-align: baseline;
}

.ftl-loader__char {
	display: inline-block;
	will-change: transform;
	transform: translateY(110%);
}

.ftl-loader__space {
	display: inline-block;
	width: 0.3em;
}

/* ============================================================
   Variante 1 — Logo complet animé (flèches SVG haute déf + texte HTML)
   Composition diagonale comme dans le logo original : glyphe rose en
   haut-gauche, glyphe bleu en bas-droite, chevauchement dans le coin.
   ============================================================ */
.ftl-loader--v1 .ftl-v1__row {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.4vw, 1.4rem);
}

.ftl-loader--v1 .ftl-v1__symbols {
	position: relative;
	width: clamp(80px, 9.5vw, 145px);
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
}

.ftl-loader--v1 .ftl-v1__arrow {
	position: absolute;
	width: 56%;
	height: auto;
	display: block;
	will-change: transform, opacity;
}

.ftl-loader--v1 .ftl-v1__arrow-pink {
	top: 0;
	left: 0;
}

.ftl-loader--v1 .ftl-v1__arrow-blue {
	top: 44%;
	left: 44%;
}

.ftl-loader--v1 .ftl-v1__word {
	display: inline-flex;
	font-family: var(--ftl-loader-font, inherit);
	font-size: clamp(2.4rem, 7vw, 5.6rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--ftl-loader-color, #ffffff);
}

/* Pour la variante 1, on neutralise le mask-reveal global et on rend
   les chars visibles par défaut. L'animation sera un fade-up via GSAP,
   et si jamais GSAP foire, les lettres restent quand même affichées. */
.ftl-loader--v1 .ftl-v1__word .ftl-loader__char-wrap {
	overflow: visible;
	padding: 0;
}
.ftl-loader--v1 .ftl-v1__word .ftl-loader__char {
	transform: none;
	opacity: 1;
}

/* MAIS pendant que le loader est en cours d'affichage (html.ftl-is-loading),
   on cache les chars côté CSS. GSAP les révèle ensuite via inline style
   (qui prend précédence sur cette règle). Élimine le flash au chargement. */
html.ftl-is-loading .ftl-loader--v1 .ftl-v1__word .ftl-loader__char {
	opacity: 0;
	transform: translateY(24px);
}

/* Idem pour les flèches/glyphes des 3 variantes : cachés en CSS dès le départ
   pour éviter le flash, GSAP prend ensuite la main via son inline style. */
html.ftl-is-loading .ftl-loader--v1 .ftl-v1__arrow {
	opacity: 0;
}
html.ftl-is-loading .ftl-loader--v2 .ftl-v2__arrow {
	clip-path: inset(0 100% 0 0);
}
html.ftl-is-loading .ftl-loader--v3 .ftl-v3__pink,
html.ftl-is-loading .ftl-loader--v3 .ftl-v3__blue {
	opacity: 0;
}

/* ============================================================
   Variante 2 — Flèche qui se dessine + wordmark
   ============================================================ */
.ftl-loader--v2 .ftl-v2__row {
	display: flex;
	align-items: center;
	gap: clamp(1.2rem, 2.5vw, 2.5rem);
}

.ftl-loader--v2 .ftl-v2__arrow {
	width: clamp(70px, 8vw, 130px);
	height: auto;
	display: block;
	will-change: clip-path;
	clip-path: inset(0 100% 0 0);
}

.ftl-loader--v2 .ftl-v2__word {
	display: inline-flex;
	font-family: var(--ftl-loader-font, inherit);
	font-size: clamp(2.2rem, 7vw, 5.5rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--ftl-loader-color, #ffffff);
}

/* ============================================================
   Variante 3 — Glyphes s'assemblent + wordmark
   ============================================================ */
.ftl-loader--v3 .ftl-v3__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 1.8rem);
}

.ftl-loader--v3 .ftl-v3__symbols {
	display: flex;
	align-items: center;
	gap: clamp(0.4rem, 1vw, 0.8rem);
}

.ftl-loader--v3 .ftl-v3__pink,
.ftl-loader--v3 .ftl-v3__blue {
	width: clamp(48px, 6vw, 84px);
	height: auto;
	display: block;
	will-change: transform, opacity;
}

.ftl-loader--v3 .ftl-v3__word {
	display: inline-flex;
	font-family: var(--ftl-loader-font, inherit);
	font-size: clamp(2.2rem, 7vw, 5.5rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--ftl-loader-color, #ffffff);
}

/* ============================================================
   Reduce motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.ftl-loader__char {
		transform: none;
	}
	.ftl-loader--v2 .ftl-v2__arrow {
		clip-path: none;
	}
}