/*
 * Accueil animé AH2R, deux variantes : « pinceau » et « versus » (attribut data-variante).
 * États posés sur <html> :
 *   aucun               image fixe (sans JS, mouvements réduits, éditeur Elementor)
 *   ah2r-hero-intro     animation en cours, éléments d'entrée invisibles jusqu'au départ de GSAP
 *   ah2r-hero-layers    calques affichés : animation terminée, ou déjà vue dans la session
 * Repère des calques : le PSD, 997 × 782.
 */

.ah2r-hero {
	/* Hauteur visible sous le header du site, et scène aussi grande que possible dans cette hauteur
	   (997 / 782 = 1,275 ; 150 px pour les marges haute et basse). */
	--ah2r-hero-h: calc(100svh - var(--ah2r-header-h, 80px));
	--ah2r-hero-w: min(62vw, 1100px, calc((var(--ah2r-hero-h) - 150px) * 1.275));
	box-sizing: border-box;
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-height: var(--ah2r-hero-h);
	padding: clamp(24px, 4vh, 48px) 16px clamp(56px, 7vh, 88px);
	overflow: hidden;
	overflow: clip;
	background: var(--ah2r-ink, #0A0A0A);
	color: var(--ah2r-paper, #F5F2EC);
}

.ah2r-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse at 50% 48%, #1c1a1a 0%, #0f0e0e 55%, #050505 100%);
}
.ah2r-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background: repeating-linear-gradient(35deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 7px);
}

.ah2r-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(8px, 2vw, 28px);
	width: min(1440px, 100%);
}

/* Scène */

.ah2r-hero__stage {
	position: relative;
	width: var(--ah2r-hero-w);
	aspect-ratio: 997 / 782;
}
.ah2r-hero__final,
.ah2r-hero__layers,
.ah2r-hero__px,
.ah2r-hero__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.ah2r-hero__final,
img.ah2r-hero__layer {
	display: block;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}
svg.ah2r-hero__layer {
	overflow: visible;
}

/* Tracés des masques de pinceau : pathLength = 1000, animés de 1000 (caché) à 0 (dessiné). */
.ah2r-hero__draw {
	stroke-dasharray: 1000;
	stroke-dashoffset: 0;
}

.ah2r-hero__layers {
	visibility: hidden;
}
.ah2r-hero-intro .ah2r-hero__final,
.ah2r-hero-layers .ah2r-hero__final {
	visibility: hidden;
}
.ah2r-hero-intro .ah2r-hero__layers,
.ah2r-hero-layers .ah2r-hero__layers {
	visibility: visible;
}

/* Avant le départ de GSAP, tout ce qui doit entrer reste invisible. */
.ah2r-hero-intro .ah2r-hero__bg,
.ah2r-hero-intro img.ah2r-hero__layer,
.ah2r-hero-intro .ah2r-hero__btn,
.ah2r-hero-intro .ah2r-hero__catch,
.ah2r-hero-intro .ah2r-hero__scroll {
	opacity: 0;
}
.ah2r-hero-intro .ah2r-hero__draw {
	stroke-dashoffset: 1000;
}

