/**
 * Globale Ergänzungen neben Tailwind CDN.
 * Typografie-Skala & Mikro-Animationen – dezent, performancefreundlich.
 */

:root {
  --ink: #06080f;
  --surface: #0e1422;
  --elevated: #151d30;
  --line: rgba(148, 163, 184, 0.14);
  --muted: #94a3b8;
  --accent: #c45c3e;
  --accent-cool: #6ea8c9;
  --text: #eef2f7;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(110, 168, 201, 0.12), transparent),
    radial-gradient(900px 500px at 90% 0%, rgba(196, 92, 62, 0.1), transparent), var(--ink);
}

/* Nur wenn Custom Cursor aktiv ist (feine Maus, kein reduced motion) */
body.cursor-enabled {
  cursor: none;
}

/* Subtiles Noise-Overlay (CSS-only, kein schweres Bild) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Fokus sichtbar für Tastatur */
:focus-visible {
  outline: 2px solid var(--accent-cool);
  outline-offset: 3px;
}

/* Dropdown Desktop */
.nav-dd-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.2s;
}

.group:hover .nav-dd-panel,
.group:focus-within .nav-dd-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Typo-Skala (über Tailwind-Utilities gemischt) */
.display-head {
  font-family: "Syne", system-ui, sans-serif;
  letter-spacing: -0.03em;
}

.body-prose {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}