/**
 * Médias du bandeau d'accueil : diapositives en fondu, voile localisé derrière le texte, bouton pause
 * discret dans l'angle de l'image.
 * Intégration au héros (couche sous le texte, bande média au-dessus du texte sur mobile) :
 * assets/css/theme.css, section Accueil.
 */

/* Anton (OFL) : grand texte derrière l'image détourée ; chargée seulement si ce texte s'affiche. */
@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../../assets/fonts/anton-400.woff2") format("woff2");
}

.mi-heros-medias {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.mi-heros-medias__scene,
.mi-heros-medias__voile {
	position: absolute;
	inset: 0;
}

.mi-heros-medias__scene {
	z-index: 0; /* Contient l'empilement des diapositives : le voile reste au-dessus. */
	background: var(--wp--preset--color--green);
}

/* Fondu enchaîné : la diapositive qui entre recouvre celle qui sort (view.js). */
.mi-heros-medias__diapo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1200ms ease-in-out;
}

.mi-heros-medias__diapo.is-active {
	z-index: 2;
	opacity: 1;
}

.mi-heros-medias__diapo.is-sortante {
	z-index: 1;
	opacity: 1;
	transition: none;
}

/* Cadrage : point focal (--x, --y) et agrandissement (--zoom) autour de lui ; aucun zoom animé. */
.mi-heros-medias__image,
.mi-heros-medias__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--x, 50%) var(--y, 50%);
	transform: scale(var(--zoom, 1));
	transform-origin: var(--x, 50%) var(--y, 50%);
}

/* L'image de remplacement reste visible tant que l'extrait ne joue pas. */
.mi-heros-medias__video {
	opacity: 0;
	transition: opacity 400ms ease;
}

.mi-heros-medias__diapo.is-lue > .mi-heros-medias__video {
	opacity: 1;
}

/*
 * Image détourée (fond transparent) : posée entière en bas à droite sur le vert, dans un cadre aux
 * proportions de l'image où se place le grand texte (tailles en cqh / cqw : il suit le bâtiment).
 * Largeur plafonnée : le bandeau garde sa hauteur, un bâtiment plus large monterait jusqu'à son bord haut
 * sans laisser de place au texte (à 1 920 px, le minaret était coupé). Débord à droite : 11 % du cadre.
 */
.mi-heros-medias__diapo.is-detoure {
	background: var(--wp--preset--color--green);
}

.mi-heros-medias__detoure {
	--mi-cadre: min(64%, 780px);
	position: absolute;
	right: calc(var(--mi-cadre) * -0.11);
	bottom: 17%;
	width: var(--mi-cadre);
	container-type: size;
}

.mi-heros-medias__detoure > .mi-heros-medias__image {
	object-fit: contain;
	transform: none;
}

/*
 * Grand texte derrière le bâtiment. Deux mots : lignes décalées, la première au-dessus du dôme, la seconde à
 * droite du minaret, au-dessus de l'aile (le minaret passe entre les deux, son croissant sous la première).
 * Anton : ascendante 1,176 em, descendante 0,329, capitales 0,859, accents et tréma jusqu'à 1,101 ; avec un
 * interligne de 1,1, la ligne de base est à 0,9735 em du haut de sa ligne, les accents 0,1275 em au-dessus
 * (le tréma du « Ï » ne touche pas la ligne du dessus).
 * Dernière ligne posée sur le toit (ligne de base à 36 % de la hauteur du cadre). Tailles : ci-dessous, par
 * format ; les accents s'arrêtent au plus 35,8 % de la hauteur du cadre au-dessus de lui (36 px sous le bord
 * du bandeau pour le plus grand cadre).
 */
