/* ==========================================================================
   Numo reveal — the page colours itself in
   ==========================================================================
   The plate starts as dark linework on warm white, exactly as it appears in
   the book, and the colour washes in shape by shape. It is not decoration:
   it is the gesture the child is about to make, and the same motion used in
   the brand's videos.

   Each path carries pathLength="1", so the outline length is normalised and
   the drawing animation needs no JavaScript. Replacement artwork animates
   correctly the moment it is pasted in, provided the ids are kept.
   ========================================================================== */

.numo-reveal {
	width: min(100%, 18rem);
	height: auto;
	margin-inline: auto;
	overflow: visible;
}

.numo-reveal path {
	--fill: transparent;

	fill: transparent;
	stroke: var(--numo-ink);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation:
		numo-draw var(--reveal-draw) var(--ease-soft) forwards,
		numo-fill var(--reveal-fill) var(--ease-soft) forwards;
	animation-delay:
		calc(var(--i) * var(--reveal-stagger)),
		calc(var(--reveal-draw) + (var(--i) * var(--reveal-stagger)));
}

/* Antennae and mouth are strokes, not shapes: they draw but never fill. */
.numo-reveal__line {
	--fill: transparent;
}

#numo-ground { --fill: var(--numo-sky); }

#numo-body,
#numo-ear-left,
#numo-ear-right { --fill: var(--numo-tan); }

#numo-dot-left,
#numo-dot-right,
#numo-spot-1,
#numo-spot-2,
#numo-spot-3 { --fill: var(--numo-rose); }

#numo-eye-left,
#numo-eye-right { --fill: var(--numo-ink); }

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

@keyframes numo-fill {
	from { fill: transparent; }
	to { fill: var(--fill); }
}

/*
 * Reduced motion: the page is simply already coloured. Stated explicitly
 * rather than relying on the global duration override, so the end state is
 * guaranteed rather than merely arrived at very quickly.
 */
@media (prefers-reduced-motion: reduce) {
	.numo-reveal path {
		animation: none;
		stroke-dashoffset: 0;
		fill: var(--fill);
	}
}