:root {
	--font-body: var(--wp--preset--font-family--sans);
	--content-width: 1200px;
	--reading-width: 760px;
}

/* ── Hide on mobile (< 768px) ── */
@media (max-width: 767px) {
	.wp-block-hidden-mobile {
		display: none !important;
	}
}

/* ── Hide on desktop (>= 768px) ── */
@media (min-width: 768px) {
	.wp-block-hidden-desktop {
		display: none !important;
	}
}

/* ── Mobile font-size overrides (< 768px) ── */
@media (max-width: 767px) {
	body {
		--wp--preset--font-size--3-xl: 2rem;
		--wp--preset--font-size--2-xl: 1.375rem;
		--wp--preset--font-size--xl: 1.125rem;
		--wp--preset--font-size--lg: 1rem;
		--wp--preset--font-size--md: 0.9375rem;
		--wp--preset--font-size--base: 0.875rem;
		--wp--preset--font-size--sm: 0.8125rem;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 68px;
}

body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-accent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible {
	color: var(--color-accent);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	-webkit-text-stroke: 0.4px currentColor;
	text-stroke: 0.4px currentColor;
	line-height: 1.08;
	letter-spacing: -0.022em;
	margin: 0 0 0.5em;
}

/* ── Hero engine strip ── */
.hero-engine-strip {
	margin-top: 80px;
}

@media (max-width: 767px) {
	.hero-engine-strip {
		margin-top: 40px;
	}
}

.sctn {
	scroll-snap-align: start;
	scroll-margin: -68px;
}

p {
	margin: 0 0 1em;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	background: var(--color-card);
	border: 1px solid var(--color-border);
}

.site-footer {
	border: none;
	scroll-snap-align: start;
}

.site-footer__inner,
.content-wrap {
	width: min(100% - 2rem, var(--content-width));
	margin-inline: auto;
}

.site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1rem;
}

@media (max-width: 767px) {
	.site-footer__inner {
		display: block;
	}

	.site-footer__navigation {
		margin-top: 1rem;
	}
}

.site-main {
	min-height: 60vh;
	margin-top: -80px;
}

.content-wrap {
	/*padding-block: clamp(2.5rem, 6vw, 5rem);*/
}

.entry {
	max-width: var(--reading-width);
}

.single .entry {
	max-width: var(--content-width);
}

.single .entry-content > * {
	max-width: 100%;
}

.single .entry-cta {
	max-width: 100%;
	background: linear-gradient(135deg, var(--color-ink) 0%, rgba(var(--color-violet-rgb), 0.12) 100%);
	border-color: rgba(255, 255, 255, 0.08);
}

.single .entry-cta__text {
	color: #fff;
}

.xsingle .site-main,
.blog .site-main,
.archive .site-main {
	background: var(--color-ink);
	color: #fff;
}

.single .breadcrumbs,
.single .breadcrumbs a,
.blog .breadcrumbs,
.blog .breadcrumbs a,
.archive .breadcrumbs,
.archive .breadcrumbs a {
	color: rgba(255, 255, 255, 0.55);
}

.single .breadcrumbs__current,
.blog .breadcrumbs__current,
.archive .breadcrumbs__current {
	color: #fff;
}

.single .entry-meta,
.blog .archive-description,
.archive .archive-description {
	color: rgba(255, 255, 255, 0.55);
}

.entry--centered {
	text-align: center;
}

.entry-title,
.archive-title {
	margin: 0;
	line-height: 1.05;
}

.entry-header,
.archive-header {
	margin-bottom: 2rem;
}

.entry-meta,
.archive-description {
	color: var(--color-mut);
}

.post-card__excerpt {
	color: rgba(255, 255, 255, 0.6);
}

.entry-content > * {
	max-width: var(--reading-width);
}

.entry-content > .alignwide {
	max-width: var(--content-width);
}

.entry-content > .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 1.5rem;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: linear-gradient(135deg, var(--color-ink) 0%, rgba(var(--color-violet-rgb), 0.12) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	overflow: hidden;
	transition: background 0.3s ease, box-shadow 0.2s ease, translate 0.2s ease;
}

.post-card:hover {
	background: linear-gradient(135deg, rgba(var(--color-violet-rgb), 0.22) 0%, var(--color-ink) 100%);
	box-shadow: 0 8px 30px rgba(var(--color-violet-rgb), 0.15);
	translate: 0 -2px;
}

