/* ===================================================================
	 Unique — grid of cards with hover reveal
	 =================================================================== */

section#unique {
	position: relative;
	padding: 4rem 0;
	background: var(--color-bg-sunken);
}
.unique__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: end;
	margin-block-end: var(--space-2xl);
}
.unique__head h2 { font-size: var(--step-3xl); font-weight: 500; letter-spacing: -0.035em; max-width: 18ch; }
.unique__head h2 em { color: var(--color-accent); font-style: italic; font-weight: 400; }
.unique__head p { color: var(--color-fg-muted); max-width: 42ch; }

.cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--color-line);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	overflow: visible;
	perspective: 700px;
}
.card {
	position: relative;
	background: var(--color-bg);
	padding: 2.5rem;

	min-height: 280px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: center;
	transform-style: preserve-3d;
	transition:
		background var(--dur) var(--ease-out),
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms);
	/* initial state: scaled down + tilted back strongly */
	opacity: 0;
	transform: scale(0.85) rotateX(45deg) translateZ(-60px);
	border-radius: var(--radius-lg);

	&.--large1 {
		grid-column: span 2;
	}
	&.--large2 {
		grid-column: span 3;
	}
}

.card.is-in {
	opacity: 1;
	transform: scale(1) rotateX(0) translateZ(0);
}
/* Once the staggered entrance transition has finished, zero the delay so
   hover-out (and any later transition) is instant instead of waiting for
   the entrance stagger to replay. */
.card.is-in.is-settled {
	transition-delay: 0ms;
	/*	outline: 2px solid lime; DEBUG */
}
/* Hover tilt: lift forward + tilt, snappy transition */
.card.is-in:hover {
	transform: scale(1.04) rotateX(-2deg) translateZ(5px);
	z-index: 2;
	transition:
		background var(--dur) var(--ease-out),
		opacity var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-out);
	transition-delay: 0s;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.card::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(80% 60% at 50% 100%, var(--color-accent-soft), transparent 70%);
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease-out);
}
.card:hover { background: var(--color-bg-raised); }
.card:hover::before { opacity: 1; }
.card__num {
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	color: var(--color-fg-dim);
	letter-spacing: 0.12em;
	margin-block-end: var(--space-md);
}
.card__icon {
	color: var(--color-fg-muted);
	position: relative;
	z-index: 1;
	margin-block-end: var(--space-md);
	transition: color var(--dur) var(--ease-out);
}
.card:hover .card__icon {
	color: var(--color-accent);
}
.card h3 {
	font-size: var(--step-md);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-block-end: var(--space-sm);
	position: relative; z-index: 1;
}
.card p {
	color: var(--color-fg-muted);
	font-size: var(--step-xs);
	position: relative; z-index: 1;
	margin-block-end: var(--space-md);
}
.card__tags {
	margin-block-start: auto;
	padding-block-start: var(--space-sm);
	border-block-start: 1px solid var(--color-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	position: relative; z-index: 1;
}
.card__tags > span {
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	font-weight: bold;
	color: var(--color-fg);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.35em 0.7em;
	background:
		repeating-linear-gradient(
			135deg,
			color-mix(in srgb, var(--color-accent) 9%, transparent) 0 6px,
			transparent 6px 12px
		),
		color-mix(in srgb, var(--color-accent) 10%, var(--color-bg));
	border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
	transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
@keyframes card-sub-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 60%, transparent); }
	70%  { box-shadow: 0 0 0 6px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
.card:hover .card__tags > span {
	background:
		repeating-linear-gradient(
			135deg,
			color-mix(in srgb, var(--color-accent) 14%, transparent) 0 6px,
			transparent 6px 12px
		),
		color-mix(in srgb, var(--color-accent) 16%, var(--color-bg));
	border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* Featured card — light diagonal strip band, accent heading */
.card.--feature {
	background:
		repeating-linear-gradient(
			135deg,
			color-mix(in srgb, var(--color-bg) 98%, #fff) 0 18px,
			var(--color-bg) 18px 36px
		);
	box-shadow: inset 0 0 0 1px var(--color-accent);
}
.card.--feature:hover {
	box-shadow: inset 0 0 0 1px var(--color-accent);
}
.card.--feature h3 { color: var(--color-accent); }
.card.--feature .card__icon { color: var(--color-accent); }

/* Per-row stagger index (--i) for the card grid.
   --i is the column position WITHIN each grid row, resetting every row,
   so cards cascade left-to-right inside a row; rows themselves separate
   via the scroll trigger (each row has a different natural top).
   Mirror the column counts (4 / 3 / 2 / 1) and the --large1 card
   (card 7) spanning 2 cols at wide widths.
   Default (>880px, 4 cols): row1 = 1-4, row2 = 5,6,7(7 spans 2). */
.stagger > *:nth-child(1) { --i: 0; }
.stagger > *:nth-child(2) { --i: 1; }
.stagger > *:nth-child(3) { --i: 2; }
.stagger > *:nth-child(4) { --i: 3; }
.stagger > *:nth-child(5) { --i: 0; }
.stagger > *:nth-child(6) { --i: 1; }
.stagger > *:nth-child(7) { --i: 2; }

@media (max-width: 880px) {
	/* 3 cols: row1 = 1-3, row2 = 4-6, row3 = 7 */
	.stagger > *:nth-child(1),
	.stagger > *:nth-child(4),
	.stagger > *:nth-child(7) { --i: 0; }
	.stagger > *:nth-child(2),
	.stagger > *:nth-child(5) { --i: 1; }
	.stagger > *:nth-child(3),
	.stagger > *:nth-child(6) { --i: 2; }
}
@media (max-width: 720px) {
	/* 2 cols: row1=1-2, row2=3-4, row3=5-6, row4=7 */
	.stagger > *:nth-child(1),
	.stagger > *:nth-child(3),
	.stagger > *:nth-child(5),
	.stagger > *:nth-child(7) { --i: 0; }
	.stagger > *:nth-child(2),
	.stagger > *:nth-child(4),
	.stagger > *:nth-child(6) { --i: 1; }
}
@media (max-width: 400px) {
	/* 1 col: each card its own row, no intra-row cascade */
	.stagger > * { --i: 0; }
}

@media (max-width: 880px) {
	.cards { grid-template-columns: repeat(3, 1fr); }
	.card {
		padding: 2rem;
	}
	.unique__head { grid-template-columns: 1fr; }
	.unique__head h2 { font-size: var(--step-2xl); }
}
@media (max-width: 720px) {
	.cards { grid-template-columns: repeat(2, 1fr); }
	.card {
		padding: 1rem;
	}
}
@media (max-width: 400px) {
	.cards {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card { opacity: 1 !important; transform: none !important; }
}