/**
 * core/group – "Glow card" style (call to action card):
 * - a light beam runs around the border (rotating conic gradient, border-box);
 * - a soft accent light drifts behind the content (::before);
 * - a second light drifts slowly across the card (::after);
 * - a fine grain texture sits over the lights.
 * Reduced motion keeps everything still (global.css).
 */
@property --rowww-beam-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@property --rowww-spot-x {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 70%;
}

@property --rowww-spot-y {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 30%;
}

.wp-block-group.is-style-glow {
	--rowww-card-bg: var(--wp--preset--color--base);
	--rowww-card-line: var(--wp--custom--line--subtle);
	--rowww-beam-head: var(--wp--preset--color--contrast);
	--rowww-light-opacity: 0.45;
	--rowww-spot-strength: 38%;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1.5px solid transparent;
	background:
		linear-gradient(var(--rowww-card-bg), var(--rowww-card-bg)) padding-box,
		conic-gradient(from var(--rowww-beam-angle), transparent 0deg 210deg, var(--rowww-accent-start) 280deg, var(--rowww-accent-text-end) 325deg, var(--rowww-beam-head) 350deg, transparent 360deg) border-box,
		linear-gradient(var(--rowww-card-line), var(--rowww-card-line)) border-box;
	animation: rowww-beam 6s linear infinite;
}

/* Drifting base light. */
.wp-block-group.is-style-glow::before {
	content: "";
	position: absolute;
	z-index: -2;
	top: -45%;
	left: 20%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle closest-side, var(--rowww-accent-start), transparent);
	opacity: var(--rowww-light-opacity);
	filter: blur(60px);
	animation: rowww-glow-a 7s ease-in-out infinite alternate;
	pointer-events: none;
	will-change: transform;
}

/* Drifting light + grain. */
.wp-block-group.is-style-glow::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		var(--rowww-grain),
		radial-gradient(circle 24rem at var(--rowww-spot-x) var(--rowww-spot-y), color-mix(in srgb, var(--rowww-accent-end) var(--rowww-spot-strength), transparent), transparent 70%);
	animation: rowww-spot-drift 9s ease-in-out infinite alternate;
	pointer-events: none;
}

/*
 * Phones: the beam and the lights keep moving (the card is one of the few
 * things that move there, see global.css), but the base light has no 60px
 * blur, only its softened gradient, which a phone moves without strain.
 */
@media (max-width: 781px) {

	.wp-block-group.is-style-glow::before {
		filter: none;
		opacity: calc(var(--rowww-light-opacity) * 0.6);
	}
}

@keyframes rowww-beam {

	to {
		--rowww-beam-angle: 360deg;
	}
}

@keyframes rowww-spot-drift {

	0% {
		--rowww-spot-x: 25%;
		--rowww-spot-y: 20%;
	}

	50% {
		--rowww-spot-x: 75%;
		--rowww-spot-y: 35%;
	}

	100% {
		--rowww-spot-x: 55%;
		--rowww-spot-y: 85%;
	}
}

@keyframes rowww-glow-a {

	0% {
		transform: translate(0, 0) scale(1);
	}

	50% {
		transform: translate(-45%, 25%) scale(1.3);
	}

	100% {
		transform: translate(30%, 10%) scale(0.85);
	}
}

/*
 * "Card (accent)" style: a frosted glass panel tinted with the current accent.
 * - a translucent surface with backdrop blur, so section lights show through;
 * - a hairline gradient edge, brightest at the top left (::before, a ring);
 * - a soft, blurred accent light in the top corner (::after);
 * - on hover (or focus inside) the card lifts a little, the light grows and
 *   drifts across, the edge brightens and the icon tilts.
 * Text stays on the dark page tones (contrast heading, muted body), so every
 * accent reads at 4.5:1 or more. In `rowww-light` the same tokens turn light.
 * The home page "what you get" cards (`rowww-pillar`, layout.css) share it.
 * The plugin's service cards use the same recipe (shared/_glass-card.scss).
 */