.post-card__image {
	display: block;
	overflow: hidden;
}

.post-card__image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: scale 0.3s ease;
}

.post-card:hover .post-card__image img {
	scale: 1.05;
}

.post-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem 1.25rem 1.5rem;
	flex: 1;
}

.post-card__title {
	margin: 0;
	line-height: 1.3;
}

.post-card__title a {
	color: #fff;
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--color-accent);
}

.post-card__excerpt {
	line-height: 1.6;
}

.post-card__excerpt p {
	margin: 0;
}

.post-card__link {
	margin-top: auto;
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.post-card__link:hover {
	text-decoration: underline;
}

.blog-header {
	margin-bottom: 3rem;
}

.blog-title {
	line-height: 1.05;
	margin: 0;
}

.breadcrumbs {
	margin-bottom: 1.5rem;
	color: var(--color-mut);
}

.breadcrumbs a {
	color: var(--color-mut);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

.breadcrumbs__sep {
	margin: 0 0.5em;
}

.breadcrumbs__current {
	color: var(--color-ink);
	font-weight: 500;
}

.entry-cta {
	margin-top: 3rem;
	padding: 2rem;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	text-align: center;
	max-width: var(--reading-width);
}

.entry-cta__text {
	font-weight: 600;
	margin: 0 0 1rem;
	color: var(--color-ink);
}

.entry-cta__btn {
	display: inline-block;
	padding: 0.75rem 2rem;
	background: var(--color-accent);
	color: var(--color-card);
	border: none;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.entry-cta__btn:hover {
	background: var(--color-accent);
}

/* ── CTA Button Overrides (reuse theme gradient + hover) ── */
.wp-block-button__link.has-accent-background-color {
	background: linear-gradient(100deg, var(--color-violet) 0%, var(--color-blue) 55%, var(--color-cyan) 100%) !important;
	box-shadow: 0 8px 22px -6px rgba(var(--color-violet-rgb), 0.50);
	border: none !important;
	color: var(--color-card) !important;
	transition: box-shadow 0.2s ease, transform 0.25s ease;
}

.wp-block-button__link.has-accent-background-color:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -8px rgba(var(--color-violet-rgb), 0.60);
}

.wp-block-button__link.has-paper-background-color {
	background: var(--color-card) !important;
	border: 2px solid var(--color-border) !important;
	color: var(--color-accent) !important;
	transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.wp-block-button__link.has-paper-background-color:hover {
	border-color: var(--color-violet) !important;
	color: var(--color-violet) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -10px rgba(var(--color-violet-rgb), 0.40);
}


/* ── Toolkit Slider ── */
.toolkit-slider {
	--tk-card-bg: var(--color-card);
	--tk-card-border: rgba(var(--color-ink-rgb), 0.06);
	--tk-radius: 20px;
}

.toolkit-slider__container {
	width: min(100% - 2rem, var(--content-width));
	margin-inline: auto;
	position: relative;
	padding-bottom: clamp(24px, 4vw, 48px);
	margin-bottom:20px;
}

.toolkit-slider__heading {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-mut);
	margin: 0 0 8px;
}

.toolkit-slider__count {
	font-weight: 400;
	opacity: 0.5;
}

.toolkit-slider__subtitle {
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.022em;
	color: var(--color-ink);
	margin: 0 0 clamp(12px, 2vw, 24px);
}

.toolkit-slider__nav-desktop,
.toolkit-slider__nav-mobile {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 8px;
	z-index: 2;
}

.toolkit-slider__nav-mobile {
	position: static;
	justify-content: center;
	margin-top: 20px;
}

.toolkit-slider__nav-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(var(--color-ink-rgb), 0.12);
	background: var(--color-card);
	color: var(--color-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	padding: 0;
}

.toolkit-slider__nav-btn:hover {
	background: rgba(var(--color-violet-rgb), 0.06);
	border-color: rgba(var(--color-violet-rgb), 0.25);
	box-shadow: 0 4px 14px -4px rgba(var(--color-violet-rgb), 0.2);
}

.toolkit-slider__nav-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.toolkit-slider .flickity-prev-next-button {
	display: none !important;
}

.toolkit-slider__carousel {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.toolkit-slider__carousel .flickity-viewport {
	height: 420px;
}
.toolkit-card.carousel-cell {
	width: 360px;
	margin-right: 12px;
	counter-increment: carousel-cell;
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolkit-card {
	background: var(--tk-card-bg);
	border: 1px solid var(--tk-card-border);
	border-radius: var(--tk-radius);
	padding: 0;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	height: 420px;
}

.toolkit-card:hover {
	border-color: rgba(var(--color-violet-rgb), 0.15);
	box-shadow: 0 8px 32px -8px rgba(var(--color-violet-rgb), 0.12);
}

.toolkit-card__main {
	flex: 0 0 360px;
	min-width: 0;
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.toolkit-card__header {
	position: relative;
	z-index: 1;
}

.toolkit-card__title {
	font-weight: 700;
	color: var(--color-ink);
	margin: 0 0 4px;
}

.toolkit-card__subtitle {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--color-mut);
	margin: 0 0 20px;
	line-height: 1.4;
}

.toolkit-card__subtitle br {
	display: block;
}

.toolkit-card__trigger {
	position: absolute;
	top: 0;
	right: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(var(--color-ink-rgb), 0.1);
	background: rgba(var(--color-ink-rgb), 0.03);
	color: var(--color-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.2s ease, transform 0.3s ease;
}

.toolkit-card__trigger:hover {
	background: rgba(var(--color-violet-rgb), 0.08);
}

.toolkit-card__trigger-icon {
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolkit-card__trigger-minus {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.toolkit-card.is-expanded .toolkit-card__trigger-icon {
	transform: rotate(0deg);
}

.toolkit-card.is-expanded .toolkit-card__trigger-plus {
	opacity: 0;
}

.toolkit-card.is-expanded .toolkit-card__trigger-minus {
	opacity: 1;
}

.toolkit-card__poster {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(var(--color-violet-rgb), 0.06), rgba(var(--color-blue-rgb), 0.06));
}

.toolkit-card__poster img {
	width: 100%;
	height: auto;
	display: block;
}

.toolkit-card__content {
	flex: 0 0 0;
	width: 0;
	overflow: hidden;
	overflow-y: auto;
	opacity: 0;
	transition: flex 0.4s ease, width 0.4s ease, opacity 0.25s ease, padding 0.4s ease;
	border-left: 1px solid transparent;
}

.toolkit-card.is-expanded {
	width: 720px;
}

.toolkit-card.is-expanded .toolkit-card__content {
	flex: 0 0 360px;
	width: 360px;
	opacity: 1;
	border-left-color: var(--tk-card-border);
	padding: 20px 20px 20px 20px;
}

.toolkit-card__detail-img {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
	background: linear-gradient(135deg, rgba(var(--color-violet-rgb), 0.06), rgba(var(--color-blue-rgb), 0.06));
}

.toolkit-card__detail-img img {
	width: 100%!important;
	display: block;
	height: 220px;
	object-fit: cover;
}

.toolkit-card__description {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--color-mut);
	margin: 0 0 16px;
}

.toolkit-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	background: var(--color-ink);
	color: #fff;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.toolkit-card__cta:hover {
	background: linear-gradient(100deg, var(--color-violet) 0%, var(--color-blue) 55%, var(--color-cyan) 100%);
	transform: translateY(-1px);
}

@media (min-width: 768px) {
	.toolkit-card.carousel-cell {
		width: 400px;
	}

	.toolkit-card.is-expanded {
		width: 800px;
	}

	.toolkit-card__main {
		flex: 0 0 400px;
	}

	.toolkit-card.is-expanded .toolkit-card__content {
		flex: 0 0 400px;
		width: 400px;
	}
}

@media (max-width: 767px) {
	.toolkit-slider__nav-desktop {
		display: none;
	}

	.toolkit-slider__nav-mobile {
		display: flex;
	}

	.toolkit-slider {
		padding-top: 0;
	}
}

@media (min-width: 768px) {
	.toolkit-slider__nav-mobile {
		display: none;
	}
}

/* ── Animated Background Block Styles ── */

.is-style-animated-bg-scroll {
	background: linear-gradient(90deg,
		var(--color-violet),
		var(--color-blue),
		var(--color-cyan),
		var(--color-violet)
	);
	background-size: 500px 100%;
	background-repeat: repeat-x;
	animation: wpAnimatedBgScroll 10s linear infinite;
}

.is-style-animated-bg-morph {
	background: linear-gradient(315deg,
		var(--color-violet) 3%,
		var(--color-blue) 38%,
		var(--color-cyan) 68%,
		var(--color-violet) 98%
	);
	background-size: 400% 400%;
	animation: wpAnimatedBgMorph 15s ease infinite;
}

.is-style-animated-bg-waves {
	background: linear-gradient(315deg,
		var(--color-violet) 3%,
		var(--color-blue) 38%,
		var(--color-cyan) 68%,
		var(--color-violet) 98%
	);
	background-size: 400% 400%;
	animation: wpAnimatedBgMorph 15s ease infinite;
	position: relative;
	overflow: hidden;
}

.is-style-animated-bg-waves::before,
.is-style-animated-bg-waves::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 200%;
	border-radius: 1000% 1000% 0 0;
	background: rgba(255, 255, 255, 0.25);
	pointer-events: none;
	z-index: 0;
}

.is-style-animated-bg-waves::before {
	height: 6em;
	opacity: 0.8;
	animation: wpAnimatedWave 12s -3s linear infinite;
}

.is-style-animated-bg-waves::after {
	height: 4em;
	bottom: -2em;
	opacity: 0.6;
	animation: wpAnimatedWave 18s linear reverse infinite;
}

.is-style-animated-bg-waves > * {
	position: relative;
	z-index: 1;
}

@keyframes wpAnimatedBgScroll {
	from { background-position-x: 0; }
	to { background-position-x: 500px; }
}

@keyframes wpAnimatedBgMorph {
	0%, 100% { background-position: 0% 0%; }
	50% { background-position: 100% 100%; }
}

@keyframes wpAnimatedWave {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-25%); }
	50% { transform: translateX(-50%); }
	75% { transform: translateX(-25%); }
}

/* ── Animated BG – Blobs ── */
.is-style-animated-bg-blobs {
	background:
		radial-gradient(ellipse at 25% 25%, rgba(var(--color-violet-rgb), 0.45) 0%, transparent 55%),
		radial-gradient(ellipse at 75% 75%, rgba(var(--color-blue-rgb), 0.45) 0%, transparent 55%),
		radial-gradient(ellipse at 50% 50%, rgba(var(--color-cyan-rgb), 0.35) 0%, transparent 60%);
	background-size: 180% 180%;
	background-color: var(--color-paper);
	animation: wpBgBlobs 18s ease infinite alternate;
}
@keyframes wpBgBlobs {
	from { background-position: 0% 0%; }
	to { background-position: 100% 100%; }
}

/* ── Animated BG – Dots ── */
.is-style-animated-bg-dots {
	background-color: var(--color-paper);
	background-image:
		radial-gradient(circle, var(--color-violet) 2px, transparent 2px);
	background-size: 32px 32px;
	animation: wpBgDots 20s linear infinite;
}
@keyframes wpBgDots {
	from { background-position: 0 0; }
	to { background-position: 32px 32px; }
}

/* ── Animated BG – Stripes ── */
.is-style-animated-bg-stripes {
	background: repeating-linear-gradient(
		45deg,
		var(--color-violet) 0px,
		var(--color-violet) 20px,
		var(--color-blue) 20px,
		var(--color-blue) 40px,
		var(--color-cyan) 40px,
		var(--color-cyan) 60px
	);
	background-size: 200% 200%;
	animation: wpBgStripes 12s linear infinite;
}
@keyframes wpBgStripes {
	from { background-position: 0 0; }
	to { background-position: 170px 170px; }
}

/* ── Animated BG – Aurora ── */
.is-style-animated-bg-aurora {
	background:
		linear-gradient(180deg,
			transparent 0%,
			rgba(var(--color-violet-rgb), 0.3) 20%,
			rgba(var(--color-blue-rgb), 0.4) 40%,
			rgba(var(--color-cyan-rgb), 0.4) 60%,
			rgba(var(--color-violet-rgb), 0.3) 80%,
			transparent 100%
		),
		linear-gradient(90deg,
			transparent 0%,
			rgba(var(--color-blue-rgb), 0.35) 25%,
			rgba(var(--color-cyan-rgb), 0.45) 50%,
			rgba(var(--color-violet-rgb), 0.35) 75%,
			transparent 100%
		);
	background-color: var(--color-ink);
	background-size: 300% 300%, 200% 200%;
	animation: wpBgAurora 20s ease infinite;
}
@keyframes wpBgAurora {
	0%, 100% { background-position: 0% 0%, 0% 0%; }
	25% { background-position: 50% 50%, 100% 50%; }
	50% { background-position: 100% 100%, 50% 100%; }
	75% { background-position: 50% 50%, 0% 50%; }
}

/* ── Animated BG – Pulse ── */
.is-style-animated-bg-pulse {
	background:
		radial-gradient(circle at center,
			var(--color-violet) 0%,
			var(--color-blue) 25%,
			var(--color-cyan) 50%,
			transparent 60%
		);
	background-size: 200% 200%;
	background-color: var(--color-paper);
	animation: wpBgPulse 3s ease-in-out infinite;
}
@keyframes wpBgPulse {
	0%, 100% { background-size: 200% 200%; background-position: center; }
	50% { background-size: 100% 100%; background-position: center; }
}

/* ── Animated BG – Shimmer ── */
.is-style-animated-bg-shimmer {
	background:
		linear-gradient(120deg,
			transparent 0%,
			transparent 30%,
			rgba(var(--color-violet-rgb), 0.25) 45%,
			rgba(var(--color-cyan-rgb), 0.35) 50%,
			rgba(var(--color-blue-rgb), 0.25) 55%,
			transparent 70%,
			transparent 100%
		);
	background-size: 300% 100%;
	background-color: var(--color-ink);
	animation: wpBgShimmer 4s ease-in-out infinite;
}
@keyframes wpBgShimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* ── Animated BG – Bokeh ── */
.is-style-animated-bg-bokeh {
	background:
		radial-gradient(circle at 15% 30%, rgba(var(--color-violet-rgb), 0.3) 0%, rgba(var(--color-violet-rgb), 0.05) 25%, transparent 40%),
		radial-gradient(circle at 85% 20%, rgba(var(--color-blue-rgb), 0.35) 0%, rgba(var(--color-blue-rgb), 0.05) 30%, transparent 45%),
		radial-gradient(circle at 50% 80%, rgba(var(--color-cyan-rgb), 0.3) 0%, rgba(var(--color-cyan-rgb), 0.05) 20%, transparent 35%),
		radial-gradient(circle at 70% 50%, rgba(var(--color-violet-rgb), 0.25) 0%, transparent 40%),
		radial-gradient(circle at 30% 60%, rgba(var(--color-blue-rgb), 0.2) 0%, transparent 35%),
		radial-gradient(circle at 90% 90%, rgba(var(--color-cyan-rgb), 0.25) 0%, transparent 40%),
		radial-gradient(circle at 10% 10%, rgba(var(--color-violet-rgb), 0.2) 0%, transparent 35%);
	background-size: 250% 250%;
	background-color: var(--color-ink);
	animation: wpBgBokeh 25s ease infinite alternate;
}
@keyframes wpBgBokeh {
	from { background-position: 0% 0%; }
	to { background-position: 100% 100%; }
}

/* ── Animated BG – Rain ── */
.is-style-animated-bg-rain {
	background:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(var(--color-violet-rgb), 0.15) 2px,
			rgba(var(--color-violet-rgb), 0.15) 4px
		),
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 5px,
			rgba(var(--color-blue-rgb), 0.2) 5px,
			rgba(var(--color-blue-rgb), 0.2) 7px
		);
	background-size: 100% 24px, 100% 32px;
	background-color: var(--color-ink);
	animation: wpBgRain 0.8s linear infinite;
}
@keyframes wpBgRain {
	from { background-position: 0 0, 0 0; }
	to { background-position: 0 24px, 0 32px; }
}

