/* Shared foundation: tokens, type, header, buttons, footer, motion states. */

@font-face { font-family: 'Geist'; src: url('../fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0a0a09;
  --bg-2: #121211;
  --bg-3: #1a1a18;
  --text: #ebe8e2;
  --text-dim: #8f8c85;
  --line: #23221f;
  --line-strong: #3a3833;
  --accent: #e8963f;
  --accent-dim: #a5652a;
  --accent-soft: #6b4a26;
  --on-accent: #0a0a09;

  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 4.2vw, 64px);
  --maxw: 1440px;
  --radius: 8px;

  --z-grain: 80;
  --z-header: 70;
  --z-skip: 100;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--on-accent); }

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

/* Lenis smooth scroll (from lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Film grain on a fixed, non-interactive layer so it never repaints with scroll */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  transition: top 0.3s var(--ease);
}
.skip:focus { top: 16px; }

/* ---------- hover roll: the copy slides up and a duplicate takes its place ---------- */

.roll { display: inline-block; overflow: hidden; line-height: 1.3; vertical-align: bottom; }
.roll__in { display: inline-block; position: relative; transition: transform 0.55s var(--ease); }
.roll__in::after { content: attr(data-text); position: absolute; left: 0; top: 110%; white-space: nowrap; color: var(--accent); }
.roll:hover .roll__in, .roll:focus-visible .roll__in { transform: translateY(-110%); }

/* ---------- header: always visible, brand and CV left, page links right ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  min-height: 72px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s, border-color 0.4s;
}
.site-header.is-scrolled {
  background: rgba(10, 10, 9, 0.78);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.site-header__left { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.site-header__brand { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.site-header__brand img { width: 32px; height: 32px; border-radius: 8px; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); font-size: 0.9rem; white-space: nowrap; }
.site-nav a { flex: none; color: var(--text); transition: color 0.3s; }
.site-nav a.is-active { color: var(--accent); }

/* ---------- buttons ---------- */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95em 1.6em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.4s var(--ease), border-color 0.4s;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--text);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease), border-radius 0.55s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--on-accent); border-color: var(--text); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); border-radius: 0; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--sm { padding: 0.55em 1.15em; font-size: 0.85rem; }
.btn__arrow { display: inline-block; margin-left: 0.5em; transition: transform 0.5s var(--ease); }

/* The CV button: filled amber with a light sweep on hover. */
.btn--cv {
  border-color: transparent;
  background: linear-gradient(135deg, #f3a652 0%, #e8963f 50%, #d8822f 100%);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 28px -12px rgba(232, 150, 63, 0.6);
  transition: box-shadow 0.5s var(--ease), color 0.4s var(--ease);
}
.btn--cv::before {
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.6) 50%, transparent 75%);
  border-radius: 0;
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease);
}
.btn--cv:hover, .btn--cv:focus-visible { border-color: transparent; color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 34px -10px rgba(232, 150, 63, 0.75); }
.btn--cv:hover::before, .btn--cv:focus-visible::before { transform: translateX(120%); border-radius: 0; }
.btn--cv:hover .btn__arrow, .btn--cv:focus-visible .btn__arrow { transform: translate(3px, -3px); }

/* ---------- shared type ---------- */

.section { position: relative; padding: clamp(96px, 14vw, 200px) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.section-title {
  font-size: clamp(3rem, 9vw, 8.5rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.95;
  padding-bottom: 0.08em;
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 0.35em 0.9em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  transition: color 0.3s, border-color 0.3s;
}

/* ---------- footer ---------- */

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px var(--gutter);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
}
.site-footer .roll { justify-self: end; color: var(--text); }
@media (max-width: 720px) {
  .site-footer { grid-template-columns: 1fr; justify-items: start; }
  .site-footer .roll { justify-self: start; }
}

/* ---------- motion states ---------- */

/* Hidden only when scripts will reveal them; the 4 s safety net adds .no-anim. */
.js:not(.reduce):not(.no-anim) [data-fade] { opacity: 0; transform: translateY(28px); }
.js:not(.reduce):not(.no-anim) [data-split],
.js:not(.reduce):not(.no-anim) [data-hero] { visibility: hidden; }

/* SplitText mask wrappers clip to the line box; keep descenders visible. */
[data-split] > div { overflow-clip-margin: 0.25em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; }
}


/* ---------- 3D slots: empty boxes the solids in objects.js follow ---------- */

.obj { position: absolute; width: clamp(170px, 16vw, 270px); aspect-ratio: 1; pointer-events: none; }
.obj--title { top: clamp(56px, 7vw, 110px); right: var(--gutter); }
.objects-canvas { position: fixed; inset: 0; z-index: 50; width: 100%; height: 100%; pointer-events: none; }
.reduce .obj, .reduce .objects-canvas { display: none; }
@media (max-width: 999px) { .obj { display: none; } }

/* ---------- scroll cue: shown while there is more page below ---------- */

.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 55;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(10, 10, 9, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color 0.3s;
}
.scroll-cue:hover, .scroll-cue:focus-visible { border-color: var(--accent); }
.scroll-cue.is-hidden { opacity: 0; transform: translateY(14px); pointer-events: none; }
.scroll-cue span { position: relative; width: 1px; height: 16px; background: var(--text); animation: cue-bob 2.2s var(--ease) infinite; }
.scroll-cue span::after { content: ''; position: absolute; left: -3px; top: 8px; width: 7px; height: 7px; border: solid var(--text); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.scroll-cue:hover span, .scroll-cue:hover span::after { background-color: var(--accent); border-color: var(--accent); }
.scroll-cue:hover span::after { background-color: transparent; }
@keyframes cue-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
html:not(.js) .scroll-cue { display: none; }


@media (max-width: 1099px) {
  .site-header { flex-wrap: wrap; padding-block: 10px; row-gap: 6px; }
  .site-nav { order: 3; width: 100%; padding-bottom: 4px; overflow-x: auto; gap: 22px; scrollbar-width: none; }
  .site-nav.fade-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .site-nav.fade-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
  .site-nav.fade-left.fade-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
  .site-nav::-webkit-scrollbar { display: none; }
}

/* In the header the CV button is just amber text and an arrow. */
.site-header .btn--cv { padding-inline: 0.3em; background: none; box-shadow: none; border: 0; color: var(--accent); }
.site-header .btn--cv::before { display: none; }
.site-header .btn--cv:hover, .site-header .btn--cv:focus-visible { background: none; box-shadow: none; border: 0; color: #f6b56a; }