/*
 * Feyrer: what theme.json can't express.
 * Colors, type and spacing live in theme.json; this file only adds layout
 * and small components. Layered, so theme.json and editor choices win.
 */

@layer feyrer.base, feyrer.layout, feyrer.components, feyrer.motion;

@layer feyrer.base {
	:root {
		color-scheme: light dark;
		interpolate-size: allow-keywords;
	}

	.role-music {
		color-scheme: dark;
	}

	html {
		scroll-padding-top: 1.5rem;
		hanging-punctuation: first last;
	}

	:where(h1, h2, h3, h4) {
		text-wrap: balance;
	}

	:where(p, li, figcaption) {
		text-wrap: pretty;
	}

	:where(a) {
		text-underline-offset: 0.2em;
		text-decoration-thickness: 1px;

		&:hover {
			text-decoration-thickness: 2px;
		}
	}

	::selection {
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--on-accent);
	}

	/* Plain pages (colophon, posts): give section headings room above. */
	.wp-block-post-content > :where(h2, h3) {
		margin-block-start: var(--wp--preset--spacing--50);
	}

	:where(code) {
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.875em;
	}
}

@layer feyrer.layout {
	.site-header {
		border-block-end: 1px solid var(--wp--preset--color--rule);
	}

	/*
	 * Wide screens: the header stays put, so every section is one click away.
	 * Phones keep it in the flow, where a wrapped menu would eat the screen.
	 */
	@media (width >= 48rem) {
		:root {
			scroll-padding-top: 6rem;
		}

		header.wp-block-template-part:has(> .site-header) {
			position: sticky;
			inset-block-start: 0;
			z-index: 10;
			background: var(--wp--preset--color--paper);
		}

		.admin-bar header.wp-block-template-part:has(> .site-header) {
			inset-block-start: var(--wp-admin--admin-bar--height, 32px);
		}
	}

	.site-footer {
		border-block-start: 1px solid var(--wp--preset--color--rule);
	}

	.wp-block-post-content {
		container: page / inline-size;
	}

	.feyrer-hero {
		padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
		align-items: center;
		gap: var(--wp--preset--spacing--50);
	}

	/* Sections: heading above on narrow screens, beside the content on wide ones. */
	.feyrer-section {
		padding-block: var(--wp--preset--spacing--50);

		& > :not(h2) {
			max-inline-size: 42rem;
		}
	}

	@container page (width > 56rem) {
		.feyrer-section {
			display: grid;
			grid-template-columns: 11rem minmax(0, 1fr);
			column-gap: var(--wp--preset--spacing--50);
			align-items: start;

			& > h2 {
				grid-column: 1;
				grid-row: 1 / span 20;
				position: sticky;
				inset-block-start: 1.5rem;
				margin-block: 0;
				font-size: var(--wp--preset--font-size--large);
			}

			& > :not(h2) {
				grid-column: 2;
				margin-block-start: 0;
				margin-block-end: var(--wp--style--block-gap);
			}
		}

		.role-work .feyrer-section + .feyrer-section {
			border-block-start: 1px solid var(--wp--preset--color--rule);
		}
	}
}

