/* =============================================================
   neurabot · base.css
   Reset, Grundtypografie, atmosphärischer Hintergrund, Utilities.
   ============================================================= */

/* ---------- Modern Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* Lenis Smooth-Scroll benötigt height:auto und steuert das Scrollen selbst */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Body & Typografie ---------- */
body {
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* eigener Cursor: System-Cursor ausblenden (nur auf Pointer-Geräten, s. components.css) */
}

/* ---------- Atmosphärischer Hintergrund (zwei Layer) ---------- */
/* Layer 1: weiche Farb-Glows / Gradient-Mesh */
.bg-atmosphere {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 620px at 78% -8%,  rgba(10, 77, 244, 0.28), transparent 60%),
    radial-gradient(820px 700px at 6% 10%,   rgba(0, 25, 99, 0.45),   transparent 55%),
    radial-gradient(1000px 820px at 50% 118%,rgba(30, 99, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #050917, #06091c 60%, #04081a);
}
/* Layer 2: feines Grid mit radialer Maske */
.bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(140, 165, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 165, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 30%, transparent 80%);
}
/* Feines Film-Grain (SVG-Noise als Data-URI) für „teures" Materialgefühl */
.bg-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Überschriften ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-disp);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); letter-spacing: -0.035em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }

/* ---------- Layout-Helfer ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(80px, 12vw, 150px); position: relative; }
.lead { font-size: var(--fs-lead); color: var(--c-mut); max-width: 60ch; }
.mono { font-family: var(--font-mono); }

/* Eyebrow-Label (kleines technisches Label über Headlines) */
.eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--c-blue-bright); font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--c-blue-bright); opacity: 0.7; }

/* Verlaufstext-Helfer */
.grad-text {
  background: linear-gradient(100deg, #fff 10%, var(--c-blue-soft) 60%, var(--c-blue) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Sichtbar erst nach JS-Init (verhindert „Flash" vor Animationen) */
.is-loading [data-split] { opacity: 0; }

/* ---------- Accessibility: Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, [data-split] { opacity: 1 !important; transform: none !important; }
}