@reference "../../../../app.css";

/* ---------- Designed for humans and agents: a person's profile and an agent's, each with
   the profile page's activity chart, linked by a vouch, in iso (AgentCard.svelte) ---------- */
.landing {
	.ag {
		position: relative;
		width: 100%;
		/* Its width comes from the stage, its height from that width, so scaling the group
		   never resizes the box (and re-runs the observer that sets the scale). */
		contain: inline-size;
		aspect-ratio: 460 / 400;
		max-height: 400px;
		font-size: 10px;
		font-weight: 450;
		line-height: 1;
		letter-spacing: -0.01em;
		color: var(--text);
	}
	@media (width < 64rem) {
		.ag {
			max-width: 380px;
			margin-inline: auto;
		}
	}
	.ag-frame {
		position: absolute;
		top: 0;
		left: 50%;
		width: 460px;
		height: 400px;
		transform-origin: 50% 0;
		translate: -50% 0;
		scale: var(--z, 1);
	}

	/* Both plates, the thread and its knot on the feature plane, laid out on 300 × 360. */
	.ag-plane {
		position: absolute;
		top: 20px;
		left: 92px;
		width: 300px;
		height: 360px;
		transform: var(--iso-plane);
	}

	/* A profile: the same plate for either, its thickness a second silhouette 4px down the
	   screen — local (2.12, 3.86). */
	.ag-p {
		position: absolute;
		left: 0;
		top: calc(var(--p) * 190px);
		box-sizing: border-box;
		width: 300px;
		height: 170px;
		padding: 0 14px;
		border: 1px solid var(--ag-edge, var(--hl-edge));
		border-radius: 16px;
		background: var(--hl-solid);
		box-shadow:
			2.12px 3.86px 0 -1px var(--hl-side),
			2.12px 3.86px 0 0 var(--ag-edge, var(--hl-edge));
		/* Held a little down the plane and clear until it turns on, then each rises in. */
		opacity: 0;
		translate: 0 14px;
		transition:
			opacity 0.7s var(--ease-out),
			translate 1s var(--ease-glide);
		transition-delay: calc(0.1s + var(--p) * 0.25s);
	}
	.ag-p.is-agent {
		--ag-edge: var(--hl-mid);
		--ag-sel: var(--hl-side);
		background: var(--hl-sheen), var(--color-background-subtle);
	}
	.ag-plane.on .ag-p {
		opacity: 1;
		translate: 0 0;
	}

	.ag-head {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 50px;
	}
	.ag-av {
		display: grid;
		flex: none;
		place-items: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: color-mix(in srgb, var(--ink) 6%, var(--av-gap));
		box-shadow: inset 0 0 0 1px var(--hl-mid);
		color: color-mix(in srgb, var(--ink) 70%, var(--muted));

		svg {
			width: 14px;
			height: 14px;
		}
	}
	/* The name and handle, as bars. */
	.ag-who {
		display: flex;
		flex-direction: column;
		gap: 5px;

		i {
			display: block;
			width: 58px;
			height: 5px;
			border-radius: 3px;
			background: color-mix(in srgb, var(--ink) 25%, transparent);
		}
		i + i {
			width: 38px;
			background: color-mix(in srgb, var(--ink) 12%, transparent);
		}
	}
	.ag-title {
		margin-left: auto;
		font-size: 11px;
		font-weight: 500;
		color: var(--muted);
	}

	/* The chart, the profile page's in little: four months, each a column, the selected one
	   tinted; a stat per metric per month, joined month to month by curves. */
	.ag-chart {
		position: relative;
		height: 106px;
		border: 1px solid var(--hl-mid);
		border-radius: 8px;
		overflow: hidden;
	}
	/* One tint for both charts, at --t columns: it follows the pointer on a spring
	   (AgentCard), so no transition here. */
	.ag-sel {
		position: absolute;
		inset: 0 auto 0 0;
		width: 25%;
		background: var(--ag-sel, var(--glass-solid-hover));
		translate: calc(var(--t) * 100%) 0;
	}
	.ag-col {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(var(--c) * 25%);
		width: 25%;
		padding: 0;
		border: 0;
		border-left: 1px solid var(--hl-mid);
		background: none;
		font: inherit;
		color: var(--muted);
		cursor: pointer;
	}
	.ag-col:first-of-type {
		border-left: 0;
	}
	.ag-col:focus-visible {
		outline: 2px solid var(--focus);
		outline-offset: -2px;
	}
	.ag-month {
		position: absolute;
		bottom: 7px;
		left: 7px;
	}

	.ag-curves {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 84px;
		overflow: visible;
		fill: none;
		pointer-events: none;

		path {
			stroke-width: 1;
			stroke-dasharray: 1;
			stroke-dashoffset: 1;
			opacity: 0.45;
			transition: stroke-dashoffset 0.5s var(--ease-in-out);
			transition-delay: calc(0.55s + var(--p) * 0.25s + var(--s) * 0.09s);
		}
		.up {
			stroke: var(--color-foreground-success);
		}
		.down {
			stroke: var(--color-foreground-danger);
		}
	}
	.ag-plane.on .ag-curves path {
		stroke-dashoffset: 0;
	}

	/* A stat: icon, count, the arrow of its month — the selected month's lit, the rest
	   muted, as on the profile page. A change of month spreads out from the chosen one,
	   45ms a column (--d, its distance from it). */
	.ag-stat {
		position: absolute;
		display: flex;
		align-items: center;
		gap: 3px;
		height: 17px;
		padding: 0 4px;
		border-radius: 5px;
		background: var(--hl-plate);
		color: var(--muted);
		white-space: nowrap;
		pointer-events: none;
		translate: 0 -50%;
		opacity: 0;
		transition:
			opacity 0.5s var(--ease-out),
			color 0.25s ease,
			background-color 0.25s ease;
		transition-delay:
			calc(0.75s + var(--p) * 0.25s + var(--c) * 0.12s), calc(var(--d) * 45ms),
			calc(var(--d) * 45ms);

		svg {
			flex: none;
			width: 10px;
			height: 10px;
		}
		.ag-up,
		.ag-down {
			width: 9px;
			height: 9px;
			transition: color 0.25s ease calc(var(--d) * 45ms);
		}
	}
	.ag-plane.on .ag-stat {
		opacity: 1;
	}
	.ag-stat.is-current {
		background: color-mix(in srgb, var(--ink) 6%, var(--hl-plate));
		color: var(--text);

		.ag-up {
			color: var(--color-foreground-success);
		}
		.ag-down {
			color: var(--color-foreground-danger);
		}
	}

	/* The thread from one plate to the other, round the left of the pair: drawn in once the
	   plates are up, with the vouch knotted on it. */
	.ag-thread {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: visible;
		fill: none;
		pointer-events: none;

		path {
			stroke: var(--hl-edge);
			stroke-width: 1.5;
			stroke-linecap: round;
		}
		.ag-dash {
			stroke-dasharray: 4 4;
		}
		.ag-tie,
		.ag-reveal {
			stroke-dasharray: 1;
			stroke-dashoffset: 1;
		}
		.ag-tie {
			transition: stroke-dashoffset 0.55s ease-in 0.9s;
		}
		.ag-reveal {
			stroke: white;
			transition: stroke-dashoffset 0.55s ease-out 1.45s;
		}
	}
	.ag-plane.on .ag-thread :is(.ag-tie, .ag-reveal) {
		stroke-dashoffset: 0;
	}
	.ag-knot {
		position: absolute;
		top: 180px;
		left: -30px;
		display: grid;
		place-items: center;
		width: 28px;
		height: 28px;
		margin: -14px 0 0 -14px;
		border-radius: 50%;
		background: var(--hl-plate);
		box-shadow:
			0 0 0 1px var(--hl-edge),
			1.06px 1.93px 0 0 var(--hl-edge);
		color: var(--accent-text);
		opacity: 0;
		scale: 0.6;
		transition:
			opacity 0.5s var(--ease-out) 1.5s,
			scale 0.7s var(--ease-glide) 1.5s;

		svg {
			width: 14px;
			height: 14px;
		}
	}
	.ag-plane.on .ag-knot {
		opacity: 1;
		scale: 1;
	}

	@media (prefers-reduced-motion: reduce) {
		.ag-p,
		.ag-curves path,
		.ag-stat,
		.ag-thread :is(.ag-tie, .ag-reveal),
		.ag-knot {
			transition-delay: 0s;
		}
	}
}