/* ══════════════════════════════════════════════════════════════════════
   LaFa 2.0 · core.css — Design-Tokens, Reset, Primitive
   Helle Sand-/Papier-Palette, cinematische Typo-Skala.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Flächen: warmes Papier → Sand ───────────────────────────────── */
  --paper:      #fefcf9;
  --sand-50:    #fbf6ef;
  --sand-100:   #f6efe4;
  --sand-150:   #f0e6d7;
  --sand-200:   #e8dac6;
  --sand-300:   #dbc7ab;
  --sand-400:   #c9ad8a;

  /* ── Schrift ─────────────────────────────────────────────────────── */
  --ink:        #1c1611;
  --ink-soft:   #4a3c2d;
  --ink-mute:   #857258;
  --ink-faint:  #a89376;

  /* ── Akzente ─────────────────────────────────────────────────────── */
  --spice:      #e0752a;
  --spice-deep: #b8560f;
  --spice-glow: #f6b072;
  --ember:      #d94f2b;
  --dusk:       #2f7d7d;
  --dusk-deep:  #1d5a5c;
  --sky:        #6fa8b0;
  --leaf:       #4e9a58;
  --leaf-deep:  #2f7040;
  --mint:       #7fc9a0;
  --violet:     #8a6bd0;

  /* ── Struktur ────────────────────────────────────────────────────── */
  --line:       color-mix(in oklab, var(--ink) 11%, transparent);
  --line-soft:  color-mix(in oklab, var(--ink) 6%, transparent);
  --line-hair:  color-mix(in oklab, var(--ink) 4%, transparent);
  --glass:      color-mix(in oklab, var(--paper) 72%, transparent);
  --glass-edge: color-mix(in oklab, #fff 60%, transparent);

  --shadow-xs:  0 1px 2px rgba(70,50,28,.05);
  --shadow-sm:  0 2px 4px rgba(70,50,28,.05), 0 6px 16px rgba(70,50,28,.05);
  --shadow-md:  0 4px 10px rgba(70,50,28,.06), 0 18px 44px rgba(70,50,28,.09);
  --shadow-lg:  0 8px 20px rgba(70,50,28,.07), 0 40px 90px rgba(70,50,28,.13);
  --shadow-xl:  0 12px 28px rgba(70,50,28,.08), 0 64px 140px rgba(70,50,28,.16);

  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;

  /* ── Typografie ──────────────────────────────────────────────────── */
  --font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Bahnschrift", "Avenir Next", "Helvetica Neue", var(--font);
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ── Raster & Timing ─────────────────────────────────────────────── */
  --page:     min(1320px, 100% - 3rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.76, 0, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s; --t-mid: .38s; --t-slow: .7s;
}

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

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

body {
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 700;
  text-wrap: balance;
}

::selection { background: color-mix(in oklab, var(--spice) 26%, transparent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--spice);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--sand-100); }
::-webkit-scrollbar-thumb {
  background: var(--sand-300);
  border: 3px solid var(--sand-100);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ── Primitive ─────────────────────────────────────────────────────── */
.wrap { width: var(--page); margin-inline: auto; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Micro-Label mit vorangestelltem Hairline-Strich */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: .655rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: .55;
}
.eyebrow--bare::before { display: none; }

.hair { height: 1px; border: 0; background: var(--line); }

/* Screenreader-only */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; top: .75rem; left: .75rem; z-index: 200;
  padding: .6rem 1rem; border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper);
  font-size: .8rem; font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-mid) var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .78rem 1.4rem;
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              color var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  background: color-mix(in oklab, var(--paper) 60%, transparent);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  border-color: color-mix(in oklab, var(--ink) 26%, transparent);
  box-shadow: var(--shadow-sm);
}

.btn--solid {
  color: var(--paper);
  background: linear-gradient(135deg, var(--spice), var(--spice-deep));
  box-shadow: 0 8px 26px color-mix(in oklab, var(--spice) 30%, transparent);
}
.btn--solid:hover { box-shadow: 0 14px 40px color-mix(in oklab, var(--spice) 38%, transparent); }

/* Sheen-Sweep über Buttons */
.btn--solid::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .85s var(--ease-out);
}
.btn--solid:hover::after { transform: translateX(120%); }

/* ── Noise / Grain-Overlay ─────────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image: var(--grain-url);
  background-size: 180px 180px;
  animation: grain-shift 6s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-3%, -4%); }
  33%  { transform: translate(4%, -2%); }
  50%  { transform: translate(-2%, 3%); }
  66%  { transform: translate(3%, 4%); }
  83%  { transform: translate(-4%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ── Custom Cursor ─────────────────────────────────────────────────── */
.cursor, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 120;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
  mix-blend-mode: multiply;
}
.cursor {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid color-mix(in oklab, var(--ink) 34%, transparent);
  transition: width var(--t-mid) var(--ease-spring),
              height var(--t-mid) var(--ease-spring),
              margin var(--t-mid) var(--ease-spring),
              border-color var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out),
              opacity var(--t-mid);
}
.cursor-dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--ink);
}
body.is-hovering .cursor {
  width: 74px; height: 74px; margin: -37px 0 0 -37px;
  border-color: color-mix(in oklab, var(--accent, var(--spice)) 52%, transparent);
  background: color-mix(in oklab, var(--accent, var(--spice)) 9%, transparent);
}
body.is-hovering .cursor-dot { opacity: 0; }
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
}

/* ── Page-Transition-Vorhang ───────────────────────────────────────── */
.curtain {
  position: fixed; inset: 0; z-index: 150;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.curtain__panel {
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
}
.curtain.is-out { pointer-events: all; }

/* ── Reveal-Grundzustand (JS setzt .is-in) ─────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
}
.no-js [data-reveal],
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

/* ── Reduced Motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .grain { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .line > span { transform: none; }   /* sonst bliebe der Titel verdeckt */
  .cursor, .cursor-dot { display: none; }
}