:root {
	/* VARIABLES DE CONFIGURATION - Modifiez ces valeurs pour personnaliser l'effet */

	/* Couleurs principales */
	--color1: #6c63ff; /* Couleur primaire (indigo) */
	--color2: #c13584; /* Couleur secondaire (violette) */

	/* Ombres et luminosité */
	--shadow-strength-normal: 5px; /* Force de l'ombre normale */
	--shadow-strength-hover: 20px; /* Force de l'ombre au survol */
	--glow-size: 13px; /* Taille de la lueur au survol */
	--glow-opacity: 0.3; /* Opacité de la lueur (0-1) */
	--drop-shadow-size: 35px; /* Taille de l'ombre portée */
	--drop-shadow-opacity: 0.5; /* Opacité de l'ombre portée (0-1) */

	/* Gradient de l'effet holographique */
	--gradient-size-normal: 300%; /* Taille du gradient normal */
	--gradient-size-hover: 250%; /* Taille du gradient au survol */
	--gradient-opacity-normal: 0.5; /* Opacité du gradient normal */
	--gradient-opacity-hover: 0.88; /* Opacité du gradient au survol */
	--gradient-brightness-normal: 0.5; /* Luminosité du gradient normal */
	--gradient-brightness-hover: 0.66; /* Luminosité du gradient au survol */
	--gradient-contrast-normal: 1; /* Contraste du gradient normal */
	--gradient-contrast-hover: 1.33; /* Contraste du gradient au survol */

	/* Effets étincelants */
	--sparkle-size: 160%; /* Taille des étincelles */
	--sparkle-opacity-normal: 0.75; /* Opacité normale des étincelles */
	--sparkle-opacity-hover: 1; /* Opacité des étincelles au survol */

	/* Animation */
	--animation-duration: 12s; /* Durée de l'animation en secondes */
	--transition-speed: 0.33s; /* Vitesse de transition en secondes */

	/* Variables pour l'animation des rotations */
	--rotate-x-1: 2deg; /* Rotation X à 5-8% de l'animation */
	--rotate-y-1: -6.67deg; /* Rotation Y à 5-8% de l'animation */

	--rotate-x-2: -3deg; /* Rotation X à 13-16% de l'animation */
	--rotate-y-2: 10.67deg; /* Rotation Y à 13-16% de l'animation */

	--rotate-z-3: 1deg; /* Rotation Z à 35-38% de l'animation */
	--rotate-x-3: 4deg; /* Rotation X à 35-38% de l'animation */
	--rotate-y-3: 6.67deg; /* Rotation Y à 35-38% de l'animation */

	--rotate-z-4: -1deg; /* Rotation Z à 55% de l'animation */
	--rotate-x-4: -4deg; /* Rotation X à 55% de l'animation */
	--rotate-y-4: -9deg; /* Rotation Y à 55% de l'animation */
}

.holo-card {
	position: relative;
	overflow: hidden;
	z-index: 10;
	touch-action: none;

	box-shadow: calc(-1 * var(--shadow-strength-normal)) calc(-1 * var(--shadow-strength-normal)) var(--shadow-strength-normal) calc(-1 * var(--shadow-strength-normal)) var(--color1), var(--shadow-strength-normal) var(--shadow-strength-normal) var(--shadow-strength-normal) calc(-1 * var(--shadow-strength-normal)) var(--color2), -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 var(--drop-shadow-size) calc(var(--drop-shadow-size) - 20px) -20px rgba(0, 0, 0, var(--drop-shadow-opacity));

	transition: transform 0.5s ease, box-shadow 0.2s ease;
	will-change: transform, filter;

	transform-origin: center;
}

.holo-card:hover,
.holo-card.active {
	box-shadow: calc(-1 * var(--shadow-strength-hover)) calc(-1 * var(--shadow-strength-hover)) calc(var(--shadow-strength-hover) + 10px) calc(-1 * var(--shadow-strength-hover) - 5px) var(--color1), var(--shadow-strength-hover) var(--shadow-strength-hover) calc(var(--shadow-strength-hover) + 10px) calc(-1 * var(--shadow-strength-hover) - 5px) var(--color2), -7px -7px 10px -5px var(--color1), 7px 7px 10px -5px var(--color2), 0 0 var(--glow-size) 4px rgba(255, 255, 255, var(--glow-opacity)), 0 var(--drop-shadow-size) calc(var(--drop-shadow-size) - 20px) -20px rgba(0, 0, 0, var(--drop-shadow-opacity));
}

.holo-card:before,
.holo-card:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-repeat: no-repeat;
	opacity: 0.5;
	mix-blend-mode: color-dodge;
	transition: all var(--transition-speed) ease;
}

