/* =============================================================
   KIMIKON Cards System — Surface Layer
   Shared card surfaces, glass highlights, and card interaction.

   CSS layer order:
   1. design-system.css  foundation tokens + primitive components
   2. cards-system.css   this file: reusable card surfaces
   3. motion-system.css  shared reveal and motion contracts
   4. page theme CSS     layout, section composition, local overrides
   5. nav-system.css     shared header/navigation

   Include this AFTER design-system.css and BEFORE page CSS.
   ============================================================= */

:root {
	--card-radius: 14px;
	--card-border: var(--border);
	--card-surface: var(--surface);
	--card-shadow: var(--shadow);
	--card-hover-border: color-mix(in srgb, var(--accent) 42%, var(--border));
	--card-hover-shadow:
		0 36px 90px color-mix(in srgb, var(--accent) 20%, transparent),
		0 14px 40px color-mix(in srgb, var(--text) 10%, transparent);
	--card-hover-lift: -6px;
}

.ds-card {
	border: 1px solid var(--card-border);
	border-radius: var(--card-radius);
	background: var(--card-surface);
	box-shadow: var(--card-shadow);
	backdrop-filter: blur(var(--card-blur, 24px)) saturate(1.25);
}

.ds-card-interactive {
	cursor: pointer;
	transform-style: preserve-3d;
	transform:
		perspective(1000px)
		rotateX(calc(var(--tilt-x, 0) * 1deg))
		rotateY(calc(var(--tilt-y, 0) * 1deg))
		translateY(var(--lift, 0px));
	transition:
		transform 520ms var(--ds-ease),
		box-shadow 520ms var(--ds-ease),
		border-color 520ms var(--ds-ease);
}

.ds-card.ds-card-interactive.reveal.is-visible {
	transform:
		perspective(1000px)
		rotateX(calc(var(--tilt-x, 0) * 1deg))
		rotateY(calc(var(--tilt-y, 0) * 1deg))
		translateY(var(--lift, 0px));
}

.ds-card-interactive:hover,
.ds-card-interactive:focus-within {
	border-color: var(--card-hover-border);
	box-shadow: var(--card-hover-shadow);
	--lift: var(--card-hover-lift);
}

.ds-card-glass {
	position: relative;
	overflow: hidden;
}

.ds-card-glass::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(135deg, var(--glass-line), transparent 34%),
		radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 16rem);
	content: "";
	opacity: 0.72;
}

.ds-card-glass > * {
	position: relative;
	z-index: 1;
}

.ds-card-meta {
	display: grid;
	align-content: space-between;
	gap: 16px;
	min-height: 160px;
	padding: 22px 24px;
}

.ds-card-icon {
	display: grid;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
	border-radius: 14px;
	background: color-mix(in srgb, var(--accent) 9%, transparent);
	color: var(--accent-strong);
}

.ds-card-icon svg {
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.ds-card-interactive,
	.ds-card.ds-card-interactive.reveal.is-visible {
		transform: none;
		transition: none;
	}
}