/* =====================================================================
   KINETIC — base: reset, typography, links, buttons, forms, utilities,
   and the site-wide atmosphere (grain, loader, cursor, page transition).
   ===================================================================== */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { text-wrap: pretty; }

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

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

/* ---------- Voices ----------
   .mono   — metadata, nav, captions (Geist Mono, uppercase, small)
   .serif  — display moments (Fraunces at its largest optical size) */
.mono {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 400;
}
.mono a:hover { color: var(--text); }
.serif,
.hero__title, .page-hero__title, .project-hero__title, .contact-hero__title,
.foot__big, .state__text, .index__title, .error-404__code, .piece__t, .svc__list h3 {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-variation-settings: "opsz" 144;
	font-weight: 400;
	letter-spacing: -0.025em;
}
.eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* ---------- Layout helpers ---------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gut);
}
.container--reading { max-width: calc(var(--content-size) + var(--gut) * 2); }

/* ---------- Buttons (case-study pages, forms, 404) ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.8em 1.2em;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { border-color: var(--text); background: var(--surface-2); }
.btn--primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--primary:hover { background: #fff; color: var(--bg); }
.btn--ghost { color: var(--text); }
.btn__arrow { display: inline-block; transition: transform 0.3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Forms ---------- */
.search-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.search-form__field {
	flex: 1 1 220px;
	padding: 0.75em 1em;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

/* ---------- Entry content (block body) ---------- */
.entry-content > * {
	max-width: var(--content-size);
	margin-inline: auto;
}
.entry-content > .alignwide { max-width: var(--wide-size); }
.entry-content > .alignfull { max-width: none; }
.entry-content > * + * { margin-top: 1.4rem; }
.entry-content h2 { margin-top: 2.4em; }
.entry-content h3 { margin-top: 1.8em; }
.entry-content a { color: var(--text); text-underline-offset: 3px; text-decoration: underline; text-decoration-color: var(--border-strong); }
.entry-content a:hover { text-decoration-color: var(--text); }
.entry-content img { border-radius: var(--radius); }
.entry-content figure { margin-block: 2rem; }

/* ---------- Accessibility utilities ---------- */
.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: fixed;
	top: 0; left: 50%;
	transform: translate(-50%, -120%);
	z-index: 999;
	padding: 0.7em 1.2em;
	background: var(--text);
	color: var(--bg);
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- Reveal baseline (JS adds .is-visible) ----------
   Gated on .js so that without JavaScript the content is fully visible. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Word-mask reveal (home + case-study heroes) ---------- */
.hero__title .rw,
.project-hero__title .rw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.js .hero__title .rw__i,
.js .project-hero__title .rw__i { display: inline-block; transform: translateY(114%); will-change: transform; }
.js .hero__title .rw__i,
.project-hero__title.is-visible .rw__i {
	animation: kinetic-rise 1s var(--ease-out) both;
	animation-delay: calc(var(--i) * 0.06s + 0.2s);
}
.rw__i--em { font-style: italic; font-weight: 300; }
@keyframes kinetic-rise { to { transform: translateY(0); } }

/* ---------- Film grain overlay (cinematic texture) ---------- */
.grain {
	position: fixed;
	inset: 0;
	z-index: 40;
	pointer-events: none;
	opacity: var(--grain-opacity);
	mix-blend-mode: overlay;
	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.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

/* ---------- Cursor: a dot that grows into a label over media ---------- */
.cur {
	position: fixed; left: 0; top: 0; z-index: 60;
	width: 8px; height: 8px; border-radius: 50%;
	background: #fff; mix-blend-mode: difference;
	transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
	will-change: transform;
	pointer-events: none; display: none;
	transition: width 0.35s var(--ease), height 0.35s var(--ease), opacity 0.3s;
}
.cur span {
	position: absolute; inset: 0; display: grid; place-items: center;
	font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
	color: #000; opacity: 0; transition: opacity 0.2s;
}
.cur.is-big { width: 76px; height: 76px; }
.cur.is-big span { opacity: 1; }
.cur.is-off { opacity: 0; }
.has-cursor .cur { display: block; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor label { cursor: none; }

/* ---------- Portrait: square, mono by default, colour on hover ----------
   Keeps the work as the only colour on the page; the original file is untouched,
   so dropping `portrait--mono` brings the colour back everywhere. */
.portrait { margin: 0; overflow: hidden; border-radius: 4px; background: #141418; }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.portrait--mono img { filter: grayscale(1) contrast(1.06); transition: filter 0.6s var(--ease); }
.portrait--mono:hover img { filter: none; }

/* ---------- Custom scrollbar ---------- */
@supports (scrollbar-width: thin) {
	html { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Lenis smooth scroll (only active when JS adds .lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ---------- Page transition overlay (exit fade + enter) ---------- */
.page-transition {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.36s var(--ease);
}
.page-transition.is-active { opacity: 1; pointer-events: all; }
.pt-cover .page-transition { opacity: 1; }

/* ---------- Loader (first visit per session) ---------- */
.site-loader {
	position: fixed; inset: 0; z-index: 1000;
	background: var(--bg); display: grid; place-items: center;
	animation: loader-curtain 1.5s var(--ease-out) forwards;
}
.site-loader__word { overflow: hidden; padding-bottom: 0.12em; }
.site-loader__word span {
	display: block; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
	transform: translateY(110%); animation: kinetic-rise 0.8s var(--ease-out) 0.1s forwards;
}
.site-loader__bar { position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--text); animation: loader-bar 0.95s var(--ease-out) forwards; }
.no-loader .site-loader { display: none; }
@keyframes loader-curtain { 0%,42% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes loader-bar { to { width: 100%; } }

/* ---------- Magnetic buttons — JS drives transform ---------- */
.magnetic, [data-magnetic] { transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.hero__title .rw__i, .project-hero__title .rw__i { transform: none !important; animation: none !important; }
	.site-loader, .page-transition { display: none !important; }
}