/* Titles: letter by letter fade up, then a rising phrase on the last letters. Only active once the script has split the text. */
.mv-split .mv-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mv-split .mv-w {
	display: inline-block;
	white-space: nowrap;
}

.mv-split .mv-c {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.55em) rotate(var(--mv-r0, 0deg));
	transform-origin: 50% 80%;
}

.mv-split .mv-n {
	display: inline-block;
}

.mv-split.is-in .mv-c {
	animation: mv-in 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--mv-i) * var(--mv-step));
}

/* The last letters: each lifts above the baseline a little higher than the one before, then all come back down. */
.mv-split.is-in .mv-c.mv-end .mv-n {
	animation: mv-lilt 1100ms cubic-bezier(0.37, 0, 0.2, 1) both;
	/* starts as the letter itself lands, so the arrival runs straight into the jump */
	animation-delay: calc(var(--mv-i) * var(--mv-step) + 470ms + var(--mv-k) * 60ms);
}

@keyframes mv-in {
	from {
		opacity: 0;
		transform: translateY(0.55em) rotate(var(--mv-r0, 0deg));
	}

	to {
		opacity: 1;
		transform: translateY(0) rotate(0deg);
	}
}

@keyframes mv-lilt {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	38% {
		transform: translateY(calc(var(--mv-lift) * -1em)) rotate(var(--mv-rot, 0deg));
	}
}

/* Images: fade in as they arrive on screen, easing out of a slight tilt (direction alternates, set by the script). */
.mv-img {
	opacity: 0;
	transform: translateY(0.9rem) rotate(var(--mv-tilt, 1.2deg)) scale(1.015);
	transform-origin: 50% 60%;
}

/* A tilting image must never widen the page. */
main {
	overflow: clip;
}

/* Home cover: the whole photo, at half the text column's width on desktop, never taller than the window
   (10rem of air above and below); on phones it keeps the full width. */
@media (min-width: 782px) {
	.mv-cover {
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}

	.mv-cover .wp-block-image {
		display: block;
		width: min(50%, calc((100svh - 10rem) * 1414 / 2000));
		margin-inline: auto;
	}

	.mv-cover .wp-block-image img {
		width: 100%;
		height: auto;
	}
}

/* The scroll-linked shrink, anchored at the top. Where the browser has scroll-driven animations it runs
   with the scroll itself (no lag, no jitter); elsewhere the script sets --mv-cover-scale instead. */
.mv-cover .wp-block-image img {
	transform: scale(var(--mv-cover-scale, 1));
	transform-origin: 50% 0;
	will-change: transform;
	--mv-cover-from: 1.15;
}

@media (min-width: 782px) {
	.mv-cover .wp-block-image img {
		--mv-cover-from: 1.4;
	}
}

@keyframes mv-cover-shrink {
	from {
		transform: scale(var(--mv-cover-from));
	}

	to {
		transform: scale(1);
	}
}

@supports (animation-timeline: view()) {
	.mv-cover .wp-block-image img {
		transform: none;
		animation: mv-cover-shrink 1s cubic-bezier(0.45, 0, 0.55, 1) both;
		animation-timeline: view();
		animation-range: entry 8% entry calc(100% + 4rem);
	}

	@media (prefers-reduced-motion: reduce) {
		.mv-cover .wp-block-image img {
			animation: none;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-cover .wp-block-image img {
		transform: none;
	}
}

/* Barely visible rounded corners: a technical look. */
main .wp-block-image img {
	border-radius: 2px;
}

.mv-img.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1), transform 1300ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--mv-delay, 0ms);
}

/* Menu: stays on the right edge when it opens, and its links arrive one after another. */
header .wp-block-details {
	text-align: right;
}

header .wp-block-details summary {
	cursor: pointer;
	display: block;
}

header .wp-block-details .wp-block-navigation,
header .wp-block-details .wp-block-navigation__container {
	align-items: flex-end;
	justify-content: flex-end;
}