.holo-card:before {
	background-position: 50% 50%;
	background-size: var(--gradient-size-normal) var(--gradient-size-normal);
	background-image: linear-gradient(115deg, transparent 0%, var(--color1) 25%, transparent 47%, transparent 53%, var(--color2) 75%, transparent 100%);
	opacity: var(--gradient-opacity-normal);
	filter: brightness(var(--gradient-brightness-normal)) contrast(var(--gradient-contrast-normal));
	z-index: 1;
}

.holo-card:after {
	opacity: 1;
	background-image: url("https://assets.codepen.io/13471/sparkles.gif"), url(https://assets.codepen.io/13471/holo.png), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
	background-position: 50% 50%;
	background-size: var(--sparkle-size);
	background-blend-mode: overlay;
	z-index: 2;
	filter: brightness(1) contrast(1);
	transition: all var(--transition-speed) ease;
	mix-blend-mode: color-dodge;
	opacity: var(--sparkle-opacity-normal);
}

.holo-card.active:after,
.holo-card:hover:after {
	filter: brightness(1) contrast(1);
	opacity: var(--sparkle-opacity-hover);
}

.holo-card.active,
.holo-card:hover {
	animation: none;
	transition: box-shadow 0.1s ease-out;
}

.holo-card.active:before,
.holo-card:hover:before {
	animation: none;
	background-image: linear-gradient(110deg, transparent 25%, var(--color1) 48%, var(--color2) 52%, transparent 75%);
	background-position: 50% 50%;
	background-size: var(--gradient-size-hover) var(--gradient-size-hover);
	opacity: var(--gradient-opacity-hover);
	filter: brightness(var(--gradient-brightness-hover)) contrast(var(--gradient-contrast-hover));
	transition: none;
}

.holo-card.active:before,
.holo-card:hover:before,
.holo-card.active:after,
.holo-card:hover:after {
	animation: none;
	transition: none;
}

.holo-card.animated {
	transition: none;
	animation: holoCard var(--animation-duration) ease 0s 1;
}
.holo-card.animated:before {
	transition: none;
	animation: holoGradient var(--animation-duration) ease 0s 1;
}
.holo-card.animated:after {
	transition: none;
	animation: holoSparkle var(--animation-duration) ease 0s 1;
}

@keyframes holoSparkle {
	0%,
	100% {
		opacity: var(--sparkle-opacity-normal);
		background-position: 50% 50%;
		filter: brightness(1.2) contrast(1.25);
	}
	5%,
	8% {
		opacity: var(--sparkle-opacity-hover);
		background-position: 40% 40%;
		filter: brightness(0.8) contrast(1.2);
	}
	13%,
	16% {
		opacity: 0.5;
		background-position: 50% 50%;
		filter: brightness(1.2) contrast(0.8);
	}
	35%,
	38% {
		opacity: var(--sparkle-opacity-hover);
		background-position: 60% 60%;
		filter: brightness(1) contrast(1);
	}
	55% {
		opacity: 0.33;
		background-position: 45% 45%;
		filter: brightness(1.2) contrast(1.25);
	}
}

@keyframes holoGradient {
	0%,
	100% {
		opacity: var(--gradient-opacity-normal);
		background-position: 50% 50%;
		filter: brightness(var(--gradient-brightness-normal)) contrast(var(--gradient-contrast-normal));
	}
	5%,
	9% {
		background-position: 100% 100%;
		opacity: var(--gradient-opacity-hover);
		filter: brightness(0.75) contrast(1.25);
	}
	13%,
	17% {
		background-position: 0% 0%;
		opacity: var(--gradient-opacity-hover);
	}
	35%,
	39% {
		background-position: 100% 100%;
		opacity: var(--gradient-opacity-hover);
		filter: brightness(var(--gradient-brightness-normal)) contrast(var(--gradient-contrast-normal));
	}
	55% {
		background-position: 0% 0%;
		opacity: var(--gradient-opacity-hover);
		filter: brightness(0.75) contrast(1.25);
	}
}

@keyframes holoCard {
	0%,
	100% {
		transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
	}
	5%,
	8% {
		transform: rotateZ(0deg) rotateX(var(--rotate-x-1)) rotateY(var(--rotate-y-1));
	}
	13%,
	16% {
		transform: rotateZ(0deg) rotateX(var(--rotate-x-2)) rotateY(var(--rotate-y-2));
	}
	35%,
	38% {
		transform: rotateZ(var(--rotate-z-3)) rotateX(var(--rotate-x-3)) rotateY(var(--rotate-y-3));
	}
	55% {
		transform: rotateZ(var(--rotate-z-4)) rotateX(var(--rotate-x-4)) rotateY(var(--rotate-y-4));
	}
}