:root {
	--border-blue-1: #003399;
	--border-blue-2: #0057b7;
	--border-cyan: #2d9cdb;
	--border-yellow: #ffd700;
	--border-eu: #ffcc00;
	--border-dark: #001b44;
	--border-blue-1-rgb: 0, 51, 153;
	--border-blue-2-rgb: 0, 87, 183;
	--border-cyan-rgb: 45, 156, 219;
	--border-yellow-rgb: 255, 215, 0;
	--border-eu-rgb: 255, 204, 0;
	--border-dark-rgb: 0, 27, 68;
	--border-gradient-ukraine-eu: linear-gradient(135deg, #001b44 0%, #003399 20%, #0057b7 45%, #2d9cdb 60%, #ffd700 82%, #ffcc00 100%);
	--border-gradient-cinematic: radial-gradient(circle at top left, #2d9cdb 0%, #0057b7 25%, #003399 50%, #001b44 70%, #ffd700 88%, #ffcc00 100%);
	--border-gradient-dark-ui: linear-gradient(145deg, #001b44 0%, #002b6d 36%, #003399 58%, #0057b7 76%, #2d9cdb 100%);
	--border-gradient-glass: linear-gradient(135deg, rgba(var(--border-blue-1-rgb), 0.2), rgba(var(--border-cyan-rgb), 0.16) 48%, rgba(var(--border-yellow-rgb), 0.18));
	--border-gradient-metal: linear-gradient(120deg, #001b44 0%, #003399 22%, #2d9cdb 42%, #0057b7 56%, #001b44 72%, #ffd700 90%, #ffcc00 100%);
	--border-gradient-logo-radial:
		radial-gradient(circle at 73% 24%, rgba(var(--border-yellow-rgb), 0.9) 0 9%, rgba(var(--border-eu-rgb), 0.58) 15%, rgba(var(--border-eu-rgb), 0) 29%),
		radial-gradient(circle at 55% 38%, rgba(var(--border-yellow-rgb), 0.48) 0 7%, rgba(var(--border-eu-rgb), 0.28) 14%, rgba(var(--border-eu-rgb), 0) 27%),
		radial-gradient(circle at 62% 42%, rgba(var(--border-cyan-rgb), 0.96) 0 13%, rgba(var(--border-cyan-rgb), 0) 36%),
		radial-gradient(circle at 48% 62%, rgba(var(--border-blue-2-rgb), 1) 0 22%, rgba(var(--border-blue-2-rgb), 0) 48%),
		radial-gradient(circle at 22% 86%, rgba(var(--border-blue-1-rgb), 1) 0 24%, rgba(var(--border-dark-rgb), 0.9) 42%, rgba(var(--border-dark-rgb), 0) 62%),
		linear-gradient(135deg, var(--border-dark) 0%, var(--border-blue-1) 38%, var(--border-blue-2) 62%, var(--border-cyan) 78%, var(--border-eu) 100%);
	--border-gradient-duration-slow: 12s;
	--border-gradient-duration-medium: 16s;
	--border-gradient-duration-fast: 7s;
	--border-gradient-ease: cubic-bezier(0.65, 0, 0.35, 1);
	--border-gradient-noise-opacity: 0.12;
}

.border-gradient-surface,
.border-gradient-logo,
.border-gradient-text,
.border-gradient-text-animated,
.border-gradient-button,
.border-gradient-loader {
	--border-gradient-active: var(--border-gradient-ukraine-eu);
}

.border-gradient-ukraine-eu {
	--border-gradient-active: var(--border-gradient-ukraine-eu);
}

.border-gradient-cinematic {
	--border-gradient-active: var(--border-gradient-cinematic);
}

.border-gradient-dark {
	--border-gradient-active: var(--border-gradient-dark-ui);
}

.border-gradient-liquid {
	--border-gradient-active: var(--border-gradient-metal);
}

.border-gradient-radial-logo {
	--border-gradient-active: var(--border-gradient-logo-radial);
	background-blend-mode: screen, screen, normal, normal, normal, normal;
	background-position: 50% 50%;
	background-size: 100% 100%;
	animation: border-gradient-radial-breathe 5.6s ease-in-out infinite;
	will-change: filter;
}

.border-gradient-radial-logo.border-logo-mark {
	background-position: 50% 50%;
	background-size: 100% 100%;
}

.border-gradient-surface {
	background-image: var(--border-gradient-active);
	background-position: 0% 50%;
	background-size: 220% 220%;
	color: #fff;
	position: relative;
}

.border-gradient-dark-ui {
	background:
		radial-gradient(circle at 15% 0%, rgba(var(--border-cyan-rgb), 0.2), transparent 28%),
		radial-gradient(circle at 88% 100%, rgba(var(--border-yellow-rgb), 0.16), transparent 24%),
		var(--border-gradient-dark-ui);
	color: #fff;
}

.border-gradient-text,
.border-gradient-text-animated,
.border-gradient-logo {
	background-image: var(--border-gradient-active);
	background-position: 0% 50%;
	background-size: 240% 240%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.border-gradient-logo {
	display: inline-block;
	font-weight: 800;
	letter-spacing: 0;
}

.border-gradient-button {
	align-items: center;
	background-image: var(--border-gradient-active);
	background-position: 0% 50%;
	background-size: 220% 220%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	box-shadow: 0 14px 34px rgba(var(--border-dark-rgb), 0.18);
	color: #fff;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	min-height: 48px;
	padding: 14px 22px;
	text-decoration: none;
}

.border-gradient-animated {
	background-size: 240% 240%;
	animation: border-gradient-flow var(--border-gradient-duration-slow) ease-in-out infinite;
	will-change: background-position;
}

.border-gradient-text-animated {
	animation: border-gradient-flow var(--border-gradient-duration-slow) ease-in-out infinite;
	will-change: background-position;
}

.border-gradient-liquid.border-gradient-animated {
	animation-duration: var(--border-gradient-duration-medium);
}

.border-gradient-sweep,
.border-gradient-glow,
.border-gradient-grain {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.border-gradient-sweep::after {
	background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.18) 48%, rgba(var(--border-yellow-rgb), 0.16) 54%, rgba(255, 255, 255, 0) 62%, transparent 100%);
	content: "";
	inset: 0;
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translate3d(-120%, 0, 0);
	will-change: transform;
	z-index: 1;
}

.border-gradient-sweep.border-gradient-animated::after,
.border-gradient-hover-sweep:hover::after,
.border-gradient-hover-sweep:focus-visible::after {
	animation: border-gradient-sweep var(--border-gradient-duration-fast) var(--border-gradient-ease) infinite;
}

.border-gradient-glow::before {
	background: radial-gradient(circle at 50% 50%, rgba(var(--border-cyan-rgb), 0.34), rgba(var(--border-blue-2-rgb), 0.18) 34%, rgba(var(--border-yellow-rgb), 0.12) 58%, transparent 72%);
	content: "";
	filter: blur(28px);
	inset: -24%;
	opacity: 0.54;
	pointer-events: none;
	position: absolute;
	transform: translate3d(0, 0, 0);
	z-index: -1;
}

.border-gradient-glow.border-gradient-animated::before {
	animation: border-gradient-glow var(--border-gradient-duration-medium) ease-in-out infinite alternate;
	will-change: transform, opacity;
}

.border-gradient-grain::before {
	background-image:
		radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.16) 0 0.8px, transparent 1px),
		radial-gradient(circle at 72% 48%, rgba(255, 255, 255, 0.12) 0 0.7px, transparent 1px);
	background-size: 4px 4px, 5px 5px;
	content: "";
	inset: 0;
	mix-blend-mode: overlay;
	opacity: var(--border-gradient-noise-opacity);
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.border-gradient-glass {
	background:
		var(--border-gradient-glass),
		linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
	-webkit-backdrop-filter: blur(18px) saturate(1.18);
	backdrop-filter: blur(18px) saturate(1.18);
	border: 1px solid rgba(255, 255, 255, 0.24);
	box-shadow: 0 18px 48px rgba(var(--border-dark-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.border-gradient-loader {
	aspect-ratio: 1;
	background:
		conic-gradient(from 140deg, var(--border-dark), var(--border-blue-1), var(--border-blue-2), var(--border-cyan), var(--border-yellow), var(--border-eu), var(--border-dark));
	border-radius: 999px;
	display: inline-block;
	position: relative;
	width: 42px;
}

.border-gradient-loader::after {
	background: var(--border-bg, #faf6eb);
	border-radius: inherit;
	content: "";
	inset: 5px;
	position: absolute;
}

.border-gradient-loader.border-gradient-animated {
	animation: border-gradient-spin 6s linear infinite;
	will-change: transform;
}

.border-gradient-hover-reactive {
	transition: filter 180ms ease, transform 180ms ease;
}

.border-gradient-hover-reactive:hover,
.border-gradient-hover-reactive:focus-visible {
	filter: saturate(1.08) brightness(1.04);
	transform: translate3d(0, -1px, 0);
}

.border-gradient-svg-fill {
	fill: url("#border-gradient-flow");
}

.border-gradient-svg-stroke {
	fill: none;
	stroke: url("#border-gradient-flow");
	stroke-linecap: round;
	stroke-linejoin: round;
}

@keyframes border-gradient-flow {
	0% {
		background-position: 0% 50%;
	}

	35% {
		background-position: 60% 40%;
	}

	70% {
		background-position: 100% 60%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes border-gradient-radial-breathe {
	0%,
	100% {
		filter: saturate(0.94) brightness(0.94);
	}

	50% {
		filter: saturate(1.22) brightness(1.14);
	}
}

@keyframes border-gradient-sweep {
	0%,
	55% {
		opacity: 0;
		transform: translate3d(-120%, 0, 0);
	}

	65% {
		opacity: 1;
	}

	85% {
		opacity: 0;
		transform: translate3d(120%, 0, 0);
	}

	100% {
		opacity: 0;
		transform: translate3d(120%, 0, 0);
	}
}

@keyframes border-gradient-glow {
	0%,
	100% {
		opacity: 0.22;
		transform: translate3d(-4%, -2%, 0) scale(1);
	}

	50% {
		opacity: 0.34;
		transform: translate3d(4%, 3%, 0) scale(1.08);
	}
}

@keyframes border-gradient-spin {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {
	.border-gradient-animated,
	.border-gradient-text-animated,
	.border-gradient-radial-logo,
	.border-gradient-sweep.border-gradient-animated::after,
	.border-gradient-hover-sweep:hover::after,
	.border-gradient-hover-sweep:focus-visible::after,
	.border-gradient-glow.border-gradient-animated::before,
	.border-gradient-loader.border-gradient-animated {
		animation: none !important;
	}

	.border-gradient-surface,
	.border-gradient-text,
	.border-gradient-text-animated,
	.border-gradient-logo,
	.border-gradient-button {
		background-position: 50% 50%;
	}

	.border-gradient-hover-reactive:hover,
	.border-gradient-hover-reactive:focus-visible {
		transform: none;
	}
}