/*
 * VCJ Mascots
 * Each mascot is a background image on a pseudo-element: decorative only,
 * never part of the content. One block per placement; delete a block to
 * remove that mascot.
 */

/* ---------- shared ---------- */
.error404 #main-content .entry-title::before,
.search-no-results .entry-header .entry-title::before,
.page-id-569 .entry-header .entry-title::before,
.page-template-page-newsletter .entry-header .entry-title::before,
.page-template-page-about .entry-header .entry-title::before,
.post-type-archive-benchmark .entry-header .entry-title::before,
.post-type-archive-ai_model .entry-header .entry-title::before,
.post-type-archive-comparison .entry-header .entry-title::before,
.c-front-header::after,
.c-footer__bottom::before,
.vcj-nl::after,
.vcj-nl-slidein::before,
.entry-content blockquote::before,
.c-toc-rail::before,
.c-author-card::after,
.c-post-nav::before,
#respond::before {
	content: "";
	background: center bottom / contain no-repeat;
	pointer-events: none;
}

@keyframes vcj-mascot-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}
@keyframes vcj-mascot-wiggle {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-6deg); }
	75% { transform: rotate(6deg); }
}

/* ---------- page-title mascots (sit to the left of the H1) ---------- */
.error404 #main-content .entry-title::before,
.search-no-results .entry-header .entry-title::before,
.page-id-569 .entry-header .entry-title::before,
.page-template-page-newsletter .entry-header .entry-title::before,
.page-template-page-about .entry-header .entry-title::before,
.post-type-archive-benchmark .entry-header .entry-title::before,
.post-type-archive-ai_model .entry-header .entry-title::before,
.post-type-archive-comparison .entry-header .entry-title::before {
	display: inline-block;
	width: 1.5em;
	height: 1.1em;
	margin: -0.25em 0.3em 0 0;
	vertical-align: middle;
	background-position: center;
	animation: vcj-mascot-bob 3s ease-in-out infinite;
}

/* Centred headers: mascot goes above the title instead of beside it. */
.error404 #main-content .entry-title::before,
.page-template-page-newsletter .entry-header .entry-title::before {
	display: block;
	width: 132px;
	height: 96px;
	margin: 0 auto 14px;
}

/* 404: crashed */
.error404 #main-content .entry-title::before { background-image: url(../m2/xeyes.png); animation: none; }
/* Search with no results: puzzled */
.search-no-results .entry-header .entry-title::before { background-image: url(../m2/question.png); }
/* /newsletter/thanks/: confirmed subscriber */
.page-id-569 .entry-header .entry-title::before { background-image: url(../m2/heart.png); }
/* /newsletter/ */
.page-template-page-newsletter .entry-header .entry-title::before { background-image: url(../m2/confetti.png); }
.page-id-569.page-template-page-newsletter .entry-header .entry-title::before { background-image: url(../m2/heart.png); }
/* About */
.page-template-page-about .entry-header .entry-title::before { background-image: url(../m2/coffee.png); }
/* Benchmarks archive: the investigator */
.post-type-archive-benchmark .entry-header .entry-title::before { background-image: url(../m2/detective.png); }
/* Rankings / leaderboard: the winner */
.post-type-archive-ai_model .entry-header .entry-title::before { background-image: url(../m2/shades.png); }
/* Comparisons: head to head */
.post-type-archive-comparison .entry-header .entry-title::before { background-image: url(../m2/squint.png); }

/* ---------- homepage ---------- */
/* Sits on the rule under the front-page strapline. */
.c-front-header { position: relative; }
.c-front-header::after {
	position: absolute;
	right: 4px;
	bottom: -2px;
	width: 54px;
	height: 36px;
	background-image: url(../m2/plain.png);
}

/* ---------- newsletter forms ---------- */
.vcj-nl { position: relative; }
.vcj-nl::after {
	position: absolute;
	top: -50px;
	right: 18px;
	width: 104px;
	height: 56px;
	background-image: url(../m2/confetti.png);
	transition: transform 0.2s ease;
}
.vcj-nl--full::after { top: -64px; width: 92px; height: 70px; background-image: url(../m2/heart.png); }
.vcj-nl:hover::after { animation: vcj-mascot-wiggle 0.6s ease-in-out; }
/* Form states */
.vcj-nl:has(.vcj-nl-form.is-loading)::after { background-image: url(../m2/dizzy.png); }
.vcj-nl:has(.vcj-nl-form.is-success)::after { background-image: url(../m2/cheer.png); animation: vcj-mascot-bob 1s ease-in-out 3; }
.vcj-nl:has(.vcj-nl-form.is-error)::after { background-image: url(../m2/melt.png); }

/* Desktop slide-in */
.vcj-nl-slidein::before {
	position: absolute;
	top: -62px;
	left: 16px;
	width: 68px;
	height: 68px;
	background-image: url(../m2/sparkle.png);
}
.vcj-nl-slidein .vcj-nl::after { display: none; }

/* ---------- articles ---------- */
/* Quotes and callouts: the idea */
.entry-content blockquote { position: relative; }
.entry-content blockquote::before {
	position: absolute;
	top: -44px;
	right: 12px;
	width: 44px;
	height: 64px;
	background-image: url(../m2/idea.png);
}

/* Table of contents rail: the reader */
.c-toc-rail::before {
	display: block;
	width: 72px;
	height: 52px;
	margin: 0 0 8px 0;
	background-position: left bottom;
	background-image: url(../m2/reader.png);
}

/* Author card */
.c-author-card { position: relative; }
.c-author-card::after {
	position: absolute;
	top: -52px;
	right: 18px;
	width: 66px;
	height: 60px;
	background-image: url(../m2/headphones.png);
}

/* "Keep reading" block */
.c-post-nav { position: relative; }
.c-post-nav::before {
	position: absolute;
	top: -44px;
	left: 6px;
	width: 62px;
	height: 40px;
	background-image: url(../m2/lookup.png);
}

/* Comment form: speech bubble */
#respond { position: relative; }
#respond::before {
	position: absolute;
	top: -10px;
	right: 6px;
	width: 84px;
	height: 62px;
	background-image: url(../m2/bubble.png);
}

/* ---------- footer ---------- */
.c-footer__bottom { position: relative; }
.c-footer__bottom::before {
	position: absolute;
	right: 8px;
	top: -58px;
	width: 58px;
	height: 58px;
	background-image: url(../m2/sleeping.png);
}

/* ---------- small screens: keep only the ones that never overlap text ---------- */
@media (max-width: 640px) {
	.c-front-header::after,
	.c-post-nav::before,
	#respond::before,
	.c-author-card::after,
	.entry-content blockquote::before,
	.c-footer__bottom::before {
		display: none;
	}
	.vcj-nl::after, .vcj-nl--full::after { width: 72px; height: 44px; top: -40px; right: 10px; }
	.error404 #main-content .entry-title::before,
	.page-template-page-newsletter .entry-header .entry-title::before { width: 104px; height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
	.entry-title::before,
	.vcj-nl::after,
	.vcj-nl:hover::after {
		animation: none !important;
	}
}

@media print {
	.vcj-nl::after,
	.c-footer__bottom::before {
		display: none !important;
	}
}