/* ── Animated BG – Fire ── */
.is-style-animated-bg-fire {
	background:
		radial-gradient(ellipse at 50% 100%, var(--color-violet) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 80%, var(--color-blue) 0%, transparent 40%),
		radial-gradient(ellipse at 50% 60%, var(--color-cyan) 0%, transparent 35%);
	background-size: 100% 200%, 100% 180%, 100% 160%;
	background-repeat: no-repeat;
	background-color: var(--color-ink);
	animation: wpBgFire 6s ease infinite alternate;
}
@keyframes wpBgFire {
	from { background-position: 50% 100%, 50% 100%, 50% 100%; }
	to { background-position: 50% 80%, 50% 60%, 50% 40%; }
}

/* ── Animated BG – Mesh ── */
.is-style-animated-bg-mesh {
	background:
		radial-gradient(at 10% 20%, rgba(var(--color-violet-rgb), 0.4) 0%, transparent 50%),
		radial-gradient(at 90% 30%, rgba(var(--color-blue-rgb), 0.4) 0%, transparent 50%),
		radial-gradient(at 30% 80%, rgba(var(--color-cyan-rgb), 0.4) 0%, transparent 50%),
		radial-gradient(at 70% 70%, rgba(var(--color-violet-rgb), 0.3) 0%, transparent 50%),
		radial-gradient(at 50% 50%, rgba(var(--color-blue-rgb), 0.3) 0%, transparent 50%);
	background-size: 220% 220%;
	background-color: var(--color-paper);
	animation: wpBgMesh 30s ease infinite alternate;
}
@keyframes wpBgMesh {
	from { background-position: 0% 0%; }
	to { background-position: 100% 100%; }
}