header .wp-block-details[open] .wp-block-navigation-item {
	animation: mv-menu-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

header .wp-block-details[open] .wp-block-navigation-item:nth-child(1) { animation-delay: 0ms; }
header .wp-block-details[open] .wp-block-navigation-item:nth-child(2) { animation-delay: 60ms; }
header .wp-block-details[open] .wp-block-navigation-item:nth-child(3) { animation-delay: 120ms; }
header .wp-block-details[open] .wp-block-navigation-item:nth-child(4) { animation-delay: 180ms; }
header .wp-block-details[open] .wp-block-navigation-item:nth-child(5) { animation-delay: 240ms; }
header .wp-block-details[open] .wp-block-navigation-item:nth-child(n + 6) { animation-delay: 300ms; }

header .wp-block-details.is-closing .wp-block-navigation-item {
	animation: mv-menu-out 220ms cubic-bezier(0.64, 0, 0.78, 0) both;
	animation-delay: 0ms;
}

@keyframes mv-menu-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mv-menu-out {
	to {
		opacity: 0;
		transform: translateY(-0.4rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-img,
	.mv-img.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	header .wp-block-details[open] .wp-block-navigation-item,
	header .wp-block-details.is-closing .wp-block-navigation-item {
		animation: none;
	}

	.mv-split .mv-c {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.mv-split.is-in .mv-c,
	.mv-split.is-in .mv-c.mv-end .mv-n {
		animation: none;
	}
}

/* Room below the baseline so cedillas and tails are never cut when the title is framed or captured. */
main h1,
main h2.has-xx-large-font-size {
	padding-bottom: 0.12em;
}

/* The disclosure marker sits after the word, so "Menu" keeps its place when the list opens. */
header .wp-block-details summary {
	list-style: none;
}

header .wp-block-details summary::-webkit-details-marker {
	display: none;
}

header .wp-block-details summary::after {
	content: " +";
}

header .wp-block-details[open] summary::after {
	content: " –";
}

/* Colour mode: the same palette, reversed. Light is the default. */
html[data-theme="dark"] {
	--wp--preset--color--theme-2: #121212;
	--wp--preset--color--theme-5: #edeae9;
	--wp--preset--color--theme-3: #8f98ff;
	color-scheme: dark;
}

html[data-theme="dark"] main img {
	filter: brightness(0.92);
}

/* The colour-mode switch is one crossfade of the whole page (type-motion.js, startViewTransition). */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 450ms;
	animation-timing-function: ease;
}

.mv-theme-toggle {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
	padding: 0.4em 0;
	line-height: 1;
	text-align: right;
}

.mv-theme-toggle svg {
	display: block;
	margin-left: auto;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-theme-toggle:hover svg {
	transform: rotate(25deg);
}

.mv-theme-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

header .wp-block-details[open] .mv-menu-foot {
	animation: mv-menu-in 480ms cubic-bezier(0.22, 1, 0.36, 1) 320ms both;
}

header .wp-block-details.is-closing .mv-menu-foot {
	animation: mv-menu-out 220ms cubic-bezier(0.64, 0, 0.78, 0) both;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none;
	}

	header .wp-block-details[open] .mv-menu-foot,
	header .wp-block-details.is-closing .mv-menu-foot {
		animation: none;
	}
}

/* Foot of the menu: the language switch (EN / PT) beside the colour icon, flush right. */
.mv-menu-foot {
	align-items: center;
	display: flex;
	gap: 1em;
	justify-content: flex-end;
	margin-top: 0.9em;
}

.mv-lang-switch {
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-decoration: none;
}

.mv-lang-switch:hover,
.mv-lang-switch:focus-visible {
	text-decoration: underline;
}

/* Share links in the footer: one quiet line of text links. */
.mv-share {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.4em 1.1em;
	margin-top: var(--wp--preset--spacing--40);
}

.mv-share ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.1em;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* "Copy link" and "More…" are buttons, drawn like the links beside them */
.mv-share button {
	background: none;
	border: 0;
	color: var(--wp--preset--color--theme-3);
	cursor: pointer;
	font: inherit;
	padding: 0;
}

.mv-share button:hover {
	text-decoration: underline;
}

.mv-share a:focus-visible,
.mv-share button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Menu: the links open as a panel over the page (nothing below moves) and the page behind blurs,
   so the links read on any text or image. Esc or a click outside closes it (script). */
.blending-mode {
	z-index: 20;
}

header .wp-block-details {
	position: relative;
}

header .mv-menu-panel {
	margin: 0;
	padding-top: 0.5em;
	max-width: calc(100vw - 2 * var(--wp--preset--spacing--50));
	position: absolute;
	right: 0;
	top: 100%;
	width: max-content;
}

main,
footer {
	transition: filter 320ms ease, opacity 320ms ease;
}

html.mv-menu-open main,
html.mv-menu-open footer {
	filter: blur(10px);
	opacity: 0.25;
}

/* Tagline: one category at a time (script), always on one line */
.mv-tagline {
	white-space: nowrap;
}

.mv-tagline span {
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
	white-space: pre;
}

.mv-sr {
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media (prefers-reduced-motion: reduce) {
	main,
	footer {
		transition: none;
	}
}

/* Phones: name and menu share the first row; the row never wraps, the name's column takes what is left. */
@media (max-width: 781px) {
	header .wp-block-group:has(> .wp-block-details) {
		align-items: flex-start;
		flex-wrap: nowrap;
	}

	header .wp-block-group:has(> .wp-block-details) > .wp-block-group {
		flex: 1 1 auto;
		min-width: 0;
	}

	header .wp-block-details {
		flex: none;
	}

	header .wp-block-details summary {
		padding: 0 0 0.7em 0.7em;
	}

	header .wp-block-details .wp-block-navigation-item__content {
		font-size: min(2rem, 8.5vw);
		padding-block: 0.25em;
	}
}

/* Fallback: WordPress.com's own sharing, Like and Related blocks never show (the footer has the site's share links). */
.sharedaddy,
.sd-sharing-enabled,
#jp-post-flair,
#jp-relatedposts,
.wpl-likebox {
	display: none !important;
}

/* Home, after the cover: the other places to go, as large lines like the open menu. Each line has a
   hairline above it and an arrow at the right that leans in on hover. */
.mv-next {
	position: relative;
	z-index: 1;
	max-width: 52rem;
	margin-top: clamp(7rem, 12vw, 11rem) !important;
	margin-bottom: clamp(5rem, 8vw, 8rem) !important;
	margin-inline: auto !important;
	/* Opaque, so the cover above can never show through the lines. */
	background: var(--wp--preset--color--theme-2);
}

.mv-next h2 {
	margin-bottom: clamp(1.75rem, 3vw, 2.75rem) !important;
}

/* room between "Explorar_" and the first line */
.mv-next > h2.wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--50);
}

.mv-next .mv-next-link {
	margin: 0 !important;
	border-top: 1px solid currentColor;
	line-height: 1.18;
}

.mv-next .mv-next-link:last-of-type {
	border-bottom: 1px solid currentColor;
}

.mv-next .mv-next-link a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding: 1.1rem 0 1.25rem;
	text-decoration: none;
	color: inherit;
	transition: color 300ms ease, padding-left 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-next .mv-next-link a::after {
	content: "\2192";
	flex: none;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-next .mv-next-link a:hover,
.mv-next .mv-next-link a:focus-visible {
	color: var(--wp--preset--color--theme-3);
	padding-left: 0.6rem;
}

.mv-next .mv-next-link a:hover::after,
.mv-next .mv-next-link a:focus-visible::after {
	transform: translateX(0.4rem);
}

/* The lines arrive one after another as they scroll into view. */
@supports (animation-timeline: view()) {
	.mv-next .mv-next-link {
		animation: mv-menu-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-timeline: view();
		animation-range: entry 10% entry 70%;
	}

	@media (prefers-reduced-motion: reduce) {
		.mv-next .mv-next-link {
			animation: none;
		}
	}
}

/* Images taller than the window: the whole picture fits (same ratio), and it shrinks into its frame as you
   scroll, like the home cover. The script sets the class and --mv-ratio. */
.mv-tall {
	width: min(100%, calc((100svh - 10rem) * var(--mv-ratio, 1)));
}

.mv-tall img {
	width: 100%;
	height: auto;
	transform-origin: 50% 0;
	--mv-cover-from: 1.15;
}

@media (min-width: 782px) {
	.mv-tall img {
		--mv-cover-from: 1.25;
	}
}

@supports (animation-timeline: view()) {
	.mv-tall img {
		animation: mv-cover-shrink 1s cubic-bezier(0.45, 0, 0.55, 1) both;
		animation-timeline: view();
		animation-range: entry 8% entry calc(100% + 4rem);
	}

	@media (prefers-reduced-motion: reduce) {
		.mv-tall img {
			animation: none;
		}
	}
}

/* Blog: the posts page lists each post as a line, like the Explorar links; the post itself reads like the
   other pages (34em measure, flush left, wide figures). */
.mv-posts .wp-block-post-template {
	padding: 0;
	list-style: none;
}

.mv-posts .mv-post {
	border-top: 1px solid currentColor;
	padding: 1.5rem 0 2.25rem;
}

.mv-posts li:last-child .mv-post {
	border-bottom: 1px solid currentColor;
}

.mv-post > * {
	margin-block: 0 0.5rem;
}

.mv-post .wp-block-post-title {
	line-height: 1.18;
}

.mv-post .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
	transition: color 300ms ease;
}

.mv-post .wp-block-post-title a:hover,
.mv-post .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--theme-3);
}

.mv-post .wp-block-post-excerpt {
	max-width: 34em;
}

.mv-back a {
	text-decoration: none;
}

.single-post .wp-block-post-title {
	margin-bottom: var(--wp--preset--spacing--70);
}

.single-post .wp-block-post-content figure {
	margin-block: var(--wp--preset--spacing--60);
}

.single-post .wp-block-post-content video {
	max-width: 100%;
	height: auto;
	border-radius: 2px;
}

/* The post's text lines up with its title (the theme adds side padding to post content). */
.single-post .wp-block-post-content {
	padding-inline: 0;
}

.mv-byline {
	margin-bottom: var(--wp--preset--spacing--60);
}