/* Arcane Circuits living emblem. Markup: see README.md. Needs emblem.js for the SVG layers; without JS you still get the raster and the halo. */
.ac-emblem {
	--ac-size: clamp(320px, 40vw, 440px);
	--ac-inset: 14%;
	--ac-glow: var(--glow, #47cfd4);
	position: relative; display: block; box-sizing: border-box;
	width: var(--ac-size); aspect-ratio: 1 / 1; flex: none; /* fixed box: no layout shift */
	contain: layout style;
}
.ac-emblem[data-size="card"] { --ac-size: 160px; --ac-inset: 12%; }
.ac-emblem[data-size="mark"] { --ac-size: 48px; --ac-inset: 0%; }
.ac-emblem picture { position: absolute; inset: var(--ac-inset); display: block; }
.ac-emblem img { display: block; width: 100%; height: 100%; border-radius: 50%; }
/* breathing halo, behind the raster */
.ac-emblem::before {
	content: ""; position: absolute; inset: calc(var(--ac-inset) - 3%); border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, transparent 62%, color-mix(in srgb, var(--ac-glow) 55%, transparent) 78%, transparent 100%);
	filter: blur(6px); opacity: .5; animation: ac-breathe 6s ease-in-out infinite;
}
.ac-emblem[data-size="mark"]::before { display: none; }
.ac-emblem__fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ac-emblem__runes { transform-origin: 50px 50px; animation: ac-turn 90s linear infinite; }
.ac-emblem__runes text { font-family: "Noto Sans Runic", "Segoe UI Historic", "Noto Sans Symbols", serif; font-size: 4.2px; fill: var(--ac-glow); opacity: .78; }
.ac-emblem__trace { fill: none; stroke: var(--ac-glow); stroke-width: .35; opacity: .35; }
.ac-emblem__pad { fill: var(--ac-glow); opacity: .6; }
.ac-emblem__dot { fill: #aaf7ff; opacity: 0; }
.ac-emblem__bolt { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ac-emblem__bolt--glow { stroke: var(--ac-glow); stroke-width: 2.4; }
.ac-emblem__bolt--core { stroke: #aaf7ff; stroke-width: .7; }
@keyframes ac-breathe { 0%, 100% { opacity: .35; transform: scale(.99); } 50% { opacity: .85; transform: scale(1.02); } }
@keyframes ac-turn { to { transform: rotate(360deg); } }
/* paused (tab hidden or scrolled away): everything holds still */
.ac-emblem[data-paused="1"]::before, .ac-emblem[data-paused="1"] .ac-emblem__runes { animation-play-state: paused; }
/* reduced motion: all static, the rune ring stays visible */
@media (prefers-reduced-motion: reduce) {
	.ac-emblem::before, .ac-emblem__runes { animation: none; }
	.ac-emblem::before { opacity: .6; }
}
/* simulated reduced motion (the demo toggle; apps can use it too): put data-motion="off" on any ancestor */
[data-motion="off"] .ac-emblem::before, [data-motion="off"] .ac-emblem__runes { animation: none; }
[data-motion="off"] .ac-emblem::before { opacity: .6; }