/* ==========================================================================
   B2E Hero Orbit
   Icon arc curved around the brand mark.

   Two rules govern this file:
   1. The CSS default state is the FINAL, visible state. The JS adds
      .is-armed to hide things before animating. If GSAP fails to load,
      the orbit still renders correctly — it just doesn't animate.
   2. Only opacity and transform are animated. The glow is its own layer
      so nothing has to interpolate a box-shadow string.
   ========================================================================== */

.b2e-orbit {
	/* --stage is the master size. Width and height are separate so the
	   stage can go from a square on desktop to a tall rectangle on phones,
	   which narrows the arc and frees up room for the labels. */
	--stage: clamp(320px, 33vw, 470px);
	--stage-w: var(--stage);
	--stage-h: var(--stage);

	--badge: calc(var(--stage-w) * 0.125);
	--core: calc(var(--stage-w) * 0.375);
	--gap: calc(var(--stage-w) * 0.035);
	--label-w: auto;

	--navy: #0b2252;
	--indigo: #4458a4;
	--indigo-deep: #33459a;
	--glow-rgb: 180, 196, 255;

	--ring-rest: 0.38;
	--icon-rest: 0.82;
	--label-rest: 0.92;
	--core-ring-rest: 0.55;

	/* --orbit-optical is written by the JS to compensate for the labels
	   hanging outside the square stage. --orbit-shift is yours to set via
	   the shortcode's shift="" attribute, and stacks on top of it. */
	--orbit-optical: 0px;
	--orbit-shift: 0px;

	position: relative;
	z-index: 2;
	display: flex;
	justify-content: var(--orbit-justify, center);
	align-items: center;
	width: 100%;
}

.b2e-orbit__stage {
	position: relative;
	width: var(--stage-w);
	height: var(--stage-h);
	/* The labels sit outside the square — don't clip them. */
	overflow: visible;
	transform: translateX(calc(var(--orbit-optical) + var(--orbit-shift)));
}

/* --- Connecting arc ------------------------------------------------------ */

.b2e-orbit__arc {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.b2e-orbit__arc-path {
	fill: none;
	/* Resting opacity after the sweep has passed. The JS raises this to
	   0.6 while drawing, then settles it back here. */
	opacity: 0.22;
}

/* --- Centre brand mark --------------------------------------------------- */

.b2e-orbit__core {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--core);
	height: var(--core);
	margin: calc(var(--core) / -2) 0 0 calc(var(--core) / -2);
	display: grid;
	place-items: center;
	transform-origin: 50% 50%;
	cursor: default;
	outline: none;
}

.b2e-orbit__core-face,
.b2e-orbit__core-ring,
.b2e-orbit__pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.b2e-orbit__core-face {
	background: linear-gradient(150deg, #4a5db0 0%, var(--indigo-deep) 100%);
	box-shadow:
		0 0 0 1px rgba(11, 34, 82, 0.35),
		0 18px 45px rgba(6, 20, 52, 0.45);
}

/* Border lives on its own layer so hover can raise its opacity without
   interpolating a colour. */
.b2e-orbit__core-ring {
	border: 2px solid #fff;
	opacity: var(--core-ring-rest);
	pointer-events: none;
}

/* Same trick as the badges — a dedicated radial layer, so the hover light
   is an opacity tween rather than a box-shadow interpolation. */
.b2e-orbit__core-glow {
	position: absolute;
	inset: -45%;
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(var(--glow-rgb), 0.5) 0%,
		rgba(var(--glow-rgb), 0.2) 45%,
		rgba(var(--glow-rgb), 0) 72%
	);
	opacity: 0;
	pointer-events: none;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

/* Expanding ring that fires once as the sequence starts, then hands off
   to the arc sweep. Hidden until the JS drives it. */
.b2e-orbit__pulse {
	border: 1.5px solid rgba(var(--glow-rgb), 0.85);
	opacity: 0;
	pointer-events: none;
}

.b2e-orbit__core-mark {
	position: relative;
	width: 62%;
	height: auto;
	display: block;
}

/* --- Icon badges --------------------------------------------------------- */

.b2e-orbit__items {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.b2e-orbit__item {
	position: absolute;
	left: var(--x);
	top: var(--y);
	/* Anchors the BADGE centre on the x/y point, so the label can flow
	   right without dragging the badge off its mark. */
	transform: translate(calc(var(--badge) / -2), -50%);
	display: flex;
	align-items: center;
	gap: var(--gap);
	cursor: default;
	outline: none;
	/* Absolutely positioned at left:88.5%, shrink-to-fit would give this
	   only the ~11% of stage width remaining to the right and wrap the
	   label to one character per line. max-content sizes to the text and
	   lets it overhang the stage, which is the intended behaviour. */
	width: max-content;
}

.b2e-orbit__badge {
	position: relative;
	flex: 0 0 auto;
	width: var(--badge);
	height: var(--badge);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.09);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

.b2e-orbit__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid #fff;
	opacity: var(--ring-rest);
}

/* Separate glow layer: animating its opacity/scale is cheap and
   GPU-composited, unlike tweening a box-shadow. */
.b2e-orbit__glow {
	position: absolute;
	inset: -55%;
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(var(--glow-rgb), 0.55) 0%,
		rgba(var(--glow-rgb), 0.22) 42%,
		rgba(var(--glow-rgb), 0) 70%
	);
	opacity: 0;
	pointer-events: none;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

.b2e-orbit__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 52%;
	height: 52%;
	opacity: var(--icon-rest);
}

