/* Hero avatar bubble motion enhancement */
.hero-avatar-bubbles .bubble-motion-inner {
	height: 100%;
	position: relative;
	width: 100%;
}

.hero-avatar-bubbles.is-motion-enabled .bubble-motion-inner {
	--avatar-cursor-x: 0px;
	--avatar-cursor-y: 0px;
	--avatar-float-x-a: 10px;
	--avatar-float-y-a: -13px;
	--avatar-float-x-b: -8px;
	--avatar-float-y-b: 11px;
	-webkit-animation: heroAvatarBubbleFloat 10s ease-in-out infinite;
	animation: heroAvatarBubbleFloat 10s ease-in-out infinite;
	-webkit-transform: translate3d(var(--avatar-cursor-x), var(--avatar-cursor-y), 0);
	transform: translate3d(var(--avatar-cursor-x), var(--avatar-cursor-y), 0);
	will-change: transform;
}

.hero-avatar-bubbles.is-motion-enabled .hero-bubble.is-avatar-hovered .bubble-motion-inner {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

.hero-avatar-bubbles.is-motion-enabled .bubble-01 .bubble-motion-inner {
	--avatar-float-x-a: 14px;
	--avatar-float-y-a: -17px;
	--avatar-float-x-b: -11px;
	--avatar-float-y-b: 11px;
	-webkit-animation-duration: 9s;
	animation-duration: 9s;
}

.hero-avatar-bubbles.is-motion-enabled .bubble-02 .bubble-motion-inner {
	--avatar-float-x-a: 8px;
	--avatar-float-y-a: -10px;
	--avatar-float-x-b: -7px;
	--avatar-float-y-b: 8px;
	-webkit-animation-duration: 13s;
	animation-duration: 13s;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}

.hero-avatar-bubbles.is-motion-enabled .bubble-03 .bubble-motion-inner {
	--avatar-float-x-a: -14px;
	--avatar-float-y-a: -14px;
	--avatar-float-x-b: 11px;
	--avatar-float-y-b: 10px;
	-webkit-animation-duration: 11s;
	animation-duration: 11s;
	-webkit-animation-delay: -5s;
	animation-delay: -5s;
}

.hero-avatar-bubbles.is-motion-enabled .bubble-04 .bubble-motion-inner,
.hero-avatar-bubbles.is-motion-enabled .bubble-08 .bubble-motion-inner {
	--avatar-float-x-a: 6px;
	--avatar-float-y-a: -8px;
	--avatar-float-x-b: -5px;
	--avatar-float-y-b: 6px;
	-webkit-animation-duration: 15s;
	animation-duration: 15s;
	-webkit-animation-delay: -3s;
	animation-delay: -3s;
}

.hero-avatar-bubbles.is-motion-enabled .bubble-05 .bubble-motion-inner,
.hero-avatar-bubbles.is-motion-enabled .bubble-07 .bubble-motion-inner {
	--avatar-float-x-a: 11px;
	--avatar-float-y-a: -13px;
	--avatar-float-x-b: -10px;
	--avatar-float-y-b: 10px;
	-webkit-animation-duration: 12s;
	animation-duration: 12s;
	-webkit-animation-delay: -7s;
	animation-delay: -7s;
}

.hero-avatar-bubbles.is-motion-enabled .bubble-06 .bubble-motion-inner,
.hero-avatar-bubbles.is-motion-enabled .bubble-09 .bubble-motion-inner {
	--avatar-float-x-a: -15px;
	--avatar-float-y-a: -15px;
	--avatar-float-x-b: 13px;
	--avatar-float-y-b: 13px;
	-webkit-animation-duration: 9s;
	animation-duration: 9s;
	-webkit-animation-delay: -4s;
	animation-delay: -4s;
}

@media (max-width: 767px) {
	.hero-avatar-bubbles.is-motion-enabled .bubble-motion-inner {
		--avatar-float-x-a: 5px;
		--avatar-float-y-a: -6px;
		--avatar-float-x-b: -4px;
		--avatar-float-y-b: 5px;
	}

	.hero-avatar-bubbles.is-motion-enabled .bubble-01 .bubble-motion-inner {
		--avatar-float-x-a: 7px;
		--avatar-float-y-a: -8px;
		--avatar-float-x-b: -5px;
		--avatar-float-y-b: 5px;
	}

	.hero-avatar-bubbles.is-motion-enabled .bubble-02 .bubble-motion-inner {
		--avatar-float-x-a: 4px;
		--avatar-float-y-a: -5px;
		--avatar-float-x-b: -3px;
		--avatar-float-y-b: 4px;
	}

	.hero-avatar-bubbles.is-motion-enabled .bubble-03 .bubble-motion-inner {
		--avatar-float-x-a: -7px;
		--avatar-float-y-a: -7px;
		--avatar-float-x-b: 5px;
		--avatar-float-y-b: 5px;
	}

	.hero-avatar-bubbles.is-motion-enabled .bubble-04 .bubble-motion-inner,
	.hero-avatar-bubbles.is-motion-enabled .bubble-08 .bubble-motion-inner {
		--avatar-float-x-a: 3px;
		--avatar-float-y-a: -4px;
		--avatar-float-x-b: -2px;
		--avatar-float-y-b: 3px;
	}

	.hero-avatar-bubbles.is-motion-enabled .bubble-05 .bubble-motion-inner,
	.hero-avatar-bubbles.is-motion-enabled .bubble-07 .bubble-motion-inner {
		--avatar-float-x-a: 5px;
		--avatar-float-y-a: -6px;
		--avatar-float-x-b: -5px;
		--avatar-float-y-b: 5px;
	}

	.hero-avatar-bubbles.is-motion-enabled .bubble-06 .bubble-motion-inner,
	.hero-avatar-bubbles.is-motion-enabled .bubble-09 .bubble-motion-inner {
		--avatar-float-x-a: -7px;
		--avatar-float-y-a: -7px;
		--avatar-float-x-b: 6px;
		--avatar-float-y-b: 6px;
	}
}

@-webkit-keyframes heroAvatarBubbleFloat {
	0%,
	100% {
		-webkit-transform: translate3d(var(--avatar-cursor-x), var(--avatar-cursor-y), 0);
		transform: translate3d(var(--avatar-cursor-x), var(--avatar-cursor-y), 0);
	}

	35% {
		-webkit-transform: translate3d(calc(var(--avatar-cursor-x) + var(--avatar-float-x-a)), calc(var(--avatar-cursor-y) + var(--avatar-float-y-a)), 0);
		transform: translate3d(calc(var(--avatar-cursor-x) + var(--avatar-float-x-a)), calc(var(--avatar-cursor-y) + var(--avatar-float-y-a)), 0);
	}

	70% {
		-webkit-transform: translate3d(calc(var(--avatar-cursor-x) + var(--avatar-float-x-b)), calc(var(--avatar-cursor-y) + var(--avatar-float-y-b)), 0);
		transform: translate3d(calc(var(--avatar-cursor-x) + var(--avatar-float-x-b)), calc(var(--avatar-cursor-y) + var(--avatar-float-y-b)), 0);
	}
}

@keyframes heroAvatarBubbleFloat {
	0%,
	100% {
		-webkit-transform: translate3d(var(--avatar-cursor-x), var(--avatar-cursor-y), 0);
		transform: translate3d(var(--avatar-cursor-x), var(--avatar-cursor-y), 0);
	}

	35% {
		-webkit-transform: translate3d(calc(var(--avatar-cursor-x) + var(--avatar-float-x-a)), calc(var(--avatar-cursor-y) + var(--avatar-float-y-a)), 0);
		transform: translate3d(calc(var(--avatar-cursor-x) + var(--avatar-float-x-a)), calc(var(--avatar-cursor-y) + var(--avatar-float-y-a)), 0);
	}

	70% {
		-webkit-transform: translate3d(calc(var(--avatar-cursor-x) + var(--avatar-float-x-b)), calc(var(--avatar-cursor-y) + var(--avatar-float-y-b)), 0);
		transform: translate3d(calc(var(--avatar-cursor-x) + var(--avatar-float-x-b)), calc(var(--avatar-cursor-y) + var(--avatar-float-y-b)), 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-avatar-bubbles.is-motion-enabled .bubble-motion-inner {
		-webkit-animation: none;
		animation: none;
		-webkit-transform: none;
		transform: none;
	}
}
