/* Services hub drawings, second set (S15 update): SaaS, themes, design, AI video, AI solutions, consulting.
   Same stroke language as ui-services-art.css; animations come from its keyframes; complete under reduced motion
   (the shared `.rm .art *` rule stops every animation, `.rm .pk` hides the moving dots). */

.sas .ed,
.aig .fd,
.cog .rt,
.dsg .cv {
	fill: none;
	stroke: var(--pt);
	stroke-width: 1.6;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	animation: svc-draw 1.6s var(--ease-io) both;
	animation-delay: calc(var(--k, 0) * 180ms + 400ms);
}

.art .ui {
	fill: none;
	stroke: var(--ln-s);
	stroke-width: 2;
	stroke-linecap: square;
}

.art .dot {
	fill: var(--pt);
}

@keyframes svc-pulse {
	0%,
	100% {
		opacity: 0.3;
	}

	20%,
	45% {
		opacity: 1;
	}
}

@keyframes svc-tone {
	0%,
	100% {
		fill: var(--pt);
	}

	33% {
		fill: var(--gold-300);
	}

	66% {
		fill: var(--blue-500);
	}
}

@keyframes svc-play {
	from {
		transform: translateX(-200px);
	}

	to {
		transform: translateX(200px);
	}
}

/* saas: one core, separate accounts */
.sas .bx rect,
.sas .core rect {
	fill: var(--ink-800);
	stroke: var(--pt);
	stroke-width: 1.4;
}

.sas .core rect {
	stroke: var(--gold-300);
}

.sas .bx {
	animation: svc-in 0.8s var(--ease) both;
	animation-delay: calc(var(--k) * 140ms + 150ms);
}

.sas .bx .dot {
	animation: svc-pulse 4s linear infinite;
	animation-delay: calc(var(--k) * 1s);
}

.scard:hover .sas .bx rect {
	fill: var(--pa);
}

/* themes: a palette applied to a page and a phone */
.thg .frm {
	fill: var(--ink-800);
	stroke: var(--pt);
	stroke-width: 1.4;
}

.thg .tn {
	fill: var(--pt);
	animation: svc-tone 6s linear infinite;
	animation-delay: calc(var(--k) * -1.5s);
}

.thg .sw {
	stroke: var(--white);
	stroke-width: 1.4;
	animation: svc-pulse 4s linear infinite;
	animation-delay: calc(var(--k) * 1s);
}

.thg .p0 {
	fill: var(--pt);
}

.thg .p1 {
	fill: var(--gold-300);
}

.thg .p2 {
	fill: var(--blue-500);
}

.thg .p3 {
	fill: var(--white);
}

/* design: a bezier curve on a grid */
.dsg .gr path {
	stroke: var(--ln);
	stroke-dasharray: 2 6;
}

.dsg .ab {
	fill: color-mix(in srgb, var(--pa) 16%, transparent);
	stroke: var(--pt);
	stroke-width: 1.4;
}

.dsg .hd {
	fill: none;
	stroke: var(--ln-s);
	stroke-width: 1.2;
}

.dsg .hh {
	fill: var(--ink-800);
	stroke: var(--pt);
	stroke-width: 1.4;
}

.dsg .an {
	fill: var(--ink-800);
	stroke: var(--gold-300);
	stroke-width: 1.8;
	animation: svc-pulse 4.5s linear infinite;
	animation-delay: calc(var(--k) * 1.2s);
}

.dsg .swt {
	fill: var(--pa);
	stroke: var(--white);
	stroke-width: 1.5;
}

.dsg .pk,
.cog .pk {
	fill: var(--gold-300);
}

/* ai video: a playhead crossing the film strip */
.avg .strip {
	fill: var(--ink-800);
	stroke: var(--pt);
	stroke-width: 1.4;
}

.avg .hole {
	fill: var(--ink-950);
	stroke: var(--ln-s);
}

.avg .frame {
	fill: color-mix(in srgb, var(--pa) 14%, transparent);
	stroke: var(--ln-s);
	animation: svc-pulse 4s linear infinite;
	animation-delay: calc(var(--k) * 1s);
}

.avg .fi {
	fill: none;
	stroke: var(--pt);
	stroke-width: 1.6;
}

.avg .play {
	animation: svc-play 4s linear infinite alternate;
}

.avg .play path {
	stroke: var(--gold-300);
	stroke-width: 2;
}

.avg .play .tip {
	fill: var(--gold-300);
}

.avg .cl {
	fill: var(--ln-s);
}

.avg .cl.hi {
	fill: var(--pt);
}

/* ai solutions: bubbles feed a loop, a person can step in */
.aig .bb rect {
	fill: var(--ink-800);
	stroke: var(--pt);
	stroke-width: 1.4;
}

.aig .bb.me rect {
	stroke: var(--gold-300);
}

.aig .bb {
	animation: svc-in 0.8s var(--ease) both;
	animation-delay: calc(var(--k) * 160ms + 150ms);
}

.aig .ring {
	fill: none;
	stroke: var(--ln-s);
	stroke-dasharray: 4 8;
	transform-box: fill-box;
	transform-origin: center;
	animation: svc-spin 40s linear infinite;
}

.aig .stp {
	fill: var(--ink-800);
	stroke: var(--pt);
	stroke-width: 1.6;
	animation: svc-pulse 4s linear infinite;
	animation-delay: calc(var(--k) * 1s);
}

.aig .man circle,
.aig .man path {
	fill: none;
	stroke: var(--gold-300);
	stroke-width: 2;
}

/* consulting: a route with two forks, one marked choice */
.cog .alt {
	fill: none;
	stroke: var(--ln-s);
	stroke-width: 1.6;
	stroke-dasharray: 4 6;
}

.cog .st,
.cog .fk {
	fill: var(--ink-800);
	stroke: var(--pt);
	stroke-width: 1.8;
}

.cog .no {
	fill: var(--ink-800);
	stroke: var(--ln-s);
	stroke-width: 1.4;
}

.cog .mk {
	fill: color-mix(in srgb, var(--gold-300) 14%, transparent);
	stroke: var(--gold-300);
	stroke-width: 2;
	transform-box: fill-box;
	transform-origin: center;
	animation: svc-mark 3s var(--ease-io) infinite;
}

@keyframes svc-mark {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.18);
	}
}

.cog .ck {
	fill: none;
	stroke: var(--gold-300);
	stroke-width: 3;
	stroke-linecap: square;
	stroke-dasharray: 1;
	animation: svc-chk 3s var(--ease-io) infinite;
}