/*
	Line drawings (scripts/line-drawings.js): hand-drawn diagrams above the homepage
	sections. One line weight in the section's ink (Derek, 2026-10-29: "the same color as the ink"). Each path draws itself in when
	the drawing scrolls into view, in order (--order); the team drawing's newcomer then
	drops into its empty slot. Without the animating class (reduced motion, no script),
	everything is simply drawn.
*/

.line-drawing {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	margin-bottom: 1.5em;
	overflow: visible;
	fill: none;
	stroke: var(--ink-primary);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;

	.slot {
		stroke-dasharray: 0.02 0.025;
		opacity: 0.6;
	}

	/* The pen's texture on every drawing (templates/components/ink-filter.php, included on
	   each page that has drawings): on the lines, not the highlighter (Derek, 2026-10-29:
	   "can these be drawn like the pencils that the other ones are drawn with?"). */
	> g:not(.markers) {
		filter: url(#ink);
	}
}

/* How PE works (/educators): the big diagram, a heavier line so it holds up at its size. */
.line-drawing:is([data-drawing='how-pe-works'], [data-drawing='how-pe-works-wide'], [data-drawing='how-pe-works-narrow']) {
	max-width: 720px;
	margin-block: 2em;
	stroke-width: 5;

	/* Capped so it doesn't take over the page on a big screen (Derek, 2026-10-29: "a little smaller on max") */
	&[data-drawing='how-pe-works-wide'] {
		max-width: 900px;
	}

	&[data-drawing='how-pe-works-narrow'] {
		max-width: 420px;
	}

	.today rect {
		fill: var(--ink-primary);
		stroke: none;
	}

	/* The cursor covers the lines under it, like a real pointer */
	.cursor path {
		fill: var(--fill-primary);
	}

}

/*
	Highlighter under the lines (scripts/line-drawings.js, highlight()): one color per kind
	of resource, as in the sketch kit (rule 5). Multiplied, so where swipes overlap they go
	darker, like real marker.
*/
.line-drawing .markers {
	stroke-linecap: butt;

	line {
		mix-blend-mode: multiply;
	}

	/* One color per kind: the kind tokens in styles/tokens-viz.css. */
	.key-concepts {
		stroke: var(--viz-kind-key-concept);
	}

	.exercises {
		stroke: var(--viz-kind-exercise);
	}

	.related-resources {
		stroke: var(--viz-kind-related-resource);
	}

	.gems {
		stroke: var(--viz-kind-gem);
	}

	.code-snippets {
		stroke: var(--viz-kind-code);
	}

	.projects {
		stroke: var(--viz-kind-project);
	}

	.people {
		stroke: var(--viz-kind-people);
	}

	.hire {
		stroke: var(--viz-kind-hire);
	}
}

/* A still drawing ([data-still], the how-PE-works sizes) skips all of this and is simply there. */
.line-drawings-animate .line-drawing:not([data-still]) {
	/* Each stroke's delay and duration come from the pen's timing (choreograph() in
	   scripts/line-drawings.js); these are only the fallbacks. */
	path:not(.slot) {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		transition: stroke-dashoffset 900ms ease-in-out calc(var(--order) * 160ms);
	}

	.slot {
		opacity: 0;
		transition: opacity 400ms ease;
	}

	.newcomer {
		transform: translateY(-70px);
		opacity: 0;
		transition: transform 600ms cubic-bezier(0.3, 1.4, 0.6, 1) 1500ms, opacity 200ms ease 1300ms;
	}

	/* Today's workshop slides along the program from the first one */
	.today {
		transform: translateX(var(--travel, -613px));
		opacity: 0;
		transition: transform 1400ms ease 400ms, opacity 300ms ease 400ms;
	}

	/* Once drawn, the classroom cursor keeps wandering around the room, so it reads as live */
	&.is-drawn .cursor {
		animation: how-pe-works-cursor 8s ease-in-out 2500ms infinite;
	}

	&.is-drawn {
		.today {
			transform: translateX(0);
			opacity: 1;
		}

		path:not(.slot) {
			stroke-dashoffset: 0;
		}

		.slot {
			opacity: 0.6;
		}

		.newcomer {
			transform: translateY(0);
			opacity: 1;
		}
	}
}

@keyframes how-pe-works-cursor {
	0%,
	100% {
		transform: translate(0, 0);
	}

	25% {
		transform: translate(-120px, -40px);
	}

	50% {
		transform: translate(-60px, 70px);
	}

	75% {
		transform: translate(40px, -20px);
	}
}