/* GENERATED by scripts/rg-grid-theme-sync.mjs from rg-website — do not edit. */
/* src/components/site/MarkitechGraphics.astro (is:global) */
/* Until the build runs, what it raises is not there; under reduced motion it simply is. The lines
	   come last: not there until they draw, their shimmer not until they are drawn. */
	[data-traces] [data-shells] {
		transition: opacity var(--rg-motion-draw-duration) var(--rg-motion-draw-easing);
	}
	[data-traces][data-shells-gone] [data-shells],
	[data-die]:not([data-built]) [data-build],
	[data-traces]:not([data-shelling]):not([data-shelled]) [data-shells],
	[data-traces]:not([data-drawing]):not([data-wired]) [data-wire],
	[data-traces]:not([data-wired]) [data-band] {
		opacity: 0;
	}
	@media (prefers-reduced-motion: reduce) {
		[data-die]:not([data-built]) [data-build],
		[data-traces]:not([data-shelling]):not([data-shelled]) [data-shells],
		[data-traces]:not([data-drawing]):not([data-wired]) [data-wire] {
			opacity: 1;
		}
	}
	/* Under the hand, the part stays whole and the others step back to half (the owner: no border
	   highlight, the cards' opacity). Keyboard focus the same. */
	[data-die]:has([data-part]:hover) [data-part]:not(:hover),
	[data-die]:has([data-part]:focus-visible) [data-part]:not(:focus-visible) {
		opacity: 0.5;
	}
	/* The Know more label beside the pointer: it moves at once (no transition on its place — that
	   jittered) and only fades, in the state role's time. */
	[data-die] [data-cursor] {
		transition: opacity var(--rg-motion-state-duration) var(--rg-motion-state-easing);
		will-change: translate;
	}
	/* The lines: pure white (the owner), the line itself at 35% so the band reads along it. */
	[data-die] [data-traces][data-drawing] [data-wire],
	[data-die] [data-traces][data-wired] [data-wire] {
		opacity: 0.35;
	}
	/* A card's loader shows only while it loads, in place of its word; its text is out of focus. */
	[data-die] [data-loader],
	[data-die] [data-card][data-state] [data-status] {
		display: none;
	}
	[data-die] [data-card][data-state] [data-loader] {
		display: block;
	}
	/* The hint: the brand's band passes along it, over and over, a highlight loop each. */
	[data-die] [data-hint] {
		animation: rg-chip-shimmer var(--rg-motion-highlight-loop) linear infinite;
	}
	/* While the data comes in, the hero's shimmer (the brand gradient's band) passes along the raw
	   values, over and over — not a sweep over the block (the owner). */
	[data-die] [data-capture-card][data-state='capturing'] [data-flip] {
		animation: rg-chip-shimmer calc(var(--rg-motion-highlight-loop) / 3) linear infinite;
	}
	/* The shimmer's gradient is 250% wide and does not repeat: between 100% and 0% it always covers
	   the text; past 0% it slides off and the text, clipped to it, goes with it. So the band runs
	   100% → 0% only, and the far end holds the text colour. */
	@keyframes rg-chip-shimmer {
		from {
			background-position: 100% 0;
		}
		to {
			background-position: 0% 0;
		}
	}
	/* The loaders — the owner's three, in the brand's squares, the text colour, a quarter loop a turn.
	   corners: four squares, 40% of a 12 box, trading corners. */
	[data-die] [data-loader='corners'] {
		width: 12px;
		aspect-ratio: 1;
		--sq: no-repeat linear-gradient(var(--rg-color-text) 0 0);
		background: var(--sq), var(--sq), var(--sq), var(--sq);
		background-size: 40% 40%;
		animation: rg-chip-corners calc(var(--rg-motion-highlight-loop) / 4) infinite;
	}
	@keyframes rg-chip-corners {
		0% {
			background-position:
				0 0,
				100% 0,
				100% 100%,
				0 100%;
		}
		40%,
		50% {
			background-position:
				100% 100%,
				100% 0,
				0 0,
				0 100%;
		}
		90%,
		100% {
			background-position:
				100% 100%,
				0 100%,
				0 0,
				100% 0;
		}
	}
	/* grid: nine squares of 2 on a 4 grid, three at a time grown by 1, the growth walking round. */
	[data-die] [data-loader='grid'] {
		width: 2px;
		aspect-ratio: 1;
		color: var(--rg-color-text);
		margin: 0 5px;
		box-shadow:
			4px -4px 0 0, 8px -4px 0 0, 12px -4px 0 0,
			4px 0 0 1px, 8px 0 0 1px, 12px 0 0 1px,
			4px 4px 0 0, 8px 4px 0 0, 12px 4px 0 0;
		transform: translateX(-8px);
		animation: rg-chip-grid calc(var(--rg-motion-highlight-loop) / 2) infinite linear;
	}
	@keyframes rg-chip-grid {
		12.5% { box-shadow: 4px -4px 0 0, 8px -4px 0 0, 12px -4px 0 1px, 4px 0 0 1px, 8px 0 0 0, 12px 0 0 1px, 4px 4px 0 0, 8px 4px 0 0, 12px 4px 0 0; }
		25% { box-shadow: 4px -4px 0 1px, 8px -4px 0 0, 12px -4px 0 1px, 4px 0 0 0, 8px 0 0 0, 12px 0 0 0, 4px 4px 0 0, 8px 4px 0 1px, 12px 4px 0 0; }
		50% { box-shadow: 4px -4px 0 1px, 8px -4px 0 1px, 12px -4px 0 0, 4px 0 0 0, 8px 0 0 0, 12px 0 0 0, 4px 4px 0 0, 8px 4px 0 0, 12px 4px 0 1px; }
		62.5% { box-shadow: 4px -4px 0 0, 8px -4px 0 0, 12px -4px 0 0, 4px 0 0 1px, 8px 0 0 0, 12px 0 0 0, 4px 4px 0 0, 8px 4px 0 1px, 12px 4px 0 1px; }
		75% { box-shadow: 4px -4px 0 0, 8px -4px 0 1px, 12px -4px 0 0, 4px 0 0 0, 8px 0 0 0, 12px 0 0 1px, 4px 4px 0 0, 8px 4px 0 0, 12px 4px 0 1px; }
		87.5% { box-shadow: 4px -4px 0 0, 8px -4px 0 1px, 12px -4px 0 0, 4px 0 0 0, 8px 0 0 1px, 12px 0 0 0, 4px 4px 0 1px, 8px 4px 0 0, 12px 4px 0 0; }
	}
	/* trio: three squares, 40% of a 12 box, walking round its four corners (the owner's, squared). */
	[data-die] [data-loader='trio'] {
		width: 12px;
		aspect-ratio: 1;
		--sq: no-repeat linear-gradient(var(--rg-color-text) 0 0);
		background:
			var(--sq) 0 0,
			var(--sq) 0 100%,
			var(--sq) 100% 100%;
		background-size: 40% 40%;
		animation: rg-chip-trio calc(var(--rg-motion-highlight-loop) / 4) infinite linear;
	}
	@keyframes rg-chip-trio {
		25% { background-position: 100% 0, 0 100%, 100% 100%; }
		50% { background-position: 100% 0, 0 0, 100% 100%; }
		75% { background-position: 100% 0, 0 0, 0 100%; }
		100% { background-position: 100% 100%, 0 0, 0 100%; }
	}
	/* bounce: four squares in a 2:1 box, the pairs swapping over and under. */
	[data-die] [data-loader='bounce'] {
		width: 16px;
		aspect-ratio: 2;
		--sq: no-repeat linear-gradient(var(--rg-color-text) 0 0);
		background:
			var(--sq) 0 50%,
			var(--sq) 50% 50%,
			var(--sq) 50% 50%,
			var(--sq) 100% 50%;
		background-size: 25% 50%;
		animation: rg-chip-bounce calc(var(--rg-motion-highlight-loop) / 4) infinite linear;
	}
	@keyframes rg-chip-bounce {
		33% { background-position: 0 0, 50% 100%, 50% 100%, 100% 0; }
		66% { background-position: 50% 0, 0 100%, 100% 100%, 50% 0; }
		100% { background-position: 50% 50%, 0 50%, 100% 50%, 50% 50%; }
	}
	/* The band: a run of pure white, 40 long, passing along the line over and over
	   at one speed on every line (the script sets the time from the length) — the illustrations' wire shimmer (D-0131) for a line with corners. */
	[data-die] [data-band] {
		opacity: 1;
		animation: rg-chip-band var(--rg-motion-highlight-loop) linear infinite;
	}
	@keyframes rg-chip-band {
		from {
			stroke-dashoffset: calc(var(--length, 0) + var(--run, 0));
		}
		to {
			stroke-dashoffset: 0;
		}
	}
	/* A thing that flips with the case goes out of focus as it goes and comes back as the next's
	   (as D-0133, D-0135), at the reveal's pace. */
	[data-die] [data-flip] {
		transition-property: opacity, filter;
		transition-duration: var(--rg-motion-reveal-duration);
		transition-timing-function: var(--rg-motion-state-easing);
	}
	/* Kora's panel: her shimmer runs round the border (the owner) — a ring 1px wide, the border's
	   colour with her gradient's band passing along it, over and over, in the highlight loop. */
	[data-die] [data-kora-panel]::before {
		content: '';
		position: absolute;
		inset: -1px;
		padding: 1px;
		pointer-events: none;
		background: linear-gradient(90deg, var(--rg-color-border) 38%, var(--color-orange-500) 44%, var(--color-kora-blend) 50%, var(--color-purple-400) 56%, var(--rg-color-border) 62%);
		background-size: 250% 100%;
		/* The mask only needs an opaque colour: any token will do. */
		-webkit-mask: linear-gradient(var(--rg-color-text) 0 0) content-box, linear-gradient(var(--rg-color-text) 0 0);
		mask: linear-gradient(var(--rg-color-text) 0 0) content-box, linear-gradient(var(--rg-color-text) 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		animation: rg-chip-shimmer var(--rg-motion-highlight-loop) linear infinite;
	}
	[data-die] [data-flip][data-out] {
		opacity: 0;
		filter: blur(var(--blur-sm));
	}
	@media (prefers-reduced-motion: reduce) {
		[data-die] [data-band] {
			animation: none;
			stroke-dasharray: none;
			opacity: 0;
		}
	}