/*
 * Gauge element — front-end styles and the needle's travel animation.
 *
 * The SVG itself is server-rendered (Mf_Gauge), already carrying the final needle
 * angle and arc fill, so this file only has to size it and animate the way in.
 * That split is deliberate and mirrors assets/page-views-chart.css: the element
 * needs no frontend JavaScript, works behind a page cache and with JS off, and
 * stays usable inside Next Read, whose spec forbids frontend JS outright.
 *
 * The animation travels TO the value the markup already states: the renderer
 * publishes it as --mf-gauge-angle (needle) and --mf-gauge-fill (arc), so no
 * script has to compute anything and the end state is correct even mid-animation.
 */

/*
 * The standalone wrapper is BLOCK-LEVEL and full column width, and the gauge's own
 * width lives on the SVG and the caption inside it.
 *
 * It used to be an inline-block sized wrapper, which put the gauge OUTSIDE the text
 * column on a block theme: a constrained layout centres its children with
 * `margin-inline: auto`, and auto margins do nothing on an inline-block, so the
 * wrapper stayed pinned to the left edge of the full-width content area while every
 * paragraph sat 200px further in. Being block-level means the theme lays the gauge
 * out exactly like a paragraph — and the width still comes from --mf-gauge-width,
 * which is inherited from the wrapper and touched by no theme rule.
 */
.mf-gauge {
	--mf-gauge-caption: #616c64;

	display: block;
	margin: 0;
}

.mf-gauge__svg {
	display: block;
	width: var(--mf-gauge-width, 172px);
	max-width: 100%;
	height: auto;
	overflow: visible;
}

.mf-gauge__caption {
	width: var(--mf-gauge-width, 172px);
	max-width: 100%;
	margin-top: 2px;
	color: var(--mf-gauge-caption);
	font-size: 11px;
	line-height: 1.3;
	text-align: center;
}

/*
 * Alignment comes from the block supports: `alignleft`/`alignright` float the
 * wrapper (shrink-to-fit, so its block children set the width), `aligncenter`
 * centres the gauge inside the column — the wrapper itself is already full width,
 * so it is the contents that have to move.
 */
.mf-gauge.aligncenter .mf-gauge__svg,
.mf-gauge.aligncenter .mf-gauge__caption {
	margin-inline: auto;
}

.mf-gauge.alignleft,
.mf-gauge.alignright {
	width: fit-content;
}

/*
 * Inline variant: sized off the surrounding type rather than a fixed width, so it
 * rides the text instead of pushing the line apart. No caption by design — a
 * second line inside a paragraph would tear the leading open (spec §2, decision 4).
 */
.mf-gauge--inline {
	display: inline-block;
	width: 2.4em;
	max-width: none;

	/* The inline variant is sized by the surrounding type, never by the author. */
	margin: 0 0.15em;
	vertical-align: -0.35em;
}

.mf-gauge--inline .mf-gauge__svg {

	/* Overrides the standalone --mf-gauge-width sizing above (higher specificity). */
	width: 100%;
}

/* ---- The travel animation ------------------------------------------------- */

.mf-gauge__needle {
	transform-box: fill-box;
	transform-origin: center bottom;
	animation: mf-gauge-sweep 900ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

/*
 * The needle's rotate() is an SVG presentation attribute, which the animation
 * overrides for its duration — hence the keyframe ends on the same angle the
 * attribute states, taken from the custom property the renderer wrote.
 */
@keyframes mf-gauge-sweep {

	from {
		transform: rotate(-90deg);
	}

	to {
		transform: rotate(var(--mf-gauge-angle, 0deg));
	}
}

.mf-gauge__fill {
	animation: mf-gauge-fill 900ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes mf-gauge-fill {

	from {
		stroke-dasharray: 0 116;
	}

	to {
		stroke-dasharray: var(--mf-gauge-fill, 0) 116;
	}
}

/*
 * Segments light up one after another, so a three-step gauge reads as counting up
 * rather than appearing at once. Only lit segments animate.
 */
.mf-gauge__segment.is-on {
	animation: mf-gauge-lit 300ms ease-out both;
}

.mf-gauge__segment.is-on:nth-of-type(2) {
	animation-delay: 120ms;
}

.mf-gauge__segment.is-on:nth-of-type(3) {
	animation-delay: 240ms;
}

.mf-gauge__segment.is-on:nth-of-type(4) {
	animation-delay: 360ms;
}

.mf-gauge__segment.is-on:nth-of-type(5) {
	animation-delay: 480ms;
}

.mf-gauge__segment.is-on:nth-of-type(6) {
	animation-delay: 600ms;
}

.mf-gauge__segment.is-on:nth-of-type(7) {
	animation-delay: 720ms;
}

@keyframes mf-gauge-lit {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*
 * Fill when the gauge scrolls into view.
 *
 * The gate is `(scripting: enabled)`: only when scripts can run does the animation
 * start out paused, waiting for `gauge.js` to add `is-revealed`. That ordering is
 * what avoids a flash — CSS pauses it immediately, rather than the script racing to
 * catch an animation that already started. With scripting off the query never
 * matches, nothing is paused, and the gauge animates on load exactly as before.
 *
 * `animation-timeline: view()` would do this with no script at all and was the first
 * attempt. It is unusable in practice: a plugin that sets `overflow-x: hidden` on
 * `.entry-content` (implying `overflow-y: auto`) makes that element the nearest
 * scrollport, so `view()` measures against a container that never scrolls — the
 * timeline freezes at a fixed progress and the gauge is permanently full. An
 * IntersectionObserver measures against the viewport whatever the ancestors do.
 */
@media (scripting: enabled) {

	.mf-gauge:not(.is-revealed) .mf-gauge__needle,
	.mf-gauge:not(.is-revealed) .mf-gauge__fill,
	.mf-gauge:not(.is-revealed) .mf-gauge__segment.is-on {
		animation-play-state: paused;
	}
}

/*
 * Reduced motion: no travel at all — neither the time-based nor the scroll-driven
 * version. This block sits AFTER the @supports on purpose: same specificity, so the
 * later declaration wins and `animation: none` takes the timeline with it. The
 * markup already holds the final state, so dropping every animation leaves a
 * correct, complete gauge — the pattern the other 21 stylesheets here follow.
 */
@media (prefers-reduced-motion: reduce) {

	.mf-gauge__needle,
	.mf-gauge__fill,
	.mf-gauge__segment.is-on {
		animation: none;
	}
}