/**
 * VARO — minimal digital companion components.
 */

.bv-varo {
	position: relative;
	flex: 0 0 auto;
	min-width: 0;
	aspect-ratio: 1;
}

.bv-varo img {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.bv-varo__orb {
	position: relative;
	display: flex;
	width: 100%;
	aspect-ratio: 1;
	align-items: center;
	justify-content: center;
	gap: 12%;
	overflow: hidden;
	border: var(--bv-border-width) solid color-mix(in srgb, var(--bv-primary) 48%, var(--bv-border));
	border-radius: var(--bv-radius-full);
	background:
		radial-gradient(circle at 68% 30%, color-mix(in srgb, var(--bv-accent) 22%, transparent), transparent 30%),
		radial-gradient(circle at 28% 72%, color-mix(in srgb, var(--bv-primary) 34%, transparent), transparent 42%),
		var(--bv-surface-elevated);
	box-shadow: 0 0 2.5rem color-mix(in srgb, var(--bv-primary) 18%, transparent), inset 0 0 2rem color-mix(in srgb, var(--bv-text) 5%, transparent);
}

.bv-varo__orb::before {
	position: absolute;
	inset: 8%;
	border: var(--bv-border-width) solid var(--bv-border);
	border-radius: inherit;
	content: "";
}

.bv-varo__eye {
	position: relative;
	z-index: 1;
	width: 13%;
	aspect-ratio: 1.55;
	border-radius: var(--bv-radius-full);
	background: var(--bv-accent);
	box-shadow: 0 0 0.75rem color-mix(in srgb, var(--bv-accent) 74%, transparent);
}

.bv-varo__eye + .bv-varo__eye {
	background: var(--bv-primary);
	box-shadow: 0 0 0.75rem color-mix(in srgb, var(--bv-primary) 78%, transparent);
}

.bv-varo--hero {
	position: absolute;
	right: clamp(var(--bv-space-4), 2vw, var(--bv-space-8));
	bottom: clamp(var(--bv-space-4), 3vw, var(--bv-space-8));
	z-index: 2;
	width: clamp(11rem, 24vw, 22rem);
	max-width: calc(100% - (2 * var(--bv-space-4)));
	filter: drop-shadow(0 1rem 2rem color-mix(in srgb, var(--bv-bg) 60%, transparent));
}

.bv-varo--mini {
	width: clamp(9rem, 16vw, 15rem);
}

.bv-services-hero__inner,
.bv-service-hero__inner {
	position: relative;
	padding-right: clamp(15rem, 25vw, 23rem);
}

.bv-services-hero__inner > .bv-varo--mini,
.bv-service-hero__inner > .bv-varo--mini {
	position: absolute;
	right: 0;
	bottom: 50%;
	z-index: 1;
	transform: translateY(50%);
}

.bv-varo-bubble {
	display: flex;
	max-width: 30rem;
	align-items: center;
	gap: var(--bv-space-4);
	margin-top: var(--bv-space-8);
	padding: var(--bv-space-4);
	border: var(--bv-border-width) solid var(--bv-border);
	border-radius: var(--bv-radius-default);
	background: color-mix(in srgb, var(--bv-surface-elevated) 86%, transparent);
}

.bv-varo--bubble {
	width: clamp(5.75rem, 9vw, 7.5rem);
}

.bv-varo-bubble__copy {
	min-width: 0;
}

.bv-varo-bubble strong {
	display: block;
	margin-bottom: var(--bv-space-1);
	font-size: var(--bv-type-body-sm);
}

.bv-varo-bubble p {
	margin: 0;
	color: var(--bv-text-secondary);
	font-size: var(--bv-type-body-sm);
}

.bv-varo-empty {
	min-height: min(44rem, calc(100dvh - var(--bv-header-height, 5rem)));
	display: grid;
	align-items: center;
	background: var(--bv-bg);
}

.bv-varo-empty__inner {
	display: grid;
	align-items: center;
	gap: var(--bv-space-12);
}

.bv-varo--empty {
	width: min(24rem, 78vw);
	justify-self: center;
}

.bv-varo-empty__copy h1 {
	margin-block: var(--bv-space-4) var(--bv-space-6);
	font-size: var(--bv-type-display-lg);
}

.bv-varo-empty__copy > p:not(.bv-eyebrow) {
	max-width: 42rem;
	margin-bottom: var(--bv-space-8);
	color: var(--bv-text-secondary);
	font-size: var(--bv-type-body-lg);
}

@media (hover: hover) and (pointer: fine) {
	.bv-varo {
		transition: transform var(--bv-motion-normal) var(--bv-easing-emphasized);
	}

	.bv-varo:hover,
	.bv-varo-bubble:hover .bv-varo {
		transform: translateY(-0.25rem);
	}

	.bv-services-hero__inner > .bv-varo--mini:hover,
	.bv-service-hero__inner > .bv-varo--mini:hover {
		transform: translateY(calc(50% - 0.25rem));
	}
}

@media (min-width: 48rem) {
	.bv-varo-empty__inner {
		grid-template-columns: minmax(20rem, 0.9fr) minmax(0, 1.1fr);
	}
}

@media (max-width: 47.99rem) {
	.bv-varo--hero {
		right: var(--bv-space-4);
		bottom: var(--bv-space-4);
		width: min(10rem, 40vw);
	}

	.bv-services-hero__inner,
	.bv-service-hero__inner {
		padding-right: var(--bv-container-padding);
	}

	.bv-services-hero__inner > .bv-varo--mini,
	.bv-service-hero__inner > .bv-varo--mini {
		position: relative;
		right: auto;
		bottom: auto;
		width: min(10rem, 44vw);
		margin-top: var(--bv-space-8);
		transform: none;
	}

	.bv-varo-bubble {
		align-items: flex-start;
	}

	.bv-varo--bubble {
		width: min(6rem, 27vw);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bv-varo {
		transition: none;
	}

	.bv-varo:hover,
	.bv-varo-bubble:hover .bv-varo {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) and (min-width: 48rem) {
	.bv-services-hero__inner > .bv-varo--mini,
	.bv-service-hero__inner > .bv-varo--mini,
	.bv-services-hero__inner > .bv-varo--mini:hover,
	.bv-service-hero__inner > .bv-varo--mini:hover {
		transform: translateY(50%);
	}
}