/* ==========================================================================
   Autratech · Base — reset, elements, typography, layout primitives, a11y,
   custom scrollbar and the global decorative FX layers.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Lenis takes over smooth scroll; disable native when JS is active. */
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
	margin: 0;
	background: var(--at-bg);
	color: var(--at-text);
	font-family: var(--at-font-body);
	font-size: var(--at-fs-body);
	line-height: var(--at-lh-body);
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Hide the native cursor only when the custom one is active on fine pointers. */
@media (pointer: fine) {
	body.at-has-cursor.cursor-ready,
	body.at-has-cursor.cursor-ready * { cursor: none; }
}

h1, h2, h3, h4, h5 {
	font-family: var(--at-font-display);
	font-weight: 600;
	line-height: var(--at-lh-snug);
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	color: var(--at-text);
	text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--at-primary); text-decoration: none; transition: color var(--at-dur-fast) var(--at-ease-out); }

img, video, canvas, svg { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--at-primary); color: #fff; }

:focus-visible {
	outline: 2px solid var(--at-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Layout primitives ------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--at-container);
	margin-inline: auto;
	padding-inline: var(--at-gutter);
}
.container--wide { max-width: var(--at-container-wide); }

.section { padding-block: var(--at-section); position: relative; }

.section__head { max-width: 820px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	max-width: none;
	flex-wrap: wrap;
}
.section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--at-primary);
	margin-bottom: 1rem;
}
.section__eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--at-primary);
	display: inline-block;
}
.section__title { font-size: var(--at-fs-h2); }
.section__title span { display: block; }
.section__lead { font-size: var(--at-fs-lead); color: var(--at-muted); max-width: 60ch; margin-top: 1.25rem; }

/* --- Utility ----------------------------------------------------------- */
.gradient-text {
	background: var(--at-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-size: 200% 200%;
}

.glass {
	background: var(--at-glass-bg);
	-webkit-backdrop-filter: blur(var(--at-glass-blur)) saturate(160%);
	backdrop-filter: blur(var(--at-glass-blur)) saturate(160%);
	border: 1px solid var(--at-glass-border);
	box-shadow: var(--at-shadow-glass);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	padding: 0.75rem 1.25rem; background: var(--at-text); color: #fff;
	border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* --- Custom scrollbar -------------------------------------------------- */
@media (pointer: fine) {
	::-webkit-scrollbar { width: 10px; }
	::-webkit-scrollbar-track { background: var(--at-surface); }
	::-webkit-scrollbar-thumb {
		background: linear-gradient(var(--at-primary), var(--at-secondary));
		border-radius: 999px;
		border: 2px solid var(--at-surface);
	}
	html { scrollbar-color: var(--at-primary) var(--at-surface); scrollbar-width: thin; }
}

/* --- Global decorative FX --------------------------------------------- */
.fx-noise {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-spotlight {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%), rgba(37, 99, 235, 0.06), transparent 65%);
	transition: opacity var(--at-dur) var(--at-ease-out);
}
@media (prefers-reduced-motion: reduce) { .fx-spotlight { display: none; } }

/* --- Scroll progress --------------------------------------------------- */
.scroll-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px;
	z-index: var(--at-z-nav);
	background: transparent;
	pointer-events: none;
}
.scroll-progress__bar {
	display: block; height: 100%; width: 100%;
	transform: scaleX(0); transform-origin: 0 50%;
	background: var(--at-grad-aurora);
}

/* --- Reading progress (single) ---------------------------------------- */
.reading-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--at-z-nav);
	pointer-events: none;
}
.reading-progress span {
	display: block; height: 100%; width: 0%;
	background: var(--at-grad-aurora);
}

/* Prose (article body) */
.prose { max-width: 720px; margin-inline: auto; font-size: 1.15rem; }
.prose > * + * { margin-top: 1.5rem; }
.prose h2 { font-size: var(--at-fs-h3); margin-top: 2.5rem; }
.prose h3 { font-size: 1.4rem; margin-top: 2rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--at-r-md); box-shadow: var(--at-shadow-soft); }
.prose blockquote {
	border-left: 3px solid var(--at-primary);
	padding-left: 1.5rem; font-size: 1.35rem; font-family: var(--at-font-display);
	color: var(--at-text);
}
.prose pre {
	background: var(--at-text); color: #e2e8f0; padding: 1.25rem 1.5rem;
	border-radius: var(--at-r-md); overflow-x: auto; font-family: var(--at-font-mono); font-size: 0.9rem;
}
.prose code { font-family: var(--at-font-mono); font-size: 0.9em; }
.prose :not(pre) > code { background: var(--at-surface-2); padding: 0.15em 0.4em; border-radius: 6px; }

/* Quick-answer callout — a short, self-contained answer near the top of a
   post, written to be directly extractable by featured snippets and AI
   answer engines without needing the rest of the article for context. */
.at-quick-answer {
	background: var(--at-surface-2);
	border: 1px solid var(--at-border, rgba(22, 27, 39, 0.1));
	border-left: 4px solid var(--at-primary);
	border-radius: var(--at-r-md);
	padding: 1.25rem 1.5rem;
}
.at-quick-answer__label {
	display: block;
	font-family: var(--at-font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--at-primary);
	margin-bottom: 0.5rem;
}
.at-quick-answer p { margin: 0; font-size: 1.05rem; line-height: 1.6; }