@reference "../../../../app.css";

/*
 * Bring your own box: steps + a machine (SelfHost.svelte), and the shading of the
 * machines (electronics/): the cartridge console, the floppy computer and the Raspberry Pi.
 */
.landing {
	.sh {
		padding-block: var(--section-y) 96px;

		@media (width >= 64rem) {
			padding-block: var(--section-y);
		}
	}

	/* Flush left below desktop, as the other headings are. On desktop, centred on the page,
	   not on the rail container's content: the rail lane on its start pushes the content's
	   centre right of the page's by half the difference of the two insets. */
	@media (width >= 64rem) {
		.sh-head {
			text-align: center;
			translate: calc((var(--rail-end) - var(--rail-lane)) / 2) 0;
		}
		/* The aside on its own line on desktop only; narrower, it runs on after the title. */
		.sh-head .gh :where(.solid, .dim) {
			display: block;
		}
	}
	.sh-homelab {
		position: relative;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		letter-spacing: inherit;
		color: inherit;
		cursor: pointer;
	}
	.sh-homelab:focus-visible {
		border-radius: 4px;
	}
	.sh-letter {
		position: relative;
		display: inline-block;
	}
	.sh-letter::before {
		content: attr(data-letter);
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(90deg, transparent 40%, var(--text) 50%, transparent 60%) no-repeat;
		background-size: calc(4 * var(--w)) 100%;
		background-clip: text;
		color: transparent;
		animation: sh-shimmer 2s linear infinite;
	}
	@media (hover: hover) {
		.sh-homelab:hover {
			color: color-mix(in oklab, currentColor, var(--text) 50%);
		}
	}
	.sh-homelab {
		transition:
			color 0.2s ease,
			scale 0.15s var(--ease-out-strong);
	}
	@media (prefers-reduced-motion: no-preference) {
		.sh-homelab:active {
			scale: 0.94;
		}
		.sh-homelab[data-hop] .sh-letter {
			animation: sh-hop 0.8s ease-out calc(var(--i) * 30ms);
		}
	}
	@media (prefers-reduced-motion: reduce) {
		.sh-letter::before {
			animation: none;
		}
	}

	/* Stacked on mobile. From tablet, copy and device side by side: halves on tablet, then
	   the features' columns on desktop (copy on the 395px column, the device in the rest). */
	.sh-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		margin-top: 40px;

		@media (width >= 48rem) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			align-items: center;
			gap: 32px;
			margin-top: 38px;
		}
		@media (width >= 64rem) {
			grid-template-columns: minmax(0, 395px) minmax(0, 1fr);
			gap: 0;
		}
	}

	.sh-steps {
		display: flex;
		flex-direction: column;
		gap: 32px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.sh-step {
		display: flex;
		gap: 14px;
		align-items: flex-start;
		max-width: 351px;
	}
	/* The number chip: the surface in a hairline, with its ring on dark. */
	.sh-n {
		display: grid;
		flex: none;
		place-items: center;
		width: 22px;
		height: 22px;
		padding: 0;
		border: 1px solid var(--line);
		border-radius: 100px;
		background: var(--color-background-muted);
		box-shadow: var(--pill-shadow);
		font-size: 11px;
		line-height: 1.6;
		letter-spacing: -0.01em;
		color: var(--text);
	}
	/* The numeral is trimmed to its cap height and centred, not the line box. */
	.sh-n span {
		display: block;
		text-box: trim-both cap alphabetic;
	}
	/* Trimmed, so the first line's caps sit 4px under the chip's top. */
	.sh-t {
		padding-top: 4px;
		text-box: trim-both cap alphabetic;
		font-size: var(--text-body);
		font-weight: 480;
		line-height: 1.4;
		letter-spacing: -0.01em;
		color: var(--muted);
	}
	/* "knots", "spindles": plain underlined links. */
	.sh-em {
		color: var(--text);
		white-space: nowrap;
		text-decoration: underline;
		text-decoration-color: var(--color-border-strong);
		text-underline-offset: 4px;
		transition: text-decoration-color 0.15s ease;
	}
	.sh-em:hover {
		text-decoration-color: var(--text);
	}

	/* ---- the machine, rising in once picked ---- */
	.sh-stage {
		position: relative;
		justify-self: center;
		width: min(465px, 100%);
		aspect-ratio: 1;
	}
	.sh-vis {
		position: absolute;
		inset: 0;
		animation: d-in 0.4s var(--ease-out) 0.1s both;
	}

	/* ---- the machines (electronics/) ----
	   Opaque plates, hairline strokes, lit from above: the tops are the lightest face, so
	   they read first. */
	.sh-art {
		--sh-accent-side: color-mix(in srgb, var(--color-drawing-accent), black 8%);
		--sh-top: var(--color-background-inset);
		--sh-side: var(--color-background-default);
		--sh-glint: rgb(255 255 255 / 29%);
		--sh-sheen: rgb(255 255 255 / 5%);

		@variant light {
			--sh-top: var(--hl-plate);
			--sh-side: var(--hl-side);
			--sh-glint: rgb(255 255 255 / 42%);
			--sh-sheen: rgb(255 255 255 / 34%);
		}
	}
	.sh-art path {
		vector-effect: non-scaling-stroke;
	}
	.sh-line {
		stroke: var(--hl-edge);
	}
	.sh-top {
		fill: var(--sh-top);
	}
	.sh-side,
	.sh-hole {
		fill: var(--sh-side);
	}
	.sh-pin {
		stroke: var(--sh-side);
	}
	.sh-accent-side {
		fill: var(--sh-accent-side);
	}
	/* Glass: a sheen from the top-left across each solid, and the glint, the light catching
	   its silhouette, brightest at its top-left and bottom-right corners and tapering along the
	   edges, over a soft glow. */
	.sh-sheen-stop {
		stop-color: var(--sh-sheen);
	}
	.sh-glint-stop {
		stop-color: var(--sh-glint);
	}
	.sh-glint > :first-child {
		opacity: 0.45;
	}

	@media (prefers-reduced-motion: reduce) {
		.sh-vis {
			animation-name: d-fade;
		}
	}
}

@keyframes sh-shimmer {
	from {
		background-position-x: calc(-3 * var(--w) - var(--x));
	}
	to {
		background-position-x: calc(-1 * var(--x));
	}
}

@keyframes sh-hop {
	20% {
		translate: 0 -0.14em;
		animation-timing-function: ease-in-out;
	}
	45% {
		translate: 0 0.07em;
		animation-timing-function: var(--ease-spring);
	}
}