@layer feyrer.components {
	.feyrer-label {
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--x-small);
		color: var(--wp--preset--color--muted);
		letter-spacing: 0.01em;
	}

	/* One accent with one job: "available". */
	.feyrer-status {
		display: inline-flex;
		align-items: center;
		gap: 0.6em;
		margin: 0;
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		color: var(--wp--preset--color--accent);

		&::before {
			content: "";
			inline-size: 0.6em;
			aspect-ratio: 1;
			border-radius: 50%;
			background: currentColor;
			box-shadow: 0 0 0 0.25em color-mix(in oklab, currentColor 22%, transparent);
		}
	}

	.feyrer-portrait {
		max-inline-size: 22rem;
		margin-inline: auto;

		& img {
			inline-size: 100%;
		}
	}

	.feyrer-steps {
		list-style: none;
		padding: 0;
		counter-reset: step;

		& > li {
			counter-increment: step;
			position: relative;
			padding-block: 0.9rem;
			padding-inline-start: 2.75rem;
			border-block-start: 1px solid var(--wp--preset--color--rule);

			&::before {
				content: counter(step, decimal-leading-zero);
				position: absolute;
				inset-inline-start: 0;
				inset-block-start: 1.1rem;
				font-family: var(--wp--preset--font-family--mono);
				font-size: var(--wp--preset--font-size--small);
				color: var(--wp--preset--color--accent);
			}
		}
	}

	.feyrer-role {
		padding-block: 0.25rem var(--wp--preset--spacing--40);

		& > * {
			margin-block: 0 0.75rem;
		}

		& > h3 {
			margin-block-end: 0.5rem;
		}

		& + & {
			padding-block-start: var(--wp--preset--spacing--40);
			border-block-start: 1px solid var(--wp--preset--color--rule);
		}
	}

	/* Project cards: title, one or two lines, links. */
	.feyrer-cards {
		gap: var(--wp--preset--spacing--40);
	}

	.feyrer-card {
		display: flex;
		flex-direction: column;
		padding-block-start: 0.9rem;
		border-block-start: 2px solid var(--wp--preset--color--accent);

		& > * {
			margin-block: 0 0.5rem;
		}

		& > .feyrer-links {
			margin-block-start: auto;
		}
	}

	/* Inline link rows, separated without extra markup. */
	.feyrer-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--small);

		& a::after {
			content: " →";
		}
	}

	.feyrer-spdx {
		padding: var(--wp--preset--spacing--30);
		background: var(--wp--preset--color--paper-2);
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: 4px;
		font-size: var(--wp--preset--font-size--small);
		overflow-x: auto;
	}

	.feyrer-credentials {
		padding-inline-start: 1.1em;

		& li::marker {
			color: var(--wp--preset--color--accent);
		}
	}

	.feyrer-email a {
		text-decoration-thickness: 2px;
		word-break: break-word;
	}

	.feyrer-shot img {
		border: 1px solid var(--wp--preset--color--rule);
	}

	.feyrer-entries {
		list-style: none;
		padding: 0;

		& > li {
			padding-block: 1rem;
			border-block-start: 1px solid var(--wp--preset--color--rule);
		}

		& :where(.wp-block-post-title, .wp-block-post-date, .wp-block-post-excerpt__excerpt) {
			margin-block: 0 0.35rem;
		}
	}

	.feyrer-footer-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.25rem;
		list-style: none;
		padding: 0;
		margin: 0;

		& a {
			color: inherit;
		}
	}

	/* Target size (WCAG 2.5.8): nav links get room even when they wrap. */
	.wp-block-navigation-item__content {
		padding-block: 0.4rem;
	}

	.wp-block-navigation-item:has(> [aria-current="page"]) > a {
		text-decoration: underline;
		text-underline-offset: 0.35em;
	}

	/* Back to top: a footer link everywhere; floats in after the first screen where the browser can do that in CSS. */
	.feyrer-to-top {
		margin-block-start: var(--wp--preset--spacing--40);

		& a::before {
			content: "↑ ";
		}
	}

	@supports (animation-timeline: scroll()) {
		.feyrer-to-top {
			position: fixed;
			inset: auto 1rem 1rem auto;
			z-index: 10;
			margin: 0;
			animation: feyrer-reveal linear both;
			animation-timeline: scroll(root);
			animation-range: 0 100vh;

			& a {
				display: inline-block;
				padding: 0.5rem 0.8rem;
				background: var(--wp--preset--color--paper-2);
				border: 1px solid var(--wp--preset--color--rule);
				border-radius: 3px;
				color: var(--wp--preset--color--ink);
				text-decoration: none;
			}
		}
	}

	/* Hidden (and unfocusable) until scrolled; then fully visible, with no motion. */
	@keyframes feyrer-reveal {
		0%, 90% {
			opacity: 0;
			visibility: hidden;
		}
		100% {
			opacity: 1;
			visibility: visible;
		}
	}

	.feyrer-pagestats {
		margin-block-start: var(--wp--preset--spacing--30);

		& a {
			color: inherit;
		}
	}

	.feyrer-pagestats-full {
		padding: var(--wp--preset--spacing--30);
		background: var(--wp--preset--color--paper-2);
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: 4px;
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--small);

		& ul {
			list-style: none;
			padding: 0;
			margin: 0.5rem 0 0;
		}

		& li::before {
			content: "✓ ";
			color: var(--wp--preset--color--accent);
		}

		& li[data-present="false"]::before {
			content: "– ";
			color: var(--wp--preset--color--muted);
		}
	}

	.feyrer-schedule {
		& p {
			margin-block: 0 0.35rem;
		}

		& .feyrer-schedule-when {
			font-size: var(--wp--preset--font-size--large);
		}

		& .feyrer-schedule-local:empty {
			display: none;
		}

		&[data-live] .feyrer-schedule-local {
			color: var(--wp--preset--color--accent);
		}
	}
}

