/* Nirmata Events — hero d'accueil aux couleurs de la soirée mise en avant
 * (`HomeHero`, 0.147.0) et menu personne posé sur le hero vidéo.
 *
 * Mesures reprises de la maquette validée (`reference/ambiance-du-site.md`,
 * piste A fond « bannière ») : le logo occupe 38 % du carré de la rosace, ce
 * qui le loge dans le cercle intérieur du mandala de Chill & Live ; rosace à
 * 55 % (dessous) et 90 % (dessus) ; bannière floutée de 48 px, assombrie à
 * 38 %. Dépend de site-header.css (rosace, menu personne) et de tokens.css.
 */

.nirmata-home-hero {
	position: relative;
	overflow: hidden;
	min-height: 90svh;
	display: grid;
	place-items: center;
	padding: 28px 20px 40px;
	text-align: center;
	background: var( --nirmata-bg );
	color: var( --nirmata-text );
}

.nirmata-home-hero__bg {
	position: absolute;
	inset: 0;
	background: radial-gradient( 70% 60% at 50% 32%, #23182a 0%, var( --nirmata-bg ) 72% );
}

.nirmata-home-hero--banner .nirmata-home-hero__bg {
	inset: -80px;
	background: var( --nirmata-home-hero-banner ) center / cover no-repeat;
	filter: blur( 48px ) brightness( 0.38 ) saturate( 1.3 );
}

.nirmata-home-hero__inner {
	position: relative;
	display: grid;
	justify-items: center;
}

/* ---------- Le logo au cœur de la rosace ---------- */

.nirmata-home-hero__halo {
	position: relative;
	width: min( 400px, 78vw, 46svh );
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

.nirmata-home-hero__rosace {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.nirmata-home-hero__layer {
	position: absolute;
	inset: 0;
	background: center / contain no-repeat;
}

.nirmata-home-hero__layer--under {
	background-image: var( --nirmata-site-header-rosace );
	opacity: 0.55;
}

.nirmata-home-hero__layer--top {
	background-image: var( --nirmata-site-header-rosace-top );
	opacity: 0.9;
}

.nirmata-home-hero--spin .nirmata-home-hero__layer--top {
	animation: nirmata-home-hero-spin 240s linear infinite;
}

.nirmata-home-hero--spin.is-paused .nirmata-home-hero__layer--top {
	animation-play-state: paused;
}

@keyframes nirmata-home-hero-spin {
	to {
		transform: rotate( 1turn );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.nirmata-home-hero--spin .nirmata-home-hero__layer--top {
		animation: none;
	}
}

.nirmata-home-hero__logo {
	position: relative;
	display: block;
	width: 38%;
	height: auto;
	filter: drop-shadow( 0 0 24px rgba( 0, 0, 0, 0.6 ) );
}

/* ---------- La soirée ---------- */

.nirmata-home-hero__presents {
	margin: -14px 0 0;
	padding-left: 0.5em;
	font-family: var( --nirmata-font-display );
	font-weight: 300;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var( --nirmata-rose );
}

.nirmata-home-hero__presents strong {
	font-weight: 700;
	letter-spacing: 0.32em;
}

.nirmata-home-hero__title {
	margin: 14px 0 0;
	font-family: var( --nirmata-font-display );
	font-weight: 700;
	font-size: clamp( 2.2rem, 6vw, 4.2rem );
	line-height: 1.05;
	text-transform: uppercase;
	color: var( --nirmata-rose );
}

.nirmata-home-hero__title img {
	display: block;
	width: min( 380px, 80vw, 40svh );
	height: auto;
	margin: 0 auto;
}

.nirmata-home-hero__when {
	margin: 10px 0 0;
	font-size: 18px;
	line-height: 1.4;
}

.nirmata-home-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}

.nirmata-home-hero .nirmata-home-hero__button {
	padding: 1rem 2.25rem;
	border-radius: 999px;
	font-family: var( --nirmata-font-display );
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
}

.nirmata-home-hero .nirmata-home-hero__button--primary {
	background: var( --nirmata-secondary );
	color: var( --nirmata-bg );
}

.nirmata-home-hero .nirmata-home-hero__button--ghost {
	border: 1px solid var( --nirmata-text );
	color: var( --nirmata-text );
}

.nirmata-home-hero .nirmata-home-hero__button:hover,
.nirmata-home-hero .nirmata-home-hero__button:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nirmata-home-hero__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 22px 0 0;
	font-size: 14px;
	color: var( --nirmata-text-muted );
}

.nirmata-home-hero .nirmata-home-hero__links a {
	color: var( --nirmata-text-muted );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nirmata-home-hero__links a:hover,
.nirmata-home-hero__links a:focus-visible {
	color: var( --nirmata-rose );
}

.nirmata-home-hero a:focus,
.nirmata-home-hero a:focus-visible,
.nirmata-home-hero button:focus,
.nirmata-home-hero button:focus-visible {
	outline: none;
	box-shadow: none;
}

/* ---------- Pause de l'animation ---------- */

.nirmata-home-hero__pause {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var( --nirmata-border );
	border-radius: 50%;
	background: rgba( 18, 19, 26, 0.75 );
	color: var( --nirmata-text );
	cursor: pointer;
}

.nirmata-home-hero__pause[hidden] {
	display: none;
}

.nirmata-home-hero__pause svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.nirmata-home-hero__pause:focus-visible {
	border-color: var( --nirmata-rose );
	color: var( --nirmata-rose );
}

.nirmata-home-hero__play-icon,
.nirmata-home-hero.is-paused .nirmata-home-hero__pause-icon {
	display: none;
}

.nirmata-home-hero.is-paused .nirmata-home-hero__play-icon {
	display: block;
}

@media ( prefers-reduced-motion: reduce ) {
	.nirmata-home-hero__pause {
		display: none;
	}
}

/* ---------- Menu personne, en haut à droite du hero ---------- *
 * Le même que le header (site-header-person.php), sur un fond sombre : sans
 * trait de séparation, en couleur du texte. Posé aussi sur le hero vidéo. */

.nirmata-home-hero__who {
	position: absolute;
	top: 18px;
	right: 24px;
	z-index: 5;
}

.nirmata-home-hero__who .nirmata-site-header__person {
	position: static;
	padding: 0;
	border: 0;
}

.nirmata-home-hero__who .nirmata-site-header__login,
.nirmata-home-hero__who .nirmata-site-header__who-button {
	color: var( --nirmata-text );
	opacity: 0.9;
}

.nirmata-home-hero__who .nirmata-site-header__who-menu {
	text-align: left;
}

@media ( max-width: 700px ) {
	.nirmata-home-hero__who {
		top: 12px;
		right: 14px;
	}

	.nirmata-home-hero .nirmata-home-hero__button {
		padding: 0.9rem 1.5rem;
		font-size: 13px;
	}

	.nirmata-home-hero__halo {
		width: min( 330px, 84vw );
	}
}

/* Hors du header, les règles de liens du thème s'appliquent au menu personne :
 * on y reprend celles du header (pas de soulignement au repos, texte réservé
 * au lecteur d'écran masqué). */
.nirmata-home-hero__who a {
	text-decoration: none;
}

.nirmata-home-hero__who .nirmata-site-header__login:hover,
.nirmata-home-hero__who .nirmata-site-header__login:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nirmata-home-hero__who a:focus,
.nirmata-home-hero__who a:focus-visible,
.nirmata-home-hero__who summary:focus,
.nirmata-home-hero__who summary:focus-visible {
	outline: none;
	box-shadow: none;
}

.nirmata-home-hero__who .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}