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

@property --lit {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

/* ---------- The hero's notification stack (IsoStack.svelte) ---------- */
.landing {
	.iso {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	/* A slot (.at, by its centre): an upright box much bigger than its card, so only the card
     takes the pointer and the links on the card under it stay clickable. The slots step
     straight down the screen, the stack's z axis, so every card keeps its size. New ones
     drop in from a step above. */
	.ii {
		--ax: 50%;
		--ay: 50%;
		display: grid;
		place-items: center;
		width: 420px;
		height: 240px;
		transition:
			translate 0.7s var(--ease-glide),
			--lit 0.5s ease;
		pointer-events: none;
		@starting-style {
			translate: calc(var(--x) - var(--ax)) calc(var(--y) - var(--ay) - 44px);
		}
	}
	/* The card: a hairline plate on the vouch chat's iso plane, mirrored to rise to the right. */
	.icard {
		--rim: var(--hl-edge);
		--rim-inset: -1px;
		--av: 36px;
		--fade: linear-gradient(
			color-mix(in srgb, var(--bg) calc((1 - var(--lit)) * 100%), transparent) 0 0
		);
		--glass-bg: var(--fade), var(--glass-fill);
		position: relative;
		grid-area: 1 / 1;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 8px;
		width: 360px;
		height: 52px;
		padding: 7px 14px 7px 9px;
		border: 1px solid transparent;
		border-radius: 12px;
		transform: var(--iso-hero);
		transition: opacity 0.5s ease;
		pointer-events: auto;
		@starting-style {
			opacity: 0;
		}
	}
	.icard::before,
	.icard::after,
	.icard > * {
		opacity: var(--lit);
	}
	.ii.gone .icard {
		opacity: 0;
	}
	/* The plate's thickness: its silhouette again, --hl-depth straight down the screen. */
	.icard.rim-copy {
		translate: 0 var(--hl-depth);
		background: var(--fade), var(--hl-side);
	}

	/* A party shrinks to fit the card and its name ends in an ellipsis, so a long handle or
     repo never runs out past the card's edge. */
	.ip {
		display: flex;
		align-items: center;
		gap: 4.98px;
		flex: 0 1 auto;
		min-width: 0;
	}
	a.ip {
		text-decoration: none;
		border-radius: 18px;
	}
	a.ip:hover .in {
		text-decoration: underline;
		text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent);
		text-underline-offset: 2px;
	}
	a.ip:hover .avatar {
		box-shadow: 0 0 0 1px var(--hl-hi);
	}
	a.ip:focus-visible {
		outline-offset: 2px;
	}
	.in,
	.iv {
		font-size: 12.95px;
		font-weight: 450;
		line-height: 1.2;
		letter-spacing: -0.01em;
		white-space: nowrap;
		color: var(--text);
	}
	.in {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.iv {
		flex: none;
		color: var(--text-3);
	}
	/* How long ago, pushed to the card's right edge. */
	.it {
		flex: none;
		margin-left: auto;
		padding-left: 1.37px;
		font-size: 11px;
		font-weight: 450;
		line-height: 1.2;
		letter-spacing: -0.01em;
		white-space: nowrap;
		color: var(--muted);
	}

	@media (prefers-reduced-motion: reduce) {
		.ii {
			transition: none;
		}
	}
}