/**
 * crypto-blocks.css — the blocks-building animation (crypto pages, Network
 * section). Linked tiles on the cream ground: hairline borders, mono
 * numerals, the signature orange reserved for the newest block's halftone
 * wash and the awaiting-cue dot. Every visual reads from real block data —
 * the only fiction here is motion, and reduced-motion removes even that.
 */

.td-blocks {
	margin: 2px 0 14px;
}

/* --- The strip: newest block left, the chain receding right ---------- */
.td-blocks-strip {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 4px 2px 8px;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.td-blocks-tile {
	position: relative;
	flex: 0 0 auto;
	min-width: 92px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px 9px;
	border: 1px solid var(--td-hair, rgba(28, 25, 23, 0.12));
	border-top-width: 2px;
	background: var(--td-cream, #F4F1EA);
	font-family: var(--td-mono, "Geist Mono", ui-monospace, monospace);
}

/* The link back to the parent block: a short hairline between tiles. */
.td-blocks-tile + .td-blocks-tile {
	margin-left: 18px;
}
.td-blocks-tile + .td-blocks-tile::before {
	content: "";
	position: absolute;
	left: -19px;
	top: 50%;
	width: 20px;
	height: 1px;
	background: var(--td-hair, rgba(28, 25, 23, 0.12));
}

/* Newest block: accent top rule + a quiet orange halftone wash. */
.td-blocks-tile.is-newest {
	border-top-color: var(--td-accent, #BE531B);
	background-image: radial-gradient(rgba(190, 83, 27, 0.30) 0.5px, transparent 0.6px);
	background-size: 4px 4px;
}

.td-blocks-tile:focus-visible {
	outline: 2px solid var(--td-accent-text, #A8480F);
	outline-offset: 2px;
}

.td-blocks-h {
	font-size: 13px;
	color: var(--td-ink, #1A1A1B);
	white-space: nowrap;
}
.td-blocks-tx {
	font-size: 10px;
	color: var(--td-ink-2, #5C5C5A);
	white-space: nowrap;
}
.td-blocks-age {
	font-size: 9px;
	letter-spacing: 0.05em;
	color: var(--td-ink-3, #6E6A62);
	white-space: nowrap;
}

/* --- Arrival: the newest tile slides in from the head of the chain --- */
@keyframes td-blocks-in {
	from {
		opacity: 0;
		transform: translateX(-16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.td-blocks-tile.is-in {
	animation: td-blocks-in 420ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* --- Awaiting cue (slow chains): cosmetic pulse, real average gap ----- */
.td-blocks-await {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 10px 0 0;
	font-family: var(--td-mono, "Geist Mono", ui-monospace, monospace);
	font-size: 10px;
	letter-spacing: 0.05em;
	color: var(--td-ink-3, #6E6A62);
}
@keyframes td-blocks-pulse {
	0%,
	100% {
		opacity: 0.25;
	}
	50% {
		opacity: 1;
	}
}
.td-blocks-await-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--td-accent, #BE531B);
	animation: td-blocks-pulse 2.4s ease-in-out infinite;
}

.td-blocks-note {
	margin: 8px 0 0;
	font-family: var(--td-mono, "Geist Mono", ui-monospace, monospace);
	font-size: 9.5px;
	letter-spacing: 0.04em;
	color: var(--td-ink-3, #6E6A62);
}

/* --- Reduced motion: instant updates, no pulse ------------------------ */
@media (prefers-reduced-motion: reduce) {
	.td-blocks-tile.is-in {
		animation: none;
	}
	.td-blocks-await-dot {
		animation: none;
		opacity: 0.6;
	}
}