/* ── Animated BG – Noise ── */
.is-style-animated-bg-noise {
	background:
		linear-gradient(135deg, var(--color-violet) 0%, var(--color-blue) 50%, var(--color-cyan) 100%);
	position: relative;
}
.is-style-animated-bg-noise::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
	background-size: 200px 200px;
	opacity: 0.6;
	animation: wpBgNoise 0.5s steps(3) infinite;
}
.is-style-animated-bg-noise > * {
	position: relative;
	z-index: 1;
}
@keyframes wpBgNoise {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-5%, -5%); }
	50% { transform: translate(5%, -10%); }
	75% { transform: translate(-10%, 5%); }
	100% { transform: translate(0, 0); }
}

/* ── Animated BG – Ripple ── */
.is-style-animated-bg-ripple {
	background:
		repeating-radial-gradient(circle at center,
			transparent 0px,
			transparent 30px,
			rgba(var(--color-violet-rgb), 0.3) 30px,
			rgba(var(--color-violet-rgb), 0.3) 32px,
			transparent 32px,
			transparent 40px
		),
		repeating-radial-gradient(circle at center,
			transparent 0px,
			transparent 50px,
			rgba(var(--color-cyan-rgb), 0.25) 50px,
			rgba(var(--color-cyan-rgb), 0.25) 52px,
			transparent 52px,
			transparent 60px
		);
	background-size: 300% 300%;
	background-color: var(--color-ink);
	animation: wpBgRipple 10s linear infinite;
}
@keyframes wpBgRipple {
	from { background-size: 300% 300%; }
	to { background-size: 100% 100%; }
}

