/* ---------- Ouverture plein écran ---------- */

.c-hero {
	--p: 0;
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	isolation: isolate;
	background: var(--cg-ink);
	color: var(--cg-ivory);
}

.c-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translate3d(0, calc(var(--p) * 18vh), 0) scale(calc(1 + var(--p) * 0.08));
	transform-origin: 50% 40%;
}

.c-hero__frame {
	position: absolute;
	inset: 0;
	transform: scale(1.14);
	transition: transform 3.6s var(--cg-ease);
}

.c-hero.is-ready .c-hero__frame {
	transform: scale(1.02);
}

.c-hero__poster,
.c-hero__video,
.c-hero__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-hero__video {
	opacity: 0;
	transition: opacity 1.8s var(--cg-ease);
}

.c-hero.is-playing .c-hero__video {
	opacity: 1;
}

.c-hero__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(var(--cg-ink-rgb), 0.55) 0%, rgba(var(--cg-ink-rgb), 0) 26%, rgba(var(--cg-ink-rgb), 0) 58%, rgba(var(--cg-ink-rgb), 0.9) 100%),
		radial-gradient(ellipse at center, transparent 45%, rgba(var(--cg-ink-rgb), 0.45) 100%);
}

.c-hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 var(--cg-gutter);
	text-align: center;
	opacity: calc(1 - var(--p) * 1.6);
	transform: translate3d(0, calc(var(--p) * -14vh), 0);
}

.c-hero__title {
	margin: 0;
	font-family: var(--cg-serif);
	font-size: clamp(64px, 16.5vw, 300px);
	font-weight: 400;
	line-height: 0.86;
	letter-spacing: 0.02em;
	font-variation-settings: "opsz" 96;
}

.c-hero__word {
	display: inline-flex;
	overflow: hidden;
	padding: 0.04em 0.02em 0.06em;
}

.c-hero__word > span {
	display: inline-block;
}

.has-js .c-hero__word > span {
	transform: translate3d(0, 108%, 0);
	transition: transform 1.7s var(--cg-ease);
	transition-delay: calc(var(--i) * 75ms + 0.15s);
}

.c-hero.is-ready .c-hero__word > span {
	transform: none;
}

.c-hero__logo {
	display: block;
	width: min(78vw, 920px);
	height: auto;
}

/* Logo SVG : apparaît comme une mise au point, en relais du logo tracé à l'ouverture. */
.c-hero__logo--svg {
	width: min(84vw, 1040px);
	max-height: 56vh;
	color: var(--cg-ivory);
}

.has-js .c-hero__logo--svg {
	opacity: 0;
	filter: blur(10px);
	transform: scale(1.025);
	transition: opacity 1.1s ease, filter 1.2s var(--cg-ease), transform 2s var(--cg-ease);
}

.c-hero.is-ready .c-hero__logo--svg {
	opacity: 1;
	filter: none;
	transform: none;
}

.c-hero__tagline {
	margin: clamp(18px, 3.4vh, 36px) 0 0;
	font-family: var(--cg-serif);
	font-size: clamp(1.15rem, 0.8rem + 1.4vw, 2rem);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: rgba(var(--cg-ivory-rgb), 0.88);
}

.c-hero__tagline em {
	font-style: italic;
	color: var(--cg-amber);
}

.has-js .c-hero__tagline,
.has-js .c-hero__bar {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition: opacity 1.2s var(--cg-ease) 0.35s, transform 1.4s var(--cg-ease) 0.35s;
}

.has-js .c-hero__bar {
	transition-delay: 0.6s;
}

.c-hero.is-ready .c-hero__tagline,
.c-hero.is-ready .c-hero__bar {
	opacity: 1;
	transform: none;
}

/* Sécurité : tout s'affiche après 3,5 s, même si le script n'a pas pu s'exécuter. */
.has-js .c-hero:not(.is-ready) .c-hero__word > span,
.has-js .c-hero:not(.is-ready) .c-hero__logo--svg,
.has-js .c-hero:not(.is-ready) .c-hero__tagline,
.has-js .c-hero:not(.is-ready) .c-hero__bar {
	animation: cg-hero-failsafe 0s 3.5s forwards;
}

@keyframes cg-hero-failsafe {
	to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

/* Barre inférieure : sous-titre, invitation au défilement, son. */
.c-hero__bar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: 1rem;
	padding: 0 var(--cg-gutter) clamp(22px, 4vh, 40px);
	font-family: var(--cg-sans);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(var(--cg-ivory-rgb), 0.7);
}

.c-hero__subtitle {
	margin: 0;
}

