/* ===================================
	Full-service marketing: a row of overlapping service circles.
	On hover, keyboard focus or tap (.is-active):
	- Ink fill: the grey blooms out from where the pointer enters and drains toward where it
		leaves (--x/--y set by the script), instead of a flat colour switch.
	- The title turns green while the description eases open, then its text drifts in out of a
		soft blur.
	- Neighbouring titles dim a little so the active circle stands out.
	Script: blocks/full-service-marketing/script.mjs. With it, springs drive all of this (the
	.is-sprung section at the end); without it, the CSS transitions here apply.
=================================== */

.section_full_service_marketing .section_description {
	margin-bottom: 40px;
}
.section_full_service_marketing .service_circle {
	display: flex;
	flex-wrap: wrap;
	margin: 100px auto 0;
	justify-content: center;
	max-width: 1652px;
	padding: 0 20px;
}
.section_full_service_marketing .service_circle .service_item {
	width: 16%;
	padding: 10px;
	border: 1px solid #9caec0;
	aspect-ratio: 1/1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	margin: 0 -1%;
	position: relative;
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
	cursor: default;
	transition: border-color var(--dur-medium) var(--ease-out);
}
.section_full_service_marketing .service_circle .service_item .service_item_inner {
	text-align: center;
	max-width: 179px;
}

/* active circle: the ink (::before) replaces the outline */
.section_full_service_marketing .service_circle .service_item:focus-visible,
.section_full_service_marketing .service_circle .service_item.is-active {
	background-color: transparent;
	border-color: transparent;
	z-index: 1;
	outline: none;
}
@media (hover: hover) and (pointer: fine) {
	.section_full_service_marketing .service_circle .service_item:hover {
		background-color: transparent;
		border-color: transparent;
		z-index: 1;
		outline: none;
	}
}

/* Ink: a circular reveal centred on where the pointer entered (--x/--y), growing until it
	covers the circle. Leaving: a calm fade (no shrinking), then the reveal quietly resets. */
.section_full_service_marketing .service_circle .service_item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background-color: var(--wp--preset--color--darkgrey);
	clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
	opacity: 0;
	transition:
		opacity 650ms var(--ease-out),
		clip-path 0s linear 650ms;
}
/* cubic-out over 1.3s: reads as ink spreading out from the entry point */
.section_full_service_marketing .service_circle .service_item:focus-visible::before,
.section_full_service_marketing .service_circle .service_item.is-active::before {
	clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
	opacity: 1;
	transition:
		clip-path 1300ms var(--ease-out),
		opacity 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.section_full_service_marketing .service_circle .service_item:hover::before {
		clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
		opacity: 1;
		transition:
			clip-path 1300ms var(--ease-out),
			opacity 160ms var(--ease-out);
	}
}
/* keyboard focus ring that follows the circle */
.section_full_service_marketing .service_circle .service_item:focus-visible::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--wp--preset--color--white);
	pointer-events: none;
}

/* title */
.section_full_service_marketing .service_circle .service_item .service_title {
	color: var(--wp--preset--color--black);
	transition:
		color 650ms var(--ease-out),
		opacity 650ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.section_full_service_marketing
		.service_circle
		.service_item:is(:hover, :focus-visible, .is-active)
		.service_title {
		color: var(--wp--preset--color--neongreen);
	}
	/* neighbours step back slightly */
	.section_full_service_marketing
		.service_circle:has(.service_item:is(:hover, :focus-visible, .is-active))
		.service_item:not(:hover):not(:focus-visible):not(.is-active)
		.service_title {
		opacity: 0.45;
	}
}

/* description: the row eases open (the title glides up with it), then the words arrive */
.section_full_service_marketing .service_circle .service_item .service_text {
	margin-top: 10px;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows 600ms var(--ease-in-out),
		opacity 400ms var(--ease-out);
}
/* The text overflows the opening row instead of being clipped by it (min-height: 0 still lets
	the row collapse to 0; the text is invisible while closed). */