.wp-block-group:is(.is-style-card-accent, .rowww-pillar) {
	--rowww-card-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rowww-card-edge: color-mix(in srgb, var(--rowww-accent-text-start) 70%, transparent);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		var(--rowww-grain),
		linear-gradient(160deg, color-mix(in srgb, var(--rowww-accent-start) 16%, transparent), transparent 65%),
		color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	-webkit-backdrop-filter: blur(24px) saturate(140%);
	backdrop-filter: blur(24px) saturate(140%);
	transition:
		transform 500ms var(--rowww-card-ease),
		box-shadow 500ms var(--rowww-card-ease);
}

/* Gradient edge: a 1px ring cut out of a gradient with a mask. */
.wp-block-group:is(.is-style-card-accent, .rowww-pillar)::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(150deg, var(--rowww-card-edge), var(--wp--custom--line--subtle) 45%, var(--wp--custom--line--subtle) 75%, color-mix(in srgb, var(--rowww-accent-end) 30%, transparent));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	transition: opacity 400ms ease;
	pointer-events: none;
}

/* Soft accent light behind the content. */
.wp-block-group:is(.is-style-card-accent, .rowww-pillar)::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -55%;
	left: -25%;
	width: 85%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle closest-side, color-mix(in srgb, var(--rowww-accent-end) 55%, transparent), color-mix(in srgb, var(--rowww-accent-start) 30%, transparent) 55%, transparent);
	opacity: 0.7;
	filter: blur(48px);
	transition:
		transform 900ms var(--rowww-card-ease),
		opacity 600ms ease;
	pointer-events: none;
}

.wp-block-group:is(.is-style-card-accent, .rowww-pillar):is(:hover, :focus-within) {
	--rowww-card-edge: var(--rowww-accent-text-start);

	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent),
		0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--rowww-accent-start) 60%, transparent);
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-group:is(.is-style-card-accent, .rowww-pillar):is(:hover, :focus-within) {
		transform: translateY(-4px);
	}
}

.wp-block-group:is(.is-style-card-accent, .rowww-pillar):is(:hover, :focus-within)::after {
	opacity: 1;
	transform: translate(30%, 18%) scale(1.25);
}

/* Body text a step quieter than the heading. */
.wp-block-group.is-style-card-accent > p:not(.has-text-color, [class*="is-style-"]) {
	color: var(--wp--preset--color--muted);
}

/* Without backdrop blur the panel stays readable: a solid dark base. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.wp-block-group:is(.is-style-card-accent, .rowww-pillar) {
		background-color: var(--wp--preset--color--base);
	}
}

/*
 * Phones: no live blur and no blurred light on the glass cards. Each is an
 * extra card-sized layer for the GPU, and a page full of them made mobile
 * browsers stutter (mobile Safari could even reload the page). The solid
 * page colour under the tint stands in for the glass, as without support.
 */
@media (max-width: 781px) {

	.wp-block-group:is(.is-style-card-accent, .rowww-pillar) {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: var(--wp--preset--color--base);
	}

	.wp-block-group:is(.is-style-card-accent, .rowww-pillar)::after {
		filter: none;
		opacity: 0.4;
	}
}

@media (forced-colors: active) {

	.wp-block-group:is(.is-style-card-accent, .rowww-pillar) {
		border: 1px solid CanvasText;
	}

	.wp-block-group:is(.is-style-card-accent, .rowww-pillar)::before,
	.wp-block-group:is(.is-style-card-accent, .rowww-pillar)::after {
		display: none;
	}
}

/*
 * "Numbered step" style: a clean card on the page background with a thin
 * edge; a small accent number (01, 02, …) opens it. Numbering follows the
 * order of the cards, so they can be moved freely.
 */
:where(*:has(> .wp-block-group.is-style-step-card)) {
	counter-reset: rowww-step-card;
}

.wp-block-group.is-style-step-card {
	position: relative;
	border: 1px solid var(--wp--custom--line--subtle);
	background: var(--wp--preset--color--base);
	counter-increment: rowww-step-card;
}

.wp-block-group.is-style-step-card::before {
	content: counter(rowww-step-card, decimal-leading-zero);
	display: block;
	margin-block-end: var(--wp--preset--spacing--40);
	background: linear-gradient(90deg, var(--rowww-accent-text-start), var(--rowww-accent-text-end));
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--rowww-accent-text-start);
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	-webkit-text-fill-color: transparent;
}