/* ── Animated BG – Chevron ── */
.is-style-animated-bg-chevron {
	background: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 10px,
		var(--color-violet) 10px,
		var(--color-violet) 20px
	),
	repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		var(--color-blue) 10px,
		var(--color-blue) 20px
	),
	repeating-linear-gradient(
		-45deg,
		var(--color-cyan) 0px,
		var(--color-cyan) 2px,
		transparent 2px,
		transparent 20px
	);
	background-color: var(--color-paper);
	animation: wpBgChevron 8s linear infinite;
}
@keyframes wpBgChevron {
	from { background-position: 0 0, 0 0, 0 0; }
	to { background-position: 56px 56px, 56px 56px, 56px 56px; }
}

/* ── Animated BG – Clouds ── */
.is-style-animated-bg-clouds {
	background:
		radial-gradient(ellipse at 15% 60%, rgba(var(--color-blue-rgb), 0.3) 0%, transparent 80%),
		radial-gradient(ellipse at 45% 55%, rgba(var(--color-violet-rgb), 0.25) 0%, transparent 78%),
		radial-gradient(ellipse at 70% 50%, rgba(var(--color-cyan-rgb), 0.3) 0%, transparent 82%),
		radial-gradient(ellipse at 90% 55%, rgba(var(--color-blue-rgb), 0.2) 0%, transparent 75%),
		radial-gradient(ellipse at 25% 65%, rgba(var(--color-violet-rgb), 0.2) 0%, transparent 72%),
		radial-gradient(ellipse at 60% 60%, rgba(var(--color-cyan-rgb), 0.15) 0%, transparent 78%);
	background-size: 300% 150%;
	background-color: var(--color-paper);
	animation: wpBgClouds 10s ease infinite;
}
@keyframes wpBgClouds {
	0%   { background-position: 0% 0%; }
	50%  { background-position: 100% 0%; }
	100% { background-position: 0% 0%; }
}

