/* =========================================================================
   Animated billing flow.

   Cards are HTML; the connectors, the dots and NEO Billing's ghosted invoice
   art are one SVG in the frame's 2000 x 1125 coordinates; the invoice tags
   are HTML again, moved by the script to ride above their dots.

   Measured off 2000 x 1125 frames: every size is those pixels over 20, as
   container units, so 1cqw is 20 artwork pixels.
   ========================================================================= */

.nbf {
	container-type: inline-size;
	width: 100%;
}

.nbf__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 2000 / 1125;
	overflow: hidden;
	border-radius: 12px;
	background-color: #faf9f6;
	background-image: radial-gradient(#e3ded6 0.07cqw, transparent 0.08cqw);
	background-size: 0.8cqw 0.8cqw;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, sans-serif;
	color: #13131a;
}

/* -------------------------------------------------------------- Cards */

.nbf__card {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15cqw;
	padding-top: 0.6cqw;
	box-sizing: border-box;
	background: #fff;
	border: 0.07cqw solid #e2dfdb;
	border-radius: 1.1cqw;
}

.nbf__badge {
	position: absolute;
	left: -0.05cqw;
	top: -0.8cqw;
	display: grid;
	place-items: center;
	height: 1.6cqw;
	padding: 0 0.6cqw;
	border-radius: 0.4cqw;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 0.62cqw;
	letter-spacing: 0.04em;
	color: #fff;
}

.nbf__badge--icp { background: linear-gradient(135deg, #9b5cf6, #c04ee8); }
.nbf__badge--a   { background: #ff7046; }
.nbf__badge--b   { background: #ff8a50; }
.nbf__badge--c   { background: #ffab40; }

.nbf__flag {
	width: 2.1cqw;
	height: 2.1cqw;
	margin-bottom: 0.45cqw;
	border-radius: 50%;
	overflow: hidden;
	background: #eee;
}

.nbf__flag img {
	display: block;
	width: 100%;
	height: 100%;
}

.nbf__name {
	font-size: 0.92cqw;
	line-height: 1.2;
}

.nbf__meta {
	font-size: 0.76cqw;
	line-height: 1.2;
	color: #6b6b74;
}

.nbf__ico {
	width: 1.85cqw;
	height: 1.85cqw;
	margin-bottom: 0.5cqw;
	fill: none;
	stroke: #13131a;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nbf__card--hub {
	justify-content: flex-start;
	padding-top: 1.75cqw;
	border-radius: 1.2cqw;
}

.nbf__hub-title {
	font-size: 1.4cqw;
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------- The drawing */

.nbf__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.nbf__line,
.nbf__chev {
	fill: none;
	stroke: #c8c3bd;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nbf__line {
	stroke-dasharray: 4 5;
}

.nbf__ghost {
	fill: none;
	stroke: #dcdcdf;
	stroke-width: 1.2;
	stroke-dasharray: 4 4;
}

.nbf__bar {
	fill: none;
	stroke: #e6e6e8;
	stroke-width: 5;
	stroke-linecap: round;
}

.nbf__ghost-text {
	font-size: 15px;
	fill: #b9b9be;
}

.nbf__ghost-ico path {
	fill: none;
	stroke: #b9b9be;
	stroke-width: 1.6;
	stroke-linejoin: round;
}

.nbf__axis {
	stroke: #13131a;
	stroke-width: 2;
}

.nbf__tip {
	fill: #13131a;
}

.nbf__core {
	transform-box: fill-box;
	transform-origin: center;
}

/* NEO Billing taking an invoice in. */
.nbf__core.is-pulse {
	animation: nbf-pulse 560ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes nbf-pulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.18); }
	100% { transform: scale(1); }
}

.nbf__core-ico {
	fill: none;
	stroke: #fff;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nbf__dot {
	fill: #a855f7;
}

/* ------------------------------------------------------------ The tags */

.nbf__tags {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.nbf__tag {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	gap: 0.4cqw;
	height: 2.45cqw;
	padding: 0 0.65cqw 0 0.7cqw;
	box-sizing: border-box;
	border: 0.07cqw solid #dedad5;
	border-radius: 0.45cqw;
	background: #fff;
	box-shadow: 0 0.2cqw 0.8cqw rgba(19, 19, 26, 0.05);
	font-size: 0.85cqw;
	white-space: nowrap;
	will-change: transform, opacity;
}

.nbf__tag .nbf__ico {
	width: 1.05cqw;
	height: 1.05cqw;
	margin: 0;
	stroke-width: 1.6;
}

.nbf__tag b {
	font-weight: 400;
	color: #13131a;
}

.nbf__tag span {
	color: #8a8a92;
	font-size: 0.8cqw;
}

@media (prefers-reduced-motion: reduce) {
	.nbf__core.is-pulse { animation: none; }
}