/* ===========================================================================
 * Récompenses exclusives du Défi de groupe.
 *
 * 50 bordures d'avatar = 10 familles d'effet × 5 palettes. Les couleurs et la
 * vitesse arrivent en style inline (--gb-1/2/3, --gb-sp), l'effet vit ici :
 * un seul bloc CSS par famille au lieu de cinquante.
 *
 * 25 animations du bouton « Générer » = 5 mécaniques × 5 ambiances, sur le
 * même principe (--ga-1/2/3).
 * ======================================================================== */

/* L'angle animé des dégradés coniques (déjà déclaré par equipment.css ; la
   redéclaration à l'identique est sans effet et rend ce fichier autonome). */
@property --pp-a {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes pp-gb-rotate { to { --pp-a: 360deg; } }
@keyframes pp-gb-sweep  { to { background-position: 300% 50%; } }
@keyframes pp-gb-metal  { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes pp-gb-wave   { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.pp-gb {
	padding: 3px;
	border-radius: 50%;
	--gb-1: #4facfe;
	--gb-2: #00f2fe;
	--gb-3: #0b3d91;
	--gb-sp: 5s;
}

/* 1. Couronne — anneau conique avec un arc lumineux qui tourne. */
.pp-gb--couronne {
	background: conic-gradient(from var(--pp-a),
		var(--gb-3), var(--gb-1) 25%, var(--gb-2) 40%, var(--gb-1) 55%, var(--gb-3) 80%, var(--gb-3));
	animation: pp-gb-rotate var(--gb-sp) linear infinite;
}

/* 2. Éclat — reflet blanc qui balaie le pourtour. */
.pp-gb--eclat {
	background: linear-gradient(100deg,
		var(--gb-3), var(--gb-1) 30%, #fff 45%, var(--gb-2) 60%, var(--gb-3));
	background-size: 300% 100%;
	animation: pp-gb-sweep var(--gb-sp) linear infinite;
}

/* 3. Métal — sheen métallique, va-et-vient lent. */
.pp-gb--metal {
	background: linear-gradient(135deg,
		var(--gb-3) 0%, var(--gb-1) 20%, #fff 34%, var(--gb-2) 50%, var(--gb-1) 66%, #fff 79%, var(--gb-3) 100%);
	background-size: 260% 260%;
	animation: pp-gb-metal var(--gb-sp) ease-in-out infinite;
}

/* 4. Aurore — voile coloré très lent, halo diffus. */
.pp-gb--aurore {
	background: conic-gradient(from var(--pp-a),
		var(--gb-2), var(--gb-1), var(--gb-3), var(--gb-1), var(--gb-2));
	box-shadow: 0 0 14px var(--gb-1);
	animation: pp-gb-rotate var(--gb-sp) linear infinite;
}

/*
 * 5. Pulsar — l'anneau respire.
 *
 * Surtout PAS de `filter` ici : la propriété s'applique à toute l'enveloppe,
 * donc aussi à la photo de profil qu'elle contient, qui se retrouverait
 * délavée. Seule l'ombre portée bouge.
 */
@keyframes pp-gb-pulse {
	0%, 100% { box-shadow: 0 0 4px 0 var(--gb-1); }
	50%      { box-shadow: 0 0 16px 5px var(--gb-1); }
}
.pp-gb--pulsar {
	background: radial-gradient(circle at 50% 50%, var(--gb-2) 52%, var(--gb-1) 72%, var(--gb-3) 100%);
	animation: pp-gb-pulse var(--gb-sp) ease-in-out infinite;
}

/* 6. Étincelle — segments détachés qui tournent. */
.pp-gb--etincelle {
	background:
		conic-gradient(from var(--pp-a),
			var(--gb-1) 0 6%, transparent 6% 12%,
			var(--gb-2) 12% 18%, transparent 18% 25%,
			var(--gb-1) 25% 31%, transparent 31% 37%,
			var(--gb-2) 37% 43%, transparent 43% 50%,
			var(--gb-1) 50% 56%, transparent 56% 62%,
			var(--gb-2) 62% 68%, transparent 68% 75%,
			var(--gb-1) 75% 81%, transparent 81% 87%,
			var(--gb-2) 87% 93%, transparent 93% 100%),
		linear-gradient(var(--gb-3), var(--gb-3));
	animation: pp-gb-rotate var(--gb-sp) linear infinite;
}

/* 7. Plasma — conique dense et rapide, couleurs saturées. */
.pp-gb--plasma {
	background: conic-gradient(from var(--pp-a),
		var(--gb-1), var(--gb-2), var(--gb-3), var(--gb-2), var(--gb-1), var(--gb-3), var(--gb-1));
	box-shadow: 0 0 10px var(--gb-2);
	animation: pp-gb-rotate var(--gb-sp) linear infinite;
}

/* 8. Halo — liseré blanc + auréole qui enfle. */
@keyframes pp-gb-halo {
	0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 10px var(--gb-1); }
	50%      { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 22px var(--gb-2); }
}
.pp-gb--halo {
	background: linear-gradient(140deg, var(--gb-1), var(--gb-2) 50%, var(--gb-3));
	animation: pp-gb-halo var(--gb-sp) ease-in-out infinite;
}

/* 9. Onde — dégradé qui ondule d'un bord à l'autre. */
.pp-gb--onde {
	background: linear-gradient(90deg, var(--gb-1), var(--gb-2), var(--gb-3), var(--gb-2), var(--gb-1));
	background-size: 400% 100%;
	animation: pp-gb-wave var(--gb-sp) ease-in-out infinite;
}

/* 10. Prisme — éclats blancs entre les couleurs, effet facettes. */
/* Les éclats blancs restent étroits : sur un anneau de 3 px, des transitions
   larges vers le blanc effacent complètement la couleur. */
.pp-gb--prisme {
	background: conic-gradient(from var(--pp-a),
		var(--gb-1) 0 20%, #fff 23%, var(--gb-2) 26% 45%, #fff 48%,
		var(--gb-3) 51% 70%, #fff 73%, var(--gb-2) 76% 95%, #fff 98%, var(--gb-1));
	animation: pp-gb-rotate var(--gb-sp) linear infinite;
}

/* ===========================================================================
 * 25 animations du bouton « Générer »
 * ======================================================================== */

/* Ambiances : chaque animation ne pose que ses trois couleurs. */
.pp-gen-anim--gr-comete    { --ga-1: #7ee8fa; --ga-2: #80ff72; --ga-3: #0b3d91; }
.pp-gen-anim--gr-nebuleuse { --ga-1: #b06ab3; --ga-2: #4568dc; --ga-3: #1b0033; }
.pp-gen-anim--gr-vortex    { --ga-1: #00c9ff; --ga-2: #92fe9d; --ga-3: #003b46; }
.pp-gen-anim--gr-spectre   { --ga-1: #f857a6; --ga-2: #ff5858; --ga-3: #3d0033; }
.pp-gen-anim--gr-polaire   { --ga-1: #43e97b; --ga-2: #38f9d7; --ga-3: #05304a; }

.pp-gen-anim--gr-lave      { --ga-1: #ff9800; --ga-2: #ff3d00; --ga-3: #4a0b00; }
.pp-gen-anim--gr-brasier   { --ga-1: #ffd200; --ga-2: #f7971e; --ga-3: #6b2400; }
.pp-gen-anim--gr-braise    { --ga-1: #ff7b54; --ga-2: #d62828; --ga-3: #3d0a05; }
.pp-gen-anim--gr-meteore   { --ga-1: #ffe259; --ga-2: #ffa751; --ga-3: #2b1055; }
.pp-gen-anim--gr-supernova { --ga-1: #fff1a8; --ga-2: #ff5f6d; --ga-3: #1a0033; }

.pp-gen-anim--gr-banquise  { --ga-1: #e0f7ff; --ga-2: #74c0fc; --ga-3: #0b5c8a; }
.pp-gen-anim--gr-cristal   { --ga-1: #ffffff; --ga-2: #a8edea; --ga-3: #2b6777; }
.pp-gen-anim--gr-ecume     { --ga-1: #d4fc79; --ga-2: #96e6a1; --ga-3: #1b4332; }
.pp-gen-anim--gr-lagune    { --ga-1: #43cea2; --ga-2: #185a9d; --ga-3: #052c3f; }
.pp-gen-anim--gr-abysse    { --ga-1: #4b6cb7; --ga-2: #182848; --ga-3: #01030f; }

.pp-gen-anim--gr-orage     { --ga-1: #fdfd96; --ga-2: #89cff0; --ga-3: #0a1330; }
.pp-gen-anim--gr-foudroie  { --ga-1: #fff700; --ga-2: #b14dff; --ga-3: #14002e; }
.pp-gen-anim--gr-chrome    { --ga-1: #ffffff; --ga-2: #c9d6df; --ga-3: #3a4a55; }
.pp-gen-anim--gr-or-liquide{ --ga-1: #fff8d6; --ga-2: #ffd700; --ga-3: #8a6100; }
.pp-gen-anim--gr-zenith    { --ga-1: #fceabb; --ga-2: #f8b500; --ga-3: #7a3e00; }

.pp-gen-anim--gr-mirage    { --ga-1: #fbc2eb; --ga-2: #a6c1ee; --ga-3: #4b3a6b; }
.pp-gen-anim--gr-sakura    { --ga-1: #ffdde1; --ga-2: #ee9ca7; --ga-3: #7a3b4a; }
.pp-gen-anim--gr-crepuscule{ --ga-1: #ff9a9e; --ga-2: #fad0c4; --ga-3: #46237a; }
.pp-gen-anim--gr-emeraude  { --ga-1: #b6ffdd; --ga-2: #00e08f; --ga-3: #05614a; }
.pp-gen-anim--gr-ombre     { --ga-1: #a18cd1; --ga-2: #6a3093; --ga-3: #14042a; }

/* --- Mécanique A : aura conique en rotation ---------------------------- */
.pp-gen-anim--gr-comete .pp-btn--gen-fx,
.pp-gen-anim--gr-nebuleuse .pp-btn--gen-fx,
.pp-gen-anim--gr-vortex .pp-btn--gen-fx,
.pp-gen-anim--gr-spectre .pp-btn--gen-fx,
.pp-gen-anim--gr-polaire .pp-btn--gen-fx {
	background: linear-gradient(180deg, var(--ga-1), var(--ga-2) 55%, var(--ga-3)) !important;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	box-shadow: 0 0 22px var(--ga-2);
}
.pp-gen-anim--gr-comete::before,
.pp-gen-anim--gr-nebuleuse::before,
.pp-gen-anim--gr-vortex::before,
.pp-gen-anim--gr-spectre::before,
.pp-gen-anim--gr-polaire::before {
	opacity: 1;
	inset: -4px;
	background: conic-gradient(from 0deg, transparent, var(--ga-1) 22%, var(--ga-2) 48%, transparent 72%, transparent);
	filter: blur(6px);
	animation: pp-gr-spin 2.6s linear infinite;
}
.pp-gen-anim--gr-comete::after,
.pp-gen-anim--gr-nebuleuse::after,
.pp-gen-anim--gr-vortex::after,
.pp-gen-anim--gr-spectre::after,
.pp-gen-anim--gr-polaire::after {
	opacity: 1;
	inset: 4px;
	background: conic-gradient(from 180deg, transparent, rgba(255, 255, 255, 0.65) 28%, transparent 58%);
	filter: blur(3px);
	animation: pp-gr-spin 1.7s linear infinite reverse;
}
@keyframes pp-gr-spin { to { transform: rotate(360deg); } }

/* --- Mécanique B : flamme montante ------------------------------------ */
.pp-gen-anim--gr-lave .pp-btn--gen-fx,
.pp-gen-anim--gr-brasier .pp-btn--gen-fx,
.pp-gen-anim--gr-braise .pp-btn--gen-fx,
.pp-gen-anim--gr-meteore .pp-btn--gen-fx,
.pp-gen-anim--gr-supernova .pp-btn--gen-fx {
	background: linear-gradient(180deg, var(--ga-1) 0%, var(--ga-2) 60%, var(--ga-3) 100%) !important;
	color: #fff;
	text-shadow: 0 1px 2px rgba(80, 15, 0, 0.7);
	box-shadow: 0 0 24px var(--ga-2), 0 -6px 26px var(--ga-1);
}
.pp-gen-anim--gr-lave::before,
.pp-gen-anim--gr-brasier::before,
.pp-gen-anim--gr-braise::before,
.pp-gen-anim--gr-meteore::before,
.pp-gen-anim--gr-supernova::before {
	opacity: 1;
	inset: -6px;
	background: radial-gradient(ellipse at 50% 90%, var(--ga-1), var(--ga-2) 45%, transparent 72%);
	filter: blur(7px);
	animation: pp-gr-rise 1.6s ease-in-out infinite;
}
.pp-gen-anim--gr-lave::after,
.pp-gen-anim--gr-brasier::after,
.pp-gen-anim--gr-braise::after,
.pp-gen-anim--gr-meteore::after,
.pp-gen-anim--gr-supernova::after {
	opacity: 1;
	inset: 2px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 55%);
	mix-blend-mode: screen;
	animation: pp-gr-flicker 0.9s ease-in-out infinite;
}
@keyframes pp-gr-rise {
	0%, 100% { transform: translateY(0) scale(1);      opacity: 0.75; }
	50%      { transform: translateY(-5px) scale(1.1); opacity: 1; }
}
@keyframes pp-gr-flicker {
	0%, 100% { opacity: 0.45; }
	40%      { opacity: 0.9; }
	70%      { opacity: 0.3; }
}

/* --- Mécanique C : glace et reflets ----------------------------------- */
.pp-gen-anim--gr-banquise .pp-btn--gen-fx,
.pp-gen-anim--gr-cristal .pp-btn--gen-fx,
.pp-gen-anim--gr-ecume .pp-btn--gen-fx,
.pp-gen-anim--gr-lagune .pp-btn--gen-fx,
.pp-gen-anim--gr-abysse .pp-btn--gen-fx {
	background: linear-gradient(180deg, var(--ga-1), var(--ga-2) 58%, var(--ga-3)) !important;
	color: #06324f;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
	box-shadow: 0 0 18px var(--ga-2), inset 0 0 14px rgba(255, 255, 255, 0.65);
}
.pp-gen-anim--gr-abysse .pp-btn--gen-fx,
.pp-gen-anim--gr-lagune .pp-btn--gen-fx { color: #eaf6ff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }

.pp-gen-anim--gr-banquise::before,
.pp-gen-anim--gr-cristal::before,
.pp-gen-anim--gr-ecume::before,
.pp-gen-anim--gr-lagune::before,
.pp-gen-anim--gr-abysse::before {
	opacity: 1;
	inset: 2px;
	background:
		linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.9) 45%, transparent 56%),
		radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.75), transparent 42%);
	mix-blend-mode: screen;
	animation: pp-gr-sheen 2.8s ease-in-out infinite;
}
.pp-gen-anim--gr-banquise::after,
.pp-gen-anim--gr-cristal::after,
.pp-gen-anim--gr-ecume::after,
.pp-gen-anim--gr-lagune::after,
.pp-gen-anim--gr-abysse::after {
	opacity: 1;
	inset: -3px;
	background: radial-gradient(circle, var(--ga-1), transparent 70%);
	filter: blur(5px);
	animation: pp-gr-breathe 2.1s ease-in-out infinite;
}
@keyframes pp-gr-sheen {
	0%, 100% { transform: translateX(-30%); opacity: 0.35; }
	50%      { transform: translateX(30%);  opacity: 0.95; }
}
@keyframes pp-gr-breathe {
	0%, 100% { opacity: 0.35; transform: scale(1); }
	50%      { opacity: 0.7;  transform: scale(1.06); }
}

/* --- Mécanique D : flash électrique ----------------------------------- */
.pp-gen-anim--gr-orage .pp-btn--gen-fx,
.pp-gen-anim--gr-foudroie .pp-btn--gen-fx,
.pp-gen-anim--gr-chrome .pp-btn--gen-fx,
.pp-gen-anim--gr-or-liquide .pp-btn--gen-fx,
.pp-gen-anim--gr-zenith .pp-btn--gen-fx {
	background: linear-gradient(110deg, var(--ga-3) 0%, var(--ga-2) 30%, var(--ga-1) 46%, var(--ga-2) 62%, var(--ga-3) 100%) !important;
	background-size: 250% 100% !important;
	color: #2b1a00;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
	box-shadow: 0 0 22px var(--ga-2);
	animation: pp-gr-slide 2.4s linear infinite;
}
.pp-gen-anim--gr-orage .pp-btn--gen-fx,
.pp-gen-anim--gr-foudroie .pp-btn--gen-fx { color: #fdfdcf; text-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }

.pp-gen-anim--gr-orage::before,
.pp-gen-anim--gr-foudroie::before,
.pp-gen-anim--gr-chrome::before,
.pp-gen-anim--gr-or-liquide::before,
.pp-gen-anim--gr-zenith::before {
	opacity: 1;
	inset: 4px;
	background:
		linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, 0.95) 49%, transparent 53%),
		linear-gradient(72deg, transparent 58%, var(--ga-1) 63%, transparent 67%);
	mix-blend-mode: screen;
	animation: pp-gr-flash 2.4s steps(1) infinite;
}
.pp-gen-anim--gr-orage::after,
.pp-gen-anim--gr-foudroie::after,
.pp-gen-anim--gr-chrome::after,
.pp-gen-anim--gr-or-liquide::after,
.pp-gen-anim--gr-zenith::after {
	opacity: 1;
	inset: -4px;
	background: radial-gradient(circle, var(--ga-1), transparent 70%);
	animation: pp-gr-burst 2.4s steps(1) infinite;
}
@keyframes pp-gr-slide { to { background-position: -250% 0; } }
@keyframes pp-gr-flash {
	0%, 47%, 100% { opacity: 0; }
	49%           { opacity: 1; }
	51%           { opacity: 0.2; }
	52%           { opacity: 0.9; }
	55%           { opacity: 0; }
}
@keyframes pp-gr-burst {
	0%, 47%, 100% { opacity: 0; }
	50%           { opacity: 0.85; }
}

/* --- Mécanique E : halo doux qui dérive -------------------------------- */
.pp-gen-anim--gr-mirage .pp-btn--gen-fx,
.pp-gen-anim--gr-sakura .pp-btn--gen-fx,
.pp-gen-anim--gr-crepuscule .pp-btn--gen-fx,
.pp-gen-anim--gr-emeraude .pp-btn--gen-fx,
.pp-gen-anim--gr-ombre .pp-btn--gen-fx {
	background: linear-gradient(135deg, var(--ga-1), var(--ga-2) 55%, var(--ga-3)) !important;
	background-size: 200% 200% !important;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	box-shadow: 0 0 20px var(--ga-2);
	animation: pp-gr-drift 5s ease-in-out infinite;
}
.pp-gen-anim--gr-mirage .pp-btn--gen-fx,
.pp-gen-anim--gr-sakura .pp-btn--gen-fx { color: #4a2330; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55); }

.pp-gen-anim--gr-mirage::before,
.pp-gen-anim--gr-sakura::before,
.pp-gen-anim--gr-crepuscule::before,
.pp-gen-anim--gr-emeraude::before,
.pp-gen-anim--gr-ombre::before {
	opacity: 1;
	inset: -5px;
	background: radial-gradient(circle at 30% 40%, var(--ga-1), transparent 60%),
		radial-gradient(circle at 70% 60%, var(--ga-2), transparent 60%);
	filter: blur(8px);
	animation: pp-gr-drift 4.2s ease-in-out infinite;
}
.pp-gen-anim--gr-mirage::after,
.pp-gen-anim--gr-sakura::after,
.pp-gen-anim--gr-crepuscule::after,
.pp-gen-anim--gr-emeraude::after,
.pp-gen-anim--gr-ombre::after {
	opacity: 1;
	inset: 3px;
	background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
	mix-blend-mode: screen;
	animation: pp-gr-sheen 3.6s ease-in-out infinite;
}
@keyframes pp-gr-drift {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.pp-gb,
	.pp-gb::before,
	.pp-gb::after,
	[class*='pp-gen-anim--gr-'] .pp-btn--gen-fx,
	[class*='pp-gen-anim--gr-']::before,
	[class*='pp-gen-anim--gr-']::after {
		animation: none !important;
	}
}