/* LiDAR CRAFT — Design Tokens */
:root {
  /* Palette — Brand: Green #659F50, Komplementär Magenta #B336A4 */
  --forest: #0E1410;
  --forest-2: #161E18;
  --forest-3: #1C2620;
  --green: #659F50;          /* primary brand */
  --green-soft: #8BBC78;
  --green-deep: #4A7A39;
  --magenta: #B336A4;        /* complementary / AI accent */
  --magenta-soft: #C95CBC;
  --magenta-deep: #8A2880;
  --cream: #E8E7E0;
  --cream-2: #F1EFE8;
  --paper: #F4F3EC;
  --ink: #0A0F0C;
  --line: rgba(236, 233, 223, 0.16);
  --line-strong: rgba(236, 233, 223, 0.32);
  --line-paper: rgba(14, 20, 16, 0.18);
  --muted: rgba(236, 233, 223, 0.62);
  --muted-paper: rgba(14, 20, 16, 0.58);

  /* Type */
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace;
  --display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.mono { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 500;
}

/* Sanftes Einblenden bei jedem Laden.
   WICHTIG: nur Opacity animieren — ein transform auf #root würde die
   fixierte Navigation „einfangen" (position:fixed bräche).
   (Native Cross-Page-View-Transition entfernt: erzeugte beim Neuladen ein
   „Transition was skipped"-Rejection ohne sichtbaren Nutzen im Preview.) */
#root { animation: lcEnter 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lcEnter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #root { animation: none; } }

/* Der Inhalt NACH dem Hero gleitet über den noch animierenden Hero hoch —
   man ist „schon im nächsten Abschnitt", während die Logo→Haus→Flug-Animation
   im Hintergrund weiterläuft. Negativer Top-Margin = Überlappungsstrecke. */
.lc-after-hero {
  position: relative;
  z-index: 2;
  background: var(--paper);
  margin-top: -70vh;
}
@media (max-width: 900px) {
  .lc-after-hero { margin-top: -46vh; }
}