/* Common animations */
@keyframes theme-fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes theme-rotate360 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Header styles */
.widget > .card-header.bg-custom-reflection {
	background: linear-gradient(140deg, transparent 0, rgba(var(--bs-body-bg-rgb), .5) 70%, transparent 75%, rgba(var(--bs-body-bg-rgb), .5) 100%);
}

.widget > .card-header.bg-custom-neon {
	position: relative;
}
.widget > .card-header.bg-custom-neon:before {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: saturate(200%);
	backdrop-filter: saturate(200%);
}

.widget > .card-header.bg-custom-bevel {
	position: relative;
	background: linear-gradient(40deg, transparent 0, transparent 59.8%, rgba(var(--bs-dark-rgb), .25) 60%, rgba(var(--bs-dark-rgb), .05) 100%);
}
.widget > .card-header.bg-custom-bevel:before {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: saturate(200%);
	backdrop-filter: saturate(200%);
	background: linear-gradient(175deg, transparent 0, rgba(var(--bs-dark-rgb), .2) 55%, transparent 56%, transparent 100%);
}

.widget > .card-header.bg-custom-two-tone {
	position: relative;
	background: linear-gradient(90deg, transparent 0, rgba(var(--widget-color-rgb), var(--bs-bg-opacity)) 100%);
	background-color: transparent !important;
}
.widget > .card-header.bg-custom-two-tone:before {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: hue-rotate(45deg);
	backdrop-filter: hue-rotate(45deg);
	background: linear-gradient(90deg, rgba(var(--widget-color-rgb), var(--bs-bg-opacity)) 0, transparent 100%);
}

/* Random picture */
.background-random-picture:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(https://picsum.photos/3840/2160);
	background-attachment: fixed;
	background-size: cover;
	z-index: -1;
	animation: 2s ease-in-out 3s 1 both theme-fadeIn;
}

/* Waves */
/* From https://codepen.io/baarbaracrr/pen/KKovmGb */
.background-waves:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(315deg, var(--bs-purple) 3%, var(--bs-blue) 38%, var(--bs-cyan) 68%, var(--bs-red) 98%);
	background-size: 400% 400%;
	animation: theme-background-waves-gradient 15s ease-in-out infinite alternate;
	background-attachment: fixed;
	z-index: -1;
}

@keyframes theme-background-waves-gradient {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 100%;
	}
}

.background-waves > b:nth-last-of-type(-n+3):before {
	content: "";
	background: rgb(var(--bs-light-rgb), 25%);
	border-radius: 100% 100% 0 0;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	width: 200%;
	height: 15%;
	animation: theme-background-waves 10s -3s linear infinite;
	opacity: .8;
	z-index: -1;
}

.background-waves > b:nth-last-of-type(3):before {
	bottom: -1.25em;
	animation: theme-background-waves 18s linear reverse infinite;
	opacity: .8;
}

.background-waves > b:nth-last-of-type(2):before {
	bottom: -2.5em;
	animation: theme-background-waves 20s -1s reverse infinite;
	opacity: .9;
}

@keyframes theme-background-waves {
	2% {
		transform: translateX(1);
	}
	25% {
		transform: translateX(-25%);
	}
	50% {
		transform: translateX(-50%);
	}
	75% {
		transform: translateX(-25%);
	}
	100% {
		transform: translateX(1);
	}
}

/* Glow */
/* From https://codepen.io/Jeromche/pen/KKQrGgP */
.background-glow:before,
.background-glow:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.background-glow:before {
	background-color: var(--bs-body-bg);
}

.background-glow:after {
	aspect-ratio: 1;
	width:  75vmin;
	margin: auto;
	filter: blur(10vmin);
	background: linear-gradient(var(--bs-teal), var(--bs-purple));
	animation: theme-rotate360 30s cubic-bezier(.8, .2, .2, .8) alternate infinite;
	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Bubbles */
/* From https://codepen.io/mohaiman/pen/MQqMyo */
.background-bubbles:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
}

.background-bubbles > b {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: -1;
}

.background-bubbles > b:before,
.background-bubbles > b:after {
	content: "";
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	background: rgba(255, 255, 255, .2);
	animation: theme-background-bubbles 25s linear infinite;
	bottom: -150px;
	z-index: -1;
}

