:root {
	--bfg-ease: cubic-bezier(.22, .61, .36, 1);
}

.bfg-genie {
	--bfg-size: 132px;
	--bfg-bottom: 18px;
	--bfg-offset: 18px;
	position: fixed;
	bottom: max(var(--bfg-bottom), env(safe-area-inset-bottom));
	z-index: 9999;
	width: var(--bfg-size);
	max-width: min(34vw, 170px);
	transform: translate3d(0, 0, 0);
	will-change: transform, opacity;
}

.bfg-genie--right {
	right: max(var(--bfg-offset), env(safe-area-inset-right));
}

.bfg-genie--left {
	left: max(var(--bfg-offset), env(safe-area-inset-left));
}

.bfg-genie__link {
	position: relative;
	display: block;
	text-decoration: none;
	outline: none;
	animation: bfg-idle-bob 4.5s ease-in-out infinite;
	transform-origin: 50% 90%;
}

.bfg-genie__picture {
	display: block;
	width: 100%;
}

.bfg-genie__image {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	pointer-events: none;
	filter: drop-shadow(0 14px 20px rgba(13, 39, 80, .18));
	animation: bfg-idle-tilt 6s ease-in-out infinite;
	transform-origin: 50% 88%;
}

.bfg-genie__bubble {
	position: absolute;
	bottom: calc(100% - 26px);
	right: calc(100% - 18px);
	min-width: 140px;
	max-width: 190px;
	padding: 10px 12px;
	border-radius: 16px 16px 4px 16px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 10px 26px rgba(13, 39, 80, .14);
	color: #11325d;
	font: 600 13px/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	opacity: 0;
	transform: translateY(8px) scale(.96);
	pointer-events: none;
	animation: bfg-bubble 10s ease-in-out infinite;
}

.bfg-genie--left .bfg-genie__bubble {
	right: auto;
	left: calc(100% - 18px);
	border-radius: 16px 16px 16px 4px;
}

.bfg-genie__badge {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	padding: 6px 11px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffd96a 0%, #f6b800 100%);
	box-shadow: 0 8px 18px rgba(246, 184, 0, .26);
	color: #553a00;
	font: 700 11px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: .03em;
	text-transform: uppercase;
	animation: bfg-badge-pop 3.2s ease-in-out infinite;
}

.bfg-genie__close {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 6px 15px rgba(17, 50, 93, .14);
	color: #224b78;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	padding: 0;
	opacity: 0;
	transform: scale(.85);
	transition: opacity .22s ease, transform .22s ease, background .22s ease;
}

.bfg-genie:is(:hover, :focus-within) .bfg-genie__close {
	opacity: 1;
	transform: scale(1);
}

.bfg-genie__close:hover,
.bfg-genie__close:focus-visible {
	background: #ffffff;
	outline: none;
}

.bfg-genie__link:hover,
.bfg-genie__link:focus-visible {
	transform: scale(1.04);
}

.bfg-genie__link:hover .bfg-genie__bubble,
.bfg-genie__link:focus-visible .bfg-genie__bubble {
	opacity: 1;
	transform: translateY(0) scale(1);
	animation: none;
}

.bfg-genie.is-hidden {
	opacity: 0;
	transform: translateY(20px) scale(.96);
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
}

.bfg-genie.is-roaming {
	animation-duration: 11s;
	animation-timing-function: var(--bfg-ease);
	animation-fill-mode: both;
	z-index: 10000;
}

.bfg-genie--right.is-roaming {
	animation-name: bfg-roam-right;
}

.bfg-genie--left.is-roaming {
	animation-name: bfg-roam-left;
}

@keyframes bfg-idle-bob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-8px) rotate(-1.2deg); }
	50% { transform: translateY(-2px) rotate(.8deg); }
	75% { transform: translateY(-10px) rotate(-.5deg); }
}

@keyframes bfg-idle-tilt {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-2.2deg); }
	50% { transform: rotate(.8deg); }
	75% { transform: rotate(2.2deg); }
}

@keyframes bfg-bubble {
	0%, 62%, 100% {
		opacity: 0;
		transform: translateY(8px) scale(.96);
	}
	68%, 90% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes bfg-badge-pop {
	0%, 100% { transform: translateX(-50%) scale(1); }
	50% { transform: translateX(-50%) scale(1.08); }
}

@keyframes bfg-roam-right {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
	15%  { transform: translate3d(-10vw, -8vh, 0) rotate(-4deg); }
	35%  { transform: translate3d(-34vw, -24vh, 0) rotate(4deg); }
	55%  { transform: translate3d(-58vw, -8vh, 0) rotate(-3deg); }
	75%  { transform: translate3d(-28vw, -32vh, 0) rotate(5deg); }
	100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes bfg-roam-left {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
	15%  { transform: translate3d(10vw, -8vh, 0) rotate(4deg); }
	35%  { transform: translate3d(34vw, -24vh, 0) rotate(-4deg); }
	55%  { transform: translate3d(58vw, -8vh, 0) rotate(3deg); }
	75%  { transform: translate3d(28vw, -32vh, 0) rotate(-5deg); }
	100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@media (max-width: 782px) {
	.bfg-genie {
		--bfg-size: min(110px, 26vw) !important;
		--bfg-bottom: 10px !important;
		--bfg-offset: 10px !important;
	}
	.bfg-genie__bubble {
		min-width: 120px;
		max-width: 150px;
		font-size: 12px;
	}
	.bfg-genie__badge {
		font-size: 10px;
		padding: 5px 9px;
	}
	.bfg-genie__close {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bfg-genie,
	.bfg-genie *,
	.bfg-genie::before,
	.bfg-genie::after {
		animation: none !important;
		transition: none !important;
	}
	.bfg-genie__bubble {
		opacity: 1;
		transform: none;
	}
}