/* Cryosthetics Toolkit — Annotated Figure widget.

   A device photo or clip treated as a drawing plate: graph ground,
   registration corners and labelled callouts pinned by leader line to the
   part of the device each one describes. */

.ct-af {
	--ct-af-accent: #0EA9D0;
	--ct-af-accent-deep: #077A99;
	--ct-af-ink: #112337;
	--ct-af-muted: #8496A6;
	--ct-af-line: #E4ECF3;
	--ct-af-grid: rgba(17, 35, 55, 0.05);
	--ct-af-inset: 34px;
	--ct-af-gutter: 3%;
	--ct-af-labelw: 156px;
	--ct-af-ratio: 16 / 10;

	margin: 0;
	position: relative;
}

.ct-af__frame {
	position: relative;
	aspect-ratio: var(--ct-af-ratio);
	padding: var(--ct-af-inset);
	background: #fff;
	border: 1px solid var(--ct-af-line);
}

/* Graph ground shows through the frame's margins — a drawing sheet, not a
   texture laid over the photo. */
.ct-af--grid .ct-af__frame {
	background:
		repeating-linear-gradient(0deg, var(--ct-af-grid) 0 1px, transparent 1px 24px),
		repeating-linear-gradient(90deg, var(--ct-af-grid) 0 1px, transparent 1px 24px),
		#fff;
}

.ct-af__shot {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(14, 42, 74, 0.16);
}

.ct-af__shot img,
.ct-af__shot video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A cold bloom at the primary anchor — the one place the device is doing the
   thing the copy describes. */
.ct-af__bloom {
	position: absolute;
	width: 340px;
	height: 340px;
	max-width: 70%;
	max-height: 70%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background:
		radial-gradient(circle, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0) 56%),
		radial-gradient(circle, rgba(14, 169, 208, 0.38) 0%, rgba(14, 169, 208, 0) 60%);
}

/* Clears a field on the left of the frame so labels sit on a clean ground
   rather than over the photo. */
.ct-af__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(255, 255, 255, 0.93) 0%,
		rgba(255, 255, 255, 0.88) 20%,
		rgba(255, 255, 255, 0.40) 34%,
		rgba(255, 255, 255, 0) 46%);
}

/* A rule at the edge of the cleared field, so the fade reads as an annotation
   column on the plate rather than a wash over the photo. */
.ct-af__scrim::after {
	content: "";
	position: absolute;
	left: 31%;
	top: 7%;
	bottom: 7%;
	width: 1px;
	background: rgba(17, 35, 55, 0.10);
}

/* Registration corners. */
.ct-af__reg {
	position: absolute;
	width: 15px;
	height: 15px;
	border: 0 solid var(--ct-af-accent);
	opacity: 0.55;
	pointer-events: none;
}

.ct-af__reg--tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.ct-af__reg--tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.ct-af__reg--bl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.ct-af__reg--br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* Callouts. */
.ct-af__calls {
	position: absolute;
	inset: var(--ct-af-inset);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-af__call {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--ay) * 1%);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	padding-left: var(--ct-af-gutter);
}

.ct-af__text {
	flex: 0 0 var(--ct-af-labelw);
	width: var(--ct-af-labelw);
	text-align: right;
}

.ct-af__label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ct-af-muted);
	margin-bottom: 3px;
}

.ct-af__value {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--ct-af-ink);
}

.ct-af__call--primary .ct-af__value {
	font-size: 20px;
	font-weight: 700;
	color: var(--ct-af-accent-deep);
	font-variant-numeric: tabular-nums;
}

.ct-af__leader {
	flex: 0 0 auto;
	height: 1px;
	width: calc(var(--ax) * 1% - var(--ct-af-gutter) - var(--ct-af-labelw) - 12px);
	min-width: 24px;
	background: linear-gradient(90deg, rgba(14, 169, 208, 0.35) 0%, var(--ct-af-accent) 100%);
}

.ct-af__dot {
	flex: 0 0 auto;
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ct-af-accent);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
}

.ct-af__call--primary .ct-af__dot::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 1px solid var(--ct-af-accent);
	border-radius: 50%;
	animation: ct-af-ping 3.2s ease-out infinite;
}

@keyframes ct-af-ping {
	0%   { transform: scale(0.6); opacity: 0.9; }
	70%  { transform: scale(1.9); opacity: 0; }
	100% { transform: scale(1.9); opacity: 0; }
}

.ct-af__cap {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ct-af-muted);
}

.ct-af__cap::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ct-af-line);
}

@media (max-width: 1100px) {
	.ct-af {
		--ct-af-labelw: 134px;
	}

	.ct-af__value { font-size: 14px; }
	.ct-af__call--primary .ct-af__value { font-size: 18px; }
}

/* Below this the leaders have no room to read, so the callouts become a
   ruled list under the figure — which is what they are. */
@media (max-width: 900px) {
	.ct-af {
		--ct-af-inset: 14px;
		--ct-af-ratio: 16 / 11;
	}

	.ct-af__scrim,
	.ct-af__cap {
		display: none;
	}

	.ct-af__calls {
		position: static;
		inset: auto;
		margin-top: 22px;
		display: grid;
		border-top: 1px solid var(--ct-af-line);
	}

	.ct-af__call {
		position: static;
		transform: none;
		align-items: baseline;
		gap: 14px;
		padding: 14px 0;
		border-bottom: 1px solid var(--ct-af-line);
	}

	.ct-af__text {
		flex: 1 1 auto;
		width: auto;
		text-align: left;
		display: flex;
		flex-direction: column-reverse;
		gap: 3px;
	}

	.ct-af__label { margin-bottom: 0; }
	.ct-af__leader { display: none; }
	.ct-af__dot { order: -1; align-self: center; }
}

@media (max-width: 600px) {
	.ct-af__bloom { width: 190px; height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
	.ct-af__call--primary .ct-af__dot::after {
		animation: none;
		opacity: 0.5;
		transform: scale(1.2);
	}
}