/* ── Animated BG – Kaleidoscope ── */
.is-style-animated-bg-kaleidoscope {
	background:
		conic-gradient(
			from 0deg,
			var(--color-violet) 0deg 60deg,
			var(--color-blue) 60deg 120deg,
			var(--color-cyan) 120deg 180deg,
			var(--color-violet) 180deg 240deg,
			var(--color-blue) 240deg 300deg,
			var(--color-cyan) 300deg 360deg
		);
	background-size: 150% 150%;
	background-position: center;
	animation: wpBgKaleidoscope 20s linear infinite;
}
@keyframes wpBgKaleidoscope {
	from { transform: rotate(0deg) scale(1); }
	to { transform: rotate(360deg) scale(1.5); }
}

/* ── Animated BG – Stars ── */
.is-style-animated-bg-stars {
	background:
		radial-gradient(1px 1px at 10% 10%, var(--color-cyan) 0%, transparent 100%),
		radial-gradient(1px 1px at 30% 25%, var(--color-violet) 0%, transparent 100%),
		radial-gradient(1px 1px at 60% 15%, var(--color-blue) 0%, transparent 100%),
		radial-gradient(1px 1px at 80% 30%, var(--color-cyan) 0%, transparent 100%),
		radial-gradient(1px 1px at 15% 50%, var(--color-violet) 0%, transparent 100%),
		radial-gradient(1px 1px at 45% 45%, var(--color-blue) 0%, transparent 100%),
		radial-gradient(1px 1px at 70% 50%, var(--color-cyan) 0%, transparent 100%),
		radial-gradient(1px 1px at 90% 65%, var(--color-violet) 0%, transparent 100%),
		radial-gradient(1px 1px at 25% 75%, var(--color-blue) 0%, transparent 100%),
		radial-gradient(1px 1px at 55% 80%, var(--color-cyan) 0%, transparent 100%),
		radial-gradient(1px 1px at 85% 85%, var(--color-violet) 0%, transparent 100%),
		radial-gradient(1px 1px at 5% 85%, var(--color-blue) 0%, transparent 100%),
		radial-gradient(1.5px 1.5px at 40% 90%, var(--color-cyan) 0%, transparent 100%),
		radial-gradient(1.5px 1.5px at 75% 95%, var(--color-violet) 0%, transparent 100%),
		radial-gradient(2px 2px at 20% 35%, rgba(var(--color-cyan-rgb), 0.6) 0%, transparent 100%),
		radial-gradient(2px 2px at 65% 70%, rgba(var(--color-violet-rgb), 0.6) 0%, transparent 100%);
	background-size: 200px 200px;
	background-color: var(--color-ink);
	animation: wpBgStars 60s linear infinite;
}
@keyframes wpBgStars {
	from { background-position: 0 0; }
	to { background-position: 200px 200px; }
}

