/* ---- Kill accidental horizontal scroll ---- */
html, body {
	overflow-x: clip;
}

/* ---- Safety for legacy/non-block images ---- */
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

/* ---- Header: sticky, blurred ---- */
.motrice-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}
.motrice-header::before {
	content: "";
	position: absolute;
	inset: 0;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	background: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
	z-index: -1;
}

/* ---- Hero ---- */
.motrice-hero-title {
	letter-spacing: -0.035em;
	line-height: 0.95;
	text-wrap: balance;
}
.motrice-hero-kicker {
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.18em;
}
.motrice-hero-split {
	gap: var(--wp--preset--spacing--60);
}
.motrice-avatar {
	position: relative;
	margin: 0;
	z-index: 1;
}
.motrice-avatar::before {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--wp--preset--color--primary), transparent 35%, var(--wp--preset--color--primary) 60%, transparent 90%, var(--wp--preset--color--primary));
	animation: motrice-spin 9s linear infinite;
	z-index: -1;
}
.motrice-avatar::after {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}
.motrice-avatar img {
	display: block;
	animation: motrice-float 5.5s ease-in-out infinite;
}
@media (min-width: 1024px) {
	.motrice-avatar {
		margin-left: calc(-1 * var(--wp--preset--spacing--40));
	}
}
@media (max-width: 781px) {
	.motrice-hero-split {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--50);
	}
	.motrice-avatar img {
		width: 190px !important;
	}
}
@keyframes motrice-spin {
	to { transform: rotate(1turn); }
}
@keyframes motrice-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
	.motrice-avatar::before,
	.motrice-avatar img {
		animation: none;
	}
}

/* ---- Logo strip ---- */
.motrice-logos-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
	flex-wrap: wrap;
}
.motrice-logos-row img {
	display: inline-block;
	width: auto;
	opacity: 0.5;
	filter: grayscale(1);
	transition: opacity 0.2s ease, filter 0.2s ease;
}
.motrice-logos-row img:hover {
	opacity: 1;
	filter: none;
}
@media (max-width: 640px) {
	.motrice-logos-row {
		gap: 1.3rem;
	}
	.motrice-logos-row img {
		height: 18px;
	}
}
.motrice-scroll-cue {
	animation: motrice-bounce 2.4s ease-in-out infinite;
}
@keyframes motrice-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(8px); }
}

/* ---- Bento posts grid ---- */
.motrice-bento .wp-block-post-template {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.motrice-bento .wp-block-post {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--50);
	overflow: hidden;
	min-width: 0;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.motrice-bento .wp-block-post-title,
.motrice-bento .wp-block-post-excerpt {
	overflow-wrap: break-word;
}
.motrice-bento .wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.28);
}
.motrice-bento .wp-block-post-featured-image img {
	border-radius: 12px;
	transition: transform 0.4s ease;
}
.motrice-bento .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}
.motrice-bento .wp-block-post:first-child {
	grid-column: 1 / -1;
}
.motrice-bento .wp-block-post:first-child .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
}
@media (max-width: 640px) {
	.motrice-bento .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
	.motrice-bento .wp-block-post:first-child {
		grid-column: span 1;
	}
}

/* ---- Reveal on scroll (armed only when JS runs) ---- */
html.motrice-js .motrice-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html.motrice-js .motrice-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.motrice-js .motrice-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.motrice-scroll-cue { animation: none; }
}

/* ---- Post meta pills ---- */
.motrice-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---- Links ---- */
a {
	text-underline-offset: 0.18em;
}
.wp-block-post-content a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

/* ---- Topics chips ---- */
.motrice-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.motrice-chip {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.5em 1.1em;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.motrice-chip:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	transform: translateY(-1px);
}
.motrice-chip--all {
	border-color: transparent;
	color: var(--wp--preset--color--secondary);
}

/* ---- Subscribe form (CTA card) ---- */
.motrice-subscribe,
#mailpoet_form_1 .mailpoet_form {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.25rem;
	max-width: 440px;
	flex-wrap: wrap;
}
.motrice-subscribe input,
#mailpoet_form_1 .mailpoet_text {
	flex: 1;
	min-width: 200px;
	padding: 0.7em 1.1em !important;
	border-radius: 999px !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent) !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast);
	font: inherit;
}
#mailpoet_form_1 .mailpoet_paragraph {
	margin-bottom: 0;
	flex: 1;
	min-width: 200px;
}
#mailpoet_form_1 .mailpoet_paragraph:has(.mailpoet_submit) {
	flex: 0 0 auto;
}
.motrice-subscribe button,
#mailpoet_form_1 .mailpoet_submit {
	padding: 0.7em 1.5em !important;
	border-radius: 999px !important;
	border: none !important;
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s ease;
}
.motrice-subscribe button:hover,
#mailpoet_form_1 .mailpoet_submit:hover {
	background: var(--wp--preset--color--primary) !important;
}
#mailpoet_form_1 .mailpoet_text_label {
	display: none;
}
.motrice-cta .mailpoet_message .mailpoet_validate_success {
	font-weight: 600;
}
.motrice-subscribe-note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	color: var(--wp--preset--color--secondary);
	margin-top: 0.75rem;
	letter-spacing: 0.03em;
}

/* ---- Author card ---- */
.motrice-author {
	gap: 1.25rem;
}
.motrice-author img {
	border-radius: 50%;
}

/* ---- Reading progress (single posts) ---- */
.motrice-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: var(--wp--preset--color--primary);
	z-index: 200;
	transition: width 0.1s linear;
}

/* ---- Header CTA ---- */
.motrice-header-cta .wp-block-button__link {
	padding: 0.45em 1.15em;
	font-size: 0.8rem;
}

/* ---- CTA card ---- */
.motrice-cta {
	border-radius: 24px;
	position: relative;
	overflow: hidden;
}
.motrice-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(600px 300px at 20% -10%, color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent), transparent 70%);
	pointer-events: none;
}

/* ---- Code blocks feel technical ---- */
.wp-block-code {
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}