/* Cerne AI — global styles */
:root {
  --bg: #0a0b0a;
  --bg-elev: #101211;
  --fg: #f4f4ef;
  --fg-dim: #8b8e87;
  --fg-mute: #565852;
  --line: #1c1f1c;
  --line-strong: #2a2e2a;
  --accent: oklch(0.88 0.22 130);       /* lime electric */
  --accent-ink: oklch(0.22 0.08 130);
  --accent-2: oklch(0.78 0.14 200);     /* cool cyan */
  --radius: 14px;
  --shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
  --fs-display: clamp(54px, 9vw, 160px);
  --fs-h1: clamp(38px, 5.2vw, 88px);
  --fs-h2: clamp(28px, 3.4vw, 52px);
  --fs-h3: clamp(20px, 1.8vw, 28px);
  --fs-body: clamp(15px, 1.05vw, 18px);
  --fs-small: 13px;
  --ff-display: 'Instrument Serif', 'Times New Roman', serif;
  --ff-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); font-family: var(--ff-sans); font-size: var(--fs-body); line-height: 1.45; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.container { width: min(1360px, 92vw); margin: 0 auto; }
.mono { font-family: var(--ff-mono); letter-spacing: -0.01em; }
.serif { font-family: var(--ff-display); font-weight: 400; letter-spacing: -0.02em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-dim);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}

.divider-row { display: flex; align-items: center; gap: 16px; padding: 80px 0 24px; }
.divider-row::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); }

section { position: relative; padding: clamp(80px, 10vw, 160px) 0; }
section + section { border-top: 1px solid var(--line); }

/* Reveal — content is ALWAYS visible regardless of animation support. */
.reveal, .reveal-stagger, .reveal-stagger > * { opacity: 1 !important; }
@keyframes fadeUpCerne {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.reveal { animation: fadeUpCerne .7s ease-out both; }
.reveal-stagger > * { animation: fadeUpCerne .6s ease-out both; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: 0.02em;
  border: 1px solid var(--line-strong);
  transition: all .25s ease;
  background: var(--bg-elev);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px var(--accent); color: var(--accent-ink); }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-mute); }

/* Cursor (desktop only) */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
  a, button, input, textarea, [data-cursor] { cursor: none; }
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; }
  .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); border-radius: 50%; transition: transform .15s ease, opacity .2s ease; }
  .cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--fg); border-radius: 50%; transition: transform .25s cubic-bezier(.2,.7,0,1), width .25s ease, height .25s ease, border-color .25s ease, margin .25s ease; }
  .cursor-ring.hover { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: var(--accent); background: rgba(255,255,255,0.03); }
}

/* Noise overlay */
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Selection */
::selection { background: var(--accent); color: var(--accent-ink); }

/* Theme variants */
body.theme-ivory {
  --bg: #f1ede4;
  --bg-elev: #e8e3d7;
  --fg: #1a1a17;
  --fg-dim: #6a6a63;
  --fg-mute: #9a9a92;
  --line: #d6d0c1;
  --line-strong: #bfb9a9;
  --accent: oklch(0.55 0.18 28);
  --accent-ink: #faf6ec;
}
body.theme-midnight {
  --bg: #06070d;
  --bg-elev: #0c0e17;
  --fg: #e8ecff;
  --fg-dim: #8289a8;
  --fg-mute: #4a5070;
  --line: #161a29;
  --line-strong: #262b40;
  --accent: oklch(0.78 0.18 280);
  --accent-ink: #0a0b12;
}