/* The site's shared pieces, used both on the server's pages (linked by _Layout.cshtml, ahead of
   styles.css) and inside components' shadow roots (<ano-about> takes them as text, so they
   reach its notable work, its way back and its halftone): the halftone, the spectrum rule, a
   work's card, a gallery's section and the way back. They lean on styles.css's custom
   properties (--ano-unit, --anovase-*, --ano-dots-fade, …), which reach into shadow roots too. */

/* The sketches' halftone: faint lavender dots, 8 units across on a 16-unit grid turned by
   5.28°. Place and size it (it must be positioned) and shape it with border-radius;
   --dots-unit sets its scale.
   Each is a window onto one field of dots, laid out and turned around an origin it can
   share with its neighbours: give it its offset from that origin as --dots-x and --dots-y
   (by default the origin is its own top-left), and overlapping halftones line their dots up
   instead of sifting through each other. */
.ano-dots {
	--dots-reach: 150vmax;
	overflow: hidden;
	opacity: .08;
	pointer-events: none;

	&::before {
		content: '';
		position: absolute;
		left: calc(-1 * var(--dots-x, 0px) - var(--dots-reach));
		top: calc(-1 * var(--dots-y, 0px) - var(--dots-reach));
		width: calc(2 * var(--dots-reach));
		aspect-ratio: 1;
		rotate: -5.28deg;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23d0bce8'/%3E%3C/svg%3E") 0 0 / calc(16 * var(--dots-unit, var(--ano-unit)));
	}
}

/* A rule in the spectrum, teal to violet (the hero sketch's, 210.16 units long). */
.ano-separator {
	width: calc(210.16 * var(--ano-unit));
	height: var(--ano-line-width);
	background: linear-gradient(90deg, var(--ano-spectrum));
}

/* A work's card (portfolio-sketvh2.svg; Pages/_WorkCard.cshtml on the server, workCard in
   modules/ano/Work.ts on the client): the thumbnail, then its name (Outfit Light, 25.65 units)
   and its kind, a pill of violet glass (Space Grotesk, 13 units), set in 10.96 units, the
   name's baseline 36.76 under the thumbnail. Hovered or focused, the thumbnail shatters, the
   name turns violet and a violet line wipes in under them, 13.77 under the pill; keyboard focus
   shows as that, in place of an outline. */
.ano-work {
	display: block;
	color: inherit;
	text-decoration: none;
	outline: none;

	& .ano-work-info {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: calc(5.4 * var(--ano-unit));
		padding: calc(11.9 * var(--ano-unit)) calc(10.96 * var(--ano-unit)) calc(13.77 * var(--ano-unit) + var(--ano-line-width));

		&::after {
			content: '';
			position: absolute;
			right: calc(10.96 * var(--ano-unit));
			bottom: 0;
			left: calc(10.96 * var(--ano-unit));
			height: var(--ano-line-width);
			background: var(--anovase-violet);
			scale: 0 1;
			transform-origin: right;
			transition: scale .5s cubic-bezier(.65, 0, .35, 1);
		}
	}

	& .ano-work-name {
		font-size: max(1.125rem, calc(25.65 * var(--ano-unit)));
		line-height: 1.2;
		transition: color .3s ease;
	}

	& .ano-work-category {
		padding: 0 .77em;
		border-radius: 1em;
		background: rgb(113 107 193 / .3);
		font: 400 max(.75rem, calc(13 * var(--ano-unit))) / 1.55 var(--ano-font-family-accent);
		color: #716bc1;
	}

	&:is(:hover, :focus-visible) {
		& .ano-work-name {
			color: var(--anovase-violet);
		}

		& .ano-work-info::after {
			scale: 1;
			transform-origin: left;
		}
	}
}

/* The work being opened, or returned from (its thumbnail is active), shares its name, kind and
   two strongest shards with its own page, whose view-transition-names they take: a view
   transition carries them between the two. */
.ano-work:has(> ano-shatter[active]) {
	& .ano-work-name {
		view-transition-name: work-name;
		view-transition-class: work;
	}

	& .ano-work-category {
		view-transition-name: work-kind;
		view-transition-class: work;
	}
}

.ano-work > ano-shatter[active] {
	&::part(first-shard) {
		view-transition-name: work-shard-1;
		view-transition-class: work;
	}

	&::part(second-shard) {
		view-transition-name: work-shard-2;
		view-transition-class: work;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ano-work .ano-work-name,
	.ano-work .ano-work-info::after {
		transition: none;
	}
}

/* A gallery's section (portfolio-sketch-gallery.svg, measured at its 950 units across): its
   title, then a strip of tiles in rows over a halftone band (a work's pictures, a member's
   notable work). The title (Outfit Light, 38.51 units, violet) follows its Lucide icon (.63em,
   on its baseline, 14.34 units before the text), --gallery-title-inset in from the column
   (--column, the room either side of the page's 1160 units), and 54.46 over the rows. The
   rows (<ano-gallery>) are 240.03 units tall (but at least 140px) and 16.67 apart, their tiles
   17.92 apart and rounded by 6.81. They run across the whole screen, the first tile
   --gallery-first in from the column, and so does the band, from 26.97 units over the rows to
   64 above their foot. */
.ano-gallery-section {
	--column: max(0px, (100cqi - 2.5rem - 1160 * var(--ano-unit)) / 2);
	justify-self: stretch;
	margin-inline: -1.25rem;
	container-type: inline-size;
}

.ano-gallery-title {
	display: flex;
	align-items: baseline;
	gap: .372em;
	margin: 0 0 calc(54.46 * var(--ano-unit) - .23em) calc(var(--column) + var(--gallery-title-inset, 105.08 * var(--ano-unit)));
	font: 300 max(1.5rem, calc(38.51 * var(--ano-unit))) / 1.2 var(--whimsy-font-family-heading);
	color: #716bc1;

	& > svg {
		flex: none;
		width: .63em;
		height: .63em;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

.ano-gallery-strip {
	position: relative;

	& > .ano-dots {
		position: absolute;
		inset-inline: 0;
		top: calc(-26.97 * var(--ano-unit));
		bottom: calc(64 * var(--ano-unit));
		z-index: -1;
	}

	& > ano-gallery {
		--gallery-row: max(140px, calc(240.03 * var(--ano-unit)));
		--gallery-gap: calc(17.92 * var(--ano-unit));
		--gallery-row-gap: calc(16.67 * var(--ano-unit));
		--gallery-radius: calc(6.81 * var(--ano-unit));
		--gallery-inset: calc(var(--column) + var(--gallery-first, 28.82 * var(--ano-unit)));
	}
}

/* A way back to the listing a page is an entry of (the portfolio, the blog): a round button of
   dark glass, 56 units across (but at least 2.5rem, to tap), with Lucide's arrow-left in
   lavender at .54 of it. Hovered or focused, the arrow draws back a little; keyboard focus
   rings it in teal, as the buttons'. */
.ano-back {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--ano-back-size);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgb(15 15 15 / .8);
	backdrop-filter: blur(4px);
	color: var(--anovase-lavender);
	outline: none;

	& > svg {
		width: 54%;
		height: 54%;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: translate .3s cubic-bezier(.65, 0, .35, 1);
	}

	&:is(:hover, :focus-visible) > svg {
		translate: -12% 0;
	}

	&:focus-visible {
		outline: var(--ano-line-width) solid var(--anovase-teal);
		outline-offset: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ano-back > svg {
		transition: none;
	}
}