/* ============================================================
   ck-anim-ubo — the hidden beneficial-owner thread
   Fully scoped under .szau-root. Obsidian & Ember tokens.
   Signal green (--szau-signal) is used ONLY on the resolved node.

   Renders fully resolved (threads drawn, node visible, clusters
   muted) by DEFAULT. The JS-only ".szau--anim" modifier class
   hides/stages everything for the scroll-triggered reveal; without
   JS, or with prefers-reduced-motion, that class is never added and
   the resolved state below simply stands (shared reduced-motion
   kill-switch lives in anim-base.css, scoped to [data-sz-anim]).
   No <a> elements are rendered by this module, so no theme link
   bleed-guard is required.
   LIGHT CARD (2026-07-22): this card sits on a warm cream ground, not the
   obsidian it launched with. Notes that matter if you touch the colours:
     - The ground is cream (#F4F0E8), NOT #FFFFFF — a white card on a white
       article page stops reading as a figure at all.
     - Prominence inverts on a light ground: DARKNESS now carries emphasis,
       so former-#fff labels are ink (#17140F) and former-#B0A49E secondary
       text is #4A443B. --ink-dim was already legible on light and is unchanged.
     - Signal green is split in two: --*-signal (#157A44) for TEXT, and
       --*-signal-ring (#1C9350) for rings/strokes. Neon #00FC88 fails
       contrast badly as text on light.
     - The old wide neon glow is gone: a 20-30px coloured halo is a dark-UI
       device and reads as a smudge on light. Emphasis is now a crisp ring
       plus a tight offset shadow (lift, not radiance).
     - "Unresolved" chips use a translucent INK fill on light, never a
       translucent white. Soften the CONTAINER, keep the label text legible.

   ============================================================ */

.szau-root {
	--szau-ground:  #F4F0E8;
	--szau-ink-dim: #6B6257;
	--szau-flame:       #E5471D;
	--szau-ember:       #F7A823;
	--szau-line:    #E2DACB;
	--szau-signal:      #157A44;   /* text on cream: ~5.6:1 */
	--szau-signal-ring: #1C9350;   /* ring / stroke only */

	position: relative;
	box-sizing: border-box;
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 32px) clamp(28px, 4vw, 40px);
	background: var(--szau-ground);
	border: 1px solid #E2DACB;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(23,20,15,.05), 0 14px 28px -14px rgba(23,20,15,.12);
	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	overflow: hidden;
}
.szau-root *, .szau-root *::before, .szau-root *::after { box-sizing: border-box; }

.szau-caption {
	text-align: center;
	font-family: 'Roboto Mono', monospace;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 11px;
	color: var(--szau-ink-dim);
	margin-bottom: 18px;
}

.szau-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 3;
}

.szau-threads {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.szau-thread {
	fill: none;
	stroke: var(--szau-ember);
	stroke-width: 2;
	stroke-dasharray: 800;
	stroke-dashoffset: 0; /* drawn by default (resolved end-state) */
	opacity: .4;
}

.szau-cluster {
	position: absolute;
	z-index: 1;
	width: 176px;
	margin-left: -88px;
	background: rgba(23,20,15,.03);
	border: 1.5px dashed rgba(107,98,87,.4);
	border-radius: 10px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: center;
}
.szau-cluster-lbl {
	font-family: 'Roboto Mono', monospace;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 9px;
	color: var(--szau-ink-dim);
}
.szau-cluster-name {
	font-size: 13px;
	font-weight: 700;
	color: #4A443B;
}

.szau-attr {
	position: absolute;
	z-index: 1;
	top: 52%;
	transform: translateY(-50%);
	font-family: 'Roboto Mono', monospace;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 9.5px;
	font-weight: 700;
	color: var(--szau-ember);
	background: rgba(247, 168, 35, .1);
	border: 1px solid rgba(247, 168, 35, .35);
	border-radius: 100px;
	padding: 5px 12px;
	white-space: nowrap;
}
.szau-attr--1 { left: 26%; }
.szau-attr--2 { left: 74%; transform: translate(-100%, -50%); }

.szau-node {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 78%;
	transform: translate(-50%, -50%);
	width: 168px;
	height: 168px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	padding: 12px;
	background: radial-gradient(circle, rgba(21,122,68,.10), var(--szau-ground) 72%);
	border: 1.5px solid var(--szau-signal-ring);
	box-shadow: 0 0 0 1px rgba(28,147,80,.16), 0 8px 20px -10px rgba(21,122,68,.28), 0 2px 6px rgba(23,20,15,.06);
}
.szau-node-ring { display: none; }
.szau-node-eyebrow {
	font-family: 'Roboto Mono', monospace;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 10px;
	color: var(--szau-signal);
}
.szau-node-label {
	font-size: 13px;
	font-weight: 700;
	color: #17140F;
	line-height: 1.25;
}

.szau-resolved-caption {
	text-align: center;
	margin-top: 18px;
	font-size: 15px;
	font-weight: 700;
	color: #17140F;
}

@media (max-width: 640px) {
	.szau-cluster { width: 128px; margin-left: -64px; padding: 9px 10px; }
	.szau-cluster-name { font-size: 11px; }
	.szau-attr { font-size: 8px; padding: 4px 8px; }
	.szau-node { width: 132px; height: 132px; top: 82%; }
	.szau-node-label { font-size: 11.5px; }
}

/* ============================================================
   ANIMATED MODE — JS adds .szau--anim, then stages the (slower,
   more suspenseful) reveal. Without JS, or with reduced motion,
   the resolved end-state above is what's shown, unconditionally.
   ============================================================ */
.szau--anim .szau-cluster {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .7s ease, transform .7s ease;
}
.szau--anim .szau-cluster.is-in { opacity: 1; transform: none; }

.szau--anim .szau-attr {
	opacity: 0;
	transition: opacity .6s ease;
}
.szau--anim .szau-attr--1.is-in { opacity: 1; }
.szau--anim .szau-attr--2.is-in { opacity: 1; }

.szau--anim .szau-thread {
	stroke-dashoffset: 800;
	transition: stroke-dashoffset 1.4s ease; /* slower draw-in than ck-anim-fragments — suspense */
}
.szau--anim .szau-thread.is-drawn { stroke-dashoffset: 0; }

.szau--anim .szau-node {
	opacity: 0;
	transform: translate(-50%, -50%) scale(.88);
	transition: opacity .7s ease, transform .7s ease;
}
.szau--anim .szau-node.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.szau--anim .szau-node.is-pulse .szau-node-ring {
	display: block;
	position: absolute;
	inset: -1.5px;
	border-radius: 50%;
	border: 2px solid var(--szau-signal-ring);
	animation: szau-pulse .9s ease-out 1;
}
@keyframes szau-pulse {
	0%   { opacity: .9; transform: scale(1); }
	100% { opacity: 0;  transform: scale(1.45); }
}

.szau--anim .szau-resolved-caption {
	opacity: 0;
	transition: opacity .6s ease;
}
.szau--anim .szau-resolved-caption.is-in { opacity: 1; }