/* How it works: hand-drawn monoline art. Each step draws on once it is on screen (how.js), then a small loop. */
.how-art { display: block; width: 120px; height: 120px; margin-bottom: var(--s-2); color: var(--ink); overflow: visible; }
.how-art .c { stroke: var(--coral); }
.how__perks { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.how__perks li { display: inline-flex; align-items: center; gap: 0.5rem; }
.how__perks .icon { color: var(--coral); }
.how .step { position: relative; }

@media (prefers-reduced-motion: no-preference) {
	/* Default state is the finished picture. Hidden or dashed states only exist once how.js arms the section. */
	.how .step { --step-d: 0ms; }
	@media (min-width: 900px) {
		/* Side by side: steps rise (main.js reveal), number, art and link line follow 150 ms apart. */
		.how .step:nth-child(2) { --step-d: 150ms; }
		.how .step:nth-child(3) { --step-d: 300ms; }
		.how .step.reveal { transition-delay: var(--step-d); }
	}
	/* Armed and not yet drawing: lines stay undrawn, so nothing flashes complete before the draw starts. */
	.how.is-armed .step:not(.is-drawing) .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
	.how.is-armed .step:not(.is-drawing) .flow { opacity: 0; }
	.how .step.is-drawing .d { stroke-dasharray: 1; animation: how-draw 900ms var(--ease) both; animation-delay: calc(var(--step-d) + 120ms + var(--n, 0) * 90ms); }
	.how .step.is-drawing .flow { animation: how-fade 400ms calc(var(--step-d) + 1000ms) both, how-flow 6s calc(var(--step-d) + 1400ms) linear infinite; }
	.how .step.is-looping .arrow { animation: how-bob 6s ease-in-out infinite; }
	.how .step.is-looping .cursor,
	.how .step.is-looping .knife { animation: how-tap 6s ease-in-out infinite; }

	/* Number: rises in just after its step. */
	.how.is-armed .step__num { opacity: 0; transform: translateY(6px); }
	.how.is-armed .step.is-drawing .step__num { animation: how-num 400ms var(--ease) calc(var(--step-d) + 60ms) forwards; }

	/* Dashed link to the previous step: drawn as a pseudo line (scale only), the static border hides meanwhile. */
	.how.is-armed .step + .step { border-color: transparent; }
	.how.is-armed .step + .step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px dashed var(--ink-soft); transform: scaleX(0); transform-origin: 0 50%; }
	.how.is-armed .step.is-drawing + .step.is-drawing::before { animation: how-line 600ms var(--ease) calc(var(--step-d) + 200ms) forwards; }
	@media (min-width: 900px) {
		.how.is-armed .step + .step::before { right: auto; bottom: 0; border-top: 0; border-left: 1px dashed var(--ink-soft); transform: scaleY(0); transform-origin: 50% 0; }
	}
}
@keyframes how-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes how-fade { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes how-flow { 0% { stroke-dashoffset: 0; } 20%, 100% { stroke-dashoffset: -44; } }
@keyframes how-bob { 0%, 12%, 100% { transform: translateY(0); } 6% { transform: translateY(1px); } }
@keyframes how-tap { 0%, 12%, 100% { transform: translate(0, 0); } 6% { transform: translate(-1px, -1px); } }
@keyframes how-num { to { opacity: 1; transform: none; } }
@keyframes how-line { to { transform: none; } }