/* ============================================
 * acf/services — block-scoped styles
 *
 * Enqueued via block.json "style": "file:./services.css". Loaded only
 * on pages where the block is used. CSS-only animations (no viewScript).
 *
 * Naming: BEM with `.blk-services` root, `__element` for children,
 * `--modifier` for per-card variants. Tokens come from :root in global.css.
 * ============================================ */

.blk-services {
	padding: var(--section-py) 0;
}

/* Matches the mockup's `.section-head`: capped width, 48px gap below,
 * 16px gap under the h2. Typography is re-declared explicitly because
 * theme.json's `styles.elements.h2.fontWeight: 600` is inlined after
 * global.css's `h2` rule, so the global-css default loses the cascade.
 * Other section heads (why / how) already do this; services has to too
 * for consistency. */
.blk-services__head {
	max-width: 720px;
	margin-bottom: var(--space-2xl);
	/* See why.css for the editor-centering rationale. */
	text-align: left;
}
.blk-services__head h2 {
	font-size: var(--text-h2);
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
	font-weight: var(--weight-regular);
	margin-top: 10px;
	margin-bottom: var(--space-md);
}

.blk-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 900px) { .blk-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blk-services__grid { grid-template-columns: 1fr; } }

.blk-services__card {
	position: relative;
	background: var(--color-bg-elev-1);
	border: none;
	border-radius: var(--radius-sm);
	padding: 28px 28px 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.blk-services__label {
	font-size: 28px;
	font-weight: var(--weight-regular);
	letter-spacing: var(--tracking-snug);
	color: var(--color-fg);
	margin-bottom: 10px;
	line-height: 1.15;
}

.blk-services__card h3 {
	font-size: 20px;
	font-weight: var(--weight-regular);
	letter-spacing: var(--tracking-normal);
	line-height: 1.4;
	margin-bottom: 0;
	color: var(--color-fg-muted);
}

.blk-services__geom {
	flex: 1;
	min-height: 220px;
	margin: 32px 0 8px;
	overflow: hidden;
	display: grid;
	place-items: center;
}
.blk-services__geom svg {
	width: 70%;
	height: auto;
	max-width: 70%;
	aspect-ratio: 1;
}

/* Apply fill-box origin only to plain shape elements; never to <use> or animated cube groups. */
.blk-services__geom svg :is(line, rect, circle, polygon, polyline, path) {
	transform-box: fill-box;
	transform-origin: center;
}

/* ---------- 1) Bars — gray vertical bars filled by white wave (looping) ---------- */
.blk-services__bar-base {
	fill: none;
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1;
	stroke-linecap: round;
}
.blk-services__bar-fill {
	fill: none;
	stroke: rgba(255, 255, 255, 0.95);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-dasharray: 120;
	stroke-dashoffset: 120;
}
.blk-services__bar-fill--1 { animation: blk-services-bar-fill 4.5s ease-in-out  0.0s infinite; }
.blk-services__bar-fill--2 { animation: blk-services-bar-fill 4.5s ease-in-out -0.4s infinite; }
.blk-services__bar-fill--3 { animation: blk-services-bar-fill 4.5s ease-in-out -0.8s infinite; }
.blk-services__bar-fill--4 { animation: blk-services-bar-fill 4.5s ease-in-out -1.2s infinite; }
.blk-services__bar-fill--5 { animation: blk-services-bar-fill 4.5s ease-in-out -1.6s infinite; }
@keyframes blk-services-bar-fill {
	0%   { stroke-dashoffset: 120; }
	45%  { stroke-dashoffset: 0; }
	55%  { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -120; }
}

/* ---------- 2) Iso cube — single tracing line looping the perimeter ---------- */
.blk-services__iso-base line {
	fill: none;
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1;
	stroke-linecap: round;
}
.blk-services__iso-trace {
	fill: none;
	stroke: rgba(255, 255, 255, 0.95);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 90 360;
	stroke-dashoffset: 0;
	animation: blk-services-iso-loop 5s linear infinite;
}
@keyframes blk-services-iso-loop {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -450; }
}

/* ---------- 3) Dash ring — dashed circle, slowly rotating ---------- */
.blk-services__dashring-base {
	fill: none;
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-dasharray: 5 13.8496;
}
.blk-services__dashring-dashes {
	fill: none;
	stroke: rgba(255, 255, 255, 0.95);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-dasharray: 5 13.8496;
	animation: blk-services-dashring-spin 14s linear infinite;
}
@keyframes blk-services-dashring-spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ---------- 4) Star — asterisk drawn by a single continuous filling line ---------- */
.blk-services__star-base line {
	fill: none;
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1;
	stroke-linecap: round;
}
.blk-services__star-trace {
	fill: none;
	stroke: rgba(255, 255, 255, 0.95);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-dasharray: 560;
	stroke-dashoffset: 560;
	animation: blk-services-star-fill 5s ease-in-out infinite;
}
@keyframes blk-services-star-fill {
	0%   { stroke-dashoffset: 560; }
	45%  { stroke-dashoffset: 0; }
	55%  { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -560; }
}

/* ---------- 5) Arrows — 3×3 grid lighting up sequentially ---------- */
.blk-services__arrow-base {
	fill: none;
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.blk-services__arrow-lit {
	fill: none;
	stroke: rgba(255, 255, 255, 0.95);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	animation-duration: 4.5s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(1, end);
}
.blk-services__arrow-lit--1 { animation-name: blk-services-arrow-1; }
.blk-services__arrow-lit--2 { animation-name: blk-services-arrow-2; }
.blk-services__arrow-lit--3 { animation-name: blk-services-arrow-3; }
.blk-services__arrow-lit--4 { animation-name: blk-services-arrow-4; }
.blk-services__arrow-lit--5 { animation-name: blk-services-arrow-5; }
.blk-services__arrow-lit--6 { animation-name: blk-services-arrow-6; }
.blk-services__arrow-lit--7 { animation-name: blk-services-arrow-7; }
.blk-services__arrow-lit--8 { animation-name: blk-services-arrow-8; }
.blk-services__arrow-lit--9 { animation-name: blk-services-arrow-9; }
@keyframes blk-services-arrow-1 { 0%,4%  { opacity: 0; } 5%,95%  { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes blk-services-arrow-2 { 0%,14% { opacity: 0; } 15%,95% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes blk-services-arrow-3 { 0%,24% { opacity: 0; } 25%,95% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes blk-services-arrow-4 { 0%,34% { opacity: 0; } 35%,95% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes blk-services-arrow-5 { 0%,44% { opacity: 0; } 45%,95% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes blk-services-arrow-6 { 0%,54% { opacity: 0; } 55%,95% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes blk-services-arrow-7 { 0%,64% { opacity: 0; } 65%,95% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes blk-services-arrow-8 { 0%,74% { opacity: 0; } 75%,95% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes blk-services-arrow-9 { 0%,84% { opacity: 0; } 85%,95% { opacity: 1; } 96%,100% { opacity: 0; } }

/* ---------- 6) Snake — serpentine path with continuous filling loop ---------- */
.blk-services__snake-base {
	fill: none;
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.blk-services__snake-trace {
	fill: none;
	stroke: rgba(255, 255, 255, 0.95);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 70 234;
	stroke-dashoffset: 0;
	animation: blk-services-snake-flow 5s linear infinite;
}
@keyframes blk-services-snake-flow {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -304; }
}

@media (prefers-reduced-motion: reduce) {
	.blk-services__geom svg,
	.blk-services__geom svg * { animation: none !important; }
}