/**
 * Webflow service — Expertise hub diagram.
 * All positions match 100% with the Figma design (Wrap.svg, 1290 × 644 canvas).
 */

/* ════════════════════════════════════════════════
   1. SECTION WRAPPER
   ════════════════════════════════════════════════ */
.expertise-hub-section {
	padding-top:    80px;
	padding-bottom: 80px;
}

/* ════════════════════════════════════════════════
   2. DIAGRAM CONTAINER
   ════════════════════════════════════════════════ */
.expertise-hub-diagram {
	position:     relative;
	width:        100%;
	max-width:    1290px;
	margin:       56px auto 0;
	aspect-ratio: 1290 / 644;
}

/* ════════════════════════════════════════════════
   3. CONNECTOR LINE IMAGES (Figma SVGs)
   Positions derived from 1290 × 644 Figma canvas.
   ════════════════════════════════════════════════ */
.expertise-hub-line {
	position:       absolute;
	display:        block;
	height:         auto;
	pointer-events: none;
	user-select:    none;
	opacity:        0; /* revealed by entrance animation */
}

.expertise-hub-line--far-left    { left: 18.88%; top: 13.74%; width: 26.12%; }
.expertise-hub-line--center-left { left: 33.95%; top: 32.69%; width: 18.22%; }
.expertise-hub-line--center      { left: 47.75%; top: 33.23%; width:  6.51%; }
.expertise-hub-line--center-right{ left: 49.38%; top: 32.69%; width: 18.22%; }
.expertise-hub-line--far-right   { left: 56.59%; top: 13.74%; width: 26.12%; }

/* ════════════════════════════════════════════════
   4. NODE BASE + POSITIONS
   ════════════════════════════════════════════════ */
.expertise-hub-node {
	position:       absolute;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            8px;
	transform:      translate(-50%, -50%);
	z-index:        2;
	opacity:        0; /* revealed by entrance animation */
}

/* Exact node positions from Figma (cx/cy ÷ 1290×644) */
.expertise-hub-node--center        { left: 50.00%; top: 20.03%; }
.expertise-hub-node[data-pos="1"]  { left: 21.32%; top: 42.86%; }
.expertise-hub-node[data-pos="2"]  { left: 78.68%; top: 42.08%; }
.expertise-hub-node[data-pos="3"]  { left: 21.32%; top: 78.57%; }
.expertise-hub-node[data-pos="4"]  { left: 78.68%; top: 77.80%; }
.expertise-hub-node[data-pos="5"]  { left: 36.43%; top: 59.01%; }
.expertise-hub-node[data-pos="6"]  { left: 63.57%; top: 85.40%; }
.expertise-hub-node[data-pos="7"]  { left: 50.23%; top: 66.61%; }
.expertise-hub-node[data-pos="8"]  { left: 63.57%; top: 59.16%; }
.expertise-hub-node[data-pos="9"]  { left: 36.43%; top: 85.40%; }

/* ════════════════════════════════════════════════
   5. CENTER HUB CIRCLE  (200 px fixed)
   ════════════════════════════════════════════════ */
.expertise-hub-circle--lg {
	width:               200px;
	height:              200px;
	border-radius:       50%;
	background:          linear-gradient(145deg, rgba(255,255,255,0.92) 0%, rgba(241,238,255,0.78) 100%);
	border:              2px solid rgba(255,255,255,0.95);
	box-shadow:
		0 12px 48px rgba(94, 67, 254, 0.14),
		0  2px  8px rgba(0,   0,   0,  0.06),
		inset 0 1px 0 rgba(255,255,255,0.90);
	display:             flex;
	align-items:         center;
	justify-content:     center;
	position:            relative;
	backdrop-filter:     blur(16px);
	-webkit-backdrop-filter: blur(16px);
	/* Breathing glow — runs always */
	animation:           wr-hub-breathe 2s ease-in-out infinite;
}

