/**
 * TechBBQ — animated gradient background (hero orb, footer orb).
 *
 * Defaults tuned via playground/animated-hero-bg.html.
 */

.techbbq-hero__orb,
.techbbq-footer__orb {
	--techbbq-hero-bg-color-1: #0d0d0d;
	--techbbq-hero-bg-color-2: #000000;
	--techbbq-hero-bg-angle: 245deg;

	--techbbq-hero-blob-1-color: #F25D00;
	--techbbq-hero-blob-2-color: #F22400;
	--techbbq-hero-blob-3-color: #CE0F0F;
	--techbbq-hero-blob-interactive-color: #F22400;

	--techbbq-hero-circle-size: 66vw;
	--techbbq-hero-circle-size-mobile: 80vw;
	--techbbq-hero-interactive-size: 22vw;

	--techbbq-hero-speed-vertical: 60s;
	--techbbq-hero-speed-orbit-reverse: 70s;
	--techbbq-hero-speed-orbit-linear: 70s;

	--techbbq-hero-blob-blur: 0vw;
	--techbbq-hero-container-blur: 3vw;
	--techbbq-hero-blending: soft-light;

	--techbbq-hero-interactive-opacity: 0.8;

	background-color: transparent;
	background-image: none;
	background: linear-gradient(
		var(--techbbq-hero-bg-angle),
		var(--techbbq-hero-bg-color-1),
		var(--techbbq-hero-bg-color-2)
	);
	contain: strict;
	isolation: isolate;
}

.techbbq-hero__orb-gradients {
	width: 100%;
	height: 100%;
	filter: blur(var(--techbbq-hero-container-blur));
}

.techbbq-hero__orb-blob {
	position: absolute;
	border-radius: 100%;
	mix-blend-mode: var(--techbbq-hero-blending);
	filter: blur(var(--techbbq-hero-blob-blur));
}

.techbbq-hero__orb-blob--1 {
	background: var(--techbbq-hero-blob-1-color);
	width: var(--techbbq-hero-circle-size-mobile);
	height: var(--techbbq-hero-circle-size-mobile);
	top: calc(50% - var(--techbbq-hero-circle-size-mobile) / 2);
	left: calc(50% - var(--techbbq-hero-circle-size-mobile) / 2);
	transform-origin: center center;
	animation: techbbq-hero-gradient-vertical var(--techbbq-hero-speed-vertical) ease infinite;
}

.techbbq-hero__orb-blob--2 {
	display: none;
	background: var(--techbbq-hero-blob-2-color);
	width: var(--techbbq-hero-circle-size-mobile);
	height: var(--techbbq-hero-circle-size-mobile);
	top: calc(50% - var(--techbbq-hero-circle-size-mobile) / 2);
	left: calc(50% + var(--techbbq-hero-circle-size-mobile) / 2);
	transform-origin: calc(50% - 22vw);
	animation: techbbq-hero-gradient-orbit var(--techbbq-hero-speed-orbit-reverse) infinite reverse;
}

.techbbq-hero__orb-blob--3 {
	background: var(--techbbq-hero-blob-3-color);
	width: var(--techbbq-hero-circle-size-mobile);
	height: var(--techbbq-hero-circle-size-mobile);
	top: calc(50% - var(--techbbq-hero-circle-size-mobile) / 2 + 11vw);
	left: calc(50% - var(--techbbq-hero-circle-size-mobile) / 2 - 28vw);
	transform-origin: calc(50% + 22vw);
	animation: techbbq-hero-gradient-orbit var(--techbbq-hero-speed-orbit-linear) linear infinite;
}

.techbbq-hero__orb-blob--interactive {
	background: var(--techbbq-hero-blob-interactive-color);
	width: var(--techbbq-hero-interactive-size);
	height: var(--techbbq-hero-interactive-size);
	top: calc(var(--techbbq-hero-interactive-size) / -2);
	left: calc(var(--techbbq-hero-interactive-size) / -2);
	opacity: var(--techbbq-hero-interactive-opacity);
	display: none;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
	.techbbq-hero__orb-blob--interactive {
		display: block;
	}
}

@media (min-width: 768px) {
	.techbbq-hero__orb-blob--2 {
		display: block;
	}

	.techbbq-hero__orb-blob--1 {
		width: var(--techbbq-hero-circle-size);
		height: var(--techbbq-hero-circle-size);
		top: calc(50% - var(--techbbq-hero-circle-size) / 2);
		left: calc(50% - var(--techbbq-hero-circle-size) / 2);
	}

	.techbbq-hero__orb-blob--2 {
		width: var(--techbbq-hero-circle-size);
		height: var(--techbbq-hero-circle-size);
		top: calc(50% - var(--techbbq-hero-circle-size) / 2);
		left: calc(50% + var(--techbbq-hero-circle-size) / 2);
	}

	.techbbq-hero__orb-blob--3 {
		width: var(--techbbq-hero-circle-size);
		height: var(--techbbq-hero-circle-size);
		top: calc(50% - var(--techbbq-hero-circle-size) / 2 + 11vw);
		left: calc(50% - var(--techbbq-hero-circle-size) / 2 - 28vw);
	}
}

.techbbq-hero__orb.is-paused .techbbq-hero__orb-blob--1,
.techbbq-hero__orb.is-paused .techbbq-hero__orb-blob--2,
.techbbq-hero__orb.is-paused .techbbq-hero__orb-blob--3,
.techbbq-footer__orb.is-paused .techbbq-hero__orb-blob--1,
.techbbq-footer__orb.is-paused .techbbq-hero__orb-blob--2,
.techbbq-footer__orb.is-paused .techbbq-hero__orb-blob--3 {
	animation-play-state: paused;
}

.techbbq-hero__orb.is-paused .techbbq-hero__orb-blob--interactive {
	display: none;
}

@keyframes techbbq-hero-gradient-vertical {
	0% {
		transform: translateY(-50%);
	}

	50% {
		transform: translateY(50%);
	}

	100% {
		transform: translateY(-50%);
	}
}

@keyframes techbbq-hero-gradient-orbit {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.techbbq-hero__orb-blob--1,
	.techbbq-hero__orb-blob--2,
	.techbbq-hero__orb-blob--3 {
		animation: none;
	}

	.techbbq-hero__orb-blob--interactive {
		display: none;
	}
}