/* ==========================================================================
   Logo animé JDK Concept, en-tête et pied de page.

   Le logo est un PNG, pas un tracé vectoriel : impossible de le dessiner
   ligne à ligne. Le fichier sert donc de MASQUE, et la lumière or circule
   à l'intérieur du tracé. Le <img> d'origine n'est jamais modifié, la marque
   est rendue au pixel près comme avant.

   Rien n'est masqué par le CSS seul : l'état initial de la révélation
   n'existe que sous html.jdk-logo-joue, classe posée par JavaScript. Sans
   JavaScript, le logo reste visible et fixe.
   ========================================================================== */

.jdk-logo {
	--jdk-logo-or: #D2AF87;

	position: relative;
	display: inline-block;
	padding: 0;
	line-height: 0;
	vertical-align: middle;
}

.jdk-logo img {
	display: block;
	position: relative;
	z-index: 0;
}

/* --- le calque de lumière, calé sur le tracé par le masque --- */

.jdk-logo__eclat {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;

	-webkit-mask-image: var(--jdk-logo-masque);
	mask-image: var(--jdk-logo-masque);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;

	background-image: linear-gradient(
		104deg,
		rgba(210, 175, 135, 0) 34%,
		rgba(227, 201, 169, .55) 45%,
		var(--jdk-logo-or) 50%,
		rgba(227, 201, 169, .55) 55%,
		rgba(210, 175, 135, 0) 66%
	);
	background-repeat: no-repeat;
	background-size: 240% 100%;
	background-position: 170% 0;

	filter: drop-shadow(0 0 5px rgba(210, 175, 135, .45));
}

@keyframes jdk-logo-lumiere {
	0%   { opacity: 0; background-position: 170% 0; }
	18%  { opacity: 1; }
	82%  { opacity: 1; }
	100% { opacity: 0; background-position: -70% 0; }
}

/* la révélation : un balayage de gauche à droite, qui donne au tracé
   l'allure d'un dessin en train de se faire */
@keyframes jdk-logo-trace {
	from { clip-path: inset(0 100% 0 0); opacity: .25; }
	to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* --- en-tête : une fois par session, à l'ouverture --- */

html.jdk-logo-joue .jdk-logo--entete {
	animation: jdk-logo-trace .85s cubic-bezier(.22, .61, .36, 1) both;
}

html.jdk-logo-joue .jdk-logo--entete .jdk-logo__eclat {
	animation: jdk-logo-lumiere 1.15s cubic-bezier(.4, 0, .2, 1) .5s 1 both;
}

/* --- pied de page : au moment où il entre dans le champ ---
   Rien n'est masqué ici : seule la lumière passe. Si l'observateur ne se
   déclenchait jamais, le logo resterait simplement fixe et visible. */

.jdk-logo--pied.est-vu .jdk-logo__eclat {
	animation: jdk-logo-lumiere 1.25s cubic-bezier(.4, 0, .2, 1) .15s 1 both;
}

/* --- survol et focus : la lumière repasse, sur les deux logos --- */

.jdk-logo:hover .jdk-logo__eclat,
a:focus-visible .jdk-logo__eclat {
	animation: jdk-logo-lumiere .9s cubic-bezier(.4, 0, .2, 1) 1 both;
}

/* --- respect du réglage système --- */

@media (prefers-reduced-motion: reduce) {

	html.jdk-logo-joue .jdk-logo--entete,
	html.jdk-logo-joue .jdk-logo--entete .jdk-logo__eclat,
	.jdk-logo--pied.est-vu .jdk-logo__eclat,
	.jdk-logo:hover .jdk-logo__eclat,
	a:focus-visible .jdk-logo__eclat {
		animation: none;
	}

	html.jdk-logo-joue .jdk-logo--entete { clip-path: none; opacity: 1; }
}