.section_full_service_marketing .service_circle .service_item .service_text > * {
	overflow: visible;
	min-height: 0;
	opacity: 0;
	transform: translate3d(0, 8px, 0);
	filter: blur(4px);
	transition:
		opacity 280ms var(--ease-in),
		transform 280ms var(--ease-in),
		filter 280ms var(--ease-in);
}
@media (hover: hover) and (pointer: fine) {
	.section_full_service_marketing .service_circle .service_item:is(:hover, :focus-visible, .is-active) .service_text {
		grid-template-rows: 1fr;
		opacity: 1;
		color: var(--wp--preset--color--white);
		transition:
			grid-template-rows 850ms var(--ease-out),
			opacity 400ms var(--ease-out);
	}
	.section_full_service_marketing
		.service_circle
		.service_item:is(:hover, :focus-visible, .is-active)
		.service_text
		> * {
		opacity: 1;
		transform: none;
		filter: none;
		transition:
			opacity 750ms var(--ease-out) 240ms,
			transform 950ms var(--ease-out) 240ms,
			filter 750ms var(--ease-out) 240ms;
	}
}

/* ===================================
	Responsive
=================================== */
@media only screen and (max-width: 1400px) {
	.section_full_service_marketing .service_circle {
		margin-top: 70px;
	}
	.section_full_service_marketing .service_circle .service_item .service_text {
		margin-top: 5px;
		font-size: 16px;
	}
}
@media only screen and (max-width: 1200px) {
	.section_full_service_marketing .service_circle {
		margin-top: 80px;
	}
	.section_full_service_marketing .service_circle .service_item {
		width: 20%;
		margin: -2% -1%;
	}
}
@media only screen and (max-width: 1000px) {
	.section_full_service_marketing .service_circle .service_item .service_text {
		font-size: 14px;
	}
	.section_full_service_marketing .service_circle .service_item {
		width: 175px;
	}
	.section_full_service_marketing .service_circle .service_item .service_item_inner {
		max-width: 135px;
	}
}
@media screen and (max-width: 768px) {
	.section_full_service_marketing .section_description {
		margin-bottom: 25px;
	}
}
@media only screen and (max-width: 550px) {
	.section_full_service_marketing .service_circle .service_item {
		margin: -1%;
	}
	.section_full_service_marketing .service_circle {
		margin-top: 60px;
	}
}
@media only screen and (max-width: 535px) {
	.section_full_service_marketing .service_circle .service_item:last-child {
		margin-top: -6%;
	}
}
@media only screen and (max-width: 420px) {
	.section_full_service_marketing .service_circle .service_item:last-child {
		margin-top: -8%;
	}
}

/* ===================================
	Springs (.is-sprung, set by script.mjs)
	The script writes --ink, --inkA (the ink), --o, --h (the description row) and --t (its text);
	these rules replace the time-based transitions above. Keep this section last: each rule has
	the same specificity as the :hover / :focus-visible / .is-active rule it replaces and wins
	by coming later.
=================================== */
.section_full_service_marketing .service_circle.is-sprung .service_item {
	/* the outline stays until the ink covers it */
	border-color: color-mix(in srgb, #9caec0 calc((1 - var(--ink, 0) * var(--inkA, 0)) * 100%), transparent);
	transition: none;
}
.section_full_service_marketing .service_circle.is-sprung .service_item::before {
	clip-path: circle(calc(var(--ink, 0) * 150%) at var(--x, 50%) var(--y, 50%));
	opacity: var(--inkA, 0);
	transition: none;
}
.section_full_service_marketing .service_circle.is-sprung .service_item .service_text {
	display: block;
	height: calc(var(--o, 0) * var(--h, 0px));
	opacity: 1;
	transition: none;
}
.section_full_service_marketing .service_circle.is-sprung .service_item .service_text > * {
	opacity: var(--t, 0);
	transform: translate3d(0, calc((1 - var(--t, 0)) * 8px), 0);
	filter: blur(calc((1 - var(--t, 0)) * 4px));
	transition: none;
}