/*
 * The categories as file-folder tabs: a row of dividers standing along the
 * top of the grid, as on the folders in a drawer - the category pages' own
 * folder icon made real. Each tab is cut with sloped shoulders and takes one
 * of the journal placeholders' three paper tones in turn, so neighbouring
 * folders read as separate sheets. The name is typed in Courier Prime, as
 * every label on the site is, with its number of posts in brackets beside
 * it. The folder being read stands open: white, as the post cards are, and
 * taller than the rest. A tab lifts a little when pointed at, as a folder
 * does when you reach for it. On a phone the row is swiped (see below).
 */

.mf-category-menu {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--courier-prime), monospace;
}

.mf-category-menu__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5rem 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	/* The drawer's edge the folders stand on. */
	border-bottom: 1px solid rgb(74 52 34 / 16%);
}

.mf-category-menu__item {
	margin: 0 0 -1px;
}

.mf-category-menu__item a {
	display: block;
	padding: 0.6rem 0.8rem 0.5rem;
	clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 100%, 0 100%);
	background: #efe8df;
	color: #3d3a36;
	font-size: 0.8rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.mf-category-menu__item.mf-journal-tone-1 a { background: #e5e9ed; }
.mf-category-menu__item.mf-journal-tone-2 a { background: #eee2df; }

/* Courier gives a bracket, like a space, a full letter's width; so the count
   follows the name by a narrow gap rather than a typed space, and is set
   without the name's tracking, to keep each tab as short as it can be. */
.mf-category-menu__count {
	margin-left: 0.45em;
	letter-spacing: 0;
	color: #6b6a6a;
	font-variant-numeric: tabular-nums;
}

.mf-category-menu__item a:hover {
	transform: translateY(-3px);
	color: #111;
}

/* The open folder: white, a touch taller, its name in full ink. */
.mf-category-menu__item a[aria-current] {
	padding-top: 0.85rem;
	background: #fff !important;
	color: #111;
	transform: none;
}

.mf-category-menu__item a[aria-current] .mf-category-menu__count {
	color: #c9968e;
}

.mf-category-menu a:focus-visible {
	outline: 2px solid var(--wp--preset--color--stamp-navy);
	outline-offset: -2px;
}

/* The folders keep to one row on their drawer's edge at every width, never
   wrapping into a second row of tabs with nothing under them. Where the
   window is too narrow for all of them - a phone, a narrow window - the row
   is swiped; each edge fades while there are more tabs beyond it, and the
   open folder is scrolled into view as the page loads (reels.js). Only the
   row scrolls, never the page. */
.mf-category-menu__tabs {
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	/* Room for a tab to lift when pointed at, inside the scrolling row. */
	padding-top: 4px;
}

.mf-category-menu__tabs::-webkit-scrollbar {
	display: none;
}

.mf-category-menu__tabs.has-more,
.mf-category-menu__tabs.has-less {
	mask-image: linear-gradient(to right, var(--mf-tabs-left, #000), #000 2rem, #000 calc(100% - 2rem), var(--mf-tabs-right, #000));
}

.mf-category-menu__tabs.has-less {
	--mf-tabs-left: transparent;
}

.mf-category-menu__tabs.has-more {
	--mf-tabs-right: transparent;
}

.mf-category-menu__item {
	flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
	.mf-category-menu__item a {
		transition: none;
	}

	.mf-category-menu__item a:hover {
		transform: none;
	}
}

/* --- Moving between the blog and its categories ---

   The pages cross over rather than flash: the old posts fade, and the menu
   card, named here, glides from where it was to where it sits on the new
   page (lower on a category page, under its title). Both pages carry this
   sheet, so the crossing only happens between them. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	.mf-category-menu {
		view-transition-name: mf-category-menu;
	}

	::view-transition-group(mf-category-menu) {
		animation-duration: 420ms;
		animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	::view-transition-old(root) {
		animation-duration: 200ms;
	}

	::view-transition-new(root) {
		animation-duration: 120ms;
	}
}

/* --- The reel: arriving from the menu (the page is marked .mf-reel), the
   posts come up as one strip, as a fruit machine's reel turns - every card,
   and the blog's year headings with them, rising together from below,
   blurred while they travel, running a touch past their places and settling
   back. The columns set off a beat apart, left to right, and within each
   column a card lands a moment after the one above it, so the stacks pile
   up into place (the wait for each card is measured in reels.js). The tabs
   above stay where they are. Each card is moved, not its
   place in the grid, so the masonry packing is untouched. */
.mf-reel .wp-block-post-template > :is(li.wp-block-post, li.mf-year-break) {
	animation: mf-reel-in 900ms cubic-bezier(0.22, 0.85, 0.3, 1) both;
	animation-delay: calc(120ms + var(--mf-reel-wait, 0ms));
}

@keyframes mf-reel-in {
	0% {
		transform: translateY(min(70vh, 640px));
		filter: blur(3px);
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	68% {
		transform: translateY(-14px);
		filter: blur(0);
	}
	86% {
		transform: translateY(4px);
	}
	100% {
		transform: none;
		filter: none;
	}
}

/* A year's digits: each is a window one figure high onto a strip of numbers,
   which runs up to the right figure and stops with a small kick. Later
   digits spin longer, so the year comes to rest left to right. */
.mf-odo {
	display: inline-block;
	height: 1em;
	line-height: 1;
	overflow: clip;
	vertical-align: top;
}

.mf-odo__strip {
	display: block;
	animation: mf-odo-spin calc(700ms + var(--mf-odo-k) * 220ms) cubic-bezier(0.3, 0.75, 0.35, 1.06) both;
	animation-delay: 120ms;
}

.mf-odo__strip > span {
	display: block;
	height: 1em;
}

@keyframes mf-odo-spin {
	from {
		transform: translateY(0);
		filter: blur(1.5px);
	}
	70% {
		filter: blur(0);
	}
	to {
		transform: translateY(calc(var(--mf-odo-n) * -1em));
	}
}

/* A category page is one unbroken grid; the years it covers are given once,
   on the title's line, set to the right on its baseline, in the voice of
   the blog's year headings - Courier Prime, tracked, in the dates' grey -
   but at a label's size beside the title rather than a heading's. Where a
   long name leaves no room beside it, the years drop below the title. */
.wp-block-group:has(> .mf-category-years) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 2rem;
	row-gap: 0.9rem;
}

/* The title and its years are one modest line above the tabs, not a poster:
   the open folder already says where the reader is, so the head of a
   category page stays close to the blog's, where the tabs lead the page. */
.wp-block-group:has(> .mf-category-years) .wp-block-query-title {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important;
}

.wp-block-group:has(> .mf-category-years) + * {
	margin-block-start: 1.5rem !important;
}

.mf-category-years {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--courier-prime), monospace;
	font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--secondary);
	font-variant-numeric: tabular-nums;
}

/* The year that follows the tabs opens the stream: it drops the space a year
   keeps from the year before, and sits equidistant between the tabs' rule
   above and the first card below - the rule to the tops of its figures the
   same as their baseline to the card. */
.mf-category-menu + .mf-year-break {
	padding-top: 4px;
}