/* ==========================================================================
   BASE — fonts, design tokens, reset, shared components.
   Every page loads this file first. Page-specific styles live in:
   landing.css (/), work.css (/work/), after.css (/after-hours/), project.css
   ========================================================================== */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face { font-family: "Gloock"; src: url("../fonts/gloock-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gloock"; src: url("../fonts/gloock-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted"; src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Schibsted"; src: url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0100-024F, U+20A0-20C0; }
@font-face { font-family: "Schibsted"; src: url("../fonts/schibsted-grotesk-latin-wght-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Martian"; src: url("../fonts/martian-mono-latin-standard-normal.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }

/* ---------- Tokens ----------
   The whole site is one idea: the same sun at two times of day.
   DAY  = the 9-to-5 Resume (bone paper, ink, a marigold noon sun)
   NIGHT = the 5-to-9 projects (violet-black, pale ink, a lavender moon)
   The marigold "sun" is the only colour both sides share. */
:root {
  --day-bg: #ECE9E1;
  --day-paper: #F6F4EE;
  --day-ink: #16181B;
  --day-ink-2: #56585B;
  --day-ink-3: #6A6B65;
  --day-line: #D3CEC2;

  --night-bg: #0D0C11;
  --night-raise: #17151E;
  --night-ink: #ECE8F1;
  --night-ink-2: #A29CB0;
  --night-ink-3: #827D93;
  --night-line: #2A2733;
  --moon: #C9C2FF;

  --sun: #F2A516;      /* marigold: the genda flower and the noon sun over Gujarat */
  --sun-ink: #8F5300;  /* the same hue, dark enough for text on the light side */
  --sun-soft: #F7C766;

  --f-display: "Gloock", "Iowan Old Style", Georgia, serif;
  --f-text: "Schibsted", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Martian", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --r: 14px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-text); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--sun); color: #16181B; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

/* Themes — set on <body> */
body.day { background: var(--day-bg); color: var(--day-ink); }
body.night { background: var(--night-bg); color: var(--night-ink); color-scheme: dark; }

/* ---------- Shared type helpers ---------- */
.mono { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; font-stretch: 100%; }
.display { text-wrap: balance; font-family: var(--f-display); font-weight: 400; letter-spacing: -.01em; line-height: 1.02; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Top bar (work + after-hours + project pages) ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--gutter); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar .home { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.topbar .home .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 22%, transparent); }
.topbar .actions { display: flex; align-items: center; gap: 8px; }
.topbar.scrolled { backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
body.day .topbar.scrolled { background: color-mix(in srgb, var(--day-bg) 94%, transparent); box-shadow: 0 1px 0 var(--day-line); }
body.night .topbar.scrolled { background: color-mix(in srgb, var(--night-bg) 92%, transparent); box-shadow: 0 1px 0 var(--night-line); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; transition: transform .35s var(--ease-out), background-color .25s, color .25s, border-color .25s; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { transform: scale(.97); }
body.day .btn.solid { background: var(--day-ink); color: var(--day-paper); }
body.day .btn.solid:hover { background: #000; }
body.day .btn.line { border: 1px solid var(--day-line); background: color-mix(in srgb, var(--day-paper) 60%, transparent); }
body.day .btn.line:hover { border-color: var(--day-ink); }
body.night .btn.solid { background: var(--night-ink); color: var(--night-bg); }
body.night .btn.solid:hover { background: #fff; }
body.night .btn.line { border: 1px solid var(--night-line); background: color-mix(in srgb, var(--night-raise) 60%, transparent); }
body.night .btn.line:hover { border-color: var(--night-ink-2); }
.btn.icon { width: 40px; padding: 0; justify-content: center; }
.btn.big { height: 56px; padding: 0 26px; font-size: 16px; }
.btn.big svg { width: 20px; height: 20px; }

/* ---------- Reveal-on-scroll (driven by core.js) ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
/* Line-by-line masked text reveal: core.js wraps each line in .ln > span */
.lines .ln { display: block; overflow: hidden; padding-bottom: .24em; margin-bottom: -.24em; }
.lines .ln > span { display: inline-block; transform: translateY(105%); transition: transform 1.15s var(--ease-out); transition-delay: calc(var(--i, 0) * 85ms + var(--d, 0s)); }
.lines.in .ln > span { transform: none; }

/* ---------- Page transitions ----------
   Same-theme navigation (e.g. grid → project) cross-fades natively where supported.
   Switching sides uses the circular "veil" below (driven by core.js). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

.veil { position: fixed; inset: 0; z-index: 200; pointer-events: none; clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); transition: clip-path .75s var(--ease-io); }
.veil.go { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%)); }
.veil.day { background: var(--day-bg); }
.veil.night { background: var(--night-bg); }
body.entering main, body.entering .topbar { animation: enter .9s var(--ease-out) both; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }

/* Grain — a very light film texture so flat colour never looks "default" */
.grain { position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }  /* static on purpose: a moving grain reads as flicker over video */
body.night .grain { opacity: .07; mix-blend-mode: screen; filter: invert(1); }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .rv, .lines .ln > span { opacity: 1 !important; transform: none !important; }
  .grain { display: none; }
}