.b2e-orbit__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.b2e-orbit__label {
	font-size: clamp(11px, 0.82vw, 14px);
	font-weight: 700;
	letter-spacing: 0.085em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
	opacity: var(--label-rest);
	text-shadow: 0 1px 14px rgba(6, 20, 52, 0.6);
	white-space: nowrap;
	width: var(--label-w);
	will-change: transform, opacity;
}

/* --- Pre-animation state ------------------------------------------------- */

.b2e-orbit.is-armed .b2e-orbit__badge,
.b2e-orbit.is-armed .b2e-orbit__label,
.b2e-orbit.is-armed .b2e-orbit__core,
.b2e-orbit.is-armed .b2e-orbit__arc-path {
	opacity: 0;
}

/* --- Focus (keyboard) ---------------------------------------------------- */

.b2e-orbit__item:focus-visible .b2e-orbit__ring,
.b2e-orbit__core:focus-visible .b2e-orbit__core-ring {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: 50%;
}

/* --- Narrow viewports ---------------------------------------------------
   The arc is kept at every width. Instead of stacking, the stage becomes a
   tall rectangle: the badge x/y are percentages of the stage box and the
   arc's SVG uses preserveAspectRatio="none", so the path stretches with it
   and still passes exactly through every badge. The arc narrows and
   elongates, which is what buys the horizontal room for the labels.

   The labels are what actually constrain this, so they wrap onto two lines
   and lose some tracking rather than the artwork shrinking to suit them.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.b2e-orbit {
		--stage-w: clamp(240px, 34vw, 300px);
		--stage-h: clamp(320px, 44vw, 380px);
		--badge: clamp(40px, 5.4vw, 48px);
		--core: clamp(96px, 13vw, 120px);
		--gap: 10px;
		--label-w: 130px;
	}

	.b2e-orbit__label {
		font-size: 11px;
		letter-spacing: 0.06em;
		white-space: normal;
	}
}

@media (max-width: 600px) {
	.b2e-orbit {
		--stage-w: clamp(175px, 52vw, 240px);
		--stage-h: clamp(300px, 82vw, 360px);
		--badge: clamp(34px, 10vw, 44px);
		--core: clamp(78px, 23vw, 100px);
		--gap: 8px;
		--label-w: 100px;
	}

	.b2e-orbit__label {
		font-size: 10.5px;
		letter-spacing: 0.04em;
		line-height: 1.25;
	}
}

/* Smallest phones. "SOCIAL RESPONSIBILITY" is the binding constraint — at
   the 600px values it overruns a 320px viewport by a few pixels. */
@media (max-width: 380px) {
	.b2e-orbit {
		--stage-w: clamp(165px, 50vw, 200px);
		--stage-h: clamp(290px, 80vw, 330px);
		--badge: clamp(32px, 9.5vw, 38px);
		--core: clamp(72px, 21vw, 88px);
		--gap: 7px;
		--label-w: 92px;
	}

	.b2e-orbit__label {
		font-size: 10px;
	}
}

/* --- Reduced motion ------------------------------------------------------
   Anything that assembles itself is exactly the pattern that causes
   trouble for vestibular disorders. Everything arrives already placed;
   hover still responds, but only in brightness, not movement.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.b2e-orbit.is-armed .b2e-orbit__badge,
	.b2e-orbit.is-armed .b2e-orbit__core {
		opacity: 1;
	}

	.b2e-orbit.is-armed .b2e-orbit__label {
		opacity: var(--label-rest);
	}

	.b2e-orbit.is-armed .b2e-orbit__arc-path {
		opacity: 0.22;
	}

	.b2e-orbit__badge,
	.b2e-orbit__glow,
	.b2e-orbit__core-glow,
	.b2e-orbit__label,
	.b2e-orbit__pulse {
		will-change: auto;
	}
}