.background-bubbles > b:nth-last-of-type(1):before {
	left: 25%;
	width: 80px;
	height: 80px;
	animation-delay: 0;
}

.background-bubbles > b:nth-last-of-type(1):after {
	left: 10%;
	animation-delay: 2s;
	animation-duration: 12s;
}

.background-bubbles > b:nth-last-of-type(2):before {
	left: 70%;
	animation-delay: 4s;
}

.background-bubbles > b:nth-last-of-type(2):after {
	left: 40%;
	width: 60px;
	height: 60px;
	animation-delay: 0;
	animation-duration: 18s;
}

.background-bubbles > b:nth-last-of-type(3):before {
	left: 65%;
	animation-delay: 0;
}

.background-bubbles > b:nth-last-of-type(3):after {
	left: 75%;
	width: 110px;
	height: 110px;
	animation-delay: 3s;
}

.background-bubbles > b:nth-last-of-type(4):before {
	left: 35%;
	width: 150px;
	height: 150px;
	animation-delay: 7s;
}

.background-bubbles > b:nth-last-of-type(4):after {
	left: 50%;
	width: 25px;
	height: 25px;
	animation-delay: 15s;
	animation-duration: 45s;
}

.background-bubbles > b:nth-last-of-type(5):before {
	left: 20%;
	width: 15px;
	height: 15px;
	animation-delay: 2s;
	animation-duration: 35s;
}

.background-bubbles > b:nth-last-of-type(5):after {
	left: 85%;
	width: 150px;
	height: 150px;
	animation-delay: 0s;
	animation-duration: 11s;
}

@keyframes theme-background-bubbles {
	0%{
		transform: translateY(0) rotate(0deg);
		opacity: 1;
		border-radius: 0;
	}

	100%{
		transform: translateY(-1000px) rotate(720deg);
		opacity: 0;
		border-radius: 50%;
	}
}

/* Moving lines */
/* Inspired by https://codepen.io/Sepion/pen/ZQJyeq */
.background-moving-lines > b,
.background-moving-lines > b:before,
.background-moving-lines > b:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;

	background-size: 100vh 100vh; /* size based on height... */
	background-position: var(--offset), var(--offset), var(--offset); /* ...in order to be able to play on the horizontal position */
}

.background-moving-lines > b { /* first moving line and associated red line */
	--size: 15%;
	background-image:
	repeating-linear-gradient(45deg, var(--bs-red) 0 calc(var(--size)), transparent 0 50%),
	repeating-linear-gradient(45deg, var(--bs-body-bg) 0 25%, transparent 25% calc(var(--size) + 25%), var(--bs-body-bg) 0 50%),
	repeating-linear-gradient(45deg, transparent 0 25%, var(--bs-blue) 25% calc(var(--size) + 25% + 20px), transparent 0 50%); /* 25% is the difference in position relative to the red bar. 20px is added to give a better impression of mouvement */
	-webkit-mask-image:
	linear-gradient(-45deg, transparent calc(var(--position) + 10% - 16px), black calc(var(--position) + 10% - 16px) calc(var(--position) + 10%), transparent calc(var(--position) + 10%)),
	linear-gradient(-45deg, transparent calc(var(--position) + 5% - 16px), black calc(var(--position) + 5% - 16px) calc(var(--position) + 5%), transparent calc(var(--position) + 5%)),
	linear-gradient(-45deg, transparent calc(var(--position) - 16px), black calc(var(--position) - 16px) var(--position), transparent var(--position));
	mask-image:
	linear-gradient(-45deg, transparent calc(var(--position) + 10% - 16px), black calc(var(--position) + 10% - 16px) calc(var(--position) + 10%), transparent calc(var(--position) + 10%)),
	linear-gradient(-45deg, transparent calc(var(--position) + 5% - 16px), black calc(var(--position) + 5% - 16px) calc(var(--position) + 5%), transparent calc(var(--position) + 5%)),
	linear-gradient(-45deg, transparent calc(var(--position) - 16px), black calc(var(--position) - 16px) var(--position), transparent var(--position));
	animation: 4s ease-in-out infinite theme-background-moving-lines, 2s ease-in-out infinite theme-background-moving-lines-glow;
}

