/**
 * Body Signals case stage.
 * Mesh CSS: verbatim from bodysignals.app (hero .mesh.dm), scoped to .raph-bs-stage.
 * Armillary logo: from Work/Work/armillary_sphere_svg.html.
 */
.raph-bs-stage {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #f4eee8;
	margin: 0 0 32px;
}

@media (max-width: 767px) {
	.raph-bs-stage {
		aspect-ratio: 1 / 1;
		margin-bottom: 24px;
	}
}

/* —— landing .mesh base (hero) —— */
.raph-bs-stage .mesh {
	position: absolute;
	inset: 0;
	z-index: 0;
	isolation: isolate;
	pointer-events: none;
}

.raph-bs-stage .mesh i {
	position: absolute;
	display: block;
}

/* —— landing .mesh.dm (hero) —— */
.raph-bs-stage .mesh.dm {
	overflow: hidden;
}

.raph-bs-stage .mesh.dm i {
	position: absolute;
	display: block;
	border-radius: 50%;
	will-change: translate, scale;
	animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.raph-bs-stage .mesh.dm .d1 {
	width: 110%;
	aspect-ratio: 2;
	left: -22%;
	top: -18%;
	background: radial-gradient(
		ellipse at center,
		rgba(214, 108, 44, 0.98) 0%,
		rgba(200, 96, 40, 0.7) 28%,
		rgba(160, 82, 44, 0.28) 52%,
		transparent 70%
	);
	animation-name: m-go1, m-sz1;
	animation-duration: 48s, 33s;
}

.raph-bs-stage .mesh.dm .d2 {
	width: 78%;
	aspect-ratio: 1.7;
	left: -30%;
	bottom: -48%;
	background: radial-gradient(
		ellipse at center,
		rgba(98, 214, 210, 0.95) 0%,
		rgba(92, 196, 196, 0.6) 30%,
		rgba(120, 170, 160, 0.2) 54%,
		transparent 70%
	);
	animation-name: m-go2, m-sz2;
	animation-duration: 54s, 38s;
}

.raph-bs-stage .mesh.dm .d3 {
	width: 92%;
	aspect-ratio: 1.8;
	right: -26%;
	bottom: -52%;
	background: radial-gradient(
		ellipse at center,
		rgba(222, 212, 176, 0.95) 0%,
		rgba(212, 196, 150, 0.6) 30%,
		rgba(190, 160, 110, 0.22) 54%,
		transparent 70%
	);
	animation-name: m-go3, m-sz1;
	animation-duration: 51s, 35s;
}

@keyframes m-go1 {
	from {
		translate: 0 0;
	}
	to {
		translate: 7% 5%;
	}
}
@keyframes m-go2 {
	from {
		translate: 0 0;
	}
	to {
		translate: 9% -5%;
	}
}
@keyframes m-go3 {
	from {
		translate: 0 0;
	}
	to {
		translate: -8% -4%;
	}
}
@keyframes m-sz1 {
	from {
		scale: 1;
	}
	to {
		scale: 1.07;
	}
}
@keyframes m-sz2 {
	from {
		scale: 1.05;
	}
	to {
		scale: 0.96;
	}
}

.raph-bs-stage .mesh.dm .grain {
	position: absolute;
	inset: -2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
		0 0 / 240px 240px;
	opacity: 0.26;
	mix-blend-mode: overlay;
}

.raph-bs-stage .mesh.dm canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.raph-bs-stage .mesh.dm.gl i {
	display: none;
}

.raph-bs-stage .mesh.dm.gl .grain {
	z-index: 1;
	opacity: 0.2;
}

/* —— armillary logo (center) —— */
.raph-bs-stage__logo-wrap {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.raph-bs-stage__armillary {
	position: relative;
	width: min(58%, 420px);
	aspect-ratio: 1;
	pointer-events: auto;
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 0;
	appearance: none;
}

@media (max-width: 767px) {
	.raph-bs-stage__armillary {
		width: min(72%, 320px);
	}
}

.raph-bs-stage__armillary:focus-visible {
	outline: 2px solid rgba(23, 20, 15, 0.35);
	outline-offset: 6px;
	border-radius: 50%;
}

.raph-bs-stage__armillary svg {
	display: block;
	width: 100%;
	height: 100%;
	shape-rendering: geometricPrecision;
	pointer-events: none;
}

/* Ring stroke: shared bs-armillary.css */