.c-hero__scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	color: inherit;
	text-decoration: none;
}

.c-hero__scroll-line {
	position: relative;
	width: 1px;
	height: 56px;
	overflow: hidden;
	background: rgba(var(--cg-ivory-rgb), 0.18);
}

.c-hero__scroll-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cg-amber);
	transform: translateY(-100%);
	animation: cg-scroll-line 2.6s var(--cg-ease-wing) infinite;
}

@keyframes cg-scroll-line {
	0% { transform: translateY(-100%); }
	55% { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

.c-hero__sound {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.c-hero__bars {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 12px;
}

.c-hero__bars i {
	width: 1px;
	height: 3px;
	background: currentColor;
	transition: height 0.4s var(--cg-ease);
}

.c-hero__sound[aria-pressed="true"] {
	color: var(--cg-ivory);
}

.c-hero__sound[aria-pressed="true"] .c-hero__bars i {
	animation: cg-bars 1.1s ease-in-out infinite alternate;
}

.c-hero__sound[aria-pressed="true"] .c-hero__bars i:nth-child(2) { animation-delay: -0.4s; }
.c-hero__sound[aria-pressed="true"] .c-hero__bars i:nth-child(3) { animation-delay: -0.8s; }
.c-hero__sound[aria-pressed="true"] .c-hero__bars i:nth-child(4) { animation-delay: -0.2s; }

@keyframes cg-bars {
	0% { height: 3px; }
	100% { height: 12px; }
}

/* ---------- Ouverture : le logo se trace à la plume, puis un iris s'ouvre ---------- */

@property --iris {
	syntax: "<length>";
	inherits: false;
	initial-value: -120px;
}

.c-intro {
	display: none;
}

.has-js .c-intro {
	--iris: -120px;
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 0 var(--cg-gutter);
	background: var(--cg-ink);
	cursor: pointer;
	/* L'iris : un cercle transparent au bord adouci, qui s'agrandit depuis le centre. */
	-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 120px));
	mask-image: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 120px));
	transition: --iris 1.3s var(--cg-ease-wing);
	/* Sécurité : l'écran d'ouverture disparaît même si le script ne s'exécute pas. */
	animation: cg-intro-failsafe 0s 3.5s forwards;
}

.c-intro.is-open {
	--iris: 130vmax;
	pointer-events: none;
}

@keyframes cg-intro-failsafe {
	to { visibility: hidden; }
}

.c-intro__mark,
.c-intro__img {
	display: block;
	width: min(84vw, 1040px);
	max-height: 56vh;
	height: auto;
	color: var(--cg-ivory);
	transition: opacity 0.9s ease, filter 1s var(--cg-ease), transform 1.4s var(--cg-ease);
}

/* Le tracé : un fil ambré parcourt chaque forme (longueur normalisée à 1 par le script). */
.c-intro__mark * {
	fill-opacity: 0;
	stroke: var(--cg-amber);
	stroke-width: 1px;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	vector-effect: non-scaling-stroke;
	transition:
		stroke-dashoffset 0.8s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0ms),
		fill-opacity 0.6s ease,
		stroke-opacity 0.6s ease;
}

.c-intro.is-drawing .c-intro__mark * {
	stroke-dashoffset: 0;
}

/* L'encre remplit le tracé, le fil s'efface. */
.c-intro.is-filled .c-intro__mark * {
	fill-opacity: 1;
	stroke-opacity: 0;
}

/* Logo image (PNG choisi dans les réglages) : simple mise au point. */
.c-intro__img {
	opacity: 0;
	filter: blur(12px);
}

.c-intro.is-drawing .c-intro__img {
	opacity: 1;
	filter: none;
}

/* À l'ouverture de l'iris, le logo se dissout dans celui de l'accueil. */
.c-intro.is-open .c-intro__mark,
.c-intro.is-open .c-intro__img {
	opacity: 0;
	filter: blur(8px);
	transform: scale(1.04);
}

html.is-intro {
	overflow: hidden;
}

/* ---------- Éditeur ---------- */

.c-hero.is-editor {
	height: 82vh;
	min-height: 520px;
}

.c-hero.is-editor .c-hero__content,
.c-hero.is-editor .c-hero__media {
	transform: none;
}

@media (max-width: 767px) {
	.c-hero__bar {
		grid-template-columns: 1fr auto;
	}

	.c-hero__scroll {
		display: none;
	}

	.c-hero__title {
		font-size: clamp(56px, 19vw, 120px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-hero__frame,
	.c-hero__word > span,
	.c-hero__tagline,
	.c-hero__bar {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.c-hero__scroll-line::after {
		animation: none;
	}
}