:root {
	--mouse-x: 0;
	--mouse-y: 0;

	--border-glow-size: 50vw;
	--border-glow-width: 2px;
	--border-glow-opacity: 0.05;
	--border-glow-mask-opacity: 0.3;
	--border-glow-gradient: radial-gradient(circle at calc(var(--mouse-x, 0)*1px) calc(var(--mouse-y, 0)*1px), hsl(0 0% 100% / var(--border-glow-opacity)) 0%, transparent var(--border-glow-size));
	--border-glow-mask: linear-gradient(#000, #000), linear-gradient(#000 0 0) content-box;
	--border-glow-mask-2: linear-gradient(#000, #000), linear-gradient(hsl(0 0% 100% / var(--border-glow-mask-opacity)) 0 0) content-box;

	--base-color: #fff;

	--background: #1a212c;
	--background-alpha: #1a212c50;
	--background-footer: #10161F;

	--wallpaper-color-1: #66577B;
	--wallpaper-color-2: #403447;

	--color: #1579FD;
	--color--light: #79D7FF;
	--color--dark: #0D5C9E;

	--color--info: #2e93ff;
	--color--success: #65FF74;
	--color--warning: #ffab61;
	--color--error: #FF6565;

	--gradient-1-color-1: #24ADFB;
	--gradient-1-color-2: #F261FF;
	--gradient-1: linear-gradient(169deg, var(--gradient-1-color-1), var(--gradient-1-color-2));

	--gradient-2-color-1: #65FF74;
	--gradient-2-color-2: #CEE961;
	--gradient-2-color-3: #FAE058;
	--gradient-2: linear-gradient(160deg, var(--gradient-2-color-1), var(--gradient-2-color-2) 62.5%, var(--gradient-2-color-3));

	--gradient-3-color-1: #6574FF;
	--gradient-3-color-2: #F658FA;
	--gradient-3: linear-gradient(142deg, var(--gradient-3-color-1), var(--gradient-3-color-2));

	/* Components */
	--card-background: #272e37;

	--input-color: #fff;
	--input-background: #1a212c;

	--avatar-background: #10161F;

	--loading-background: #10161F;

	--menu-background: #10161F;
	
	--focus-ring-color: hsl(288 91% 57%);
  --focus-ring-glow: drop-shadow(0 0 12px hsl(288 91% 57% / 50%)) drop-shadow(0 0 8px hsl(288 91% 57% /32%));
}

* {
	box-sizing: border-box;
}

@font-face {
	font-family: 'Satoshi';
	src: url('../font/satoshi/Satoshi-Variable.ttf') format('truetype-variations');
}

@font-face {
	font-family: 'Inter';
	src: url('../font/inter/Inter-VariableFont_slnt\,wght.ttf') format('truetype-variations');
}

@property --whiteness {
	syntax: '<percentage>';
	initial-value: 0%;
	inherits: false;
}

body {
  margin: 0;
  font-family: 'Satoshi', sans-serif;
	background: var(--background);
	color: var(--base-color);
	overscroll-behavior: none;

	& a {
		color: var(--color);
		text-decoration: none;
	}

	& .menu-wrapper {
		display: contents;

		& .menu {
		}
	}

	& .badge-wrapper {
		position: relative;
		display: inline-flex;
	
		& .badge {
			--_offset: 7px;

			position: absolute;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			width: 24px;
			height: 24px;
			background-color: var(--color);
			color: #fff;
			font-size: 12px;
			font-weight: 600;
			line-height: 1;
			text-align: center;
			white-space: nowrap;
			vertical-align: middle;
			transition: 200ms ease-in-out;

			&.top-left {
				top: calc(0% - var(--_offset));
				left: calc(0% - var(--_offset));
			}

			&.top-right {
				top: calc(0% - var(--_offset));
				right: calc(0% - var(--_offset));
			}

			&.bottom-left {
				bottom: calc(0% - var(--_offset));
				left: calc(0% - var(--_offset));
			}

			&.bottom-right {
				bottom: calc(0% - var(--_offset));
				right: calc(0% - var(--_offset));
			}

			&.bottom {
				bottom: calc(0% - var(--_offset));
				left: 50%;
				transform: translateX(-50%);
			}

			&.top {
				top: calc(0% - var(--_offset));
				left: 50%;
				transform: translateX(-50%);
			}

			&.left {
				top: 50%;
				left: calc(0% - var(--_offset));
				transform: translateY(-50%);
			}

			&.right {
				top: 50%;
				right: calc(0% - var(--_offset));
				transform: translateY(-50%);
			}

			&.center {
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	:is(h1, h2, h3, h4, h5, h6) {
		margin: 0;
	}

	.text-gradient-1 {
		background: var(--gradient-1);
						background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		padding: 2px;
	}

	.text-gradient-2 {
		background: var(--gradient-2);
						background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		padding: 2px;
	}

	.text-gradient-3 {
		background: var(--gradient-3);
						background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		padding: 2px;
	}

	.border-mask {
		position: relative;

		&::before, &::after {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;		
			border-radius: inherit;
			background: var(--border-glow-gradient);
			background-attachment: fixed;
			padding: var(--border-glow-width);

			-webkit-mask: var(--border-glow-mask);
							mask: var(--border-glow-mask);
			-webkit-mask-attachment: fixed;
							mask-attachment: fixed;
			-webkit-mask-composite: source-out;
							mask-composite: subtract;
		}

		&::after {
			-webkit-mask: var(--border-glow-mask-2);
			mask: var(--border-glow-mask-2);

			opacity: 0;
			transition: 200ms ease-in-out;
		}

		&:hover::after {
			opacity: 0.5;
		}
	}

	&.mouse-active {

		.cast-shadow {
			--_top: 0;
			--_left: 0;
			--_width: 0;
			--_height: 0;

			--_h: 0;
			--_s: 0%;
			--_l: 0%;
			--_intensity: .3;

			--_center-x: calc(var(--_left) + (var(--_width) / 2));
			--_center-y: calc(var(--_top) + (var(--_height) / 2));
			--_mouse-distance-x: calc(var(--mouse-x) - var(--_center-x));
			--_mouse-distance-y: calc(var(--mouse-y) - var(--_center-y));

			--_shadow-x: calc(var(--_mouse-distance-x) * -0.1);
			--_shadow-y: calc(var(--_mouse-distance-y) * -0.1);

			--_distance: calc(var(--_mouse-distance-x) * var(--_mouse-distance-x) + var(--_mouse-distance-y) * var(--_mouse-distance-y));

			--_blur: calc(var(--_distance) * 0.00005);

			--_shadow-opacity: calc(1 - (var(--_distance) * 0.000001));

			--_shadow-color: hsla(var(--_h), var(--_s), var(--_l), calc(var(--_intensity) * var(--_shadow-opacity)));

			--shadow:
				calc(var(--_shadow-x)*1px)
				calc(var(--_shadow-y)*1px)
				max(20px, min(50px, calc(var(--_blur)*1px)))
				var(--_shadow-color)
			;

			/* apply shadow */
			filter: drop-shadow(var(--shadow));
			position: relative;
		}

		.cast-glow {
			--_color: white;
			--_size: 30vw;
			--_intensity: 0.1;

			--_hsl: hsl(from var(--_color) h s l / var(--_intensity));

			--_gradient: radial-gradient(circle at calc(var(--mouse-x, 0)*1px) calc(var(--mouse-y, 0)*1px), var(--_hsl), transparent var(--_size));

			isolation: isolate;

			& > * {
				position: relative;
				z-index: 1;
			}

			&::after {
				content: "";
				position: absolute;
				inset: 0;
				z-index: 1;
				pointer-events: none;		
				border-radius: inherit;
				background: var(--_gradient);
				background-attachment: fixed;
			}
		}
	}
}

/* tippy styles */
.tippy-box {
	padding: 0;
	overflow: hidden;

	& .tippy-content:has(.menu) {
		padding: 0;

		& button {
			background: none;
			border: none;
			color: #fff;
			padding: 16px 24px;
			height: auto;
			border-radius: 0;
			min-width: 300px;
			max-width: 400px;
			backdrop-filter: none;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 16px;
		}
	}
}

pre:has(.hljs) {
	width: 100%;
	padding: 16px;
	border-radius: 8px;
	overflow: auto;
	
	& .hljs {
		font-family: 'Fira Code', monospace;
		font-size: 14px;
	}
}

@keyframes shadow {
	from {
		box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
	}
	to {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

@keyframes slide-to-top {
	from {
		transform: translateY(-60px);
	}
}

@keyframes slide-to-bottom {
	to {
		transform: translateY(-60px);
	}
}

@keyframes rotate {
	0% {
		--from: 180deg;
	}
	100% {
		--from: 540deg;
	}
}

@keyframes button-loader {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -500% 0;
	}
}

:root::view-transition-old(root) {
	animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-bottom;
}

:root::view-transition-new(root) {
	animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-top;
}