/* ==========================================================================
   Launch Suit DS pixel details: the twinkle link and the cartwheel cursor.
   Screen only. Behavior lives in pixel.js. Pixel art always uses crisp edges,
   whole-number scaling and steps(), never smooth easing.
   ========================================================================== */

/* ---------- Twinkle ----------
   On any element with .twinkle; used on inline links.
   A steady 2px pixel underline that becomes two rows of 2px cells lighting at
   random once pixel.js runs. The first row sits in the bottom 2px of the line
   box, the second hangs 2px below it, close to the next line on wrapped text.
   Alternatives in docs/twinkle-options.html: one row inside the line
   (--twinkle-rows: 1, bottom: 0), or two rows on a 28px line. The unlit cells
   are transparent, so only the lit orange cells show. Without the script (or
   with reduced motion) the steady line stays, in --faint. */
.twinkle {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(var(--faint), var(--faint));
	background-position: 0 100%;
	background-repeat: repeat-x;
	background-size: 2px 2px;
	text-decoration: none;
}

.twinkling .twinkle {
	background-image: none;
}

.twinkle .twinkle-line {
	position: absolute;
	left: 0;
	bottom: -2px;  /* the first row just under IBM Plex Sans descenders; the second hangs below the box */
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--twinkle-rows, 2), 2px);
	grid-auto-columns: 2px;
	width: 100%;
	height: calc(var(--twinkle-rows, 2) * 2px);
	pointer-events: none;
}

.twinkle .twinkle-line i {
	background-color: transparent;
}

.twinkle .twinkle-line i.lit {
	background-color: var(--accent);
}

/* ---------- Cartwheel cursor ----------
   Over project list rows. A still frame as the CSS cursor, swapped by pixel.js
   for the animated sprite for mouse users who allow motion. The sprite is a
   mask filled with --accent. */
.card-slot {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff4f00' d='M4 1h2v1h-2zM3 3h4v1h-4zM1 4h2v1h-2zM4 4h2v1h-2zM7 4h2v1h-2zM4 5h2v1h-2zM3 6h1v1h-1zM6 6h1v1h-1zM2 7h1v2h-1zM7 7h1v2h-1z'/%3E%3C/svg%3E") 15 15, default;
}

.cartwheeling .card-slot {
	cursor: none;
}

.cartwheel-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	display: none;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	background: var(--accent);
	-webkit-mask: url("assets/cartwheel.svg") 0 0 / 120px 30px no-repeat;
	mask: url("assets/cartwheel.svg") 0 0 / 120px 30px no-repeat;
	pointer-events: none;
	animation: cartwheel 800ms steps(4) infinite;
}

.cartwheeling .cartwheel-cursor {
	display: block;
}

@keyframes cartwheel {
	to {
		-webkit-mask-position: -120px 0;
		mask-position: -120px 0;
	}
}