/* Barre, flash et « challenger » : variante versus seulement ; la barre s'efface après l'impact. */
.ah2r-hero:not([data-variante="versus"]) .ah2r-hero__barre,
.ah2r-hero:not([data-variante="versus"]) .ah2r-hero__flash,
.ah2r-hero:not([data-variante="versus"]) .ah2r-hero__challenger {
	display: none;
}
.ah2r-hero-layers .ah2r-hero__barre {
	visibility: hidden;
}
.ah2r-hero__flash {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.ah2r-hero__challenger {
	position: absolute;
	left: 50%;
	top: clamp(16px, 5vh, 48px);
	z-index: 6;
	translate: -50% 0;
	margin: 0;
	white-space: nowrap;
	font: italic 600 clamp(14px, 2.2vw, 26px) / 1 var(--ah2r-font-label, "Oswald", sans-serif);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #F5F2EC;
	text-shadow: 0 0 18px rgba(220, 12, 8, 0.9), 0 0 2px #000;
	opacity: 0;
	visibility: hidden;
}

/* Zone cliquable sur le trait en S : Combat pour l'Art */
.ah2r-hero__art-zone {
	position: absolute;
	left: 43.6%;
	top: 15.3%;
	width: 12%;
	height: 76.7%;
	rotate: -13deg;
	border-radius: 40%;
}

/* Boutons arcade (images du PSD) et leurs auras qui tournent */

.ah2r-hero__btns {
	pointer-events: none;
}
.ah2r-hero__btn {
	position: absolute;
	display: block;
	border-radius: 50%;
	pointer-events: auto;
}
.ah2r-hero__btn img {
	position: absolute;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}
.ah2r-hero__aura {
	inset: 0;
	width: 100%;
	height: 100%;
}
.ah2r-hero__btn--virtuel .ah2r-hero__aura {
	opacity: 0.7;
}
.ah2r-hero__face {
	transition: scale 0.15s ease, filter 0.2s ease, translate 0.1s ease;
}
.ah2r-hero__btn:hover .ah2r-hero__face {
	scale: 1.08;
	filter: brightness(1.15);
}
.ah2r-hero__btn:active .ah2r-hero__face {
	translate: 0 4%;
}
.ah2r-hero__btn:focus-visible,
.ah2r-hero__catch:focus-visible,
.ah2r-hero__scroll:focus-visible {
	outline: 3px solid var(--ah2r-paper, #F5F2EC);
	outline-offset: 4px;
}
@media (prefers-reduced-motion: no-preference) {
	.ah2r-hero__aura {
		animation: ah2r-spin 9s linear infinite;
	}
	.ah2r-hero__btn--virtuel .ah2r-hero__aura {
		animation-duration: 11s;
		animation-direction: reverse;
	}
}
@keyframes ah2r-spin {
	to { rotate: 360deg; }
}

/* Accroches : deux lignes équilibrées, qui mordent sur les marges transparentes du PSD. */

/* Sélecteurs préfixés par .ah2r-hero : l'accroche de droite est un lien, et la couleur des liens du kit Elementor
   (.elementor-kit-N a) l'emporterait sinon. */
.ah2r-hero .ah2r-hero__catch {
	position: relative;
	z-index: 2;
	width: 7.2em;
	margin: 0;
	font: 400 clamp(20px, 2.4vw, 52px) / 1.02 var(--ah2r-font-display, "Potta One", "Arial Black", sans-serif);
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--ah2r-paper, #F5F2EC);
	text-decoration: none;
}
.ah2r-hero .ah2r-hero__catch span {
	color: var(--ah2r-red, #DC0C08);
}
.ah2r-hero__catch--left {
	justify-self: end;
	align-self: end;
	text-align: right;
	margin-right: calc(var(--ah2r-hero-w) * -0.15);
	margin-bottom: 8%;
}
.ah2r-hero__catch--right {
	justify-self: start;
	align-self: start;
	margin-left: calc(var(--ah2r-hero-w) * -0.15);
	margin-top: 8%;
}
.ah2r-hero a.ah2r-hero__catch:hover span {
	color: var(--ah2r-red-text, #FF4D4D);
}

/* Indicateur de scroll */

.ah2r-hero .ah2r-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	translate: -50% 0;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--ah2r-paper, #F5F2EC);
}

/* Header du site masqué pendant l'intro, puis réaffiché */

.elementor-location-header {
	transition: opacity 0.4s ease;
}
.ah2r-hero-intro:not(.ah2r-hero-reveal-ui) .elementor-location-header {
	opacity: 0;
	pointer-events: none;
}

/* Mobile : composition verticale */

@media (max-width: 767px) {
	.ah2r-hero {
		--ah2r-hero-w: min(100%, 520px);
		min-height: 0;
	}
	.ah2r-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 16px;
	}
	.ah2r-hero .ah2r-hero__catch--left,
	.ah2r-hero .ah2r-hero__catch--right {
		width: auto;
		justify-self: center;
		align-self: auto;
		text-align: center;
		margin: 0;
	}
}