/* The eyebrow inside a step: the accent phrase, between body and md size. */
.wp-block-group.is-style-step-card .is-style-eyebrow {
	font-size: calc((var(--wp--preset--font-size--base) + var(--wp--preset--font-size--md)) / 2);
}

/*
 * In a step card one hairline separates the heading part (title and accent
 * phrase) from the description (not in the plain steps, which have no card).
 */
:not(.rowww-steps-plain) > .wp-block-group.is-style-step-card > .is-style-eyebrow + p {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--custom--line--subtle);
}

@media (forced-colors: active) {

	.wp-block-group.is-style-step-card::before {
		background: none;
		-webkit-text-fill-color: currentcolor;
	}
}

/*
 * A plain icon (no label) in an accent card sits on a small glass tile with
 * an accent glow; it tilts when the card is hovered.
 */
.wp-block-group:is(.is-style-card-accent, .rowww-pillar) > .wp-block-rowww-icon:not(.has-label) {
	justify-content: center;
	width: calc(var(--rowww-icon-size) + 1.25rem);
	aspect-ratio: 1;
	border: 1px solid color-mix(in srgb, var(--rowww-accent-text-start) 35%, transparent);
	border-radius: var(--wp--preset--border-radius--sm);
	background: linear-gradient(150deg, color-mix(in srgb, var(--rowww-accent-start) 30%, transparent), color-mix(in srgb, var(--rowww-accent-end) 8%, transparent));
	box-shadow: 0 0.5rem 1.5rem -0.75rem color-mix(in srgb, var(--rowww-accent-start) 80%, transparent);
	color: var(--rowww-accent-text-start);
}

.wp-block-group:is(.is-style-card-accent, .rowww-pillar) > .wp-block-rowww-icon:not(.has-label) svg {
	width: calc(var(--rowww-icon-size) * 0.8);
	transition: transform 500ms var(--rowww-card-ease);
}

.wp-block-group:is(.is-style-card-accent, .rowww-pillar):is(:hover, :focus-within) > .wp-block-rowww-icon svg {
	transform: scale(1.1) rotate(-8deg);
}

/**
 * core/group – "Card (accent outline)": dark card with a thin edge in the
 * current accent (e.g. "what you get" box on a service page). The border is
 * set here because theme.json cannot read the accent variables.
 */
.wp-block-group.is-style-card-accent-outline {
	border: 1px solid var(--rowww-accent-start);
	background-color: var(--wp--preset--color--base);
}

/*
 * Plain steps (`rowww-steps-plain` on the grid): no card, only a thin rule
 * above each step, for a second row of steps on the same page.
 */
.rowww-steps-plain.rowww-steps-plain > .wp-block-group.is-style-step-card {
	padding-inline: 0;
	padding-block-end: 0;
	border-width: 1px 0 0;
	border-radius: 0;
	background: none;
}

/*
 * Four step cards always sit side by side from 1024px (the grid would
 * otherwise wrap one card to a new row on narrower desktops).
 */
@media (min-width: 1024px) {

	.rowww-steps-flow:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Step cards as a flow (`rowww-steps-flow` on the grid that holds them):
 * while the row scrolls into view the cards fade in one after the other.
 * Scroll-driven CSS only; with reduced motion or without support everything
 * is static.
 */
@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) and (min-width: 782px) {

		.rowww-steps-flow {
			view-timeline: --rowww-steps block;
		}

		.rowww-steps-flow > .is-style-step-card {
			animation: rowww-steps-card linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 80%;
		}

		@media (min-width: 1024px) {

			/* In a row: one after the other, from left to right. */
			.rowww-steps-flow > .is-style-step-card {
				animation-timeline: --rowww-steps;
				animation-range: cover 15% cover 30%;
			}

			.rowww-steps-flow > .is-style-step-card:nth-child(2) {
				animation-range: cover 20% cover 35%;
			}

			.rowww-steps-flow > .is-style-step-card:nth-child(3) {
				animation-range: cover 25% cover 40%;
			}

			.rowww-steps-flow > .is-style-step-card:nth-child(4) {
				animation-range: cover 30% cover 45%;
			}
		}
	}
}

@keyframes rowww-steps-card {

	from {
		opacity: 0.25;
		transform: translateY(1rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}