/* Outer halo ring — pulses outward */
.expertise-hub-circle--lg::before {
	content:        '';
	position:       absolute;
	inset:          -10px;
	border-radius:  50%;
	border:         1.5px solid rgba(94, 67, 254, 0.12);
	pointer-events: none;
	animation:      wr-hub-halo 2s ease-in-out infinite;
}

.expertise-hub-circle--lg img {
	width:      60%;
	max-height: 60%;
	object-fit: contain;
}

/* ════════════════════════════════════════════════
   6. SATELLITE CIRCLES  (70 × 70 px fixed)
   ════════════════════════════════════════════════ */
.expertise-hub-circle--sm {
	width:           70px;
	height:          70px;
	flex-shrink:     0;
	border-radius:   50%;
	background:      #fff;
	border:          1px solid rgba(255,255,255,0.90);
	box-shadow:
		0 4px 20px rgba(94, 67, 254, 0.10),
		0 1px  4px rgba(0,   0,   0,  0.07);
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
	transition:
		transform  0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.32s ease;
}

.expertise-hub-node:hover .expertise-hub-circle--sm {
	transform:  scale(1.14);
	box-shadow:
		0 8px 32px rgba(94, 67, 254, 0.22),
		0 2px  8px rgba(0,   0,   0,  0.08);
}

.expertise-hub-circle--sm img {
	width:      58%;
	height:     58%;
	object-fit: contain;
}

/* ════════════════════════════════════════════════
   7. HOVER LABEL  (appears below circle on hover)
   ════════════════════════════════════════════════ */
.expertise-hub-label {
	position:       absolute;
	top:            calc(100% + 8px); /* just below the node */
	left:           50%;
	transform:      translateX(-50%) translateY(5px);
	background:     rgba(28, 20, 76, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color:          #fff;
	font-size:      11px;
	font-weight:    600;
	white-space:    nowrap;
	padding:        5px 12px;
	border-radius:  100px;
	letter-spacing: 0.03em;
	line-height:    1;
	opacity:        0;
	pointer-events: none;
	transition:
		opacity   0.22s ease,
		transform 0.22s ease;
	z-index: 10;
}

.expertise-hub-node:hover .expertise-hub-label {
	opacity:   1;
	transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════
   8. PILL BADGE  (always-visible, optional)
   ════════════════════════════════════════════════ */
.expertise-hub-pill {
	display:         inline-flex;
	align-items:     center;
	padding:         5px 13px;
	border-radius:   100px;
	background:      #1c144c;
	color:           #fff;
	font-size:       11px;
	font-weight:     600;
	white-space:     nowrap;
	letter-spacing:  0.03em;
	line-height:     1;
	pointer-events:  none;
}

/* ════════════════════════════════════════════════
   9. ANIMATIONS
   ════════════════════════════════════════════════ */

/* — Hub glow breathe — */
@keyframes wr-hub-breathe {
	0%, 100% {
		box-shadow:
			0 12px 48px rgba(94, 67, 254, 0.14),
			0  2px  8px rgba(0,   0,   0,  0.06),
			inset 0 1px 0 rgba(255,255,255,0.90);
	}
	50% {
		box-shadow:
			0 18px 72px rgba(94, 67, 254, 0.28),
			0  4px 16px rgba(0,   0,   0,  0.08),
			inset 0 1px 0 rgba(255,255,255,0.90);
	}
}

/* — Hub halo ring pulse — */
@keyframes wr-hub-halo {
	0%, 100% { inset: -10px; border-color: rgba(94, 67, 254, 0.12); }
	50%      { inset: -22px; border-color: rgba(94, 67, 254, 0.05); }
}

/* — Entrance: center hub — */
@keyframes wr-hub-center-in {
	from { opacity: 0; scale: 0.72; }
	to   { opacity: 1; scale: 1; }
}

/* — Entrance: satellite nodes — */
@keyframes wr-hub-node-in {
	from { opacity: 0; scale: 0.55; }
	to   { opacity: 1; scale: 1; }
}

/* — Continuous float (uses CSS individual `translate` so it doesn't
     override the positioning `transform: translate(-50%,-50%)`) — */
@keyframes wr-node-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -7px; }
}

