@charset "UTF-8";

/* =====================================================================
   STAT REVEAL  (js/stat-reveal.js builds it; see the notes there)
   Google Cloud Summits "The result" module: the Security KV turns into a
   disc carrying a headline number, with a node-drawn label pill, on a
   drafting layer set out in KV nodes (block-out lines, guide circles,
   rulers, dimensions, a figures table). All line work is 1px, the same
   line colours as the Security KV logo build next to "An idea taking shape".

   Theme: the panel is "theme-media" (Google light #F1F3F4 / dark
   #202124, like the other Summits panels). Brand colours never change;
   the drafting layer uses the --sr-* variables below.
   Lengths inside the SVG are its own units (viewBox 1000 x 1000).
   ===================================================================== */

.statr {
	--sr-line: #BDC1C6;     /* construction lines, rulers, guide circles */
	--sr-ink: #5F6368;      /* dimension line, ticks */
	--sr-text: #5F6368;     /* mono call-outs */
	position: relative;
}

html[data-theme="dark"] .statr {
	--sr-line: #5F6368;
	--sr-ink: #9AA0A6;
	--sr-text: #9AA0A6;
}

.statr__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* stacked layouts: the 16:9 slot is too shallow for the figure */
html.bp-max-1024 .split-layout-media.statr {
	aspect-ratio: 1 / 1;
}

@media (max-width: 1024px) {
	html:not(.dfui) .split-layout-media.statr {
		aspect-ratio: 1 / 1;
	}
}

/* ---- drafting layer ---- */
.statr .sr-rule path,
.statr .sr-hair,
.statr .sr-dash,
.statr .sr-ink {
	fill: none;
	stroke: var(--sr-line);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.statr .sr-hair path,
.statr .sr-hair circle {
	vector-effect: non-scaling-stroke;
}

/* the label's outline: 1px like every other stroke */
.statr .sr-outline {
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.statr .sr-dash { stroke-dasharray: 4 4; }
.statr .sr-ink { stroke: var(--sr-ink); }

.statr .sr-mono {
	font-family: Consolas, "Courier New", monospace;
	font-size: 22px;
	letter-spacing: 0.08em;
	fill: var(--sr-text);
}

.statr .sr-note { text-anchor: middle; dominant-baseline: central; }
.statr .sr-small { font-size: 17px; }

/* guide circles pop in once, like the logo build's */
.statr .sr-pop { animation: sr-fade 0.6s ease 0.6s both; }

/* centre lines + dimension line fade in */
.statr .sr-fade { animation: sr-fade 1s ease 0.2s both; }

.statr .sr-spin {
	transform-origin: 500px 430px;
	animation: sr-spin 60s linear infinite;
}

@keyframes sr-fade { from { opacity: 0; } }
@keyframes sr-spin { to { transform: rotate(360deg); } }

/* ---- figure ---- */
.statr .sr-flip { transform-origin: 500px 430px; }

.statr .sr-num {
	font-family: "Nunito Sans", sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
	fill: #FFFFFF;
	text-anchor: middle;
	dominant-baseline: central;
}

.statr .sr-label {
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	font-size: 30px;
	text-anchor: middle;
	dominant-baseline: central;
}

/* Turning without ever going paper-thin (Figma note 355:52985): these
   strokes keep their full weight (one KV node = 34 SVG units) whatever
   the turn's scaleX is. Non-scaling strokes are measured in screen px,
   so the width is 34 x --sr-k (screen px per SVG unit, set by the js). */
.statr .sr-thick,
.statr .sr-coin {
	vector-effect: non-scaling-stroke;
	stroke-width: calc(var(--sr-k, 1) * 34px);
	stroke-linejoin: round;
	/* round ends: edge-on, the shield collapses to a bar, and without
	   round caps that bar is drawn with square ends (user review 2026-11-15) */
	stroke-linecap: round;
}

/* The KV draws on once (a plain copy), then the turning copy takes over. */
.statr .sr-seg {
	/* round ends while it draws (user review 2026-11-15: the open end read as a hard,
	   square end); it starts just short of the path's start so no cap dot shows early */
	stroke-linecap: round;
	stroke-dasharray: 1 1.2;
	stroke-dashoffset: 1.01;
	animation: sr-draw 2.6s cubic-bezier(.65,0,.35,1) 0.4s both;
}
.statr .sr-intro-a { animation: sr-swap-out 0.01s linear 3.2s both; }
.statr .sr-intro-b { animation: sr-swap-in 0.01s linear 3.2s both; }

@keyframes sr-draw { to { stroke-dashoffset: 0; } }
@keyframes sr-swap-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sr-swap-in { from { opacity: 0; } to { opacity: 1; } }

/* the label sits on the panel's own colour, so guides and the node pass under it */
.statr .sr-pillbg { fill: var(--bg-light, #F1F3F4); }
html[data-theme="dark"] .statr .sr-pillbg { fill: var(--bg-dark, #202124); }

.statr circle[id$="z"] { transform-box: fill-box; transform-origin: center; }

/* off screen / tab hidden: hold every loop */
.statr--idle .statr__svg * {
	animation-play-state: paused !important;
}

/* reduced motion: the still is set by js (a paused frame of the loop);
   the drafting layer is simply shown */
.statr--still .sr-fade,
.statr--still .sr-pop { animation: none; }
.statr--still .sr-spin { animation: none; }