.news-card.svelte-16r7ala {
		--news-card-x: 50%;
		--news-card-y: 0px;
		transition:
			translate 180ms cubic-bezier(0.22, 1, 0.36, 1),
			scale 180ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 240ms ease-out;
		/* Entrance: fade in, settle up to full size, and pull into focus.
		   Compositor/filter-only, so the reserved layout never moves. */
		animation: svelte-16r7ala-news-card-enter 360ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	@keyframes svelte-16r7ala-news-card-enter {
		from {
			opacity: 0;
			scale: 0.97;
			filter: blur(4px);
		}

		to {
			opacity: 1;
			scale: 1;
			filter: none;
		}
	}

	@media (hover: hover) {
		.news-card.svelte-16r7ala:hover {
			translate: 0 -1px;
		}
	}

	/* Press: settle back down and compress slightly, on a snappier clock
	   than the hover lift so it feels immediate. */
	.news-card.svelte-16r7ala:active {
		translate: 0 0;
		scale: 0.98;
		transition-duration: 90ms, 90ms, 240ms;
	}

	/* Dismiss/click-through: fade out instead of blinking out of the DOM;
	   onTransitionEnd unmounts the card once the fade completes. Dropping
	   the entrance animation matters: while it runs it owns opacity, which
	   would suppress the fade transition and its transitionend. */
	.news-card-leaving.svelte-16r7ala {
		animation: none;
		opacity: 0;
		pointer-events: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.news-card.svelte-16r7ala {
			transition: opacity 240ms ease-out;
			animation: svelte-16r7ala-news-card-enter-fade 360ms ease-out;
		}

		.news-card.svelte-16r7ala:hover,
		.news-card.svelte-16r7ala:active {
			translate: none;
			scale: none;
		}
	}

	@keyframes svelte-16r7ala-news-card-enter-fade {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	/* The herald stands at the card's top, feet planted on the card's
	   padding box (12px below the top edge) so he stays clear of the
	   eyebrow text and the dismiss button, his body rising past the
	   edge over whatever sits above. The wrapper
	   owns the clip-path: while he rises from behind the card it cuts
	   him off exactly at the card's top edge, then it expands as he
	   jumps into the foreground (the expanded inset is generous enough
	   for the jump arc, the play bob, and the drifting notes). Hover
	   lift uses the standalone `translate` property so it composes with
	   (rather than fights) the figure's keyframe transforms. */
	.news-card-trumpeter.svelte-16r7ala {
		position: absolute;
		bottom: 100%;
		right: 16px;
		width: 98px;
		margin-bottom: -12px;
		pointer-events: none;
		clip-path: inset(-56px -20px -14px -36px);
		transition: translate 260ms cubic-bezier(0.22, 1, 0.36, 1);
		animation: svelte-16r7ala-news-card-trumpeter-unveil 1000ms linear 120ms backwards;
	}

	@media (pointer: coarse) {
		.news-card-trumpeter.svelte-16r7ala {
			right: 40px;
		}

		.news-card-trumpeter[data-settled='true'].svelte-16r7ala {
			translate: 0 4px;
		}

		.news-card-tagline.svelte-16r7ala {
			line-height: 1.35;
		}
	}

	.news-card-trumpeter-figure.svelte-16r7ala {
		display: block;
		transform-origin: 60% 100%;
		animation:
			svelte-16r7ala-news-card-trumpeter-pop 1000ms cubic-bezier(0.34, 1.3, 0.64, 1) 120ms backwards,
			svelte-16r7ala-news-card-trumpeter-play 4s ease-in-out 1120ms infinite;
	}

	/* The img is the easter egg's pointer target inside an otherwise
	   pointer-events: none wrapper; the click handler's matte hit-test
	   (plus hover pointer-events toggling) narrows it to his outline.
	   No cursor change — the egg stays unadvertised. */
	.news-card-trumpeter-img.svelte-16r7ala {
		display: block;
		width: 100%;
		pointer-events: auto;
		cursor: default;
		mask-image: var(--news-card-trumpeter-matte, url('../../../trumpeter/matte.png'));
		mask-size: cover;
		mask-position: center;
		mask-mode: luminance;
		-webkit-mask-image: var(--news-card-trumpeter-matte, url('../../../trumpeter/matte.png'));
		-webkit-mask-size: cover;
		-webkit-mask-position: center;
	}

	/* Entrance, part 1 of 2 (the reveal): only the bottom inset animates.
	   It sits at the card's top edge while the figure rises from behind
	   (the wrapper's box overlaps the card by 12px, hence the 12px
	   bottom inset), then opens up as he jumps in front. The swap
	   happens at 74–76%, inside the hop's apex hold (73–78%) where the
	   whole figure hangs above the card edge — so the mask change is
	   never visible. The other three sides stay open throughout so the
	   peek and the hop are never clipped against the wrapper's own
	   box. */
	@keyframes svelte-16r7ala-news-card-trumpeter-unveil {
		0%,
		74% {
			clip-path: inset(-56px -20px 12px -36px);
		}

		76%,
		100% {
			clip-path: inset(-56px -20px -14px -36px);
		}
	}

	/* Entrance, part 2 of 2 (the figure): pop up from behind the card,
	   pause a beat peeking over the edge, then hop over it and land on
	   the card's padding box. The apex holds at -32px — feet 20px clear
	   of the card edge — while the clip swaps underneath him. The fall
	   (78–94%) gets its own accelerating gravity ease plus a subtle
	   blur that fades in and back out while he's moving fast. */
	@keyframes svelte-16r7ala-news-card-trumpeter-pop {
		0% {
			transform: translateY(60px);
		}

		40%,
		59% {
			transform: translateY(13px);
		}

		73%,
		78% {
			transform: translateY(-32px) rotate(-3deg);
			filter: blur(0);
			animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5);
		}

		82%,
		90% {
			filter: blur(0.8px);
		}

		94% {
			transform: translateY(3px) rotate(1deg);
			filter: blur(0);
		}

		100% {
			transform: translateY(0) rotate(0deg);
		}
	}

	/* Idle: a slow breath, then a little lean back as he raises the horn
	   to play (synced with the 4s note loop), settling back to rest. */
	@keyframes svelte-16r7ala-news-card-trumpeter-play {
		0%,
		55%,
		100% {
			transform: translate(0, 0) rotate(0deg);
		}

		12% {
			transform: translate(0.5px, -1.5px) rotate(-2deg);
		}

		30% {
			transform: translate(0, -1px) rotate(-1deg);
		}
	}

	@media (hover: hover) {
		/* Hover: a slight lift off the edge, playing with more gusto.
		   Only the play loop's duration changes; the animation *name
		   list* must stay identical to the base rule, because removing
		   the (finished) entrance animation and re-adding it on unhover
		   would replay the whole pop-up. */
		.news-card.svelte-16r7ala:hover .news-card-trumpeter:where(.svelte-16r7ala) {
			translate: 0 -3px;
		}

		.news-card.svelte-16r7ala:hover .news-card-trumpeter-figure:where(.svelte-16r7ala) {
			animation-duration: 1000ms, 1400ms;
		}
	}

	/* On dismiss/click-through he hops back up over the edge and dives
	   down behind the card, mirroring the entrance: the wrapper's clip
	   closes to the card's top edge at 40–45%, inside the figure's apex
	   hold (35–45%) where he hangs fully above the edge, so the mask
	   change is invisible here too. Specificity matches the hover rules
	   so the exit wins while the pointer is still over the card (which
	   it always is when dismissing). */
	.news-card.news-card-leaving.svelte-16r7ala .news-card-trumpeter:where(.svelte-16r7ala) {
		animation: svelte-16r7ala-news-card-trumpeter-veil 320ms linear forwards;
	}

	.news-card.news-card-leaving.svelte-16r7ala .news-card-trumpeter-figure:where(.svelte-16r7ala) {
		animation: svelte-16r7ala-news-card-trumpeter-dive 320ms ease-in forwards;
	}

	/* No tooting a trumpeter mid-dive. */
	.news-card.news-card-leaving.svelte-16r7ala .news-card-trumpeter-img:where(.svelte-16r7ala) {
		pointer-events: none;
	}

	@keyframes svelte-16r7ala-news-card-trumpeter-veil {
		0%,
		40% {
			clip-path: inset(-56px -20px -14px -36px);
		}

		45%,
		100% {
			clip-path: inset(-56px -20px 12px -36px);
		}
	}

	@keyframes svelte-16r7ala-news-card-trumpeter-dive {
		0% {
			transform: translateY(0);
		}

		35%,
		45% {
			transform: translateY(-32px) rotate(-2deg);
		}

		100% {
			transform: translateY(60px);
		}
	}

	/* Notes toot out of the bell (upper left of the figure), drifting up
	   and to the left as they fade. They loop on the same 4s clock as
	   the idle playing motion — visible for the first ~30% of each cycle
	   — and toot continuously while hovered. */
	.news-card-toot.svelte-16r7ala {
		position: absolute;
		left: var(--news-card-toot-left);
		top: var(--news-card-toot-top);
		font-size: 12px;
		line-height: 1;
		color: light-dark(#8a6d3b, #cfa968);
		opacity: 0;
		animation: svelte-16r7ala-news-card-toot 4s ease-out 1200ms infinite backwards;
	}

	.news-card-toot.svelte-16r7ala:nth-child(3) {
		animation-delay: 1500ms;
		font-size: 10px;
	}

	.news-card-toot.svelte-16r7ala:nth-child(4) {
		animation-delay: 1800ms;
		font-size: 11px;
	}

	@media (hover: hover) {
		.news-card.svelte-16r7ala:hover .news-card-toot:where(.svelte-16r7ala) {
			animation: svelte-16r7ala-news-card-toot 1600ms ease-out infinite;
		}

		.news-card.svelte-16r7ala:hover .news-card-toot:where(.svelte-16r7ala):nth-child(3) {
			animation-delay: 500ms;
		}

		.news-card.svelte-16r7ala:hover .news-card-toot:where(.svelte-16r7ala):nth-child(4) {
			animation-delay: 1000ms;
		}
	}

	/* Easter-egg toot: a one-shot note fired per click, sharing the loop's
	   trajectory but on its own clock; onanimationend removes the span. */
	.news-card-toot-burst.svelte-16r7ala {
		position: absolute;
		left: var(--news-card-toot-left);
		top: var(--news-card-toot-top);
		font-size: 13px;
		line-height: 1;
		color: light-dark(#8a6d3b, #cfa968);
		animation: svelte-16r7ala-news-card-toot 700ms ease-out forwards;
	}

	@keyframes svelte-16r7ala-news-card-toot {
		0% {
			opacity: 0;
			transform: translate(0, 0) scale(0.6) rotate(0deg);
		}

		7% {
			opacity: 1;
		}

		30%,
		100% {
			opacity: 0;
			transform: translate(-14px, -18px) scale(1.1) rotate(-14deg);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.news-card-trumpeter.svelte-16r7ala,
		.news-card.svelte-16r7ala:hover .news-card-trumpeter:where(.svelte-16r7ala),
		.news-card.news-card-leaving.svelte-16r7ala .news-card-trumpeter:where(.svelte-16r7ala) {
			translate: none;
			clip-path: none;
			animation: svelte-16r7ala-news-card-enter-fade 360ms ease-out;
		}

		.news-card-trumpeter-figure.svelte-16r7ala,
		.news-card.svelte-16r7ala:hover .news-card-trumpeter-figure:where(.svelte-16r7ala),
		.news-card.news-card-leaving.svelte-16r7ala .news-card-trumpeter-figure:where(.svelte-16r7ala) {
			animation: none;
		}

		.news-card-toot.svelte-16r7ala,
		.news-card.svelte-16r7ala:hover .news-card-toot:where(.svelte-16r7ala) {
			animation: none;
			opacity: 0;
		}
	}

	@media (pointer: coarse) and (prefers-reduced-motion: reduce) {
		.news-card-trumpeter.svelte-16r7ala,
		.news-card.svelte-16r7ala:hover .news-card-trumpeter:where(.svelte-16r7ala),
		.news-card.news-card-leaving.svelte-16r7ala .news-card-trumpeter:where(.svelte-16r7ala) {
			translate: 0 4px;
		}
	}

	.news-card-sheen.svelte-16r7ala,
	.news-card-edge.svelte-16r7ala {
		position: absolute;
		inset: 0;
		border-radius: inherit;
		pointer-events: none;
		opacity: 0;
		transition: opacity 300ms ease;
	}

	@media (hover: hover) {
		.news-card.svelte-16r7ala:hover .news-card-sheen:where(.svelte-16r7ala),
		.news-card.svelte-16r7ala:hover .news-card-edge:where(.svelte-16r7ala) {
			opacity: 1;
		}
	}

	/* Soft surface sheen following the cursor. Kept faint enough that text
	   contrast is unaffected even though it paints above content. */
	.news-card-sheen.svelte-16r7ala {
		background: radial-gradient(
			220px circle at var(--news-card-x) var(--news-card-y),
			color-mix(in oklab, currentColor 3%, transparent),
			transparent 70%
		);
	}

	/* Specular glint on the existing border: a 1px ring (padding + exclude
	   mask) lit by a cursor-centered gradient, so the card's own outline
	   catches the light near the pointer. inset: 0 would resolve against
	   the padding box (inside the border); pulling out by the 1px border
	   width aligns the ring exactly over the card's outline, sharing its
	   outer radius. */
	.news-card-edge.svelte-16r7ala {
		inset: -1px;
		padding: 1px;
		background: radial-gradient(
			160px circle at var(--news-card-x) var(--news-card-y),
			color-mix(in oklab, currentColor 28%, transparent),
			transparent 70%
		);
		mask:
			linear-gradient(#000 0 0) content-box,
			linear-gradient(#000 0 0);
		mask-composite: exclude;
		-webkit-mask:
			linear-gradient(#000 0 0) content-box,
			linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
	}