/* ── Animated BG – Glow ── */
.is-style-animated-bg-glow {
	background:
		radial-gradient(circle at 50% 0%, var(--color-cyan) 0%, transparent 50%),
		radial-gradient(circle at 0% 50%, var(--color-violet) 0%, transparent 50%),
		radial-gradient(circle at 100% 50%, var(--color-blue) 0%, transparent 50%),
		radial-gradient(circle at 50% 100%, var(--color-cyan) 0%, transparent 50%);
	background-size: 100% 100%;
	background-color: var(--color-ink);
	animation: wpBgGlow 8s ease infinite alternate;
}
@keyframes wpBgGlow {
	from { background-size: 100% 100%; filter: brightness(1); }
	to { background-size: 150% 150%; filter: brightness(1.3); }
}

@media (prefers-reduced-motion: reduce) {
	.is-style-animated-bg-scroll,
	.is-style-animated-bg-morph,
	.is-style-animated-bg-waves,
	.is-style-animated-bg-blobs,
	.is-style-animated-bg-dots,
	.is-style-animated-bg-stripes,
	.is-style-animated-bg-aurora,
	.is-style-animated-bg-pulse,
	.is-style-animated-bg-shimmer,
	.is-style-animated-bg-bokeh,
	.is-style-animated-bg-rain,
	.is-style-animated-bg-fire,
	.is-style-animated-bg-mesh,
	.is-style-animated-bg-noise::before,
	.is-style-animated-bg-ripple,
	.is-style-animated-bg-chevron,
	.is-style-animated-bg-clouds,
	.is-style-animated-bg-kaleidoscope,
	.is-style-animated-bg-stars,
	.is-style-animated-bg-glow {
		animation: none;
	}
	.is-style-animated-bg-waves::before,
	.is-style-animated-bg-waves::after {
		animation: none;
	}
}