/* — Line fade-in — */
@keyframes wr-line-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Entrance trigger: JS adds .wr-hub-visible to .expertise-hub-diagram ── */

.wr-hub-visible .expertise-hub-line {
	animation: wr-line-in 0.5s ease 0.05s both;
}

.wr-hub-visible .expertise-hub-node--center {
	animation: wr-hub-center-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Satellite entrance + continuous float (sequenced via --nd / --nf vars) */
.wr-hub-visible .expertise-hub-node[data-pos] {
	animation:
		wr-hub-node-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) var(--nd, 0.06s) both,
		wr-node-float  2.8s ease-in-out var(--nf, 0s) infinite;
}

/* Per-node entrance delay (--nd) and float phase offset (--nf) */
.expertise-hub-node[data-pos="1"] { --nd: 0.06s; --nf:  0.00s; }
.expertise-hub-node[data-pos="2"] { --nd: 0.10s; --nf: -0.46s; }
.expertise-hub-node[data-pos="3"] { --nd: 0.18s; --nf: -0.93s; }
.expertise-hub-node[data-pos="4"] { --nd: 0.22s; --nf: -1.40s; }
.expertise-hub-node[data-pos="5"] { --nd: 0.13s; --nf: -0.23s; }
.expertise-hub-node[data-pos="6"] { --nd: 0.28s; --nf: -1.86s; }
.expertise-hub-node[data-pos="7"] { --nd: 0.16s; --nf: -0.70s; }
.expertise-hub-node[data-pos="8"] { --nd: 0.25s; --nf: -1.16s; }
.expertise-hub-node[data-pos="9"] { --nd: 0.30s; --nf: -2.10s; }

/* ── Reduced-motion: skip all animation, always visible ── */
@media (prefers-reduced-motion: reduce) {
	.expertise-hub-node,
	.expertise-hub-line {
		opacity: 1 !important;
		animation: none !important;
		translate: none !important;
		scale: none !important;
	}
	.expertise-hub-circle--lg,
	.expertise-hub-circle--lg::before {
		animation: none !important;
	}
}

/* ════════════════════════════════════════════════
   10. RESPONSIVE
   ════════════════════════════════════════════════ */

/* Tablet: slightly smaller circles */
@media (max-width: 991px) {
	.expertise-hub-diagram  { max-width: 900px; }
	.expertise-hub-circle--lg { width: 160px; height: 160px; }
	.expertise-hub-circle--sm { width: 56px;  height: 56px; }
}

/* Mobile: collapse to a grid */
@media (max-width: 767px) {
	.expertise-hub-diagram {
		aspect-ratio:          unset;
		height:                auto;
		margin-top:            36px;
		display:               grid;
		grid-template-columns: repeat(4, 1fr);
		gap:                   24px 12px;
		align-items:           start;
		justify-items:         center;
	}

	.expertise-hub-line { display: none; }

	.expertise-hub-node {
		position:  static;
		transform: none;
		translate: none;
		opacity:   1 !important;
		animation: none !important;
	}

	/* Center hub spans the full row */
	.expertise-hub-node--center {
		grid-column:   1 / -1;
		margin-bottom: 8px;
	}

	.expertise-hub-circle--lg { width: clamp(90px, 28vw, 130px); height: clamp(90px, 28vw, 130px); }
	.expertise-hub-circle--sm { width: clamp(52px, 16vw, 68px);  height: clamp(52px, 16vw, 68px); }

	/* Label always visible on mobile (no hover) */
	.expertise-hub-label {
		position:  static;
		transform: none;
		opacity:   1;
		background: transparent;
		backdrop-filter: none;
		color:     #1c144c;
		padding:   2px 0 0;
		font-size: 10px;
	}
}

@media (max-width: 479px) {
	.expertise-hub-diagram {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px 8px;
	}
}