/**
 * C66 Intro — styles. Tout est préfixé .c66i- / html.c66i-*.
 */
.c66i-root { display: none; }

/* Écran noir avant le chargement du script (évite de voir la page 1 s).
   Disparaît de lui-même après 12 s si le script ne se charge pas. */
html.c66i-pending::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background: #000;
	animation: c66i-failsafe 0.01s 12s forwards;
}
@keyframes c66i-failsafe { to { opacity: 0; visibility: hidden; } }

/* Logo sur l'écran noir, jusqu'au départ de l'animation (image posée en <head> via --c66i-logo).
   Fondu d'entrée seulement quand l'image est téléchargée et décodée (c66i-logo-in), puis logo
   FIXE : pendant la répétition invisible de la scène, processeur et carte graphique sont saturés
   et toute animation continue saccaderait. Même filet de 12 s que l'écran noir, suspendu dès que
   le chargeur tourne (c66i-logo-live) : il le retire lui-même au départ. */
html.c66i-logo {
	--c66i-logo-size: min(44vw, 210px);
}
html.c66i-logo::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 2147483001;
	width: var(--c66i-logo-size);
	height: var(--c66i-logo-size);
	margin: auto;
	background: var(--c66i-logo) center / contain no-repeat;
	pointer-events: none;
	opacity: 0;
	will-change: opacity, transform;
}
/* Texte sous le logo (réglages) : même pseudo-élément, logo en image de fond au-dessus du texte,
   l'ensemble centré dans l'écran. Texte = chaîne CSS posée en <head> (--c66i-logo-txt). */
html.c66i-logo.c66i-logo-txt::after {
	content: var(--c66i-logo-txt, '');
	box-sizing: border-box;
	inset: auto;
	top: 50%;
	left: 50%;
	translate: -50% -50%; /* à part de transform (animé) */
	margin: 0;
	width: min(88vw, 560px);
	height: auto;
	padding-top: calc(var(--c66i-logo-size) + 18px);
	background-position: top center;
	background-size: var(--c66i-logo-size) var(--c66i-logo-size);
	font: 600 clamp(13px, 3.8vw, 18px)/1.35 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	white-space: pre-line;
	overflow-wrap: anywhere;
	color: #f2f4f8;
	text-shadow: 0 0 18px rgba(30, 144, 255, 0.35);
}
html.c66i-logo.c66i-logo-in::after {
	animation:
		c66i-logo-in 0.35s ease-out forwards,
		c66i-failsafe 0.01s 12s forwards;
}
html.c66i-logo.c66i-logo-in.c66i-logo-live::after { animation-play-state: running, paused; }
/* sortie : au départ de l'intro, fondu enchaîné avec l'allumage de la scène (délai et durée posés
   par le chargeur) ; « Passer » ou échec : sortie courte. Remplissage « both » : le logo reste
   plein pendant le délai. */
html.c66i-logo.c66i-logo-out::after { animation: c66i-logo-out var(--c66i-logo-t, 0.6s) ease-in-out var(--c66i-logo-d, 0s) both; }
@keyframes c66i-logo-in {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: scale(1); }
}
@keyframes c66i-logo-out {
	/* part de l'opacité du moment (logo pas encore apparu en entier si la scène est prête tôt) */
	from { opacity: var(--c66i-logo-o, 1); transform: scale(1); }
	to { opacity: 0; transform: scale(1.06); }
}

html.c66i-playing,
html.c66i-playing body { overflow: hidden !important; }

.c66i-stage {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/* hauteur maximale de l'écran : fixe quand la barre d'adresse du téléphone bouge */
	height: 100vh;
	height: 100lvh;
	z-index: 2147483000;
	background: #000;
	transition: opacity 1.4s ease;
}
.c66i-canvas { display: block; width: 100%; height: 100%; }
.c66i-stage.c66i-out { opacity: 0; pointer-events: none; }

/* Galaxie conservée en fond de page après l'intro */
html.c66i-fond { background: #050507; }
html.c66i-fond body::before { display: none; }
html.c66i-fond.c66i-revealed .c66i-stage { z-index: -1; pointer-events: none; }
html.c66i-fond body { background: transparent !important; }

/* Repli sans WebGL */
.c66i-stage.c66i-nogl .c66i-canvas { visibility: hidden; }
.c66i-stage.c66i-nogl {
	background:
		radial-gradient(ellipse 70% 55% at 28% 35%, rgba(30, 110, 255, 0.35), transparent 60%),
		radial-gradient(ellipse 60% 50% at 72% 62%, rgba(90, 50, 200, 0.3), transparent 60%),
		radial-gradient(ellipse 50% 40% at 50% 90%, rgba(232, 100, 26, 0.18), transparent 65%),
		#050507;
}

/* Apparition du contenu après l'intro : fondu progressif (durée réglable, --c66i-in-dur posé
   par le chargeur ; courbe lente au début pour ne pas « sauter » à mi-opacité) */
html.c66i-played.c66i-revealed body > *:not(.c66i-stage):not(.c66i-btn):not(script):not(style) {
	animation: c66i-in var(--c66i-in-dur, 2s) cubic-bezier(0.4, 0, 0.3, 1) both;
}
@keyframes c66i-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* Titre de l'affiche à l'explosion */
.c66i-title {
	position: fixed;
	inset: 0;
	z-index: 2147483001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4vw;
	pointer-events: none;
}
.c66i-title img {
	display: block;
	width: min(92vw, 1100px);
	height: auto;
	opacity: 0;
	transform: scale(1.3);
	/* halo fixe : seuls opacité et échelle s'animent (aucun redessin pendant l'animation) */
	filter: drop-shadow(0 0 24px rgba(30, 144, 255, 0.55));
	will-change: transform, opacity;
}
.c66i-title.is-in img {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.3s ease-out, transform 2.2s cubic-bezier(0.12, 0.85, 0.2, 1);
}
.c66i-title.is-out img {
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.6s ease-in, transform 0.6s ease-in;
}

/* Boutons */
.c66i-btn {
	position: fixed;
	z-index: 2147483001;
	bottom: calc(20px + env(safe-area-inset-bottom));
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 14px 20px;
	font: 600 14px/1 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #f2f4f8;
	background: rgba(5, 5, 7, 0.45);
	border: 1px solid rgba(242, 244, 248, 0.35);
	border-radius: 0;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: border-color 0.2s, opacity 0.4s, width 0.3s, padding 0.3s;
}
.c66i-btn:hover,
.c66i-btn:focus-visible { border-color: #1e90ff; outline: none; }
.c66i-skip { right: calc(20px + env(safe-area-inset-right)); }
.c66i-sound { left: calc(20px + env(safe-area-inset-left)); }
.c66i-sound svg { width: 18px; height: 18px; flex: none; }
.c66i-sound .c66i-on { display: none; }
.c66i-sound[aria-pressed="true"] .c66i-on { display: inline; }
.c66i-sound[aria-pressed="true"] .c66i-off { display: none; }


@media (max-width: 480px) {
	.c66i-btn { padding: 12px 16px; font-size: 13px; }
}