.mi-heros-medias__grand-texte {
	position: absolute;
	top: calc(36cqh - 0.9735em - (var(--lignes, 1) - 1) * 1.1em);
	font-family: "Anton", "Arial Narrow", sans-serif;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.mi-heros-medias__ligne {
	display: block;
}

.mi-heros-medias__ligne + .mi-heros-medias__ligne {
	text-align: right;
}

/*
 * Ordinateur : texte calé à droite, 24 px avant le bord du bandeau (comme le bouton pause ; le cadre en
 * déborde de 11 %). Un mot : du bout gauche du bâtiment (6 % du cadre) à ce bord. Deux mots : la seconde
 * ligne tient entre le minaret (51,5 % du cadre) et ce bord ; décalage de 2,075 em entre les lignes, celui du
 * mobile à 390 px.
 */
@media (min-width: 782px) {
	.mi-heros-medias__grand-texte {
		right: calc(11cqw + 24px);
		font-size: min(65.2cqh, (83cqw - 24px) / var(--largeur, 3));
	}

	.mi-heros-medias__grand-texte.is-deux-lignes {
		font-size: min(32.6cqh, (37.5cqw - 24px) / var(--largeur-derniere, 3), (83cqw - 24px) / (var(--largeur, 3) + 2.075));
	}

	.is-deux-lignes > .mi-heros-medias__ligne:first-child {
		padding-right: 2.075em;
	}

	.is-deux-lignes > .mi-heros-medias__ligne:last-child {
		padding-left: 2.075em;
	}
}

/*
 * Aplat ton sur ton (doré clair très atténué) : un fond, pas un titre.
 * Boîte élargie jusqu'à l'encre (le tréma déborde de 0,1 em de part et d'autre du « I », les accents et la
 * cédille dépassent de l'interligne) : pendant l'animation, Safari découpe la lettre à sa boîte (points du
 * « Ï » rognés, puis élargis d'un coup à l'arrivée). Marges négatives : placement inchangé.
 */
.mi-heros-medias__lettre {
	display: inline-block;
	padding: 0.2em 0.12em;
	margin: -0.2em -0.12em;
	color: rgba(242, 212, 141, 0.18);
}

/* Révélé par view.js après le chargement de la page et de la police (rien ne concurrence la première
   image) ; toujours visible dans l'éditeur, pour le réglage. */
.mi-heros-medias__grand-texte[hidden] {
	display: none;
}

.editor-styles-wrapper .mi-heros-medias__grand-texte[hidden] {
	display: block;
}

/* Entrée : les lettres montent l'une après l'autre, à chaque passage de l'image. */
.mi-heros-medias__diapo.is-active .mi-heros-medias__lettre {
	animation: mi-heros-lettre 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: calc(250ms + var(--i, 0) * 55ms);
}

@keyframes mi-heros-lettre {
	from {
		opacity: 0;
		transform: translateY(0.42em);
	}
}

/* Voile localisé : vert profond derrière le texte (en bas à gauche), transparent vers le reste de l'image. */
.mi-heros-medias__voile {
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(760px 470px at 21% 64%, rgba(2, 45, 34, 0.9) 0%, rgba(2, 45, 34, 0.84) 42%, rgba(2, 45, 34, 0.5) 70%, rgba(2, 45, 34, 0) 100%),
		linear-gradient(90deg, rgba(2, 45, 34, 0.5) 0, rgba(2, 45, 34, 0) 520px);
}

/* Bouton pause (WCAG 2.2.2) : rond discret dans l'angle de l'image, lisible sur tout média. */
.mi-heros-medias__pause {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 3;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(245, 236, 217, 0.24);
	border-radius: 50%;
	background: rgba(2, 45, 34, 0.72);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--wp--preset--color--ivory);
	cursor: pointer;
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.mi-heros-medias__pause[hidden] {
	display: none;
}

.mi-heros-medias__pause:hover {
	border-color: rgba(242, 212, 141, 0.6);
	background: rgba(2, 45, 34, 0.92);
}

.mi-heros-medias__pause:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-light);
	outline-offset: 3px;
}

.mi-heros-medias__pause .mi-heros-medias__icone-reprise,
.mi-heros-medias__pause.is-arretee .mi-heros-medias__icone-pause {
	display: none;
}

.mi-heros-medias__pause.is-arretee .mi-heros-medias__icone-reprise {
	display: block;
}

/* Éditeur, avant le choix des médias. */
.mi-heros-medias__vide {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 3;
}

@media (max-width: 781px) {
	/* Bande média au-dessus du texte, fondue dans le vert profond sous lequel le texte se lit. */
	.mi-heros-medias {
		background: var(--wp--preset--color--green-900);
	}

	.mi-heros-medias__scene,
	.mi-heros-medias__voile {
		inset: 0 0 auto;
		height: var(--mi-heros-bande, 300px);
	}

	.mi-heros-medias__image,
	.mi-heros-medias__video {
		object-position: var(--xm, 50%) var(--ym, 50%);
		transform: none;
	}

	.mi-heros-medias__detoure {
		--mi-detoure-haut: 16px;
		inset: var(--mi-detoure-haut) auto auto -5%;
		width: 112%;
	}

	/* Avec un grand texte, le bâtiment descend de 45 px pour lui laisser le haut de la bande (bande de 335 px au
	   lieu de 290 : assets/css/theme.css). */
	.mi-heros-medias__detoure:has(> .mi-heros-medias__grand-texte) {
		--mi-detoure-haut: 61px;
	}

	/*
	 * Bande : texte dans la largeur du texte du bandeau (le cadre déborde de 5 % du bandeau à gauche, soit
	 * 4,464 % de sa propre largeur ; le bandeau en fait 89,29 %), première ligne à gauche, seconde à droite.
	 * Accents 12 px sous le bord de la bande ; la plus longue ligne s'arrête avant le bouton pause (56 px + 8).
	 */
	.mi-heros-medias__grand-texte {
		--mi-marge: clamp(22px, 5.6vw, 80px);
		left: calc(4.464% + var(--mi-marge));
		width: calc(89.29cqw - 2 * var(--mi-marge));
		font-size: min((var(--mi-detoure-haut) - 12px + 36cqh) / (1.101 + (var(--lignes, 1) - 1) * 1.1), (89.29cqw - var(--mi-marge) - 64px) / var(--largeur, 3));
	}

	.mi-heros-medias__voile {
		background: linear-gradient(180deg, rgba(2, 45, 34, 0) 0, rgba(2, 45, 34, 0) 52%, rgba(2, 45, 34, 0.9) 86%, #022d22 100%);
	}

	.mi-heros-medias__pause {
		top: 12px;
		right: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-heros-medias__diapo,
	.mi-heros-medias__video,
	.mi-heros-medias__pause {
		transition: none;
	}

	.mi-heros-medias__diapo.is-active .mi-heros-medias__lettre {
		animation: none;
	}
}