/* Client-page motion + light structure (owner, 2026-10-05) -- the calm
   "Vercel" treatment the marketing homepage got, toned down for working
   pages. Loaded by index, select, status-page, piedavajums, demo, report
   (never by invoice.html or the admin pages). Uses each page's own theme
   variables (--ink, --pink, --surface, --border), so it follows the dark
   theme. Elements are only ever hidden under html.vj-motion, which
   motion.js sets when IntersectionObserver exists and reduced motion is
   off. */

:root {
	--m-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Faint grid + soft glow behind the top of the page. */
body::before,
body::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

body::before {
	top: 0;
	left: 0;
	right: 0;
	height: 560px;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 85% at 50% 0%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 85% at 50% 0%, #000 20%, transparent 75%);
}

body::after {
	top: -220px;
	left: 50%;
	width: min(760px, 90vw);
	height: 420px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--pink) 20%, transparent), transparent);
	filter: blur(60px);
}

/* Pill section label. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 12px;
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--surface) 70%, transparent);
	color: var(--pink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

/* Cursor spotlight inside cards (pointer devices; class set by motion.js). */
.vj-spot {
	position: relative;
}

.vj-spot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--pink) 9%, transparent), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.vj-spot:hover::after {
	opacity: 1;
}

/* Scroll reveal: rise + blur-in, staggered by --i. */
.vj-motion [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	filter: blur(6px);
	transition:
		opacity 0.65s var(--m-ease),
		transform 0.65s var(--m-ease),
		filter 0.65s var(--m-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.vj-motion [data-reveal].is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

@media print {
	body::before,
	body::after {
		display: none;
	}

	.vj-motion [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}