/* Homepage projects: the four cards sit in a 2 x 2 grid, and circuits branch out from each card's outer
   edge into the space either side, ending in chips that say something the card doesn't. On wide
   screens the cards keep the size they'd have three across, centred, which leaves that space;
   circuits.js places the chips and draws the traces from the live layout, and only when there's room.
   Narrower screens get the plain grid (full width, then site.css's own layouts below 900px). */

@media (min-width: 901px) {
	.projects--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.projects--four { grid-template-columns: repeat(2, calc((100% - 2.5rem) / 3)); justify-content: center; }
}

.projects-section { position: relative; overflow-x: clip; }

.circuit-board { display: none; position: absolute; inset: 0; pointer-events: none; }
.circuit-board.is-on { display: block; }

.circuit-group { position: absolute; }
.circuit-group__label {
	margin-bottom: 0.55rem;
	font: 400 0.68rem/1 var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--text-faint);
}
.circuit-group[data-side="left"] .circuit-group__label { text-align: right; }
.circuit-group ul { display: grid; gap: 0.5rem; }

.circuit__chip {
	display: grid;
	gap: 0.05rem;
	padding: 0.45rem 0.7rem;
	border: 1px solid rgba(var(--accent-rgb), 0.28);
	border-radius: 8px;
	background: var(--bg-card);
	pointer-events: auto;
	transition: border-color 0.25s, box-shadow 0.25s;
}
.circuit__chip.is-lit {
	border-color: rgba(var(--accent-rgb), 0.75);
	box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.14);
}
.circuit__name { font: 500 0.75rem/1.3 var(--mono); color: var(--accent); overflow-wrap: anywhere; }
.circuit__detail { font-size: 0.75rem; line-height: 1.35; color: var(--text-muted); }
/* Narrow sides: smaller chips so the longest names still fit. */
.circuit-board.is-compact .circuit__chip { padding: 0.4rem 0.55rem; }
.circuit-board.is-compact .circuit__name { font-size: 0.68rem; }
.circuit-board.is-compact .circuit__detail { font-size: 0.7rem; }

/* Traces. pathLength="1" on each path makes dash lengths fractions of the path, whatever its size. */
.circuit-board__traces { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.trace {
	fill: none;
	stroke: rgba(var(--accent-rgb), 0.28);
	stroke-width: 1.5;
	stroke-linejoin: round;
	transition: stroke-dashoffset 1.1s ease, stroke 0.25s;
}
.trace.is-lit { stroke: rgba(var(--accent-rgb), 0.8); }
.trace-pulse {
	fill: none;
	stroke: var(--accent);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-dasharray: 0.07 1;
	stroke-dashoffset: 1.07;
	filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), 0.9));
	animation: current 3.4s linear infinite;  /* circuits.js sizes and times each pulse from its length */
}
.trace-pad { fill: var(--bg); stroke: rgba(var(--accent-rgb), 0.7); stroke-width: 1.5; }
@keyframes current { to { stroke-dashoffset: 0; } }  /* from the dashoffset set on each pulse */

/* As each card scrolls in, its traces draw out from the card, then the pads, current and chips appear. */
.reveal-ready .circuit-board .trace { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal-ready .circuit-board .is-visible .trace { stroke-dashoffset: 0; }
.reveal-ready .circuit-board .trace-pulse,
.reveal-ready .circuit-board .trace-pad { opacity: 0; transition: opacity 0.4s ease 1.1s; }
.reveal-ready .circuit-board .is-visible .trace-pulse,
.reveal-ready .circuit-board .is-visible .trace-pad { opacity: 1; }
.reveal-ready .circuit-group .circuit-group__label,
.reveal-ready .circuit-group .circuit__chip {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.25s, box-shadow 0.25s;
}
.reveal-ready .circuit-group.is-visible .circuit-group__label,
.reveal-ready .circuit-group.is-visible .circuit__chip { opacity: 1; transform: none; }
.reveal-ready .circuit-group.is-visible .circuit-group__label { transition-delay: 0.5s; }
.reveal-ready .circuit-group.is-visible .circuit__chip:nth-child(1) { transition-delay: 0.6s, 0.6s, 0s, 0s; }
.reveal-ready .circuit-group.is-visible .circuit__chip:nth-child(2) { transition-delay: 0.7s, 0.7s, 0s, 0s; }
.reveal-ready .circuit-group.is-visible .circuit__chip:nth-child(3) { transition-delay: 0.8s, 0.8s, 0s, 0s; }
.reveal-ready .circuit-group.is-visible .circuit__chip:nth-child(4) { transition-delay: 0.9s, 0.9s, 0s, 0s; }
.reveal-ready .circuit-group.is-visible .circuit__chip:nth-child(5) { transition-delay: 1s, 1s, 0s, 0s; }
.reveal-ready .circuit-group.is-visible .circuit__chip:nth-child(6) { transition-delay: 1.1s, 1.1s, 0s, 0s; }

@media (prefers-reduced-motion: reduce) {
	.trace-pulse { display: none; }
}

/* Terminal: a fast-forward button on the right of the title bar, there while the intro types.
   Negative block margins keep the bar the same height as before the script adds it. */
.terminal__skip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: -0.2rem 0 -0.2rem auto;
	padding: 0.1rem 0.55rem;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--text-muted);
	font: 400 0.7rem/1.4 var(--mono);
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, opacity 0.3s, visibility 0s;
}
.terminal__skip svg { width: 0.8rem; height: 0.8rem; fill: currentColor; }
.terminal__skip:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); }
.terminal__skip.is-gone { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }