/*
 * The host creature (inc/creature.php, assets/js/creature.js). Loaded only
 * when the creature switch is on and the page has a creature.
 *
 * Every box is reserved here (width + the aspect-ratio set on the stage), so
 * nothing on the page moves when the images arrive. Teal glow only — no coral,
 * no gold on or around the creature.
 *
 * The glow is a low, wide teal ellipse on the ground under the feet (ruled
 * 5 Oct 2026, replacing a drop-shadow that read as a halo round the body).
 * Each pose stands in a different place on the shared canvas, so the
 * ellipse follows the current pose: --gx centre, --gw width, --gy ground
 * line, all measured from the art (% of the canvas).
 */

.mmt-creature__stage {
	position: relative;
	display: block;
	width: var(--creature-w-m);
	max-width: 100%;
	margin-left: auto;
	--gx: 47%;
	--gw: 60%;
	--gy: 96%;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

@media (min-width: 782px) {
	.mmt-creature__stage {
		width: var(--creature-w);
	}
}

/* Centre alpha .40 × opacity .55 ≈ .22 at rest. */
.mmt-creature__stage::before {
	content: "";
	position: absolute;
	left: calc(var(--gx) - var(--gw) / 2);
	top: var(--gy);
	width: var(--gw);
	aspect-ratio: 7 / 1;
	transform: translateY(-50%);
	background: radial-gradient(closest-side, rgb(0 181 173 / 0.4), rgb(0 181 173 / 0));
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 250ms ease-out, left 250ms ease-out, width 250ms ease-out, top 250ms ease-out;
}

/* A reaction may brighten the glow briefly (≈ .34); it settles when the class goes. */
.mmt-creature__stage.is-reacting::before {
	opacity: 0.85;
}

.mmt-creature__stage[data-current="walking"] { --gx: 47.5%; --gw: 79%; --gy: 94.4%; }
.mmt-creature__stage[data-current="attentive"] { --gx: 46.5%; --gw: 49%; --gy: 98.4%; }
.mmt-creature__stage[data-current="asleep"] { --gx: 41%; --gw: 45%; --gy: 95.9%; }
.mmt-creature__stage[data-current="gentle-breeze"] { --gx: 50%; --gw: 80%; --gy: 94.6%; }
.mmt-creature__stage[data-current="pleased-stretch"] { --gx: 50%; --gw: 76%; --gy: 94.1%; }
.mmt-creature__stage[data-current="peeking"] { --gx: 50%; --gw: 88%; --gy: 98.1%; }

/* Poses stack on one canvas and cross-fade in place. */
.mmt-creature__pose {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 250ms ease-out;
	pointer-events: none;
}

.mmt-creature__pose.is-current {
	opacity: 1;
}

/* The end-of-article marker: no box of its own to see. */
.mmt-creature-end {
	height: 0;
}

/* Home: the peeking scene sits at the left end of the row under the hero
   picture — beside the hero, never on it. Pinned to the viewport's left edge
   at every width (ruled 8 Oct 2026): the roll is cut in the source art, so
   its cut end meets the screen edge and reads as the map continuing off-page.
   The row spans the full viewport; the glow starts 6% inside the image. */
.mmt-hero-row .mmt-creature {
	margin-right: auto;
	margin-left: 0;
}

.mmt-hero-row .mmt-creature__stage {
	margin-left: 0;
}

/* Quiet Places hub: small, in the bottom corner of the page content. */
.mmt-creature--quiet-places .mmt-creature__stage {
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * The margin companion — only where the margin beside the 720 px column can
 * hold it with room to spare, and never with reduced motion. Narrower screens
 * keep the creature where it starts. creature.js uses the same widths and
 * still hides the companion whenever anything on the page would sit under it.
 */
.mmt-creature-companion {
	display: none;
}

@media (min-width: 1120px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
	.mmt-creature-companion {
		display: block;
		position: fixed;
		right: 24px;
		bottom: 24px;
		z-index: 40;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 250ms ease-out, visibility 0s linear 250ms;
	}

	.mmt-creature-companion.is-shown {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 250ms ease-out, visibility 0s;
	}

	/* On an article the companion is the creature; the inline one stands down. */
	.mmt-creature--article .mmt-creature__stage--inline {
		display: none;
	}
}

.mmt-creature-companion .mmt-creature__stage {
	width: 140px;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mmt-creature__stage::before,
	.mmt-creature__pose {
		transition: none;
	}
}

@media print {
	.mmt-creature,
	.mmt-creature-companion {
		display: none !important;
	}
}