/*
 * Atarim V5 design-system tokens + base.
 * Source of truth: docs/Atarim V5 Design System.md (binding).
 * Markup keeps the system's values inline (mirroring the approved designs);
 * these custom properties exist for new CSS and shared patterns.
 */

:root {
	/* Stage palette (dark surfaces) */
	--ink: #16042E;          /* Void Purple: primary dark canvas */
	--ink2: #23104A;         /* Raised Purple: cards on dark */
	--aura: #522B9E;         /* Violet Aura: mid-stop of glows */
	--violet: #6D5DF3;       /* Electric Violet: actions, links, gradient cores */
	--violet-light: #9385FF; /* headline accents on dark */
	--mint: #3ED696;         /* Signal Mint: primary CTA, stars, success */
	--lav: #C8BCE8;          /* body copy on dark */
	--lav-dim: #998CC2;      /* meta, captions, footer links on dark */
	--line-dark: rgba(255, 255, 255, 0.10);
	--panel-dark: rgba(255, 255, 255, 0.05);

	/* Information palette (light surfaces) */
	--light-text: #2a1747;
	--muted: #574a6e;
	--muted-dim: #8a7ea3;
	--panel-light: #f4f0fb;
	--line-light: rgba(26, 8, 48, 0.10);
	--skeleton-1: #EAE4F5;
	--skeleton-2: #E0D8F1;

	/* Type */
	--font-display: 'Fira Sans Condensed', 'Roboto', sans-serif;
	--font-body: 'Roboto', system-ui, sans-serif;

	/* Shadows, tier-1 soft only */
	--shadow-card: 0 30px 64px -24px rgba(22, 4, 46, 0.18);
	--shadow-stage: 0 40px 90px -36px rgba(22, 4, 46, 0.25);
	--shadow-nav: 0 18px 44px -16px rgba(10, 2, 24, 0.55);
	--shadow-field: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* ===== Base ===== */
* { box-sizing: border-box; }
[style*="border-radius"] { corner-shape: squircle; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-display); }
::selection { background: var(--violet); color: #fff; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #3a2363; border-radius: 8px; border: 3px solid var(--ink); }
section[id] { scroll-margin-top: 96px; }

/* The page shell. Desktop-first per the approved design (responsive pass later). */
.atarim-page {
	position: relative;
	min-width: 1280px;
	min-height: 100vh;
	background: var(--ink);
	color: #fff;
	font-family: var(--font-body);
	overflow-x: clip;
}

/* ===== Noise grain (dark stage sections only) =====
 * --atarim-noise is set inline on :root by the theme (points at the media library). */
.grain::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--atarim-noise);
	background-size: 250px 250px;
	background-repeat: repeat;
	mix-blend-mode: multiply;
	opacity: 0.5;
}

/* ===== Scroll reveal (sitewide pattern) =====
 * Mark elements with data-rev; site.js adds .hp-on when they scroll into view.
 * Per Vito: never on headings/taglines, only on mockups, cards and hero figures. */
@keyframes hpRise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
[data-rev] { opacity: 0; }
.hp-on {
	opacity: 1;
	animation-name: hpRise;
	animation-duration: .85s;
	animation-timing-function: cubic-bezier(.22, .61, .21, 1);
	animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
	[data-rev] { opacity: 1 !important; }
	* { animation: none !important; transition: none !important; }
}