/* Pattern library pieces. */
@layer feyrer.components {
	.feyrer-event {
		padding-block: 0.9rem;
		border-block-start: 1px solid var(--wp--preset--color--rule);

		& > * {
			margin-block: 0 0.25rem;
		}
	}

	.feyrer-faq details {
		padding-block: 0.75rem;
		border-block-start: 1px solid var(--wp--preset--color--rule);

		& summary {
			cursor: pointer;
			font-weight: 600;
		}

		& summary::marker {
			color: var(--wp--preset--color--accent);
		}

		&::details-content {
			block-size: 0;
			overflow: clip;
			transition: block-size 0.25s, content-visibility 0.25s allow-discrete;
		}

		&[open]::details-content {
			block-size: auto;
		}
	}

	.feyrer-quote {
		border-inline-start: 3px solid var(--wp--preset--color--accent);
		padding-inline-start: var(--wp--preset--spacing--40);

		& cite {
			font-family: var(--wp--preset--font-family--mono);
			font-size: var(--wp--preset--font-size--small);
			font-style: normal;
			color: var(--wp--preset--color--muted);
		}
	}

	.feyrer-search .wp-block-search__input {
		padding: 0.55rem 0.75rem;
		background: var(--wp--preset--color--paper);
		color: var(--wp--preset--color--ink);
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: 3px;
		font: inherit;
	}

	.wp-block-query-pagination {
		margin-block-start: var(--wp--preset--spacing--40);
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--small);
	}

	.feyrer-comments {
		margin-block-start: var(--wp--preset--spacing--50);
		padding-block-start: var(--wp--preset--spacing--40);
		border-block-start: 1px solid var(--wp--preset--color--rule);

		& :where(input:not([type="submit"]), textarea) {
			inline-size: 100%;
			padding: 0.55rem 0.75rem;
			background: var(--wp--preset--color--paper);
			color: var(--wp--preset--color--ink);
			border: 1px solid var(--wp--preset--color--rule);
			border-radius: 3px;
			font: inherit;
		}
	}

	/* Live: four bars beside the schedule, only while a stream is on the schedule. */
	.feyrer-eq {
		display: inline-flex;
		align-items: end;
		gap: 2px;
		block-size: 0.9em;
		margin-inline-end: 0.5em;
		vertical-align: -0.05em;

		& i {
			inline-size: 3px;
			block-size: 100%;
			background: var(--wp--preset--color--flame, var(--wp--preset--color--accent));
			transform-origin: bottom;
			scale: 1 0.5;
		}
	}

	.feyrer-schedule:not([data-live]) .feyrer-eq {
		display: none;
	}

	/* frolic.org's llama: decoration only, so it never takes space or clicks. */
	.feyrer-llama {
		display: none;
	}

	/* The secret: a native popover, dismissed with Escape or a click outside. */
	.feyrer-secret {
		max-inline-size: min(26rem, calc(100vw - 2rem));
		padding: var(--wp--preset--spacing--40);
		background: var(--wp--preset--color--paper-2);
		color: var(--wp--preset--color--ink);
		border: 1px solid var(--wp--preset--color--accent);
		border-radius: 4px;
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--small);

		&::backdrop {
			background: rgb(0 0 0 / 0.5);
		}

		& p {
			margin-block: 0 0.75rem;
		}

		& button {
			padding: 0.45rem 1rem;
			background: var(--wp--preset--color--accent);
			color: var(--wp--preset--color--on-accent);
			border: 0;
			border-radius: 3px;
			font: inherit;
			font-weight: 500;
			cursor: pointer;
		}
	}
}

/*
 * Home page: the header's name waits until the big name in the hero has
 * scrolled away, so the two never show at once. Hidden means unfocusable.
 * Without scroll-driven animation support the name simply stays visible.
 */
@layer feyrer.components {
	@supports (animation-timeline: scroll()) {
		.home .site-header .wp-block-site-title {
			animation: feyrer-name-arrives linear both;
			animation-timeline: scroll(root);
			animation-range: 12rem 20rem;
		}
	}

	@keyframes feyrer-name-arrives {
		from {
			opacity: 0;
			visibility: hidden;
		}
		to {
			opacity: 1;
			visibility: visible;
		}
	}
}

