/*
 * Mascotte Zako — composant indépendant du Hero immersif. Chargé uniquement
 * sur is_front_page() (voir inc/zako-mascot.php). Position fixed, jamais
 * imbriqué dans le DOM du Hero (bloc wp:html du post_content) : le Hero
 * pourrait être remplacé sans qu'un seul sélecteur ici ne soit affecté.
 *
 * Placement vérifié en Phase 1 (captures 1920px et 375px) : la partie basse
 * du Hero est libre entre les CTA (centrés verticalement) et l'indicateur
 * de scroll .zbi-scroll-hint (bottom:28px, masqué ≤768px). Zako se place
 * au-dessus de cet indicateur sans jamais le recouvrir ni le modifier.
 *
 * Tailles et paliers de hauteur recalibrés (ajustement demandé) — mesurés
 * en direct (CDP, valeurs réelles rendues) plutôt qu'estimés :
 *   - Les CTA du Hero sont centrés verticalement sur 100vh, donc l'espace
 *     réellement disponible pour Zako dépend de la HAUTEUR du viewport, pas
 *     seulement de sa largeur. La plupart des résolutions desktop courantes
 *     (1600×900, 1440×900, 1366×768, 1280×720, 1024×768) ont une hauteur
 *     inférieure à 900px.
 *   - Cible demandée : desktop ≥1600px 190-200px, desktop 1200-1599px
 *     175-185px. Mesuré : à 1600×900 (le cas le plus tendu du palier
 *     "haut"), 190px ne laisse que 5-13px de marge selon le décalage
 *     testé — insuffisant une fois l'amplitude de flottement (3-4px)
 *     ajoutée. 185px avec un décalage bas de 16px laisse 16px de marge
 *     CTA et 12px de marge avec l'indicateur de scroll : conservé comme
 *     valeur finale du palier ≥1600px (bas de la fourchette demandée,
 *     conformément à la consigne "conserver une taille inférieure et
 *     l'expliquer" si 190-200px chevauche).
 *   - En dessous de 900px de hauteur (1600×900 exactement excepté, qui
 *     reste dans le palier "haut"), un palier "secours" à 108px/20px a été
 *     mesuré sûr sur toute la plage 700-899px (marge CTA 15 à 114px selon
 *     la hauteur, marge indicateur de scroll toujours ≥16px), y compris à
 *     701px (juste au-dessus du seuil de masquage existant).
 */

:root {
	--zako-width-mobile: 96px;
	--zako-width-tablet: 148px;
	--zako-width-desktop: 175px; /* 1200-1599px de large, hauteur ≥900px */
	--zako-width-desktop-xl: 185px; /* ≥1600px de large, hauteur ≥900px */
	--zako-width-compact: 108px; /* secours : hauteur 700-899px, largeur ≥768px */
	--zako-bottom-offset: 24px;
}

.zako-mascot {
	position: fixed;
	left: 50%;
	bottom: var(--zako-bottom-offset);
	z-index: 10; /* au-dessus du Hero (max 5) et du médaillon logo (3), bien
	                sous le curseur premium (2147483645+) et #zbcar (999999) */
	pointer-events: none;
	user-select: none;
	opacity: 0;
	transform: translate(-50%, 0);
	animation:
		zako-fade-in 0.6s ease-out 0.3s forwards,
		zako-float 3.5s ease-in-out 0.9s infinite;
}

.zako-mascot__image {
	display: block;
	width: var(--zako-width-desktop);
	height: auto;
	pointer-events: none;
	user-select: none;
}

.zako-mascot__arrow {
	display: block;
	width: 8px;
	height: 8px;
	margin: 8px auto 0;
	border-right: 2px solid rgba(255, 255, 255, 0.7);
	border-bottom: 2px solid rgba(255, 255, 255, 0.7);
	transform: rotate(45deg);
	animation: zako-arrow-move 1.8s ease-in-out infinite;
}

@keyframes zako-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Amplitude réduite à 3,5px (cible 3-4px, était 5px) — mouvement plus
   discret, transform uniquement (aucun reflow). */
@keyframes zako-float {
	0%,
	100% {
		transform: translate(-50%, 0);
	}
	50% {
		transform: translate(-50%, -3.5px);
	}
}

@keyframes zako-arrow-move {
	0%,
	100% {
		transform: rotate(45deg) translate(0, 0);
	}
	50% {
		transform: rotate(45deg) translate(3px, 3px);
	}
}

/* Etat "disparu", posé par le JS au premier scroll (voir zako-mascot.js) —
 * définitif jusqu'au prochain chargement de page. */
.zako-mascot.is-hidden {
	animation: none !important;
	opacity: 0;
	transform: translate(-50%, 16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Palier ≥1600px de large (hauteur ≥900px : voir palier "secours" plus bas
   pour les fenêtres plus basses à cette largeur). */
@media (min-width: 1600px) {
	.zako-mascot__image {
		width: var(--zako-width-desktop-xl);
	}

	:root {
		--zako-bottom-offset: 16px;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.zako-mascot__image {
		width: var(--zako-width-tablet);
	}
}

@media (max-width: 767px) {
	.zako-mascot {
		/* .zbi-scroll-hint est déjà masqué sous 768px par le Hero lui-même
		   (règle préexistante, non modifiée) : Zako peut descendre un peu
		   plus bas sans jamais risquer de le recouvrir. */
		bottom: 24px;
	}

	.zako-mascot__image {
		width: var(--zako-width-mobile);
	}
}

/* Palier "secours" hauteur 700-899px, largeur ≥768px uniquement (le mobile
 * a déjà sa propre taille sûre, non concernée). Mesuré sûr sur toute la
 * plage (voir mesures en tête de fichier). Placé après les paliers de
 * largeur ci-dessus pour l'emporter à spécificité égale. */
@media (min-width: 768px) and (max-height: 899px) {
	:root {
		--zako-bottom-offset: 20px;
	}

	.zako-mascot__image {
		width: var(--zako-width-compact);
	}
}

/* Masquage complet sous 700px de hauteur — protection existante conservée
 * telle quelle, non modifiée. */
@media (max-height: 700px) {
	.zako-mascot {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zako-mascot {
		animation: none;
		opacity: 1;
	}

	.zako-mascot__arrow {
		display: none;
	}

	/* Sécurité redondante avec le JS (qui n'attache pas le listener de
	   scroll sous reduced-motion) : Zako reste visible en permanence. */
	.zako-mascot.is-hidden {
		opacity: 1 !important;
		transform: translate(-50%, 0) !important;
	}
}