img[data-svg-draw] {
	opacity: 0;
}

img[data-svg-draw].svg-draw-fallback {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	img[data-svg-draw] {
		opacity: 1;
	}
}

.svg-draw {
	display: block;
	width: 100%;
	height: auto;
}

.svg-draw__stroke {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: svg-draw-stroke 4.2s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--i, 0) * 270ms);
}

.svg-draw__fill {
	opacity: 0;
	animation: svg-draw-fill 2.1s ease-out both;
	animation-delay: calc(var(--i, 0) * 270ms + 1.68s);
}

@keyframes svg-draw-stroke {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes svg-draw-fill {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.svg-draw__stroke,
	.svg-draw__fill {
		animation: none !important;
		opacity: 1;
		stroke-dashoffset: 0;
	}
}