/* Motion only for people who haven't asked for less of it. */
@layer feyrer.motion {
	@media (prefers-reduced-motion: no-preference) {
		@view-transition {
			navigation: auto;
		}

		.wp-block-site-title {
			view-transition-name: site-title;
		}

		/* "Open to new roles": a slow pulse, like a link light. */
		.feyrer-status::before {
			animation: feyrer-pulse 2.4s ease-in-out infinite;
		}

		.feyrer-eq i {
			animation: feyrer-eq 0.9s ease-in-out infinite alternate;

			&:nth-child(2) { animation-duration: 0.7s; }
			&:nth-child(3) { animation-duration: 1.1s; }
			&:nth-child(4) { animation-duration: 0.8s; }
		}

		.feyrer-secret:popover-open {
			animation: feyrer-press 0.25s ease-out;
		}

		/* The wordmark hops once as the page arrives. */
		.role-music :is(.wp-block-site-title, .feyrer-hero h1) {
			animation: feyrer-hop 0.9s ease-out 0.4s both;
		}

		/*
		 * The llama frolics along the header's bottom line once per visit,
		 * and again when someone hovers the name: translate carries it across,
		 * transform makes each stride a springy leap, and the legs switch
		 * with every bound.
		 */
		.site-header:has(.feyrer-llama) {
			position: relative;
			overflow-x: clip;
		}

		.feyrer-llama {
			display: block;
			position: absolute;
			inset-block-end: 0;
			inset-inline-start: 0;
			pointer-events: none;
			translate: -4rem 0;
			transform-origin: 50% 100%;
			animation:
				feyrer-llama-frolic 6s linear 1.2s both,
				feyrer-llama-leap 0.6s infinite;
		}

		.site-header:has(.wp-block-site-title:hover) .feyrer-llama {
			animation-name: feyrer-llama-frolic-again, feyrer-llama-leap;
			animation-delay: 0s, 0s;
		}

		/* Legs tucked in the air, spread on landing: one swap per leap. */
		.feyrer-llama-frame-0 {
			animation: feyrer-llama-stride 0.6s steps(1) infinite;
		}

		.feyrer-llama-frame-1 {
			animation: feyrer-llama-stride 0.6s steps(1) -0.3s infinite;
		}

		@supports (animation-timeline: view()) {
			.feyrer-role,
			.feyrer-card,
			.feyrer-steps > li {
				animation: feyrer-settle linear both;
				animation-timeline: view();
				animation-range: entry 0% entry 35%;
			}
		}
	}

	@keyframes feyrer-pulse {
		50% {
			box-shadow: 0 0 0 0.45em color-mix(in oklab, currentColor 8%, transparent);
		}
	}

	@keyframes feyrer-eq {
		from { scale: 1 0.25; }
		to { scale: 1 1; }
	}

	@keyframes feyrer-hop {
		0%, 100% { translate: 0 0; }
		25% { translate: 0 -0.2em; }
		50% { translate: 0 0; }
		70% { translate: 0 -0.07em; }
	}

	@keyframes feyrer-llama-frolic {
		from { translate: -4rem 0; }
		to { translate: calc(100vw + 4rem) 0; }
	}

	/* Same path under a new name, so hovering starts a fresh frolic. */
	@keyframes feyrer-llama-frolic-again {
		from { translate: -4rem 0; }
		to { translate: calc(100vw + 4rem) 0; }
	}

	/* Spring up nose-first, kick the heels at the top, land and bounce. */
	@keyframes feyrer-llama-leap {
		0% {
			transform: translateY(0) rotate(0deg) scale(1.06, 0.94);
			animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
		}
		45% {
			transform: translateY(-14px) rotate(-10deg) scale(1);
			animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3);
		}
		65% {
			transform: translateY(-9px) rotate(8deg);
		}
		90% {
			transform: translateY(0) rotate(0deg) scale(1.08, 0.92);
		}
		100% {
			transform: translateY(0) rotate(0deg) scale(1.06, 0.94);
		}
	}

	@keyframes feyrer-llama-stride {
		0% { opacity: 1; }
		50% { opacity: 0; }
	}

	@keyframes feyrer-press {
		from { translate: 0 0.5rem; }
	}

	/* Movement only: text stays at full contrast while it settles. */
	@keyframes feyrer-settle {
		from {
			translate: 0 0.75rem;
		}
	}
}

/*
 * Unlayered on purpose: theme.json's navigation link color and decoration
 * are unlayered too, and would otherwise win over any layer.
 */

/* Resume: the one link employers come for, drawn as a quiet button. */
.feyrer-nav .feyrer-nav-resume > a {
	padding-inline: 0.75rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 3px;
	color: var(--wp--preset--color--accent);
}

/*
 * Where supported, the browser itself marks the section in view
 * (CSS scroll markers: scroll-target-group and :target-current). No script.
 */
@supports (scroll-target-group: auto) {
	.feyrer-nav .wp-block-navigation__container {
		scroll-target-group: auto;
	}

	.feyrer-nav a:target-current {
		color: var(--wp--preset--color--accent);
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.35em;
	}
}