.background-moving-lines > b:before { /* second moving line (the other way) and associated red line */
	--size: 15%;
	background-image:
	repeating-linear-gradient(45deg, transparent 0 10%, var(--bs-red) 10% calc(var(--size) + 10%), transparent 0 50%),
	repeating-linear-gradient(45deg, var(--bs-body-bg) 0 35%, transparent 35% calc(var(--size) + 35%), var(--bs-body-bg) 0 50%),
	repeating-linear-gradient(45deg, var(--bs-body-bg) 0 calc(35% - 20px), var(--bs-blue) calc(35% - 20px) calc(var(--size) + 35%), var(--bs-body-bg) 0 50%);
	-webkit-mask-image:
	linear-gradient(-45deg, transparent calc(var(--position) - 16px), black calc(var(--position) - 16px) var(--position), transparent var(--position));
	mask-image:
	linear-gradient(-45deg, transparent calc(var(--position) - 16px), black calc(var(--position) - 16px) var(--position), transparent var(--position));
	animation: 4s ease-in-out infinite theme-background-moving-lines reverse;
}

.background-moving-lines > b:after { /* long blue line */
	--size: 30%;
	background-image:
	repeating-linear-gradient(45deg, var(--bs-blue) 0 var(--size), var(--bs-body-bg) 0 50%);
	background-position: calc(var(--offset) - 10%);
	-webkit-mask-image:
	linear-gradient(-45deg, transparent calc(var(--position) + 5% - 16px), black calc(var(--position) + 5% - 16px) calc(var(--position) + 5%), transparent calc(var(--position) + 5%));
	mask-image:
	linear-gradient(-45deg, transparent calc(var(--position) + 5% - 16px), black calc(var(--position) + 5% - 16px) calc(var(--position) + 5%), transparent calc(var(--position) + 5%));
}

.background-moving-lines > b:nth-last-of-type(1) {
	--offset: 0%;
	--position: 85%;
}

.background-moving-lines > b:nth-last-of-type(2) {
	--offset: 25%;
	--position: 65%;
}

.background-moving-lines > b:nth-last-of-type(3) {
	--offset: 50%;
	--position: 45%;
}

.background-moving-lines > b:nth-last-of-type(4) {
	--offset: 75%;
	--position: 25%;
}

.background-moving-lines > b:nth-last-of-type(5) {
	--offset: 100%;
	--position: 5%;
}

@keyframes theme-background-moving-lines {
	0%, 10% {
		background-position: var(--offset), var(--offset), var(--offset);
	}
	90%, 100% {
		background-position: var(--offset), calc(var(--offset) + 200vh), var(--offset);
	}
}

@keyframes theme-background-moving-lines-glow {
	0% {
		opacity: .1;
	}
	50% {
		opacity: .2;
	}
	100% {
		opacity: .1;
	}
}

/* Dots */
/* From https://codepen.io/thebabydino/pen/dyoPdqj */
.background-dots > b:nth-last-of-type(1),
.background-dots > b:nth-last-of-type(1):before,
.background-dots > b:nth-last-of-type(2) {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.background-dots > b:nth-last-of-type(2) {
	background-color: var(--bs-primary-bg-subtle);
}

.background-dots > b:nth-last-of-type(1) {
	background-color: var(--bs-body-bg);
	filter: contrast(7);
	mix-blend-mode: soft-light;
}

.background-dots > b:nth-last-of-type(1):before {
	background: radial-gradient(var(--bs-emphasis-color), transparent) 0 0/1em 1em space;
	--mask: linear-gradient(rgba(var(--bs-emphasis-color-rgb), .1), red);
	-webkit-mask: var(--mask);
	mask: var(--mask);
}

/* Stripes */
.background-stripes:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient(45deg, transparent 0, transparent 2px, var(--bs-emphasis-color) 3px, transparent 5px);
	--mask: linear-gradient(rgba(var(--bs-emphasis-color-rgb), .15), transparent 75%);
	-webkit-mask: var(--mask);
	mask: var(--mask);
}